Building Android Apps : Basic Styling

- How To Install Windows Server 2012 On VirtualBox
- How To Bypass Torrent Connection Blocking By Your ISP
- How To Install Actual Facebook App On Kindle Fire
9/23/2010 11:37:21 AM
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.

Figure 1. Desktop version of a typical website looks fine in Chrome on a desktop

Example 1. The HTML document we’ll be styling
<link rel="stylesheet" href="screen.css" type="text/css" />
<title>Jonathan Stark</title>
<div id="container">
<div id="header">
<h1><a href="./">Jonathan Stark</a></h1>
<div id="utility">
<li><a href="about.html">About</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
<div id="nav">
<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="">O'Reilly Media, Inc.</a></li>
<div id="content">
<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.
<div id="sidebar">
<img alt="Manga Portrait of Jonathan Stark"
<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 id="footer">
<li><a href="services.html">Services</a></li>
<li><a href="about.html">About</a></li>
<li><a href="blog.html">Blog</a></li>
<p class="subtle">Jonathan Stark Consulting, Inc.</p>

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.
Figure 2. Desktop version of a typical website looks all right on an Android phone, but we can do a lot better

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" />

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.
Figure 2-3. Android assumes a normal web page is 980px wide

Figure 4. Setting the viewport to the width of the device makes your pages a lot more readable on Android

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.