Web Design with HTML and CSS

32

Designing for the web

Web Design with HTML and CSS Digital Classroom

Know that your site’s viewers are impatient

The viewers coming to your site are impatient. A recent study of retail websites found that if

users reach a website and the page does not load within four seconds, they are likely to leave

the site, never waiting for the page to load. The same study found that more than one-third

of online shoppers would abandon a site immediately if they have a poor online experience.

The majority of those who said they would abandon a site indicated they would not return.^1

As a designer you can help provide a great experience on your sites by keeping the following

in mind:

• Use images only when they add value to the page.


• When using images, optimize their size for online use so they load faster. This is
  covered in detail in Lesson 5.


• Use a common Cascading Style Sheet to standardize layout, navigation and colors.


• Separate long content into multiple pages so it loads faster.


• Only add multimedia such as video, audio, Flash, and Silverlight.

Designing for the screen

When designing websites, consider where they will be viewed. If your audience will

primarily be on a desktop or laptop computer, the pages should be horizontal rather than

vertical. This keeps users from needing to scroll unnecessarily. Similarly, if your audience is

primarily working on mobile devices, consider reducing the content and designing for a

smaller, vertical screen.

Displays are available in diff erent sizes, and can display varying amounts of information.

The amount of information that can be displayed on screen is known as the resolution of a

display, and it is measured in pixels. The word pixel is derived from “picture element” and is

the smallest unit of measurement on the screen (when used for web graphics there are often

72 pixels per inch). Two of the most common monitor resolutions on the web are 1024

pixels wide × 768 pixels high and also 1280 pixels wide × 800 pixels high. As you can see in

the table below, the same page displayed at various resolutions provides diff erent experiences

for the viewer.

The same layout on a 1024 × 768 monitor (left) and a 1280 × 800 monitor.

1 Report published by Akamai available at http://www.akamai.com/html/about/press/releases/2006/press_110606.html)