BASIC STYLING

BASIC STYLING

Ultimately, we are going to build a native Android app using HTML, CSS, and Java-
Script. The first step on this journey is to get comfortable styling HTML to look like a
mobile app. In this chapter, I’ll show you how to apply CSS styles to a bunch of existing
HTML pages so that they are easily navigable on an Android phone. So, in addition to
moving closer to building a native app, you’ll be learning a practical (and valuable) skill
that you can use immediately.

Don’t Have a Website?

If you’ve been testing all your web pages locally on your personal computer, you won’t
be able to view them on your Android phone without setting up a server. You have a
couple choices:
• Host your web pages on a web server and connect to that server from your Android
phone. Chances are good that your Internet Service Provider (ISP) offers complimentary
web hosting, but this usually only supports basic features such as HTML.
By the time we get to Chapter 6, we’re going to need to use PHP, a scripting language
that runs on the web server, so you should look into an inexpensive hosting
service. Many companies, such as Laughing Squid, offer entry-level hosting with
PHP for under $10 a month.
• Host them on a web server running on your computer and connect to the web
server running on your computer from your Android phone. This only works when
your Android phone and computer are on the same WiFi network.
This chapter is set up so you can try the examples as you go through it. So, no matter
which option you choose for viewing the web pages, try reloading them in a browser
(preferably the Android browser) each time you add something new to one of the samples.
However, be sure to save your file in your text editor before you reload it in the
browser or you won’t see your changes.

RUNING A WEB SERVER LOCALLY 

All current mainstream operating systems (Linux, Windows, Mac OS X) include some
sort of web server. On Mac OS X, open System Preferences, choose Sharing, and enable
Web Sharing. Once you’ve started Web Sharing, the Web Sharing preferences will
display the URL of your personal website (this includes anything you’ve put in the
Sites directory in your home directory). It will be of the form http://local-hostname/
~your-username.
On some versions of Linux, such as Ubuntu, you will need to go through some additional
steps to install and enable a web server. First, install Apache at the command
line with sudo aptitude install apache2. Next, enable the user directory module with
sudo a2enmod userdir. Once that’s done, restart Apache with this command:
sudo /etc/init.d/apache2 restart. After you’ve done that, you can create a directory
called public_html in your home directory and access any files in there with a URL such
as http://local-hostname/~your-username.
On Windows, things are a little more involved. You need to be running a version of
Windows that includes Internet Information Services (IIS) and enable it by going into
the Control Panel and making your way to Turn Windows Features On or Off. After
you’ve done this, put your web documents in your IIS document root, which is typically
located at C:\inetpub\wwwroot. If you’d prefer to run Apache on Windows, check out
a prepackaged solution such as EasyPHP, or check out the Wikipedia page on this topic
at http://en.wikipedia.org/wiki/Comparison_of_WAMPs.

First Steps

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 2-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-2 shows what this web page looks like on the Android phone. It’s usable, but
far from optimized for Android.
Example 2-1 shows an abbreviated version of the website shown in Figure 2-2. This is
the HTML you’ll be working with in this chapter. You can download it from this book’s
website if you’d like to try styling it as you go through the 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.


<html>
<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>

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.