Chap 08

Pages, Page Sizes and Positioning of Elements

Ultimately, what the user sees is a page.  The layout of the page will impact on how the user rates the website. Flashy buttons, animations that distract and positioning of key elements including content, will all make the difference between the success and the failure of the page. This chapter intends to introduce you to the broad concepts that govern page layouts and how it impacts the overall impression that the web page creates on the user. 

Proximity of elements is the distance between the locations of elements on the web page.  Proximity determines how elements relate to one another whether they are text, navigation or graphics.  Elements that are placed close together appear to have a stronger relationship than elements that are farther apart. 

Generally speaking, elements that are close together appear to have a stronger relationship than elements that farther apart.  For instance a caption for a picture must be placed directly below the picture and not a few inches below if it must establish a relationship.  A subtitle must be directly below the title if it must make sense.  A layout that positions elements in an unrelated manner is likely to be termed as weak.  Therefore, positioning of elements on the web page will impact of the page on the user. 

Alignmentis one of the most critical principles of site layout that must be taken into consideration while designing the pages and positioning the elements of the page.  It not only disturbs the readability of the page, but can also detract from the appearance. On most pages the alignment is from left to right.  It provides a good starting point for the eye movement and the eye of the user is accustomed to this style unless he belongs to a culture that reads from right to left customarily.            

Repetition is the art of saying the same thing over and over again without boring the reader with the intention of getting a point across. While web pages do not have to be the same across pages, users welcome repetition of some of the elements with slight variations for consistency.  . For instance, placement of the logo on the upper left corner, the menu bar at the top of the page and so on adds to the look and feel of the site and provides a strong sense of familiarity to the user.   

Contrast is used to make things stand out significantly.  For instance the white of text against a dark background or the use of dark colored text on a white background.  It makes reading easy and helps highlight it.  Contrast can also be used to attract the attention of the user to a particular object on the page—such as a freebie or a competition announcement by making the text larger than the surrounding text or printing it in a significant color or positioning it in the middle of the page.           

Navigation is another element that is carefully positioned on pages to hold the attention of the reader. It is a very important element on the page as it helps the reader get around the site with ease.  Research has revealed that positioning of navigation elements is one of the main reasons that determine how long a visitor stays on the site. 

A number of navigation styles have consequently developed. The most common one is to position the navigation buttons at the top of the page so that they are visible to the user as soon as he enters the site.   Sometimes Navigation is provided for on the left of the page and sometimes on the right.  A few sites prefer to have the navigation buttons at the bottom of the page.  Some place it horizontally and some vertically.  The type of site and the style of the site will determine the kind of navigation style that is used.   

While top and left navigations are common and familiar to users, bottom navigation is advantageous when the pages are long and the user has to scroll through the page back to the top if the navigation is placed at the top. Sometimes the navigation links are duplicated at the top and the bottom of the page for ease of operation.  

Text is the primary means of communication on a web page and hence has to be positioned in a central place on the page.  Text is also displayed on different browsers in different ways because it relies on fonts installed on the user’s computer.  So positioning of text and use of fonts that display well across browsers becomes an important aspect of page layouts. Almost all PC users have Arial and Times New Roman installed and Macintosh users have Helvetica and Times New Roman.  So it would be safe to stick to these fonts while positioning text on the page. 

It must also be remembered that users read as a group of words. The size of the text then becomes the key element that determines how easy or difficult the text is to read.  Large text is difficult to read if they have to read two words at a time and small text is difficult to read if groups of words are too closely packed. Consequently, it may be advisable to define the font size so that browser settings do not override the text and distort the page. 

High contrast between the text and background also makes the text easier to read.  Red and blue texts create perception problems and should be avoided.            

Page Size and Layout is extremely important factors in positioning of elements on a web page.  This is one of the biggest challenges faced by web designers.  Variability of screen sizes is incumbent upon the settings adopted by the user.  Most computer monitors are set for 800 X 600 pixels.  However, some monitors go in for lower or higher pixel settings.  This can play havoc with the page and the positioning of elements on the page. Therefore, the web designer must create a web page that caters to all the different monitor settings and yet display well!  

As pointed out earlier, knowing your audience is crucial to the kind of web page you design and how you place your elements on the page.  If the audience is using older computers, then the screen resolution should be set for 640 pixel wide screen.  If the audience is fairly tech savvy, you are likely to have an audience who has the screen set to 800 pixels and if you have a specialty audience then they are likely to be using an extremely wide monitor of 1024 pixels.   

However, if your audience is extremely varied, then it would be best to design your screen for 640 pixels, center the page and allow the browser to display your web page smaller than the screen width.  In this way you will not be sacrificing the positioning of elements at the altar of the screen width. However, there will a lot of “dead space” around the page, which cannot be used by the designer. 

Tables have been around for a long time as a method of laying out the pages.  These are used to control the width of material presented on the web page.  The table width is specified as a percent or pixels. Percent will cause the table size to change depending on what the viewer’s screen width is.  The display is fairly uniform across browsers and screen sizes.  It follows that the screen will be narrow in one monitor and wide in another if pixels are used to define the tables.  

Use of frames in more elaborate websites throws up its own problems of positioning elements. It is also a moot point that a number of browsers do not support frames.  Frames work by splitting up the browser window into two or three regions and displaying a separate page in each region.  The problem of page layout is commensurate with the number of pages and frames on the screen at any given point of time.  Each is an independent page and the positioning of elements in one page has nothing to do with the positioning of elements in another frame.  One method of getting around the problem of frames and yet taking advantage of its capabilities is the use of a single large frame on a web page.  It helps control with precision the placement of images and other items on the page.  While a large number of browsers don’t support frames, they are more widely supported than layers or stylesheets and they open up the site to a wider potential audience. By adding the <NOFRAMES> tag and simply making a few minor adjustments to the framed area alone, anyone would have access to the information without having to build different versions of the same site. 

The concepts of frames has been taken a little further by the use of iframes which was popularized by Microsoft Internet Explorer 3.0 and is now supported by Netscape 6 and opera 5.  An iframe is an inline frame that is not bound to the side of the browser window. It floats free and can sit anywhere in the window.  It goes where it wants to go and displays whatever it needs to display. It obviously gives the web designer some undreamed of advantages. 

The next kind of page layout that is often used is the Style based layout. All style information is stored in a separate style sheet and <div> tags are used to place elements in right positions. By itself, the <div> tag is inert.  It becomes active when it is combined with a style sheet rule.  Most of these sheets use CSS positioning techniques to place their elements on the page—especially relative positioning.  However, special effects can be obtained by using Floating boxes or Absolute Positioning techniques.  

Layering is another method that is used during page layout to place elements on the page so that users have easy access to them.  This type of layout is done sometimes deliberately to create dramatic effects.  When overlapping layers are used the designer must inform the browser how the element goes into the z-index and which elements are high on the z index and which are lower. 

Well we have briefly explored the elements of the page, the size of the page the layout of the page and positioning of elements, generally, in the context.  The chapters preceding this one and including this one was intended to be introductory.  The idea was to ensure that you had all the concepts in place and that you truly appreciate the problems of the web designer who sets out to design his web page. Well we shall now begin drilling into each of the concepts in the context of absolute positioning of elements in the later chapters of this book.