Is 6-8 seconds long enough for your website home page to tell your story?

• Are visitors able to get the feel and purpose of your site within this time?
• Is their attention or eye drawn to what is most important?

As mentioned in my opening newsletter we will be showcasing current work to explain some of the issues.

The Crazy Train web site design breaks some of the rules.
See why it is the exception and NOT the rule. 

Minimize horizontal scrolling

Users hate horizontal scrolling

Minimize horizontal scrolling by keeping your site width a bit less than the width of the current average screen resolution. At this time (2012) it is 1024 pixels. That means if you set your site width at 960 pixels, there will be a bit of breathing room on either side of the average screen.

Centre your fixed width site

It is easier to read.

Display all important information above the fold

Users often decide whether to stay or leave based on what they can see without scrolling. Plus they only allocate 20% of their attention below the fold.

Even though web pages are infinite in length, height plays a role in design because people pay special attention to what they see when they first open a web page. Following the tradition of the most important headlines of a newspaper being visible when it’s folded, this very important region of your site is referred to as “above the fold.” With today’s monitors, that height is roughly the first 700 pixels only—what people will see without scrolling.

Use a conventional layout

The layout of a website serves as a kind of map for visitors. Using conventional site layouts is recommended for most sites, but not all the time as in the case of the Crazy Train layout where all the navigation and functions are presented vertically rather than horizontally.

You want people to concentrate on your message, not on understanding radically new structures. when you have only a few seconds to capture visitors’ attention and make them feel at home, or if you don’t have the money to design an alternative that works, why mess with what they’ve come to expect? Better to spend your design efforts on s that complement the purpose and topic of the site, navigation that’s easy to use, or images that stir relevant emotions instead of playing around with basic layout.

Backgrounds

If you use a fixed width design for your site, part of the browser window will display a background. The styling of this background can either help set off the rest of your design or really distract from it.

You have two basic choices for the background of your site:

1. solid or
2. images

If you want to use a complex image or photo for your site background, think about the potential visual clutter it can create. If you do choose to go that route, at least have a solid background behind your content.

Make sure the background of the site is part of the design process from day one.

Navigation

• Menus are the most important navigation tool
• Much of the value of websites lies in their ability to easily connect vast amounts of information, both on the site and on the Internet. Within a website, good navigation makes it easy for visitors to find the information they need, and of all the navigation tools, menus are the most important.
• Have your navigation where people expect it to be and in the same place on all pages.
• Key information on a site should never be more than three clicks away.

Organistation

• Lead the visitor from the more general to the more specific.
• Be sure that the names of menu items are easy to read: Use a clear font, sized large enough, with good colour contrast.
• Limit main navigation to  7 items  - To avoid overwhelming visitors, it’s best to limit the visible items on any navigation menu to about seven, which means that if you have more than seven pages on your website, you’ll need some options. Crazy Train uses 8 and up to 10 is generally ok.
• For websites with fewer than, say, 20 pages, it probably makes more sense to make all your choices available all the time. This is particularly true for new visitors because they aren’t familiar with what’s on your site and you don’t want them to have to dig too hard to find it.
• Options for submenus
  - display submenu items when you click through to a page on the main menu
  - include a dropline menu which displays a second navigation bar with subpages for the menu item you’ve moused over
  - avoid having more than three levels of drop-downs.

Ensure your header doesn’t take up too much space

From a design standpoint, what you want to ensure is that the header area of the website does not take up too much of this valuable real estate. The header, of course, carries your branding and your navigation, and although you don’t want this to be too small, you also don’t want it to distract from the page title and the first few paragraphs of text.

Header Images

The biggest culprit of wasted height is images. You might feel very strongly about an effective photo being displayed in the header area, but if that image is too tall, it’s taking away from content, and in most cases that’s not a good thing.

Home pages are one of the exceptions to this rule. Because there’s usually a small amount of content, there’s room to play with white space,images, and so on.

Loading time

If average website visitors take just 6 to 8 seconds before deciding whether to stay on a site, how long will they wait for the site to actually load? Patience is not something you should take for granted when other websites are only a click away.

Start testing your site’s loading time early in the development stages. You want to catch the time suckers in your design, coding, or content as soon as possible. The background tile for the Crazy Train website is quite large so this could be an issue for this site and will be tested and modified if necessary.

Loading time solutions

