Cheesetoast » nielsen http://www.cheesetoast.co.uk Brain Food for Web Developers Mon, 07 Jul 2014 23:18:22 +0000 en-US hourly 1 http://wordpress.org/?v=4.2.7 Responsive Web Design – A 3 Column Layout http://www.cheesetoast.co.uk/responsive-web-design-3-column-layout/ http://www.cheesetoast.co.uk/responsive-web-design-3-column-layout/#comments Sun, 15 Apr 2012 23:58:48 +0000 http://www.cheesetoast.co.uk/?p=337 Now that mobile browsing is expected to overtake desktop browsing within the next few years, web developers have to think about how their sites will appear on mobile devices. This post will talk about future-proofing websites with responsive design. I'll demonstrate an example of a 3 column front page design, complete with JQuery slideshow.
Continue reading

The post Responsive Web Design – A 3 Column Layout appeared first on Cheesetoast.

]]>
With different browsers and monitor sizes to take into consideration, web page layouts have always been unpredictable. These days it’s not just desktop computers but phones and tablets to think about as well. Now that mobile browsing is expected to overtake desktop browsing within the next few years, web developers have to think about how their sites will appear on mobile devices.

In his recent newsletter “Mobile Site Vs. Full Site“, usability expert Jakob Nielsen recommends that developers “build a separate mobile-optimized site” to accompany their full screen websites. Google, for example, has a mobile-optimized version of it’s homepage. This approach allows designers to fine-tune the site for screen sizes and peripherals (for example, drop down menus are often removed on mobile versions because they don’t work well with touch screens). Nielsen recommends trimming or deferring content (e.g. reduce words), enlarging interface options, and cutting out features that aren’t  necessary.

The Responsive Approach

Responsive Design - Layout that adapts to different screen sizes.

For those who can’t afford to dedicate the time and energy developing an entirely separate mobile-optimized website there is always responsive web design. Responsive web design makes use of the CSS media query which allow the developer to specify styling for different screen sizes. Just try resizing your browser window now and you should see this webpage respond to the new dimensions.

If you’re new to responsive layouts and want to learn more then I recommend reading Nick La’s (of Web Designer Wall) article “Responsive Design in 3 Steps“. He also has a more in-depth tutorial called “Responsive Design with CSS3 Media Queries” which is well worth reading.

The 3 Column Design

A 3 column layout that responds to the screen size

Having experimented with Nick La’s demo layout I decided to modify it to include 3 columns instead of 2.

View 3 column responsive layout

or play with it on codepen

This new 3 column design displays all columns on the largest screens as equal widths. As the screen gets smaller it will move the sidebar (third column) under the other two columns.  Instead of removing the sidebar (third column) from the smallest screen I displayed all 3 columns on top of one another.

I also added an awesome responsive JQuery slideshow plugin, courtesy of Viljami Salminen.

Lastly, to get the responsive images, I used a handy little snippet of code in the CSS:

img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}

[Updated]: Is Responsive Design important? Read my other post about the pros and cons of responsive layouts.

If you decide to play around with the layout further then please leave a comment and let me know how you got on.

The post Responsive Web Design – A 3 Column Layout appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/responsive-web-design-3-column-layout/feed/ 11
Website Navigation http://www.cheesetoast.co.uk/website-navigation/ http://www.cheesetoast.co.uk/website-navigation/#comments Fri, 29 Oct 2010 23:51:23 +0000 http://www.cheesetoast.co.uk/cheesepress/?p=70 Web pages are more than just a collection of pages containing useful information and forms for interaction. They are a network of interrelated nodes that have been structured and organised so that users can find what they are looking for. Since the structure of websites varies so much, users are forced to relearn how to navigate around them. Users frequently have trouble deciding which page within a site to visit next. This decision usually involves an understanding of their current location within the site, and for poorly constructed sites this can be difficult to determine. One possible reason for this could be that developers design the navigation system around the assumption that users will first visit the home page when they enter the site. This is not always true, as users may be linked to any page on the site from a bookmark, url or search engine result. Continue reading

