Web Design with HTML and CSS

The need for mobile-optimized websites

Lesson 11, Mobile Design 241

You also need to take into account screen orientation: for computer monitors, the default
orientation is horizontal; for mobile phones, it’s vertical. In addition, older mobile phones can
only display web pages vertically, while newer smartphones can rotate the screen from portrait
to landscape format. There are a number of other limitations for mobile users, particularly
with older devices:

• Most websites are designed to be used with a mouse and keyboard. Modern
  smartphones address this with touch screens and QWERTY keyboards, but for many
  users, navigation on a cell phone is limited to arrow keys and numerical keypads.


• Older mobile web browsers have limited ability to render CSS. For example, they
  might ignore CSS layout such as fl oated divs, but maintain the text styles.


• Multimedia such as audio, video, and Flash have limited or no support on many
  mobile devices. JavaScript might also not be supported.


• The speed of the mobile phone’s Internet connection is a major factor in the
  user’s experience. In addition to multimedia fi les, large images can slow down the
  performance of a page.


• Many mobile devices have limited processing power and memory, which may result
  in incomplete or delayed page rendering. Features such as copy and paste may either
  be completely missing or limited.

Deciding which type of mobile device to target

Before deciding whether to spend time optimizing your website for mobile devices, you
should determine the size of your target audience and address their needs based on your time
and budget. For example, if only two percent of your visitors use legacy browsers and 15
percent use smartphones, you would optimize for the smartphone fi rst.

The following fi gures show the SmoothieWorld site as displayed on a desktop computer,
a legacy mobile browser, and the WebKit-based browser of the iPhone. The layout for this
fi gure includes a fi xed-width container of 960 pixels, which is centered horizontally within
the page. This page structure will have some implications in all three formats.