Theory is great, but I’m a “show me, don’t tell me” kinda guy so let’s
dive in.Imagine you have a website that you want to
“mobile-ize” (Figure 1). In this scenario,
there are a number of easy things you can do to optimize a site for
Android. I’ll go over your options in this chapter.
Figure 2 shows what
this web page looks like on the Android phone. It’s usable, but far from
optimized for Android.
Example 1 shows an
abbreviated version of the website shown in Figure 2. This is the HTML you’ll be working with in
this chapter. The desktop stylesheet (screen.css) is not
shown as it is not essential, but you can use the stylesheet from the
previous chapter if you’d like to have something to play with.
Example 1. The HTML document we’ll be styling
<head>
<link rel="stylesheet" href="screen.css" type="text/css" />
<title>Jonathan Stark</title>
</head>
<body>
<div id="container">
<div id="header">
<h1><a href="./">Jonathan Stark</a></h1>
<div id="utility">
<ul>
<li><a href="about.html">About</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div id="nav">
<ul>
<li><a href="consulting-clinic.html">Consulting Clinic</a></li>
<li><a href="on-call.html">On Call</a></li>
<li><a href="development.html">Development</a></li>
<li><a href="http://www.oreilly.com">O'Reilly Media, Inc.</a></li>
</ul>
</div>
</div>
<div id="content">
<h2>About</h2>
<p>Jonathan Stark is a web developer, speaker, and author. His
consulting firm, Jonathan Stark Consulting, Inc., has attracted
clients such as Staples, Turner Broadcasting, and the PGA Tour.
...
</p>
</div>
<div id="sidebar">
<img alt="Manga Portrait of Jonathan Stark"
src="jonathanstark-manga-small.png"/>
<p>Jonathan Stark is a mobile and web application developer who the
Wall Street Journal has called an expert on publishing desktop
data to the web.</p>
</div>
<div id="footer">
<ul>
<li><a href="services.html">Services</a></li>
<li><a href="about.html">About</a></li>
<li><a href="blog.html">Blog</a></li>
</ul>
<p class="subtle">Jonathan Stark Consulting, Inc.</p>
</div>
</div>
</body>
</html>
|
Tip: For years, web developers used tables to lay
out elements in a grid. Advances in CSS and HTML have rendered that
approach not only obsolete, but undesirable. Today, we primarily use the
div element (along with a variety of attributes) to
accomplish the same thing, but with more control. Although a complete
explanation of div-based layouts is well outside the scope of this book,
you’ll see plenty of examples of it as you read through the book. To
learn more, please check out Designing with Web
Standards by Jeffrey Zeldman (New Rider Press), which covers
the issue in greater detail.
1. Prepare a Separate Android Stylesheet
I’m as DRY as the next guy, but in the real world you’re better off
making a clean break between your desktop browser stylesheet and your
Android stylesheet. Take my word for it and just make two completely
independent files; you’ll sleep better. The alternative is to wedge all
of your CSS rules into a single stylesheet, which is a bad idea for a
number of reasons, the most obvious of which is that you’d be sending a
bunch of irrelevant desktop style rules to the phone, which is a waste
of precious bandwidth and memory.
Note: DRY stands for “don’t repeat yourself,” and
is a software development principle that states, “Every piece of
knowledge must have a single, unambiguous, authoritative
representation within a system.” The term was coined by Andrew Hunt
and David Thomas in their book The Pragmatic
Programmer (Addison-Wesley Professional).
To specify a stylesheet specifically for
Android, replace the stylesheet link tag in the sample HTML document
with ones that use the following expressions:
<link rel="stylesheet" type="text/css"
href="android.css" media="only screen and (max-width: 480px)" />
<link rel="stylesheet" type="text/css"
href="desktop.css" media="screen and (min-width: 481px)" />
Note: I specifically used max-width
and min-width here so that you can resize your desktop
browser and see the mobile version of the page. If you would prefer to
serve the desktop.css stylesheet to desktop users
regardless of their browser window size, use
max-device-width and min-device-width
instead.The Wireless Universal Resource File
(WURFL) contains information you can use to identify a huge number of
wireless devices, including Android devices. If you need to detect
Android devices with a width greater than 480px (such as a tablet) or
if you don’t want the mobile version of the site to appear when users
resize their browser window below 480px, you can use WURFL’s PHP API
to precisely detect specific browsers. Here, desktop.css
refers to your existing desktop stylesheet, and
android.css is a new file that we’ll be discussing
in detail in a bit. The desktop.css file is not
essential, but you can use the stylesheet from the previous chapter if
you’d like.
Note: If you’re following along using the sample
HTML document shown in Example 1, you’ll
need to rename screen.css to
desktop.css, but since we’re focused on the
Android stylesheet, you can ignore the desktop stylesheet completely.
If it fails to load, your browser won’t get too upset.However, if you’d like to use Chrome to
test the Android-optimized version of the site, you should replace the
reference to desktop.css with a reference to
android.css. That way, you’ll get to run the
Android version of your site whether you load it from a phone or the
desktop browser.
Regrettably, Internet Explorer will not understand these expressions,
so we have to add a conditional comment (shown in bold) that links to
the desktop version of the CSS:
<link rel="stylesheet" type="text/css"
href="android.css" media="only screen and (max-width: 480px)" />
<link rel="stylesheet" type="text/css"
href="desktop.css" media="screen and (min-width: 481px)" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="explorer.css" media="all" />
<![endif]-->
So now it’s time to edit the HTML document
(if you haven’t already done that as you were following along): delete
the existing link to the screen.css
file, and replace it with the lines just shown. This way, you will have
a clean slate for the Android-specific CSS in this chapter.2. Control the Page Scaling
Unless you tell it otherwise, the Android browser will assume your page is 980px wide (Figure 3). In the majority of cases, this works great.
However, you are going to format the content specifically for the
smaller dimensions of the Android phone, so you must let the mobile
browser know about it by adding a viewport metahead element of the HTML document: tag
to the
<meta name="viewport" content="user-scalable=no, width=device-width" />
Note: Desktop browsers will ignore the viewport
meta tag, so you can include it without worrying
about the desktop version of your site.
Merely by suppressing the desktop stylesheet
and configuring your viewport, you will have already given your Android
users an enhanced experience (Figure 4). To really impress
them, let’s start building the android.css
stylesheet.
Warning: If you don’t set the viewport width, the
page will be zoomed out when it first loads. It’s tough to say exactly
what the zoom level will be because the Android browser includes a
setting that allows users to set the default zoom. The options are
Far, Medium (the default), or Close. Even if you do set the viewport
width, these user-defined settings will affect the zoom level of your
app.
