9. Layout

Historically, web sites are designed in one of three ways:

1. Traditional

   where the layout is designed for a conventional computer screen in landscape mode, wider than it is tall, with an aspect ratio of 4:3. Typically, such pages have tabs along the top or along the left hand side to give access to other locations. Mobile phones are normally used in portrait mode, which is taller than it is wide, with a ratio of between 16:9 to 19:9. This makes a traditional site awkward when viewed on a mobile, often with fonts that are too small or requiring endless scrolling. However, a simple well-designed site can work reasonably in landscape mode on a phone, providing the viewport parameter is set correctly in each page.

2. Browser Sniffing

   in which two or more variations of a website are provided, the site itself determining the most appropriate form, as determined by a ‘user agent’ string that’s automatically sent from a browser, by JavaScript on the page sending information sent back to the site, or by ‘browser fingerprinting’ that’s initiated by the site itself. This is a complex business, probably best left to those running the sites of large corporations.

3. HTML Responsive Web Design

   where the sizes of elements on a page adjust automatically to suit the dimensions of the viewport, meaning a reasonable result can be obtained, irrespective of the type of browser in use. Such flexibility is essential, since a large proportion of users view the internet only via a mobile phone. This is really the only choice for anyone designing a small site

Design Approach

Although HTML files should determine the content of a site and a CSS file should define the layout, it’s inevitable that both should be considered at the same time. However, content can be created independently of layout if approached in a systematic manner, considering elements as blocks flowing down the page, with some in fixed positions. It might be best to imagine your page initially without any styling and what order you would place the elements as you work down, seen as zig-zagging for a wider viewport or running straight down on a mobile phone.

Although it’s entirely valid to use custom div elements for virtually every block, as used on this page, HTML version 5 offers semantic elements (see earlier), which are easier to work with. Here’s an example of their use:

with the CSS file containing main.flex {display: flex;} and more.

Seen without any styling the page rolls down through the logo, heading, navigation area, two sections, plus a footer containing further text and the address. The whole thing would be perfectly readable, even without an associated CSS file, which is how it should be.

Adding a stylesheet allows the logo to be positioned anywhere you want, with suitable fonts and other sizes for every element, whilst the two section elements in the main element are able to float alongside each other, should the viewport be wide enough.

Having created this page in a structured manner, free of any styling information, you can now approach the stylesheet without any need to modify this original page structure. It’s time to experiment!