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.
Video: An Example Conversion
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.
<code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>
<head>
<title>Practical eCommerce Moblie Commerce CSS Demonstration</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper">
<div id="access">
<a href="">Skip to content</a>
<a href="">Skip to search</a>
</div><!--end access-->
<div id="header">
<a href=""><img src="images/logo.png" alt="Nashvlile Comics" /></a>
<div id="searchbox">
<input id="search" class="input-text" type="text" value="" name=""/>
<input type="image" alt="Search" src="images/search.png"/>
</div><!--end search-->
<div id="top-nav">
<ul>
<li><a href="">Marvel</a></li>
<li><a href="">DC</a></li>
<li><a href="">Darkhorse</a></li>
<li><a href="">Image</a></li>
<li><a href="">Verdigo</a></li>
<li><a href="">Minx</a></li>
<li><a href="">Zuda</a></li>
<li><a href="">Space</a></li>
<li><a href="">Pec</a></li>
</ul>
</div><!--end top-nav-->
</div><!--end header-->
<div id="content">
<ul>
<li id="product1">
<img src="images/ac11.png">
<h3>Action Comics #11</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis facliisis. </p>
<span id="price">$11,990.00</span>
<button class="form-button" onclick="setLocation('')">
<span>Add to Cart</span>
</button>
</li><!--end product1-->
<li id="product2">
<img src="images/ac27.png">
<h3>Action Comics #27</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis facliisis. </p>
<span id="price">$9,990.00</span>
<button class="form-button" onclick="setLocation('')">
<span>Add to Cart</span>
</button>
</li><!--end product2-->
<li id="product3">
<img src="images/ac1.png">
<h3>Action Comics #1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis facliisis. </p>
<span id="price">$2,102,990.00</span>
<button class="form-button" onclick="setLocation('')">
<span>Add to Cart</span>
</button>
</li><!--end product3-->
<li id="product4">
<img src="images/ac2.png">
<h3>Action Comics #2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis facliisis. </p>
<span id="price">$898,990.00</span>
<button class="form-button" onclick="setLocation('')">
<span>Add to Cart</span>
</button>
</li><!--end product4-->
</ul>
</div><!--end content-->
<div id="footer">
<p>Copyright 2009 Practical eCommerce, AKA Nashvlile Comics, All Rights Reserved</p>
<ul>
<li><a href="">Marvel</a></li>
<li><a href="">DC</a></li>
<li><a href="">Darkhorse</a></li>
<li><a href="">Image</a></li>
<li><a href="">Verdigo</a></li>
<li><a href="">Minx</a></li>
<li><a href="">Zuda</a></li>
<li><a href="">Space</a></li>
<li><a href="">Pec</a></li>
</ul>
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Privacy</a></li>
<li><a href="">Customer Service</a></li>
</ul>
</div><!--end footer-->
</div><!--end wrapper-->
</body>
</html>
</code>
Here is the style sheet for on-screen display.
<code>
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;}
</code>
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.”
<code> <link href="handheld.css" rel="stylesheet" type="text/css" media="handheld" /> </code>
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.
<code>
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;}
</code>
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.
5 Content Marketing Ideas for May 2024
ChatGPT vs. Gemini for SEO Tasks
SEO Takeaways from SGE's Partial Rollout
BNPL Competition Drives Wins for Merchants
Google Ad Updates Reflect New SERPs
New Ecommerce Tools: April 2, 2024
The Profitable Seller: Mastering Amazon FBA
