Basic Design and Layout

The overall look and feel of your web pages will to a great extent be determined by the primary purpose of the pages, the kind of visitor you are attempting to attract, and the type of information or services you want to offer. A personal web site will look and feel very different from a commercial website, for example, and the overall format will vary widely, depending on whether the site is intended purely to provide information or is designed to sell goods online. Perhaps the most important consideration is whether the site will serve the needs of the intended audience. A website intended to cater for people with impaired sight, for example, would obviously need considerable thought in terms of designing pages that are accessible using assistive technologies such as screen readers or specialised browsers. W3C's Web Accessibility Initiative (WAI) provides guidelines on making web pages accessible to people with disabilities and learning difficulties, howsoever manifested. While it is obviously desirable to ensure that your pages are accessible to as wide an audience as possible, however, it might safely be assumed that a site primarily aimed at (say) graphic designers would not be subject to the same design constraints as a site aimed at people who are visually impaired.

In this page we are primarily concerned with basic design issues related to layout and the use of colour, text and images. Some of the fundamental concepts to consider when designing web pages are described below.


Navigation

Navigating from one page to another in a web site is possible thanks to the presence on each page of hypertext links. The appearance of the links can vary. Traditionally, links are text elements that appear in blue and are underlined, although they may be styled differently and may consist of images rather than text. The most commonly used navigational schemes tend to group the links on each page in a single location. This could be at the top or bottom of the page, or down the left-hand or right-hand side of the page. Most schemes have the links along the top of the page or down the left-hand side. If the pages are particularly long affairs, a navigation scheme that is positioned at the top of the page may be repeated at the bottom to relieve users of the need to scroll back to the top of the page to access a link. For large web sites with hundreds of pages it is obviously impractical to put a separate link on each page to every other page on the site. In this kind of scenario, a hierarchical structure is used to organise pages into categories and sub-categories. The home page will provide links to the main categories, and the linked-to pages will in turn provide links to their particular sub-categories, and so-on.

Site navigation system should be easy to use. At any given time the visitor should know where in the site they are, and how to get to wherever it is they want to go. In keeping with the need for consistent layout previously mentioned, navigational controls should be in the same location on each page, and follow the same format. The text used for links should provide a good indication to the visitor of the nature and purpose of the target page. Above all, make sure that links are recognisable as links. If the underlined text style of link is not to your liking, or does not fit in with your page design, make sure that links provide some other visual clue that identifies them as such. There is a good argument for providing traditional text-based links to the main areas of the site on each page, even if there are sophisticated JavaScript or Flash-based menus available, since not all browsers support these technologies (and even if they do, there is no guarantee that the user has not disabled them for some reason). Every page should have a link back to the site’s home page, just in case the visitor gets completely disoriented.

The collection of links on a web site is a bit like a table of contents in a book or a magazine, except that the electronic nature of web pages allows for a much more flexible structure. A navigation scheme can be expressed using a flowchart, in which the Home page is represented by the root of the flowchart. The main areas of the site are like the chapters in a book, and appear in the flow chart immediately below the root object. Each area may link to a number of sections, which may in turn link to various subsections, and so-on. The number of levels in the hierarchy will depend largely on the overall number of pages and the nature of the site, but try to keep the level of complexity manageable. Ideally, any page should be accessible within two or three clicks from any other page on the site.


A high-level flow chart for TechnologyUK.net

A high-level flow chart for TechnologyUK.net



A lower-level flow chart detailing a sub-section of TechnologyUK.net

A lower-level flow chart detailing a sub-section of TechnologyUK.net



Text

Text in web pages is displayed by browsers using the fonts available on the client computer. Most PCs have Arial and Times New Roman installed, while Macintosh computers usually have Helvetica and Times. Arial and Helvetica are both sans–serif fonts, whereas Times New Roman and Times are both serif. Other than that, the default fonts used to display web pages vary from browser to browser. Internet Explorer and Firefox use Times New Roman by default, although both browsers may be configured by the user to use other fonts. Web designers may specify (up to a point) a different font to be used to display their web pages. This is achieved in XHTML using style sheets. The size of the font can also be set with style sheets, and is an important factor in the readability of text. Too large, and the user can only read one or two words at a time. Too small, and the user may have difficulty in reading the text at all. If the font size to be used is not specified by the web page, the browser will display the text at the default font size (unless the user has specified a different font configuration).


Part of the TechnologyUK home page text, displayed with styles disabled

Part of the TechnologyUK home page text, displayed with styles disabled



Page layout

