In this article we’re going to look at a variety of options for building simple mobile websites with CSS3. Note that these techniques won’t work with all phones but if you only need a mobile site for a few devices, these tips could to the trick.
Before we get started, be aware that due to the restricted viewing space, a mobile website is generally one column of data, with the exception of simple tables and small buttons side by side. It’s not a good idea to try and cram a lot of data into that space.
If you use PDF documents as part of your layout, I recommend reformatting them into a single column of data, no more than 480pixels wides. If you don’t despite using a PDF reading app, it may be hard to see on a mobile device.
For the sake of simplicity you could build an icons based layout, a windows based layout or a combination. there are some other choices, though these would result in a simple site that’s effective.
Here are some layout examples:
Here’s an example of an icons based layout. This was created using the GoMobi CMS)
This is an example of a page that you would see on a mobile device, using the GoMobi CMS.
Mobile Layout Tips and Tricks
Note that technology has been changing rapidly. Not that long ago there would have been a clearer deliniation between mobile devices and tablets. That line is being blurred with some of the new smart phones entering the markeplace. An example is the Samsung Note, which is a large phone that looks like a hybrid of a tablet and phone. This being the case, it would be wise to create layouts where the maximum pixel size would be 800 pixels for a tablet, rather than, say, 480 pixels for an iphone in landscape mode (this doesn’t take into account the iphone 5.
Another option is to build a mobile site using jQuery, which creates a mobile layout that’s really easy to use. Overall, this would be my favorite approach because you can build out a layout quickly. And after you’re done, you can make use of PhoneGap for building apps, such as the iPhone, Blackberry, etc.
Other Layout Options
If you don’t have Dreamweaver, you can still build a mobile layout, though it might not have the flexibiliyt that you’re looking for. Bear in mind that what you do won’t work on all mobile devices. Still, these tips will help you get a better result. At the end of this article, and for further reading, I’ve provided links to mobile website software and articles to get you started.
Here’s a bit of code, from Apple, designed for the iphone and the reason you would use it is to prevent zooming.
<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;”/>
Use simple HTML
Since you’re dealing with a narrow viewing space, you’ll want to use simple HTML. Here’s a code example from Adobe Dreamweaver CS6
<body>
<div data-role=”page” id=”page”>
<div data-role=”header”>
<h1>Page One</h1>
</div>
<div data-role=”content”>
<ul data-role=”listview”>
<li><a href=”#page2″>Page Two</a></li>
<li><a href=”#page3″>Page Three</a></li>
<li><a href=”#page4″>Page Four</a></li>
</ul>
</div>
<div data-role=”footer”>
<h4>Page Footer</h4>
</div>
</div>
<div data-role=”page” id=”page2″>
<div data-role=”header”>
<h1>Page Two</h1>
</div>
<div data-role=”content”>
Content
</div>
<div data-role=”footer”>
<h4>Page Footer</h4>
</div>
</div>
<div data-role=”page” id=”page3″>
<div data-role=”header”>
<h1>Page Three</h1>
</div>
<div data-role=”content”>
Content
</div>
<div data-role=”footer”>
<h4>Page Footer</h4>
</div>
</div>
<div data-role=”page” id=”page4″>
<div data-role=”header”>
<h1>Page Four</h1>
</div>
<div data-role=”content”>
Content
</div>
<div data-role=”footer”>
<h4>Page Footer</h4>
</div>
</div>
</body>
——————-
This results in a layout which looks like the windows based layout above
Conclusion
It’s important to realize that a mobile site isn’t designed to replace your desktop site. It’s purpose is to highlight the most important aspects of the desktop site and make the easy to read. Another option is to make it easy for customers to interact with the mobile site, to ask question, buy products, navigate to the business and call the business if they wish, directly from the mobile interface.
Other Software Options
When building mobile websites, you can make use of software solutions or create your own layouts using a combination of programs and the tips above. Here are some programs and tutorials to check out:
• GoMobi
• Mobify
• Mofuse
The original home of HTML tutorials. HTMLGoodies is a website dedicated to publishing tutorials that cover every aspect of being a web developer. We cover programming and web development tutorials on languages and technologies such as HTML, JavaScript, and CSS. In addition, our articles cover web frameworks like Angular and React.JS, as well as popular Content Management Systems (CMS) that include WordPress, Drupal, and Joomla. Website development platforms like Shopify, Squarespace, and Wix are also featured. Topics related to solid web design and Internet Marketing also find a home on HTMLGoodies, as we discuss UX/UI Design, Search Engine Optimization (SEO), and web dev best practices.
Property of TechnologyAdvice. © 2025 TechnologyAdvice. All Rights Reserved
Advertiser Disclosure: Some of the products that appear on this site are from companies from which TechnologyAdvice receives compensation. This compensation may impact how and where products appear on this site including, for example, the order in which they appear. TechnologyAdvice does not include all companies or all types of products available in the marketplace.
