Website layout

When website design has been created, when all functional modules and components are ready, it is high time to unite all elements into one whole, i.e. make the layout of the site. Website layout is the final stage of website design development; it is the creation of the site structure that will determine the display of the text and graphic elements on the site in different browsers.

There are two main kinds of website layout: flexible (liquid, fluid etc) and fixed (fixed width) layout. Flexible website layout allows to change the sizes of the page elements adjusting to different display sizes and resolutions. Fixed width website layout assumes, that all elements of a web page have the same size, irrespective of the user's display size and resolution.

Today the process of making website layout can be carried out with the help of a lot of different methods. Let us consider the most widespread of them.

HTML website layout

This is the process of creating the site structure using the hypertext markup language (HTML). Depending on the main html elements there are two kind of html layout: table-based website layout and div-based website layout.

Table-based website layout assumes that the the structure of the site page is represented in the form of a table. Every element of the page is one or more table cells. Table-based website layout is very convenient and is widely used by web programmers responsible for website layout. But it is not always able to satisfy the needs of the site – for instance, to provide high speed of loading.

Div-based website layout is the process of construction of the site structure based on div-elements. Div-based website layout has a number of advantages: short code, high speed of code loading etc.

CSS website layout

Sometimes CSS website layout is considered a separate process, though in modern web design cascading style sheets (CSS) are used for making practically any website layout. Cascading style sheets describe the external appearance of the site pages written in a markup language: HTML, XHTML, XML.

Website layout with the use of CSS can use linked style sheets, global style sheets and inline styles. Linked style sheets (external style sheets) allow to separate the code from the design: all attributes of tag formatting are located in a separate CSS file. All you have to do is to connect this file with the web page by writing a special code in the required part of the page. One and the same CSS file can be used for a lot of different web pages.

Global style sheets (internal style sheets) are described in the tag that is placed in the title of a web page. Described styles will be applied to a single document. Inline styles are described for every separate tag and are applied to this tag only.

In modern web design complex website layout is used more and more often. It allows to broaden the layout facilities, create a more complex and attractive website.

Website layout must meet certain standards, only in this case your site will be correctly displayed in any browser that supports these standards. The ability of the site to “work” correctly irrespective of the browser is called cross-browser compatibility. Cross-browser website layout is an important quality requirement for all modern websites.

The notions of cross-browser compatibility and website layout are closely connected with the notion of layout validity. Validity is the accordance of the code with all quality standards established for the used markup language (HTML, XHTML, XML). Today a lost of specialists in website layout are guided by w3c standards.

TAGS
layout, website layout, table-based website layout, div-based website layout, html website layout, css website layout, fluid website layout, fixed width website layout, cross-browser website layout