Web Design with HTML and CSS

240

The need for mobile-optimized websites

Web Design with HTML and CSS Digital Classroom

This lesson uses the TextWrangler text editor to create the markup text, but you can use any of

the text editors covered in Lesson 3.

The need for mobile-optimized websites

Until recently, the way a website displayed on a mobile phone’s browser was only a

peripheral concern for most web designers. Browsing on mobile devices still represents a

small percentage of all browsing; however, mobile browsing is growing at an astonishing rate.

Some estimates put the growth rate at 25 to 30 percent each year.

For estimates of web browsing statistics, see http://www.netmarketshare.com.

To illustrate the growing importance of optimizing a site for mobile devices, consider that

50 percent of mobile users start their activity with a search. If your site appears in a mobile

user’s search results, you have a unique opportunity to reach them.

How is the mobile experience of the web diff erent than the desktop?

The most obvious answer to this question is screen size. The two most common screen

resolutions in use today for desktop browsing are 1024 × 768 pixels and 1280 × 800 pixels.

Mobile phone resolutions can range from 240 × 320 (for a non-smartphone) to 640 × 960 (for

a smartphone). Screen resolution numbers change when you include mobile devices such as

the fi rst-generation iPad, which has a screen resolution of 1024 × 768. In most cases, however,

a page of content that seems reasonable on the desktop may seem too long for a mobile device.

Comparing the screen resolution of a typical desktop screen (left) to a mobile screen (right). (This diagram is not to actual size.)