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 users 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 effect how a web page is displayed.

For a start it depends on the operating system you use. PC’s and Macs use a different dots-per-inch (dpi) measurement 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 colors they can display), and simple factors such as the ambient light where a person’s monitor is located can have an enormous affect on the perceived colour. Website designers only have around 216 colors they know will be available across all modern computers, so if your corporate colors 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 colors 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 effects 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.

sussex-800

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
Sussex-1024
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.

Most browsers give the user the ability to set a custom user style. This allows users to override how a website looks and gives them the ability to change things like background colour, text colour etc. This is most commonly used by people with visual disorders such as colour blindness.

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 users settings. The browser interpreting 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.

Some browsers will add default styles to elements. To stop this happening the designer must turn these default styles off. For example, If you use an <abbr> tag people using an Apple Mac will see the tag in Italics

but Internet Explorer (IE) users will not.

IE tag
Internet Explorer does not style the tag
mac-tag
Safari on Mac OS X chooses to make tags Italic

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 manufactures 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.

Bug’s 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 practice 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 design buyers. 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 mind-set 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.