In order to display logos, headings, blocks of text and graphic media on a web page in the desired layout, it is necessary to divide the page up into areas of the correct dimensions, and with the correct spatial relationship to one another. There are essentially two approaches that can be used to achieve this. One is to use tables to provide the necessary structure. The other is to use cascading style sheets. The question of layout is further complicated by the fact that monitor orientation, aspect ratio, and screen resolution can vary considerably from one computer to the next. We can probably ignore the screen height for the purposes of this discussion, but the width of the screen will have a considerable bearing on how pages are displayed. Most computer monitors today have a minimum horizontal resolution of 1024 pixels, although some older monitors can display horizontal resolutions as low as 800 or even 640 pixels. It is thought, however, that the number of clients still using horizontal screen resolutions of 800 or below is only about three percent of the total, with more than half now using horizontal resolutions higher than 1024 pixels (other typical horizontal resolutions include 1152, 1280, 1360, 1440, 1600, 1680 and 1920).


A TechnologyUK.net page displayed on a 1440 x 900 pixel display

A TechnologyUK.net page displayed on a 1440 x 900 pixel display


Bear in mind also when considering how best to design your page layout that the effective width of the browser window is marginally less than the width of the screen (even when the browser window is maximised) because some of the available screen area is used for browser features such as toolbars, status bars, and scroll bars. These elements of the web browser window are sometimes collectively referred to as “chrome". Most of the features may also be configured by the user (for example, the tool bar or status bar can be hidden if required), and it is thus not possible to say exactly how much space will be available in the browser window. Make sure that at least the navigational controls and any important information are visible. Most Web designers place these features in the upper left hand corner of the page, a since this area will normally be visible on the screen even when other parts of the page are not. In this way, the user can access the navigational controls and view the important information without having to scroll across or down the screen.

Again, there are two approaches to page design that can be used to tackle the problem of variable screen size. The first is to make an assumption about the most commonly used horizontal screen resolution, and optimise the web page for that resolution. The main problem with this approach is that, even if you should make an accurate guess about the resolution used by the majority of clients, there will still be a significant number for whom the pages will not display in an optimal manner. Furthermore, the pace of technological change is such that today’s standard display resolutions may soon become outmoded. After all, it was not that long ago that web designers were optimising pages for an 800 pixel-wide display. Those same pages, when viewed on a modern high-resolution monitor, now look rather strange due to the disproportionate amount of white space visible. The second approach is to try and design the pages so that they will be deployed in a satisfactory manner no matter what display configuration is used. This approach may initially be harder to achieve, but in the long run the extra effort required is likely to be rewarded. Ultimately, the only way to measure the effectiveness of your layout design is to test your pages at different resolutions, and on different browsers.

Advanced techniques can be used to allow a page to automatically resize depending on the available screen space in the browser. This can be done with Cascading Style Sheets (CSS), the preferred option for controlling the presentation of web page content including document layout. The <div> … </div> tag is used together with various CSS attributes to control the size, position and appearance of block-level elements on the page. One of the best arguments for using style sheets in this way (as opposed to tables) is that changes in style can be achieved through relatively minor changes to a style sheet file (which is essentially just a text file with the extension .css), and be the changes will take effect on all pages to which the style sheet file is linked immediately, no matter how many pages are involved. Other methods of implementing style in web pages almost always necessitate the editing of each affected file individually.

The best way to test your page layout is to open a few pages, selected at random, using different screen resolutions and with a range of popular browsers. Many browsers are now available for different hardware platforms (e.g. PC, MAC) and operating systems (e.g. Windows, Linux, OS X), so it might be a good idea to test your pages using a number of computers running different operating system and browser combinations, if available. Microsoft’s Internet Explorer is normally found only on computers running Windows, but Firefox can be found on Windows, Macintosh, and Linux machines, and Safari (originally created for Macintosh computers) is now available for Windows (and for Linux, in the guise of Konqueror). Opera is also a very popular browser, and is available for all three of the popular desktop operating systems (Windows, Linux and OS X).


The TechnologyUK.net Home page displayed at 1024 x 768 pixels on a 19" widescreen monitor

The TechnologyUK.net Home page displayed at 1024 x 768 pixels on a 19" widescreen monitor



Storyboarding

A storyboard can be used together with a flowchart to design the page layout and navigational scheme of your web site before you begin writing any code in earnest. It will allow you to experiment with different layouts and colour schemes, and allows the web designer to visualise the overall appearance and structure of each page. Depending on the level of detailed design required before development starts, a single storyboard may be used to outline the home page and the main areas of the site to which it links, or there may be a series of storyboards that provide design details for each section and sub-section.

The storyboard should specify the position of logos, navigational controls, headers and footers, page and section headings, images, and blocks of text. It should also specify the typeface and colour scheme to be used. The storyboard effectively becomes the blueprint for your pages, and should help you to achieve a consistent look and feel throughout the site (if the website is a commercial venture, the aim is to achieve a consistent "corporate image"). Once you are happy with your storyboard(s) and navigational flowchart, it is a good idea to construct a web page template from which all of the pages for the site will be created, especially if more than one web developer will be involved in the venture. This will help to enforce a consistent structure and style throughout the site. It will also save a lot of time, as the elements that are common to all of the pages on the site can be included in the template and will not need to be added for each new page created.


A storyboard for the TechnologyUK.net Home page

A storyboard for the TechnologyUK.net Home page