HTML and CSS Reference
In-Depth Information
Most current mobile browsers support the
orientation
feature; however, this is not
always the case with older browsers. Instead, for those browsers, you determine when a
user has switched between portrait and landscape orientation based on the width of the
screen. One common standard is to assume that any mobile device with a screen width
of 320 pixels or less is being held in portrait orientation. Thus, for older mobile browsers,
you can use the media query
@media screen and (max-width: 320px) {
styles
}
where
styles
is those style rules applied when the screen width is 320 pixels or less.
For landscape orientation, you use the following media query for screen widths in excess
of 320 pixels:
@media screen and (min-width: 321px) {
styles
}
Note that the landscape media query should only be used once you have ascertained
that a mobile device is in use with a screen width of about 500 pixels or less; otherwise,
you'll apply these styles for any device whose screen width exceeds 320 pixels.
Problem Solving: Optimizing Your Site for the Mobile Web
The mobile browser market is a rapidly evolving and growing field with more new devices
and apps being introduced and purchased each month. Market analysis from Juniper
Research (
juniperresearch.com
) estimates that the number of mobile Web users will grow
from 577 million in 2008 to more than 1.7 billion by the end of 2013. Adapting your Web
sites for the mobile Web is not a luxury, but a necessity.
A good mobile design matches the needs of consumers. Mobile users need quick access
to main sources of information without a lot of the extra material often found in the desk-
top versions of their favorite sites. Here are some things to keep in mind as you create your
mobile designs:
•
Keep it simple
. To accommodate the smaller screen sizes and slower connection speeds,
scale down each page to a few key items and articles. Users are looking for quick and
obvious information from their mobile sites.
•
Resize your images
. Downloading several images can bring a mobile device to a crawl.
Reduce the number of images in your mobile design, and use a graphics package to
resize the images so they are optimized in quality and size for a smaller screen.
•
Scroll vertically
. Readers can more easily read your page when they only have to scroll
vertically. Limit yourself to one column of information in portrait orientation and two
columns in landscape.
•
Make your links accessible
. Clicking a small hypertext link is extremely difficult to do
on a mobile device with a touch screen interface. Create hypertext links that are easy to
locate and activate.
Above all, test your site on a variety of devices and under different conditions. Mobile
devices vary greatly in size, shape, and capability. What works on one device might fail
utterly on another. Testing your code on a desktop computer is only the first step; you may
also need access to the devices themselves. Even emulators cannot always capture the
nuances involved in the performance of an actual mobile device.
