9. Construction

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

A Structured 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 in a logical order, placing the elements as you work down, seen as zig-zagging for a wider viewport or running straight down on a mobile phone.

It’s entirely valid to use custom div elements to identify certain content, as used on this page. However, HTML5 also lets you use semantic elements, which can be used to more accurately describe the purpose or function of content. They can also aid the process of building a site and provide helpful hints for search engines. 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!

Accommodating Disabilities

Many people have problems with websites, often because of visual difficulties. To accommodate everyone you should include descriptions along with all visual elements, usually in the form of alt values. And, although it may not be always feasible to add subtitles to video or audio content, a transcription should be provided where possible.

Browsers often provide a ‘reader mode’, which disregards much of what’s in a stylesheet, rearrangeing the content for maximum readability. This mode often incorporates software that can also convert the content into spoken form. Assuming your HTML follows standard rules this shouldn't present any problems.

Design Aspects

The appearance of any website is largely a matter of taste, but guidelines are best followed to ensure that it looks reasonable under any circumstances. Generally speaking, the rules of ‘less is more’ should be applied to web pages, thereby reducing clutter to a minimum and keeping everything in proportion.

Fonts are best displayed in off-black on an off-white background or vice versa, with pure white or black best avoided. A large bold sans-serif font grabs a viewer’s attention in headlines, whilst a serif font is more readable in blocks of text.

Light or Dark

Traditionally, many sites operate in light mode, having a pale background with dark text, the same as printed ink on paper. However, many others use dark mode, with a dark background and pale text.

Whilst light mode can cause eye strain, dark mode is acceptable to almost everyone. This is a good reason for making your site ‘dark’, with surrounding elements and fonts to match. The choice of fonts is especially crucial, since the readability of a character of black on white is entirely different to the same font in white on black.

You can make a site any style you like, but if you design a ‘dark’ site, there’s little reason to create a ‘light’ version. Whatever you choose, check the appearance of your site in both light and dark modes on various browsers. If you want total control over a site’s appearance you should design it to operate in only one mode, which is also simpler to make.

The easiest way to set a fixed mode is with a stylesheet containing a line that begins with something like:

where the colours used are determined by the OS of the browser. The possible values for color-scheme are normal (default OS scheme), dark, light, only light, only dark and light dark (either OS scheme).
Note that different values for color-scheme can also be applied to other elements within a stylesheet.

You can allow a browser to respect its current mode, again using its OS colours, by using media queries such as:

but if you want to dictate the colours yourself you should use something like this:

You can even enter the same colours for both modes, if you so prefer.

Although it’s possible to use JavaScript to switch between dark and light modes, perhaps by means of a button on a page, this is probably best avoided for the reasons given above.