Web Design with a CSS make excellent mobile shopping for your site

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.

In 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. For example the URL might be http://m.yoursite.com rather than http://yoursite.mobi.

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.

First, here is the complete page code from before the conversion.

Here is the style sheet for on-screen display

body {background: url(images/main-background.png) repeat-x; margin-top:0px; font-size:62.5%;}
#wrapper {margin:0 auto; width:800px;}
#access {position: absolute; top:-500px; margin:0; padding:0;}
#header {background: url(images/head-background.png) no-repeat; width:100%; height:256px; overflow:hidden;}
#header img {border: none; position: relative; top:162px; left: 235px;}
#top-nav {position: relative; top: 73px; left: 210px;}
#top-nav li {display: inline; list-style: none; font-size: 1.4em; font-family:Denmark; letter-spacing:1px; font-variant: small-caps; padding-left: 3px;}
#top-nav a {color: #676666; text-decoration:none;}
#top-nav a:hover {color:#e2232b; text-decoration:overline;}
#searchbox {position:relative; top:170px; left: 530px;}
#content p {font-size:1.6em;}
#content li {float: left; display:inline; list-style:none; width: 45%; text-align:center; margin:5px; padding: 10px; border: #ffffff solid 3px;}
#content li:hover {background:#676666; border: #000000 solid 3px;}
#content li:hover h3 {color:#f8a043;}
#content h3 {font-family:Denmark; font-size: 2.6em;}
#price {font-family:Denmark; font-size:2.0em;}
button {margin: 5px; padding: 10px 100px; font-family:Denmark; font-size:1.8em;}
#footer {clear:both; background: url(images/footer-background.png) no-repeat #000000; margin-top:50px; padding: 120px 10px 200px 220px; text-align:center; font-size:1.4em; font-weight:500;}
#footer a {color:#000000; text-decoration: none;}
#footer a:hover {text-decoration:overline; font-weight:900;}
#footer ul {margin:0px; padding:0px;}
#footer li {display:inline; margin: 0px 2px;}

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

Using 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.

body {background:#ffffff; margin-top:0px; font-size:62.5%;}

#wrapper {margin:0 auto; width:205px;}

#access {display:none;}

#header {background: url(images/m-head-background.png) no-repeat #60605F; width:100%;  border-bottom: #f8a043 solid 3px;}

#header img {display:none;}

#top-nav {text-align:center;}

#top-nav ul {margin:0px; padding: 2px 0px;}

#top-nav li {display:inline; list-style: none; font-size: 1.2em; font-family:Denmark; font-variant: small-caps; padding-left: 1px;}

#top-nav a {color: #000000; text-decoration:none;}

#top-nav a:hover {color: #f8a043; text-decoration:overline;}

#search {width:120px;}

#searchbox {padding:72px 0px 2px 4px;}

#content {margin:0px; padding:0px;}

#content img {width:100%; padding: 0px;}

#content p {font-size:1.2em;}

#content ul {margin:0px; padding:0px;}

#content li {float:left; display:inline; list-style:none; width:181px; text-align:center; margin:0px; padding: 10px; border: #FFFFFF solid 2px;}

#content li:hover {background:#676666; border: #000000 solid 2px;}

#content li:hover h3 {color:#f8a053;}

#content h3 {font-size:1.6em; font-family:Denmark; margin: 1px 0px;}

#price {font-family:Denmark; font-size:1.4em;}

button {margin:5px; font-family:Denmark; font-size:1.4em;}

#footer {clear:both; color:#FFFFFF; background: #000000; margin-top: 50px; padding: 5px 0px 100px 0px; text-align:center; font-size: 1.2em; font-weight: 500;}

#footer a {color:#FFFFFF; text-decoration:none;}

#footer a:hover {text-decoration:overline; font-weight:900;}

#footer ul {margin:0px; padding:0px;}

#footer li {display:inline; margin:0px 2px;}

#product2 img {display:none;}

#product3 img {display:none;}

#product4 img {display:none;}



An Example of What Can Be Done

This demonstration gave an example of how you might convert your existing ecommerce website to a mobile-friendly store using basic CSS. Every store will have different challenges and tradeoffs to make, but optimizing your site for mobile customers can be done.

[practicalecommerce]