Style sheets for mobile to desktop (Chapter 12)

The last minute decision to go to the movies. A bet about the official language of Andorra. The phone number for a company where you’re fifteen minutes late for a meeting. A map to the company, because the reason you’re late is you can’t find it.

We want information immediately, and with the proliferation of powerful mobile devices of all shapes and sizes, the Web can be in you pocket, purse, or backpack just as easily as it’s at your desk or kitchen table. And today’s mobile browsers are far ago, largely spurred on by the advent of Apple’s Mobile Safari browser and the popularity of the iPhone.

So now it’s up to you and me to build sites that make it possible for visitors to access information from any mobile phone, smartphone, tablet, laptop desktop computer, game console, or furure Web-enabled devices.

In this chapter, you’ll learn how to build one site that works on the entire range of devices, adapting its layout according to the device’s capabilities.

Generally, there are two approaches for creating Web sites suitable for mobile devices:

  • Build a dedicated site for mobile phones. That is, a site that is tailored for the mobile experience and that is separate from the site for desktop and tablet users. Sometimes tablets especially the iPad, get their own version of a site, making a total of a least three sites.
  • Build one site for all. Deliver all devices -from movile phones to desktop computers – the same HTML, but style it differently so it’s device-appropriate. With some additional tricklness, you can even deliver different image and video sizes so mobile-phone users aren’t penalized by large downloads.

For most of us, a single site will likely serve our visitors well. Besides -part of the argument for a single site goes- today it’s harder to predict someone’s intentions when they visit our site, especially with smartphones and their browsers having become more robust. For instance, it’s not always a safe bet that the mobile visitor is, in fact, mobile. I’m sure I’m not alone in browsing sites on my phone while lounging on my couch, even with my laptop just on the other side of the room. In most cases, I’m looking at full sites, not mobilized versions of the desktop experience.

However, there’s no getting around the smaller screen sizes and reduced bandwith of mobile phones, so it’s still our job to deliver a site that is suitable for viewing in this context.

Book Summary of HTML 5 and CSS 3 (Seventh Edition)
http://www.bruceontheloose.com/htmlcss/table-of-contents.php#chapter-12

Leave a comment