• Images - Keep the physical size of all images as small as possible (the average size of photos from a camera is 2,500KB, but an 80KB image can fill a computer screen). Optimize images for the Web using an image-editing program.
  Look at the total number of images on a page. If you have 40 graphics and photos each averaging 10KB, that’s 400KB.
• Multimedia - Optimize files as much as possible. Host video files on a separate server, such as YouTube.
• Scripts – Make sure that coding such as JavaScript or CSS are in files separate from the HTML page. Consolidate several scripts of the same type into a single file?

Typography

Sans-serif fonts

On the Web, sans-serif fonts are more commonly used for body text, in part because the tiny edges on serif fonts don’t display well on low-resolution monitors.

Font size

Font size is another important factor in the readability of text. Avoid making your body text too small – research has shown that no one likes it, not even teenagers with great vision.

Proportion of headings

Another role of text size in typography is the proportion between different levels of headings. Good design involves making clear the relative importance of sections of text by setting them off with the properly sized headings. Headings also help to break up the text into manageable pieces.

Width of text

The standard range of readability on the Web is between 50 and 70 characters per line, which is far less than the overall width of most websites. This means that breaking up the page into columns or using sidebars is crucial for maintaining readability.

Height between lines of text

Generous spacing between the lines of text is more inviting to read and it’s easier to find the next line as your eye moves down the paragraph, which is particularly important if you have a wide width for the column.

Images

• Some types of pictures are completely ignored. This is typically the case for big feel-good images that are purely decorative.
• Other types of pictures are treated as important content and scrutinized. Photos of products and real people (as opposed to stock photos of models) often fall into this category.

Images are a powerful part of a website’s design, but that power should be used for good and not evil. Images in a design should complement the content of the site, not distract from it.

• In e-commerce, product photos help users understand products and differentiate between similar items.
• On personal websites, users want to see the person behind the site; author photos, for example, are a key usability guideline for blogs.

Keep both the quantity and the complexity of graphics in your design to a level that does not distract. For example, if you’re an organization that promotes better housing, it might be true that you deal with all kinds of shelter, from houses to apartments to townhouses, but to have images of each type in your header can be visual overkill. If each image is also very detailed, you further increase the distraction factor.

Incorporating photos into your design is very important, in particular for quickly making clear your purpose and conveying the feel of the site.

White space

White space, or negative space, is what designers refer to as areas that contain little or no content. When you visit a website that feels crowded, you’re experiencing a lack of white space, and this crowding makes it difficult to find what you need or to know what’s most important

One of the great advantages of the Internet over print media is that space is virtually unlimited, so there isn’t the same imperative to fit in as much as one can, and white space can flourish.

White space is any area separating content on a page, even the amount of spacing between lines of text (the details of working with white space in text are dealt with in a separate question).

The margins between sections of text or other content are often neglected when thinking about white space. Jamming elements together not only makes the page hard to digest but the value of each is also greatly reduced.
examples

There are two basic considerations for using colour on your website: Does the central colour fit the purpose Q and mood of the site? Q Does the colour scheme based on that colour work well?

How people perceive s is the result of many influences: culture, gender, age, socioeconomic factors, and so much more. That means thinking about must take into account your audience as well as your goals.

Callouts

It’s common within the actual content of web pages to see boxes of additional information, option menus, or images. Sometimes referred to as “callouts” or “sidebars,” these elements are meant to supplement the main body of the text with added resources

The design of these callouts needs to draw attention to them, but without distracting from the main body of the text. Remember, elements such as callouts are meant to supplement the content of the page, not supplant it.

Browser Check

Check the display in all four major browsers on both Mac and PC platforms

• Internet Explorer
• Firefox
• Google Chrome
• Safari

Footer Menus

Having some navigation in the footer is something visitors have come to expect. This menu is particularly handy when you have more than a screen’s worth of content on the page.

Footer menus tend to be used for housekeeping items such as contact information, privacy policies, advertising information, or terms of use.

However, on smaller sites, you might want all your pages on this menu—or at least some key ones. A link to the home page should always be at the left side of the footer menu.

Contact information

Will visitors easily know how to stay in touch with you?

Websites allow you to start a dialogue with your visitors by using a variety of tools. But you have to make it easy for visitors to find those tools.
The most common way to help visitors get in touch is a contact butt on somewhere in your navigation structure.

If you deal with the public, it’s handy to show your general contact information on all pages, usually in the sidebar or the footer. Include the address, phone number, hours of operation, and so on.

