3 more things to keep in mind when building a website

Just like the previous post this has been done many times before. That doesn’t mean it isn’t a good process to repeat. Always analyze what you do and by making lists you can analyze in a concise and easy way that can be helpful in the future.

The first list was a general overview of the design and planning process. This list starts off with an overview of re-design vs. re-align and then delves further into some of the items that were skimmed in the last post. There is a little more detail on designing navigation and some hints and tips for speeding your site up.

1. Re-align vs. Re-design

A List Apart posted an excellent article ‘Good Designers Redesign, Great Designers Realign’. Here at Grow Media we want to weigh in with our opinion. Rather than simply agreeing with the article (which we do) we want to reiterate it in our words

– Just because you are bored with how your site looks doesn’t mean it needs to be re-designed –

This is especially important if you are providing a service to customers and/or clients.

Typically, a fresh design will be a worse design simply because it’s new and thus breaks user expectations. A better strategy is to play up familiarity and build on users’ existing knowledge of how a system works.Jakob Nielsen

Familiarity is key to success. Users (people in general) hate change. We can use Facebook as an example of unrest during change. Facebook has ‘re-aligned’ its user interface over the last two years and each time there has been uproar from the user-base. Imagine the fall-out if Facebook had done a complete re-design. Due to the number of users Facebook has they have to be extremely careful in how they make changes. Even if the changes are slight and actually improve user experience the user still likes the familiarity of ‘the old way’ of doing things.

Amazon.com is an excellent example of re-align vs re-design. From 2000 to 2008 the site design changed very little. It was simply re-aligned.

amazon-2000
Amazon.com – design in 2000

amazon-2008
Amazon.com – design in 2008

These two examples are high traffic sites with millions of users. Even if they seem a far cry from where you are in terms of user-base the principles still apply. Next time you look at your website and think ‘it looks old’ or ‘a re-design will increase traffic’ try thinking about re-aligning rather than re-designing. What were the goals of your website when you first designed it, have they changed? If so, how can you shift the focus onto the new direction you want to take without a complete re-design? Looking at your analytics software, where do people leave your site? Is there something you can do to those pages with less traffic to increase traffic? It can be as simple as adding a new link on the homepage or rethinking the existing navigation to be more concise and direct. Maybe those pages with zero traffic aren’t needed or can be merged with existing pages. Obviously if your site has animated gifs or still makes use of the marquee element then it might well be time for a re-design!!

2. Navigation

We touched on navigation in the previous list so in this list we will delve a little deeper into how you can help your user around your site. The standard rule of “Keep it Simple” works here too. If you are building an experimental site with exploratory navigation then obviously these general directions don’t really apply. If you are building a site that is to be used by people who are going to pay you money to do something then make it easy for them to pay you for your services.

If your navigation starts to look like an essay for each button try breaking it down into five key phrases summing up what people should expect when clicking on the items. If five seems too little try using sub navigation with a simple breadcrumb trail to lead the user back to where they came from. Again, consistency is key – if users are used to seeing something on other sites they will find your site much easier to navigate if you keep it similar. ‘Who are we?’, ‘About Us’ or ‘Who we are’ are all very standard navigation terms for an about page. If you use these words to direct users to your about page then more often than not they will know exactly where that navigation item takes them.

Navigation isn’t just about the main pages of your site. Navigation includes every single hyperlink on every single page. Obviously consistency is key, Google uses blue for links, people understand that blue text is going to take them somewhere. You don’t have to use blue for links just make sure the colour you do use stands out from the regular text and keep it consistent across your site. That is not the only part of a hyperlink though. A user has two directions on the web, ‘Where they are going’ and ‘Where they came from’. Both are equally important. Why do you think there is a BACK button on every single browser. So to help the ‘Where they have come from’ direction you need to differentiate links that have been clicked and links that haven’t been clicked. This is a simple case of using pseudo classes in CSS.

The next step in reducing complexity in navigation is reducing the number of clicks people have to make to get to where they want to go. Make sure important information is only a couple of clicks away. The most important information should only be one click away. Don’t send your users hunting for information. You can use Google Analytics (or any other analytical software) for optimizing clicks. Look at the pages that people visit often and see how many clicks it takes to get to these pages. If you look at your graphs and an important page isn’t being seen by users then reduce the number of clicks it takes to get to the information.

3. Optimize

The title for this item is a little ambiguous, and that is because almost everything you create for the web can be optimized in some way, usually to make it smaller. I sound like I am from 1998 when 28.8 was a number to aspire to in terms of speed. Even with download speeds at 15Mb/s it is still important to optimize your web content. The modern download speeds create expectations and users expect content before they have even thought about clicking on it. Everything needs to be instantaneous. If you can’t be instantaneous then users will give up without even looking at what you have to offer. Exceeding these expectations is difficult but staying inline with them is easy.

Starting with image optimization – this is a simple process. If you are saving a JPEG it doesn’t necessarily have to be at 100% quality. If the image is a thumbnail at 100 pixels by 100 pixels it can usually afford to be saved much lower than 100%. Obviously you will have to use your visual judgment with this one. My rule of thumb is take it low enough you can see artifacts then increase the quality enough so they begin to disappear. You will be surprised at how often this occurs below 60%.

Save to JPEG and GIF for the right reasons. If you have an image with large areas of single colours it will more than likely save smaller as a GIF. If you have an image with lots of detail it will more than likely save smaller as a JPEG. We are talking kilobytes here, but if you have 1,000 users downloading the image it adds up quickly.

Try designing using the CSS sprite technique. You have one large image with lots of smaller images on it – by positioning the larger image using CSS you can use parts of it to make up your site. The user now downloads one image instead of multiple images. This can be optimized further by keeping similar colour items on each collection of images.

CSS Optimization is another process that can save you bandwidth. There are numerous online tools that can take your readable code and turn it into unreadable but optimized code. My favourite site to clean up CSS is Clean CSS. It can drastically reduce the size of the CSS file and you can choose how readable you want your output to be.

JavaScript Optimization is much like CSS optimization. Where you can save bytes with CSS optimization you can save kilobytes with JavaScript optimization. There are numerous ways of doing this from simply using a popular library such as jQuery to building your own scripts and using the YUI Compressor. JavaScript compression is something for a completely different post but it can be used to drastically increase the speed of your scripts and also reduce your monthly bandwidth bill.

There you have it – 3 more things to keep in mind when designing a website. There are hundreds more and no doubt I will keep posting new lists as I think of them. What do you keep in mind when designing and developing websites? Share your ideas and you might get some new ones in the process.