How to Build a Simple Mobile Website with CSS3

January 22, 2013

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.

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:

• Adobe Dreamweaver CS6

• GoMobi

• Duda Mobile

• Mobify

• Mofuse

• bmobilized

• Flexible Mobile First Layouts with CSS3