How to Build a Simple Mobile Website with CSS3

By Nathan Segal

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

In an earlier article, I spoke about how I extended the power of the GoMobi mobile website interface (and I've included the file here, which contains an HTML document, some basic CSS and a logo).

In this case, I used the XHTML Mobile 1.0 DOCTYPE which looks like this:

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
</body>
</html>

Untitled Document

This worked perfectly for my layout (with the CSS linked) but it didn't have constraining elements in the layout for mobile devices, so if you tried to do a demo on a computer as opposed to a smart phone, the layout would flow across the whole screen. It wasn't a perfect solution, but it worked for the purposes I had in mind.

The CSS for the above layout looks like this:

@charset "utf-8";
/* CSS Document */

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
}
p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
}

td {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
}

th {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
}

.medium {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px; font-weight: bold;
}

.mediumwhite{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: bold;
  color: #FFF;
}

.big {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px; font-weight: bold;
}

.xbig {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    font-weight: bold;
}

Creating Flexible Layouts

If you want to build moble layouts with a lot of flexiblity and options, I recommend using Adobe Dreamweaver CS6.

With Dreamweaver you have a couple of routes that you can take, you can build a website, tablet layout and mobile site using Fluid Layouts. This type of layout uses two CSS files and one JavaScript file to make the layouts display correctly. To learn more about how this works, read Fluid Layouts In Adobe Dreamweaver CS6

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:

Adobe Dreamweaver CS6

GoMobi

Duda Mobile

Mobify

Mofuse

bmobilized

wirenode

Flexible Mobile First Layouts with CSS3



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •