Website Design Explained

Variations that beset Website Designers

(why perfect design is not possible on the web)

Print designers are able to layout a page knowing exactly how the design will look when it’s printed.

Many people expect the same from website design but often it’s not possible, practical, or even desirable, to build pages that look exactly the same on every browser.

The website designer has no absolute control and designing for the web is consequently very different. There is a wide range of external factors that will affect how a web page will look to the user.

These include:·

• The user’s computer system, e.g. Mac or PC, tablet or mobile phone·

• The preferences the user has set, e.g. screen resolution·

How the browser decides to interpret the page,

• The browser will display the type size the user has chosen.·Affecting the line endings & spacing

• Old browsers may not support all the code used on the page·

• Bugs in the user’s web browser, corrupted software.

In contrast, when a print designer gives their page a 5mm border, selects Pantone colour 451 and the font Gill Sans 14 point, they can be sure their audience will see their design exactly as they planned it.

The user’s computer system:

The type of hardware and software you use on your computer will affect how a web page is displayed.

For a start, it depends on the operating system you use. PC’s and Macs use different dots-per-inch (dpi) measurements which means text usually displays larger on a PC. There are other text display differences – on Macs text is ‘anti-aliased’ which gives a smooth appearance whereas only the more recent PC operating systems do this.

PC and Mac also use different screen brightness (gamma), and this means that designs will look lighter on a Mac.

Different operating systems use different sets of ‘widgets’ – things like buttons and text boxes on forms, and scroll bars on pages – so these elements will also look different depending on the platform you use.

IE-button
A button as displayed in IE6 on WinXP
safari-button
The same button using Safari on Mac OS X

Print designers can use any font they wish – website designers can’t. A web page can only use a font if it’s

installed on your system, if it isn’t, the page will display your system’s default font. For this reason,

designers usually try to restrict themselves to the most common system fonts like Verdana and Arial. Any piece of text that must display in an uncommon or custom font – for example, a strap line – must be embedded as a graphic. Colour can also be an issue. Different monitors have different colour depths (the number of colours they can display), and simple factors such as the ambient light where a person’s monitor is located can have an enormous effect on the perceived colour. Website designers only have around 216 colours they know will be available across all modern computers, so if your corporate colours are not amongst them, they may not always be accurately represented.

As you can see, the set-up of your computer can have a big effect on how the size, brightness and colours of a design are displayed. The way certain page elements display depends on your operating system, and how text is rendered also depends on which fonts you have installed, as well as on the type of system you use.

User Preferences:

It isn’t only your computer system that affects how a web page displays; the way you have set your preferences will also influence what you see. The screen resolution you choose will dictate how big everything looks and how much will fit on a page, with the most common screen resolution settings being 1024×768.

web design
The learning in sussex website viewed on a smaller screen (at a resolution of 800×600). Notice that everything looks bigger and there is less room for the text
Web design
The same site viewed at 1024×678.

A website designer may want to make sure that the text size on a page displays the same on different browsers but it’s not possible to do this in any absolute way. Aside from the differences in text size created by screen resolution, text size can also be changed by the user. In any case, it’s not desirable to fix the text size – if users find your text too small to read, you don’t want to stop them from re-sizing it.

Because it’s difficult and sometimes impossible to tell what preferences a user has set on their computer, the way a page displays is often down to the user’s settings. The browser interprets how things should look.

As if there weren’t enough things conspiring to affect the web designer’s masterpiece, the web browser also wants to get in on the act.

Each web browser looks at the code used and tries to interpret how the page should be displayed. Some browsers will display the page exactly as the designer intended and others won’t.

Most modern browsers are very good at following the rules a designer has set but there are always some exceptions. As you can see, web browsers do not render the design of a page pixel by pixel. What they do is look at the page and render it based on the rules that have been set by the designer and the defaults that have been set by the browser programmers. This is one reason why the same page can look different on different browsers.

The use of unsupported or non-standard code.

During the early years of the internet, browser manufacturers stuffed their browsers with features that weren’t supported by other web browsers in a race to win market share. Over time some of these features (such as image support) have become standard parts of HTML, while others (such as the marquee and blink tags) only ever worked on specific browsers.

For example, many website designers use HTML tables to control page layout. To allow people to make a table stretch the height of a page, IE introduced the ‘height’ attribute for a table tag. This is an attribute that was used very often. Unfortunately, it wasn’t a standard tag so Netscape and other browsers don’t support it. The use of such non-standard code led to pages that only worked on one web browser, and even now you will see pages that state they only work in a certain browser. Thankfully most modern browsers have decided to use a standard set of code. However, many web designers are still using non-standard tags which can cause display problems across a wide variety of browsers. By sticking to web-standard coding, web designers can help reduce these problems.

Bugs in the web browser

Finally, one of the biggest reasons for display differences is simply because browsers are buggy! One would expect big software companies to fully check and bug test before release but in reality, this doesn’t happen. It’s a fast-paced industry and browsers are often rushed out before they’re fully tested.

Some bugs are spotted and fixed quickly, but many seem to remain version after version. This was a real problem in the old version 4 browsers when new ‘fixes’ were being brought out on almost a weekly basis. This practise is still common today.

What a user thinks is a bug in the page is often more likely to be a bug in the browser. It used to be common practice for website designers to use workarounds (or ‘hacks’ as they are known) to get around these bugs. But as this would often cause problems in newer browsers, this practice has lost favour. If your browser is playing up it’s worth downloading the latest version and seeing if that helps – after all, most browsers are free and easy to install. Chrome is probably the most reliable of all the browsers.

These days the most common approach for web designers is to build a site with one or two core browsers in mind, ones that are known to be relatively bug-free and use current web standards. If you design using this approach you help ensure that the site displays as well as possible in current and future browsers, while making sure that the content (but perhaps not necessarily the visual design) is displayed in older and more buggy browsers.

Conclusion

As you can see there are many reasons why a web page may not be visually consistent. Some of these relate to the user’s computer and their personal browsing preferences, and others to the way browsers actually work – interpreting the designer’s layout rather than displaying it pixel by pixel. Some of the biggest and most common display discrepancies relate to bugs in a user’s browser.

Display discrepancies are a fact of life for web designers and web designer clients. By using web-standard code many of these issues can be dealt with and the increasing standardization of the web will undoubtedly help in this respect. But unless we all use the same computer systems with the same preferences there are always going to be some differences.

Designing for the web requires a different mindset than designing for print. It’s less about absolute layout control and more about content and information. The web allows us much greater freedom with our content than print ever has. Once an item has been printed it cannot be changed, while the web allows us the freedom to change both content and design. It also gives your visitors the freedom to view your content in a manner of their choosing. To allow this freedom, some degree of layout control has to be given to the user. This means that pixel-perfect design on the web is not just difficult – it’s undesirable.