Tips to design your site for mobile devices

Some day ago my friend Lucas asked to me some suggest to design a mobile version of his blog. So, in this post I want to illustrate some simple tips about how to develop a mobile version of your site such as: choosing an URL address for your mobile site version, using a redirect script for mobile devices, designing a mobile-friendly layout using CSS and HTML and (if you are a WordPress user) using a free WordPress plugin to develop your mobile site quikly.

Choose an URL address for the mobile version of your site
First step is choosing an URL address for the mobile version of your site. You have some options, for example, you can create a folder (mobile) in the root of your site so your mobile version will be publishet at this URL: http://www.yoursite.com/mobile.

...or if you can add custom sub domains to your domain, you can use an url like this http://m.yoursite.com or http://mobile.yoursite.com which links to the folder mobile which will contain all files of your mobile site version.


Redirect script for mobile devices
The second step is creating a redirect script for mobile devices. It's not necessary, but it's useful to redirect automatically all traffic coming from mobile devices to the mobile version of your site. For more info about this topic take a look at the following links:

Redirect a mobile/PDA to a "lite homepage"
Redirecting visitors who visit a standard webpage to a mobile version

...and in particular if you are a PHP, ASP programmer take a look here:

Device detection using PHP
Device detection using ASP

If you know other interesting links, please add a comment :)


Simple page structure mobile-friendly
What is the better layout style for your mobile site version? I suggest you to use a typical one-column layout which is very popular for this kind of sites and make them more usable and readable for mobile users. YouTube, Facebook, Twitter , for example, use this layout one-column for their mobile versions:

Using this layout is a good practice but not a rule. In fact, if you surf the web using a mobile version of Internet Explorer, on Windows Mobile based devices, you can choose some layout options which the browser uses to "arrange" the content of the page to the device screen width (independently from the original page layout):

- Default, narrows content width to reduce horizontal scrolls
- One Column, forces all content to fit in a single column
- Desktop makes no change to the content (the site looks exactly how if you used a desktop version of IE)

But in general, the result can be bad if your site layout is too complex. To avoid this problem, you can think to spend a little bit of your time to design an optimized mobile version of your site using a more device-friendly one-coloumn layout how I illustrated in the following sections.


A proposal for your mobile site
If you have a blog, your mobile devices-friendly layout for your site can be something like this:

...with the following elements: header, body and footer. Header contains the site logo, body contains your post (or a summary) and footer contains other info about your site.


HTML and CSS basic code
You can use Dreamweaver or your preferred editor to develop the code. HTML code is very simple and can be something like this:

<!-- ------------ -->
<!-- Page Header -->
<div id="header">

<a href="index.html"><img src="logo.png" border="0" /></a>

</div>

<!-- ------------ -->
<!-- Page Body -->
<div id="page-body">
<!-- Your post here -->

<h1><a href="post1.html">Title of your post</a></h1>
<p>A summary of your post</p>
<p class="tag">

<a href="tag1">tag1</a>,
<a href="tag2">tag2</a>,
<a href="tag3">tag3</a>

</p>
<!-- Your post here -->
<!-- Your post here -->
<!-- ... -->

</div>

<!-- ------------ -->
<!-- Page Footer -->
<div id="footer">

<a href="index.html">Home</a> |
<a href="mailto:youremail@yoursite.com">Contact me</a>

</div>

...and CSS code could be something like:

/* -- Reset default style -- */
body, h1, p{border:0; margin:0; padding:0;}
body{font-family:Arial, Helvetica, sans-serif; font-size:12px;}

/* ------------ */
/* HEADER */
#header{
padding:6px;
background:#444444;
}
/* PAGE BODY */
#page-body{padding:10px;}
h1{font-size:14px; font-weight:bold;}
h1 a:link, a:visited{color:#0033CC;}
.tag{font-size:12px; margin-bottom:20px;}
.tag a:link, .tag a:visited{color:#999999;}

/* FOOTER */
#footer{
padding:6px;
border-top:solid 1px #DEDEDE;
color:#999999;
font-size:11px;
}
#footer a:link, #footer a:visited{
color:#666666;
}

The result is something like this:

...naturally this is only a very basic proposal which you have to modify adding images, your logo, changing colors, font-family and add some lines of PHP, Coldfusion, ASP or other code to display dinamically all your post. For example with some lines of CSS code you can obtain a result like this:

You can also add a search field in the header of the page to help your readers to find quickly what they are looking for in your site. I also suggest to be simple and don't add useless element such as social network buttons (such as delicious tagometer or digg) or other widgets which use javascript. This is only a mobile version of your site and it have to be simple, usable and readable. Nothing else!


Issue with fonts using devices with Windows Mobile
If you use a mobile device with Windows Mobile, you don't have installed by default fonts like Arial, Verdana, Georgia... So to display correctly a web page you have to copy into your device some of the most used fonts in web design. Click on Explorer and copy from your PC (or also from your MAC) these fonts into the folder Windows > Fonts in your mobile device:

- Arial
- Verdana
- Georgia
- Trebouchet MS
- Times New Roman

WordPress Mobile Plugin
If you are a WordPress user, and you want develop your mobile site quickly, you can download WordPress Mobile Plugin, a free to download plug-in developed to make your blog mobile friendly.

Download Wordpress Mobile Plugin

It'all! For other suggests or to add interesting links about this topic please add a comment :)