Making Basic Site Layout Decisions

Posted on December 14, 2011 by
singleimage

Before the site gets under way, web developers and the client should work together to decide on the site’s look and feel. For example, you should decide what the site layout would be like in a specific browser and how the site fills the browser windows. It means deciding whether your site layout is expandable in width (like Amazon.com) or fixed (like Yahoo!). Other considerations are on the site’s alignment (left or right aligned, or centered), whether each webpage is printer-friendly, whether you need to use CSS to handle how your webpages are printed and many others. You should address all layout issue and form a general framework to create the design mock-up, which allows you to get a glimpse on how the site would be like.

If your clients have some basic knowledge on web development, you may help him to make informed decisions on the layout. This is something many web designers do quite often because their first-hand knowledge about system navigation structure can immensely help clients envision how certain components of the site should look before the web design phase is even started, For example, you may suggest the client to review popular web sites in the same field or industry to study their layouts and navigation systems and to get some ideas on how a modern website should look like.

Even if the client has very few or no knowledge on Web sites development, you can still help him make certain informed decisions. During a meeting, sit together in front of a computer and show him sites with various layout width, orientation expandability and printability options, as well as various fonts and colors combinations. Try to continuously advise him on how to choose a design that can appeal the target audience.

Choosing the right size

As you’ve probably discovered, many computer monitors come with a factory default resolution of 1280×1024 or higher. Although people are unlikely to change the preset resolution, you should be aware that some Internet users still use 1024×768 resolution or lower, especially those who own Internet-enabled mobile devices. These are common monitor resolutions used by Internet users.

  • 14–15”: 1024×768 (XGA)
  • 17–19”: 1280×1024 (SXGA)
  • 20”: 1600×1200 (UXGA)
  • 17” widescreen: 1280×800 (WXGA)
  • 19” widescreen: 1440×900 (WXGA+)
  • 20” widescreen: 1680×1050 (WSXGA+)
  • 24” widescreen: 1920×1200 (WUXGA)
  • 30” widescreen: 2560×1600

With no control over your visitors’ monitor size, how can you select a suitable layout width for a website without alienating or even infuriating some of the target audiences?

To accommodate the general Internet audience, you should choose a site size that can still display texts and other substantive site elements in any monitor resolution. If you choose the 1024X768 resolution, by making a column of texts that is no wider than 450 pixels, everyone should be able to read your site, including those that still use tiny 14” screen. If you take into consideration on the fact that browsers have a number of interface elements, such as the status bar, scroll bars, the Favorite bar and navigation bar, the actual design size for a 1024×768 site is actually about 960x 600.

Some clients have a very specific or limited target audience, which means you need to perform more specialized researches. For example, some designers may be asked to create a design for an “Intranet” interface that allows each employee to open a company-wide website that can be accessed only over the local network. After a research, you may find that the majority of screen resolution used is 1280×1024 pixels and most employees use Internet Explorer 8 or Firefox 5. Armed with this information, you can create a relatively wide site with multiple columns for texts and images. And because IE8 and Firefox 5 actually use up some of the screen real estate, the usable screen size is around 1200×900 pixels.

Choosing flexible-width or fixed-width site layout

Another important consideration is to decide whether your site should have an expandable or fixed-width design layout.

1.      Expandable layout: A website with expandable-width design will span the full breadth of usable browser space and has a few columns that can contract and expand according to the browser’s width. Google shopping search result is a good example of this page layout. With an expandable layout, the designer uses a percentage of usable browser space and this technique is often referred to as fluid or liquid design.

2.      Fixed-width layout: With this layout design, the Web page content will be fixed in size regardless of changes in screen resolution or browser’s windows size. Any overflow will expand the page vertically instead of horizontally. Twitter.com is a good example of sites with fixed-width layout. Everything you put outside the limit of the fixed-width layout can be considered only as background, which may include graphics and color.

The expandability or the fixed-width layout determines the techniques you need or can use when developing a website. For example, sites with fixed-width layout and top-left orientation can use absolutely positioned layers easily, whereas sites with fluid layout or fixed-width sites with center alignment can’t.

Although many sites use fluid design significantly in the 1990’s, it is no longer preferable for today’s websites of small or medium-sized companies, blogs or professional portfolio sites. On the other hand, search engine result pages and online email pages still use expandable layout because the extensibility allows users to view more contents when the browser is maximized.  For other Internet users, the shift to fixed layout is influenced by the need of having improved readability and printability rather than accessibility (the ease of visitors with physical disabilities and non-human devices to access and navigate a web site). Based on the site’s goals, you should decide whether a wide, short page is better than a long, narrow one. You should also decide whether a site that can extend to the full width of the browser window is important, although these considerations may not seem to be important to you, but for some visitors they do. If you decide to choose a fixed-width layout, the next aesthetic design should be to decide upon the page orientation. Some web designers prefer to fix the design at the upper left corner of the browser, while leaving some empty place at the right (like HGTV.com), while others prefer to fix the site at the top center of the browser, leaving some empty spaces at both sides. (like HomeDepot.com).

Because site layout is usually a matter of taste, you can’t decide which one is better. In recent years, the prevailing trend is to choose fixed-width layout with center alignment relative to the browser space. However, there is a possibility that the trend will change in the future. In the end, your site layout should match the client’s requirement and above all cater specifically to most, if not all target audiences’ preferences.

About: This Article was written by Raja. He is a Web Hosting industry watcher and writes regularly on Dedicated Hosting Reviews and Reseller Hosting Reviews.

Author :

  • admin