Eye tracking studies have revealed how webpages are read in an F shaped pattern
The visual appearance of websites, and how people interact with them, has endured endless scrutiny over the years.
Much expensive research has been carried out and shared, which helps web designers understand the implications of their design choices and judgements.
So although many of the decisions that have faced web designers in the past are now largely made by default, there are still quite a few important considerations that you'll need to ponder, and provide answers to, before we start to design your LoFi wireframe. We've detailed a few below, but more would come out of the initial consultation session.
Liquid or fixed width layouts?
Liquid layouts expand to fill the available space in the browser window, while fixed layouts are (as the name might suggest), fixed. “Which is preferable” is an debate that has raged amongst designers for years now, with no definitive conclusion. And the reason there will never be agreement, is because there is no single correct answer.
We generally advise clients that it's a case of Horses for Courses. Liquid layouts can work well for certain applications, particularly ecommerce. When the site is orientated primarily towards the dissemination of text based material, the predictable line length of a fixed width layout will normally lead to more optimal reading conditions.
If you settle for fixed width, how wide should the website be?
Before you can get an answer to this question, you'll need to ask yourself what size screen will your average visitor be using. There's no point in creating a design that doesn't fit properly on your users' screens - try to avoid horizontal scrolling at all costs.
Back at the turn of the last century, the most common screen size was 800 pixels wide, so most websites were designed to fit nicely into this width. Monitor size has increased enormously in the ensuing years. Now, according to the analysis at Market Share, over 92% of users are using screen sizes of 1024 pixel width or greater.
Vertical or horizontal navigation or a combination of the two?
Horizontal top-level navigation works well in circumstances where the scope of the website is clearly defined, and unlikely to change. We've used it on this site, as we knew that we wouldn't be likely to want to add to it. Although adding additional links to the existing six isn't beyond our technical abilities(!), it would both spoil the aesthetic, and require either an increase in the overall width of the site to accommodate, or potentially unacceptable reduction in the amount of padding around each piece of link text.
Vertical navigation works well for sites where the likelihood of needing to add top-level links to the navigational system is high. But one downside with an exclusively vertical navigational system is that they require a lot of dedicated space on the page, and the height of each page may need to grow excessively to accommodate the menu.
On this site, we're combining horizontal top-level navigation with a vertical menu for the section navigation. We initially considered a fly-out menu for this, triggered by hovering over a top-level link. But we ended up rejecting this as we preferred the accessibility and usability of the permanently visible menu. (Fly-out menus don't work well unless you've got a mouse, and links aren't displayed until the menu is activated.)
Does the design need to accommodate external advertising?
There is nothing more frustrating for a designer (or expensive for a client) than finding out a few days before launch that the layout needed to allow for the insertion of banner adverts. Just tacking them on somewhere looks as grim as you would imagine.