HTML5 CSS3 mobile development tutorial

Murach's HTML5 and CSS3 Book CoverEd’s Note: This is an extract from Murach’s HTML5 and CSS3 by Zac Ruvalcaba and Anne Boehm. For Source Code, Sample Chapters, the Author Forum and other resources, go to .

Many different types of mobile devices are in use today, and these devices are frequently used to access web sites. Because the screens on these devices are much smaller than standard computer screens, a web site that’s designed to be used on the desktop can be difficult to work with on a mobile device. To accommodate mobile users, then, web developers typically provide pages that are designed specifically for mobile devices.

How to provide pages for mobile devices

[There are] five ways to provide web pages for mobile devices. To start, you can use a style sheet for the “ handheld ” media type. Unfortunately, that media type is considered antiquated and not all mobile browsers recognize it. That includes the Safari browser used by Apple’s iPhone, current versions of the Opera Mobile and Opera Mini browsers, and others. These browsers support the standard screen media type instead of the handheld type.

A web page on an iPhone before and after scalingOn the other hand, iPhone’s Safari and other mobile browsers including Opera’s Mobile and Mini browsers do support a new feature of CSS3 called media queries. These queries let you use a conditional expression for a media type. If, for example, the maximum screen width for a mobile device is 480 pixels, you can code a link element like this if you want to use a different style sheet for those devices:

Then, you can code another link element for screen media with a minimum screen width of 481 pixels. The style sheet for this element would then be used for standard computer screens.

The next technique requires that you develop a separate web site for mobile devices. When you use this technique, you include a link on the home page that lets the user switch to the mobile version of the site. The trouble with this is that users don’t always enter a site at the home page, so you may need to provide links to the mobile site on other pages.

When you use the last three techniques, the web site detects when a mobile device is being used and then redirects the user to the mobile version of the site automatically. This is what is done on most commercial web sites that service many mobile device users. For these sites, one common convention for the mobile site name is to precede the domain name for the main site with m and a period as in m.yahoo.com.

To detect a mobile device, a web site can use JavaScript on the client, a scripting language on the server, or WURFL on the server. Because this book isn’t about JavaScript or server-side programming, though, these techniques aren’t presented in this book. Instead, this chapter shows you how to develop the web pages for a mobile web site, which you need to learn how to do no matter how the user gets to that site.


You might also like

WebView Exploit Can Make Calls From Your Phone  — VPN Creative
Clicking on his link in Messenger immediately initiated a telephone call without warning; according to Neculaesei, this was a sign that Facebook mobile developers likely did not read Apple's URL Scheme documentation.

Infiniteskills Discounted HTML5 Development Training DVD (14 Hours of Video Training)
Software (Infiniteskills)
  • Master HTML5 at your own pace from a leading expert
  • Visual training method, offering users increased retention and accelerated learning.
  • Breaks even the most complex applications down into simplistic steps
  • Comes with Extensive Working Files

Q&A

avatar
Where might one find guidelines for Mobile Web Development?

There are plenty of places online which where you could find some great information on guidelines for Mobile Web Development. This includes the site Webcredible.