subject: Web Design Tips: Mobilizing Your Site Using Css [print this page] Web Design Tips: Mobilizing Your Site Using CSS
With a second style sheet and minor changes to a page's HTML, many online stores can offer an excellent mobile shopping experience without creating a second
web page or registering a mobile specific domain.
Mobile Internet use is on the rise. And online merchants presumably want to provide customers with the best possible shopping experience. It is for these
reasons that many leading ecommerce sites have begun to offer either mobile specific pages (typically a subdomain) or mobile specific styles.
n this "Web Design Tips," I am going to make some suggestions about whether you should build a separate, mobile specific website, and provide a quick example of
how you might transform your CSS to create a more mobile-friendly version of your current page.
Should You Build a Separate Mobile Site?
The answer can be either yes or no. Personally, I believe that mobile Internet devices and mobile handsets will soon be as capable of rendering web pages as well
as laptops and desktops do now, so that registering a .mobi domain or even building a separate site could be a waste of time.
A better solution might be to redesign your current site so that it is easy to render on multiple platforms. In fact, developing websites that easily migrate among
platforms (mobile, desktop, RSS, or more) was the one of the main reasons that CSS was created. Good website design will largely separate content from layout
and appearance.
If you do decide that the best way to serve mobile customers is with a mobile-specific site, I will encourage you to use a subdomain rather than a .mobi domain.
An Example Conversion
Just as each ecommerce website is unique, creating a mobile friendly version of that site will also be somewhat unique. So I thought that, perhaps, the best way to
describe a site conversions was to do one.
For this "Web Design Tips," I created a home page for an ecommerce comic book store. This page was created for this demonstration.
Adding a Mobile-specific CSS
The first step in our conversion process is to add a mobile CSS, linking to it in our HTML and adding a file, which is still blank, to our site hierarchy. In this
demonstration, I named the file "handheld.css."
sing the Page Layout As a Guide to Begin Creating Your Mobile Styles
Our goal is to meet the World Wide Web Consortium's standards for mobile browsers, so we'll use that organization's CSS Mobile Profile 2.0 as our guide when
determining which selectors or attributes to use. We will also try to keep our page width to 205 pixels, and take steps to limit the total file size of our mobile site.
While our goal is to make most of the changes in the CSS, we will also have to create a couple of mobile-friendly background images. You can watch me do this
step-by-step in the video above. Below is the completed "handheld" CSS file.
