Navigation path

Screen layout

The look of a Web page depends on several elements:

  • resolution
  • display size
  • colour settings
  • browser window
  • user’s preferences

Indeed, it is not possible to have complete control over the look of a Web page and it must be taken into account when the page layout is done. Whatever the screen size is, try to maximise the information place in the space visible on the screen before vertical scrolling.

 

Horizontal scrolling

The standard target screen size is 1024x768 pixels. Layout should be always checked for correct display on 800x600 screens. Horizontal scrolling is not allowed under any circumstances.

 
 

Vertical scrolling

The length of a page should not be longer than four times the height of the screen of reference (768 pixels). When pages are longer than two vertical screens a top link should be introduced between paragraphs. 

 
 

The header

The top area of a web page is the most visible area of a website. This is the place to identify the institution, the purpose of the site and to offer coherent and consistent navigation aids that are constantly applied across every page in the site.

 
 

The content area

The format could be flexible and may be adapted for the "look and feel" of each site. The best approach is to create a page template that specifies the column layout, the position of major navigation links and any other page elements. It should then be applied on every page within a site. The goal is to establish a logical screen layout that allows easily introducing text and graphics without rethinking at any time the basic design approach.

 
 

Constructing page(s) layout: fixed layout VS flexible layout

The width of pages can be fixed in size with pixels or can use percentages in order to adapt the layout to the various screen sizes. Both layouts have advantages and disadvantages. However, in the last years, more than 55% of screen resolutions are bigger than 1024x768 and therefore the EUROPA Templates have implemented an approach semi-fixed instead of flexible to avoid having long lines of text. The maximum width has been set up to 984px and the minimum to 770px. The minimum width can be customised depending on each site layout.

Fixed layout

Long lines of text can slow reading. Ideally a line length should be limited to no more than 75-80 characters. If there is only one column of text you could apply a centered fixed layout, where the text block, not the text itself, is centered in the page. However, a sheet of A4 paper is not as wide as a 1024x768 screen, so screen presentation is reformatted for printing. This automatic reformatting can be inhibited by specifying fixed width tables or images that exceed the paper width, resulting in the loss of text. You should not give to any element of the page a width of more than 650 pixels if you want to be sure that the page prints safely. CSS can also be used for a safe printing.

Flexible layout

The use of a multicolumn layout can increase legibility and functionality. The page can be divided into columns containing the site navigation, the main text and maybe a third column with relevant links related content. Several columns allow applying a flexible page layout as they might narrow the main text column to a comfortable line length. Use percentages to define the width of a table (max. 95%) or the cell containing the main text. Images longer than 650px can prevent text on Web pages of being printed correctly.

safe printscreen