10 Ideas for Excellent Web Design

by Matt Knowles


The 10 ideas presented below aren’t meant to be the only way to design a web site. But since I specialize in creating web sites for small businesses, I have found the following principles to be important to the success of your new web site. These guidelines come from having eight years of experience designing web sites, as well as probably too many hours surfing the web.

  1. Make it unique – I often compare building web sites to building homes, and I look at myself as a custom home builder. That means I create the site to reflect the image and personality of both you and your business.

  2. Keep it simple – I firmly believe in keeping a web site simple, both from an aesthetic point of view, and more importantly, from an engineering point of view.

    Aesthetically, I want the user to be able to see your message and be able to act on it. No need for flashing text or cheesy animations. White space is good too, just look at Google’s home page. Any wonder it became the dominant seach engine when most other search engines have a home page so cluttered it’s hard to find the search box?

    For reliability, cost, and search engine issues, I try to keep as much of the site as possible in plain HTML and CSS. This makes your site easier to index, quicker to load, and easier to bookmark. There are times where programming or databases are needed, but too often I see sites that use a more complex method of accomplishing a task because they can get away with charging the client for it, rather than because it was really necessary.

  3. Make it compatible and responsive – Personally I work on an Apple Macintosh and I use either Safari or Firefox as my browser, but I also do a lot of surfing on my iPhone. So I am really aware of how many web sites are built that aren’t compatible or responsive. I know that I leave sites pretty quickly when I can’t get them to work with my setup, and I take great care to make sure that the sites I design for my clients don’t suffer the same fate. I generally design for 99th percentile. There’s always that 1% who are still running a really old browser and they can’t be helped. But there’s no reason you should tell 5-50% of your clients that their business isn’t appreciated just because they don’t have the same device or browser as you do.

    Part of the compatibility issue is also making sure the design is responsive to the device it is being used on. The designer has to realize that on the web there is no control over how the work will be viewed. We now surf the web using desktop computers, laptops, tablets, phones and TVs. On computers there are different monitor sizes and browsers to worry about, and even things the user can change, like choice of default font size. A good design must be responsive so that it displays well for a broad range of users. It may not be perfect for everyone, but it should be readable, organized, and easy to navigate. The examples shown below illustrate how the Aesthetic Design & Photography home page looks on devices ranging from a large 27″ monitor all the way down to a small smart phone.

    iMac 27″ Screen Shot

    iMac 27" Screen Shot

    Windows Screen Shot

    windows-screenshot

    iPad Mini Screen Shot

    ipad-screenshot

    iPhone 4GS Screen Shot

    iphone4s-screenshot

  4. Make it easy to navigate – This is probably the most import item on this list because once customers find your site, they need to quickly find the information they’re after or they will be returning to the search engine to click on your competitor’s site. For larger sites I often use pull down menus such as those that this site uses, and I also include site map pages to help users and to help search engines index the site. Sites like this one have responsive menus so they are easy to navigate on touch devices such as tablets and smart phones.

  5. Make it easy to bookmark – Once users find what they are looking for, they often want to bookmark it so that they can return to that point later. I design sites that make it easy for people to bookmark and create links to your content rather than just your home page.

  6. Make it easy to expand – Publishing on the web is one of the most cost effective ways to get information to your potential and existing customers as well as your business partners. Because of this I often find that a client will start with a five page site and once they see how well it is working they want to add more to it. The designs I use make it easy to expand the site without having to tear the design apart and start over.

  7. Make it efficient – I taught myself HTML when there were no WYSIWYG page layout programs out there. Coming from a programming background, coding HTML by hand was a natural way to do it. Also being a programmer, I have the discipline to create very efficient coding which makes for more stable pages that download quicker. When I start the first stages of planning a new design, I’m thinking ahead to how efficient that design will be when it comes time to download it.

  8. Understand graphics – It is really important when creating graphics for the web that the images download quickly yet preserve enough image quality to be useful and beautiful. There are three main graphic types used on the web, GIFs JPGs, and PNGs. It is important to choose the correct format for each graphic. It is also important to understand how to squeeze the files the right amount so that there is a perfect compromise between image quality and download speed.


    Medium Compression JPG (size = 60k) – The example shows the same image saved 5 different ways. The default image is a jpg, saved with just the right amount of compression to balance quality vs. file size. The level of compression that is ideal varies by image depending on the size, subject, and even colors that are in the image. Roll over the four buttons to see the image save in four other formats.

    Maximum Compression JPG (size = 18K) – By setting the jpg compression level to the highest setting the file size is reduced to 18k, but the image loses a lot of detail.

    Minimum Compression JPG (size = 199k) – Setting the jpg compression level to the lowest setting doesn’t really improve the quality of the photo much, but the file size balloons up to more than 3 times the size of the ideal image.

    GIF (size = 122k) – Gifs are better suited for images like logos, that have large areas of the same color. While this image looks ok as a gif, the file size is double our ideal jpg.

    PNG (size = 104k) – PNGs are a late comer to the web, and the one advantage they give over jpgs, is that they support transparency. However they can’t beat the jpg for file size, so unless you need the transparency aspect, you’re better off using jpgs. Older versions of Internet Explorer also have trouble displaying png images correctly, another reason to avoid them unless you really need them.

  9. Keep the search engines in mind – There are three ways people will find your site. First you can tell them the URL, either directly or through your advertising. Second, they may find your site through a link on another site. But for most small businesses, the most important path to your web site is from a search engine like Google or Yahoo. So it is very important that the site is designed from the start to get the best rankings possible. I follow many industry newsletters and websites and I believe the way to getting good rankings is through careful design and good content. Tricks don’t last very long and if the search engines catch you trying to fool them, you may find you’ve done your site more harm than good.

  10. Make it affordable – I believe in giving good value for the money spent. Being a small businessman myself, I know how small businesses have to control their costs if they want to be successful. Not only are my rates very affordable, I also know how to get the best value out of many of the freebies that are still out there on the web. There’s no point in reinventing the wheel for each client, so I use free public domain scripts whenever possible. Not only are they free, but they are also well tested and bug free.

    As an added bonus to my customers whose web sites I host, I do not charge them for small updates that only take a few minutes of my time.