Til hovedsiden

In this post, I’ve put together a checklist on important things to keep in mind before you throw yourself into a new web project. There is no set formula for what you can and can’t do, but I hope this list can be a help for those who aren’t quite sure where to start.

1. Be clear on your purpose

Before you start up a new web project, it’s important that you at least have made up some thoughts about the purpose of what you’re doing. Do some research, establish your target audience, study other websites within your industry and ask yourself what you would do differently. Find some paper, a pencil, make some coffee and start sketching.

2. Content is king

In my opinion content is that most important thing on ANY website. Content can be creative work, such as text, graphics, images or video. Without content appealing to your audience your website is likely to fail, regardsless of other design factors. Great special effects and visually appealing animations are not going to help you out if your content is crap. (But as a designer I will be the first to admit that good and proper use of design is important to emphasize your expression and support the content).

Your chosen target audience should influence every single decision you make in relation to the design and content of your website.

Always keep your reader in mind and use words that your audience understands.

A common mistake that many make is to forget who their readers are. Always keep your reader in mind and use words that your audience understands. Will your readers care about all the internal news and excerpts from an annual report that you put on the front page of your website? Peel away that which is not likely to be read and focus on your core values for your website instad.

And don’t save the best for last. Place your most important content high on the page. Also check your page display with different screen resolutions to make sure that your most important content is visible for users with screen resolution of 1024×768. (Tip: You can easily resize your browser window to emulate different screen resolutions with the Web Developer toolbar for Firefox)

3. Make your website easy to navigate

Intuitive navigation is a key factor to retain your users. To avoid confusion, it is wise to implement an universal navigation element with consistent placement on all of your pages. If you’re planning a site with lots of content and multiple levels with navigation, your users will most likely appreciate if your have their path visualized with some kind of breadcrumb trails.

If you’re unsure about breadcrumb trails, I’d recommend that you check out this article on Smashing Magazine.

4. What to focus on: Usability, functionality or design?

Yes, it is possible to combine these things. I think Apple’s website is a good example of this. Steve Jobs (Co-Founder and CEO, Apple Inc.) once said:

Design is not how it looks and feels,
design is how it works.

In other words, design is much more than just smooth buttons, rounded corners and drop shadows. For me, good design is to make things workable, usable and lovable.

If you have a clear idea of what you want to accomplish (see first paragraph), you can achieve this goal if you pay attention to usability, functionality and design (and your content of course).

5. Make your website easy to read with proper use of contrast

This may seem obvious, but it’s important that text and graphic have sufficient contrast compared to its background. People browsing your website under less than ideal circumstances (such as a bad monitor or sunlight hitting the screen) may not be able to read your content. Of course you don’t want that to happen.

Here is a list of web based tools you can use to check the contrast in your design:

Colour Contrast Check:
This tool gives you immediate feedback by showing what the chosen colour combination looks like and whether it passes the test.

Colour Contrast Analyser Firefox Extension:
This Firefox extension finds all text elements in a document and examines the differnce between foreground and background colours for them. It displays the resultes in a new tab, complete with previews of the colours. You need a HTML document for this plugin to work.

CSS Analyser:
The CSS Analyser does a colour contrast test of your CSS. It also validates the CSS and checks that relevant text sizes are specified in a relative unit of measurement.

6. Consistency throughout the site

All your graphic elements, images, typefaces, headings and footers should remain consistent throughout your website. There are many methods of ensuring consistency. One of them is to use Cascading Style Sheets (CSS), where you can easily specify that the text on every page should display as 11pt Verdana, all headings (h1, h2, h3) red etc.

Consistency is very important in webdesign because it makes the reader do less thinking. I can recommend Steve Krugs book: Don’t make me think which is an excellent book on web usability.

7. Know the rules before you break them

In webdesign there are at least 10 rules you should know. But these rules are not enforced by anyone and should be broken when necessary, especially when breaking them would lead to a stunning design. Webdesignersdepot has written a good blogpost on this.

• Rule #1: Do not display the horizontal scrollbar
• Rule #2: Use a minimal number of font faces
• Rule #3: Do not use to many colors
• Rule #4: Make your site’s goal obvious
• Rule #5: Navigation should be easy to figure out
• Rule #6: Use different colors for the text and background
• Rule #7: Don’t put animation in the way of your content
• Rule #8: Stick to web-safe fonts
• Rule #9: Don’t have a splash/landing page
• Rule #10: Don’t use tables

Read the full blogpost from Webdesignersdepot here:
http://www.webdesignerdepot.com/2009/06/10-web-design-rules-that-you-can-break/

8. Design for different screen resolutions

If your chosen audience are a group of advanced computer geeks aged 18-30 years, there is a chance that most of your visitors will have monitors with higher screen resolution than 1024×768. Anyway, a rule of thumb is that your most important content should always be shown within this area. Your site could be considered safe from horizontal scrolling if you keep the width at a max of 960 pixels. I prefer to use the 960 grid framework when designing websites.

9. Consider spending some time cross browser testing

Let’s admit it! Cross browser testing can be a nightmare for Web Developers. Even if your HTML and CSS code validates by the standards set by W3C, it is not certain that your layout will display properly in Internet Explorer (IE). According to statistics 65% of Norwegian internet users are surfing the web with various  versions of IE. Only 7% are using IE6, so I don’t bother spending hours tweaking hacks for this outdated browser. Unfortunately 39% of the Norwegian population are surfing with IE (that despite the fact that it is much better than its predecessor, also has obvious errors), so I’ve made an effort making a specific stylesheet for this browser version.

I would recommend IETester, which is a free program that lets you simulate all versions of Internet Explorer at once without any complicated installation processes. Download IETester here.

Also check out Designm.ag ‘s blogspost on 10 helpful resources for cross browser testing.

10. Implement statistics for your website and use it

Statistics of the visitor behavior on your website can give you a good indication of what is more or less popular content. It can also give you valuable information about how long visitors stayed on your domain, which pages are most common exit pages, and not least where the visitors are referred from (direct traffic, site referrals or search engines). You can also obtain statistics on where your visitors are located geographically. If your website’s purpose is to promote a small jewelry store in Dallas, and 85% of your visitors seems to come from Sweden, it would perhaps be appropriate to consider implementation of some kind of webshop solution.

Google Analytics is one of the most popular free web analytics tools. Statcounter , Clicktale and Snoop are other free alternatives. I have good experience with using Google Analytics for my projects. It is relatively easy to implement, but is doesn’t really become useful until you digg into the user data and customize the content according to what your users are actually looking for.

This entry was posted on Monday, October 26th, 2009 at 4:59 pm and is filed under Webdesign. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.