This blog has moved here: woorkup.com | FOLLOW ME ON TWITTER @woork
Monday, July 21, 2008

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 :)

blog comments powered by Disqus
Kikka said...

Nice post and interesting topic!

James Bull said...

i really gotta say i love your site design. They way you've utilized your sites fonts in your screenshots is awesome. It really pulls the whole thing together and I am quite delighted, when my RSS reader tells me there's an update on your blog!

richard said...

Have you seen this?

http://developer.yahoo.com/ypatterns/wireframes/

Has some great stencils which are very helpful when designing for mobiles.

Alex said...

So I have a web hosting site that I use and working on setting up my website. I want to use these redirect scripts you are talking about.

I followed the links you posted for the redirect scripts but I dunno where to put them?

Do I just put the scripts in my root file on my server? Do I need to edit them?

Or is there something else I need to do? Not very familiar with server side stuff yet.

Let me know, thanks!

flux said...

great! I'm searching an article like this. Thanks!

Mike Robinson said...

I think that you should remove the tag cloud image from the mobile version as it serves no purpose. Designing for the mobile means you should be thinking about the context that your site will be used. A mobile user doesn't need a big fancy graphic like that, it would be better to have the logo and move straight into the posts.

There was an article in last months .net magazine that detailed the importance of this, as well as how to progressively enhance the design for basic to advanced mobile devices.

Apart from that, the end result is nice and effective. Most of the extras that aren't needed, such as the contents of your sidebar, have been removed. Nice article.

Jaswinder Virdee said...

awesome! excellent post

Amit Agarwal said...

Thanks for explaining it so well.

There's another option for bloggers who want something quick without any coding - use Google Reader.

shopping cart said...

Nice and informative post. The layout you have suggest for the mobile version of site/blog is best. Fact is that they have mostly small screen having length more than width.

Bleyder said...

Thanks for this great post.

Andy said...

OR you create an alternate CSS file for handheld browsers which you apply by either using the media attribute on the link tag, or by using the media rule in the CSS.

mcd said...

Or, you can just install the WPtouch iPhone Theme (http://wordpress.org/extend/plugins/wptouch/) plugin for use with your Wordpress-driven site.

Anonymous said...

Very Usefull

Anonymous said...

Any reason to not just use media="handheld" and create a different stylesheet for the mobile browsers? This would seem the sane way to do it.

Janko said...

Excellent subject to cover!! I've been thinking for some time to create mobile theme for my blog.

Nikhil Kulkarni said...

.. off topic

Can you tell me which software you used to annotate the images in this post ??

Anonymous said...

Nice work man keep it up!

ze said...

Very Good Post.
I Love You :D

Nancy said...

Superb Posting and very interesting topic!
Just visit in my site:
Contract Mobile Phone Deals

Paul said...

For a quick fix you can also use Mofuse.com, Widsets.com, Mippin.com's Mippin Maker, and Squace.com

I wrote a longer post about this here

Alex said...

I noticed you use the iPhone as the example device that you would be showcasing your mobile website on.

However, you fail to mention everything that entails getting your website to look correct on an iPhone screen.

For people developing websites for the iPhone, check out these helpful webpages

How to make an iPhone icon for your site to appear when adding it to the homepage of your iPhone:

http://www.cartoonbarry.com/2008/01/how_to_make_your_own_iphone_we.html

Emiliano said...

Thank you for all this information, it does come very handy!

In my experience, I have worked with tables for devices running windows mobile (which is a royal pain in the behind), and it seems to be a good way to make everything fall in place. Web design for mobile devices is a new field but I'm sure 2009 will be the year it explodes, so let's all get ready for it!

I just started on this, you can see some of my work at WebDesignForMobileDevices.com, hope this helps anyone!

Best wishes for 2009, keep posting great things like this!

internet marketing services said...

What a post! Thanks for sharing the codes and all the tips and tricks. Im glad i came across your page. thanks a lot.

Ben said...

Thanks for all of you help. this was a great look as mobile design!

Anonymous said...

Cool stuff, thx.

Rosh Ravindran said...

Nice post... thanks

Ruadhan said...

There is a new Wordpress mobile plugin at mobiForge. It contains device detection, barcodes, transcoding, and even a mobile ad widget. Get it here.

Pepe said...

Muchas gracias por la informaci├│n, me ha sido muy ├║til y me ha servido para implementar en uno de mis sitios web.

Saludos

Tim said...

That was very informative and will help
My Site available to mobile users thanks mate.

A wonderful,informative and very helpful post!

Bryan said...

ohhhhhh veryyy nice post. Very helpful. But im still searching how to redirect mobile user to my m.domainname.com ???

  • Twitter Follow woork on Twitter
  • RSS Feed Subscribe to stay up to date
  • Podcast Coming soon...
  • 0 delicious lovers save
Share your links. Do you want to suggest any interesting link about web design or tech news? Submit your link.
Submit a News