Are you considering having a website designed or re-designed?
Page layout is something most end-users seldom think about. People are likely to have a “yuck!” or “hmmm nice” reaction to a given website, and don’t give it much more thought. Good page layout keeps visitors at your site. Nothing gets people running for the exit doors faster than bad layout.
So, what is page layout? Simply put, it’s where stuff is placed on your site’s Web pages. It’s a bit like the layout of your house or apartment. When you have friends over, do they get lost on the way to the bathroom? (Hopefully the architect thought to include a bathroom when your place was designed.) Is there space for them to relax? How is your stuff organized inside of those rooms?
Websites are no different. Think of each page as a room in your house. You want your place to be welcoming right? Here are 5 helpful tips for effective page layout:
Top 5 Layout Tips:
1. Make Sure You Have the Essentials
Every room in your house requires basic features; a floor, a ceiling, an entry/exit point, some furniture and lighting. Similarly, usable Web pages have basic requirements. These include:
- prominent placement of branding; your logo or name. It’s usually placed in a header which spans the top of the page. This is the first thing people see, so it’s important to grab your guests’ attention and convince them they’re in the right place.
- a navigation menu. Site navigation is usually a horizontal bar placed just below the header, or a vertical bar placed in a left-aligned column.
- an area for page content. The content area can be divided into columns or blocks; whatever most effectively gets your message across.
- a footer. The footer can include another navigation menu, copyright information, and useful links such as a privacy policy link or a “back to the top” button. The footer defines the end of the page. It lets the user know, “that’s all there is” and provides a way to navigate elsewhere within your site.
2. Be Consistent
The Home page is the entrance where you typically welcome guests. But on the web, you don’t control how people get in. Other sites and search engines will often link to pages other than your Home page. For that reason, while content will change depending on the page, the layout should remain consistent across all pages.
In other words, the essential features should be in the same place on every page. If they’re not, users will quickly lose confidence, become disoriented and will head for the nearest exit.
3. Use White Space
Imagine going into someone’s home or apartment where every inch of wall and floor space is crammed with stuff. How long would you stick around before running for the door? Unfortunately, many poorly designed websites fill their pages with text and images in the hope of getting their message across. Sites like that are exhausting to visit because they don’t allow your eyes (or your brain) a chance to rest.
The solution is providing ample space around blocks of text and images for people to think about what they’ve just read or seen. This space is called white space, (“white” because the term first applied to printed layout on white paper). The trick is to balance the right amount of white space: too much and people get bored because there isn’t enough to keep their interest; too little and they’re overwhelmed by all the stuff on the screen.
4. Choose Liquid vs. Fixed-Width Layout
The Web has one distinct difference from layouts in the physical world. In the physical world, your apartment isn’t going to suddenly change size. In the virtual world, the amount of space available can be determined by how big your guest’s monitor is. Because of that, space on the Web isn’t “fixed”; it can expand and contract.
When you design your site, you can choose between a layout that expands to fill the entire screen no matter how big the monitor is, or a layout that has a fixed-width so it will always be the same width no matter how big the screen is.
Reasons to choose fixed-width layout:
- Your site’s page layout will be consistent regardless of your guests’ monitor size or screen resolution.
- You can easily control text line-length. When lines of text get too long, the content becomes difficult to read. (That’s why newspaper columns are narrow.)
Reasons to choose liquid layout:
- Liquid layout allows you to maximize “screen real-estate”. In other words, the site will fill the entire screen regardless of how big the monitor is.
In the end, it comes down to your personal taste. Liquid design tends to present more design challenges and doesn’t display as consistently as fixed-width design. But if you want your site to fill your guest’s monitor, it’s the way to go.
5. Get the Width Right
In recent years, with the improvements and cost reduction in flat screen technology, people have increasingly been purchasing larger monitors. As a result, many sites today are designed for these large monitors. At the same time, there has been a huge shift toward the use of tablets and hand-held devices which come in a dizzying array of shapes and sizes.
The standard layout width used to be 800 pixels wide. That has been changing. Many sites now feature layouts that are 1024, 1600 or 2048 pixels wide – a big increase in layout width. The problem arises for people using hand-held devices or smaller monitors. They only see the left-most portion of your site and have to rely on horizontal scrolling every time they want to see what’s on the missing portion of the screen.
Fortunately, new Web development techniques (generally referred to as ‘responsive design’) allow your website to detect a visitor’s device resolution and adjust the layout width on-the-fly. Some love it; some prefer the fixed-width approach. It’s ultimately a matter of personal preference. In any case, it’s a good idea to know your target demographic and take into consideration whether the bulk of your prospective visitors are likely to be using handheld devices or large desktop monitors and plan accordingly.
That’s it! Remember, a good Web designer will include you in the design process. It’s going to be your place, so it should reflect your personality and tastes.
For more information, or to request an estimate for site design or redesign, contact .