Beginning CSS: Cascading Style Sheets for Web Design, Third Edition

18

Styling Content for Mobile Devices

WHAT YOU WILL LEARN IN THIS CHAPTER:

• The differences between desktop and mobile development
• How to apply styles based on screen size

In Chapter 15 you saw how you could apply styles that applied only when printed with the media attribute and @media rule. Mobile browsers offer a similar challenge to developers as their capabilities and limitations can be very different to those of desktop browsers.

WHY MOBILE IS IMPORTANT

A February 2011 report for YouGov revealed that in the US one in five mobile phone users access the Internet on their phone every day, while in the UK the proportion was even higher with one in three accessing the web with their mobile phone every day. Similar usage patterns can be found the world over, with the trend towards mobile use increasing every year as devices become more sophisticated. The future of the web may well be on a small screen device such as a mobile phone.

The same report also found that over a quarter of mobile phone users in both the US and the UK were discouraged from accessing the web on their mobile phones, not because their devices were hard to use, but because the websites that they wanted to access did not display or function correctly on their phones.

With such large numbers of potential users, but so many being put off by poor user experience, there is a great and increasing need to write CSS in such a way as to be mobile friendly.

DEVELOPING FOR MOBILE

Interacting with a mobile device is very ...