The post Website Navigation appeared first on Cheesetoast.

]]>
Web pages are more than just a collection of pages containing useful information and forms for interaction. They are a network of interrelated nodes that have been structured and organised so that users can find what they are looking for. Since the structure of websites varies so much, users are forced to relearn how to navigate around them. Users frequently have trouble deciding which page within a site to visit next. This decision usually involves an understanding of their current location within the site, and for poorly constructed sites this can be difficult to determine. One possible reason for this could be that developers design the navigation system around the assumption that users will first visit the home page when they enter the site. This is not always true, as users may be linked to any page on the site from a bookmark, url or search engine result.

One method for effectively communicating the site structure is to organise headings and pages in a way that is instinctive and logical to the target audience. This can be accomplished early in the design stage, by carrying out a method known as ‘card sorting’. By asking representative users to sort cards into category piles based on how they think the site should be arranged, designers can gain a better understanding of how users mentally organise the information. This fresh perspective can also be used to come up with suitable menu titles and headings by choosing words and phrases that are familiar to the user.

In his book The Psychology of Everyday Things 1988, Norman describes what he calls ‘the gulf of evaluation’. “The gulf of evaluation is the degree to which the system/artefact provide representations that can be directly perceived and interpreted in terms of the expectations and intentions of the user”. In other words, how well the system communicates the current state and how easy it is to interpret. The gulf is small if the system presents itself in a way that the users’ actions match their expectations of how easy it is to complete their goal. Closing the gulf of evaluation on a website is particularly important because as soon as the user becomes confused it is very easy for them to leave.

Communicating current location in a site can be accomplished through visual cues. According to Nielsen (1999), linking is the most important part of hypertext. He advises that the names of links should be carefully chosen and should supply a short, yet accurate description as to where they lead. For example, link names such as “click here” should be avoided because the name itself does not carry any information about what it links to. Since we know that users scan pages, suitably named links can avoid users having to read the context in which they are placed. In 2004, Nielsen wrote an article outlining some of the guidelines for visualising links. In the article he strongly recommends that visited links and unvisited links should be coloured differently, as this is what users have become accustomed to on web pages. The colour of text for these links should not be used for any other text, as this would make it difficult to distinguish between them. Another cue is a list of words or phrases presented by the side of the screen. This is a common style of navigational column and may also be associated with links. When these cue’s are not provided on a website, users can lose track of which pages they have visited before and can become lost. This is especially true when the websites are ‘deep’, having many levels and sub menus. By conforming to these simple guidelines, designers can improve the ‘learnability’ of a site, one of the factors of good usability.

Designers are confronted with the task of grouping all the information on a website into sizeable chunks. This involves separating the content into individual pages whilst making it easily accessible to the user.

Links and menu need to be careful arranged so that information retrieval is efficient. With a hierarchical website structure, choices need to be made about how deep or how broad the site becomes. The deeper a website structure is, the more sub levels it has. A broader website will be relatively shallow, with a larger number of levels accessible from the root. Miller (1985) learned that human memory is an important factor in a hierarchical structure, with test subjects taking longer to reach a target in a deeper hierarchical structure. Later, Larson and Czerwinski (1998) carried out a study with three different structures (8x8x8, 32×16, 16×32). His findings supported Millers findings. Users completed tasks more quickly with the broadest structure (16×32) and took the longest time with the deepest (8x8x8). However, these experiments are based on the fact that the menus are spread out in a symmetrical fashion. Since it is unlikely that all website will have such a symmetrical structure, this does not accurately reflect real world web pages. Shneiderman et al. (1999) conducted a study which took into consideration not only an asymmetrical hierarchical structure, but also the difference in menu presentation. The two types of menus tested were sequential and expanding indexes. The results reinforced previous research, as time and efficiency of tasks deteriorated with depth. In addition to this, tasks were accomplished faster with sequential menus than those tested with expanding menus.

The implications for designers are that site structures should be broad with most of the nodes within 3 levels of the root. As the site becomes deeper there is more strain on the short-term memory of the user. Especially broad levels can group page links under headings and make use of secondary links within closely related nodes.

The post Website Navigation appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/website-navigation/feed/ 0