The content of this article has been derived mostly from George Plumley’s ‘Website Design and Development – 100 Questions to Ask Before Building a Website’ and Jakob Neilson’s reports and blogs. It is a summary of what I see as the most important points for small to medium website owners.

http://www.useit.com/

http://www.amazon.com/Website-Design-Development-Questions-Building/product-reviews/0470889527

Besides being an absolutely amazing site for inspiration and latest trends it is a great example of a stationary side navigation menu with scrolling page.

Web Design, Graphic Design and Multimedia

Coffs Harbour based design studio providing custom solutions for websites, graphic design, ecommerce, CMS, brochures, logo’s, signage, email marketing and more.

Contact us for a free quote or just enjoy the galleries | web gallery | graphic design gallery

Signage – Iluka Bluff Nature Reserve Interpretive panels designed by Coffs Design. 3 panels – 2.8m wide x 1m high. 8.5 metres wide in total.

Signage – these are high content, information signs generally designed to inform punters about issues and solutions.

There is detailed information on how to create an informative signage here.

View our gallery of websites – they come in all shapes and sizes

Signage and Interpretive Display panels are a specialty with services provided to a wide range of government departments, councils and corporate clients.  Visit our gallery for a better glimpse of our design and creative skills.

Formatting documents, be it reports, academic journals or information booklets are a favourite.

We can provide these as interactive or print ready pdfs.

Design and development of CMS website

I was ‘volunteered’ by Rod McKelvey (an experienced community campaigner for environmental, social and economic sustainability particularly on the Coffs Coast) to create a website for MENtors, a voluntary group setup to help men identify and therefore increase their opportunities to engage in health and well-being services in our community.

KEY Statement:

“The MENtors project is about reducing social isolation by supporting men into health and wellbeing activities so that they gain fulfilment and purpose in their lives and have the opportunity to reach their full potential.”

If you’re planning to setup a new website and you have the time, this book is fantastic. Even if you have an existing site that you’d like to update it is well worth a read. It will cover all the basics that you should be considering.

It is available as an ebook or pdf if you want to get started immediately.

Website Design and Development: 100 Questions to Ask Before Building a Website (Google eBook)

This information can be applied to signage, interpretive display panels and posters. For the purpose of this blog I’ll refer to them as signs.

I’ve broken the types of signs into 3 areas and have provided examples of most … a picture paints a thousand words – so the examples should tell you what to aim for in your projects:

• Informative – high content
• Interpretive – medium content
• impact – (you guessed it) minimal content

Best Practice for Interpretive panels and displays

1. 1/3 text, 1/3 graphics, 1/3 clear space
2. Text should be about 150 words on a panel .5 metre squared
3. Text should be around 250 words on a small panel - 1 metre squared
4. Text should be around 450 words on a large panel – 2 metre squared

Informative – High Content

• Size: 1500mm x 1000mm = 1.5m2
• Word Count – 1600. Character Count – 10500
• Client: Kempsey Council
• Text content covers roughly 1/3 of the panel but it is at a very small point size. Main body text is 24 points, with a large proportion including captions in 18 point.
• Images cover almost the other 2/3 of the panel with very little white space …(lets’ say 5/9 with 1/9 of the panel white space).

More examples here …

Interpretive – Medium Content

• 1200mm x 1000mm = 1.2m2
• Word Count – 340. Character Count – 2180
• Client: Dept Environment Climate Change & Water
• Text content covers roughly 1/3 of the panel at 32 point for the main body –  an optimum size for viewing
• Images cover 1/3
• White space 1/3

Impact – Minimal Content

• 450mm x 300mm = .135m2
• Word Count – 79. Character Count – 449
• Client: Dept Environment Climate Change & Water – Biodiversity Conservation Unit
• Text content covers less than 1/3 of the panel at 30 point for the main body –  an optimum size for viewing
• Images cover 1/3
• White space is more than 1/3

• Size: 1500mm x 1000mm = 1.5m2
• Word Count – 1900. Character Count – 12000
• Client: Kempsey Council
• Text content covers roughly 1/3 of the panel but it is at a very small point size. Main body text is 24 points, with a large proportion including captions in 18 point.
• Images cover almost the other 2/3 of the panel with very little white space …(lets’ say 5/9 with 1/9 of the panel white space).
• The extra words have been added as captions to images to reduce visual clutter