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 ASPIf 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 scrollsBut 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.
- 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)
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">
<!-- ------------ -->
<!-- Page Body -->
<div id="page-body">
<!-- Your post here -->
<!-- ------------ -->
<!-- Page Footer -->
<div id="footer">
<!-- 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">
<!-- Your post here -->
<!-- Your post here -->
<!-- ... -->
</div><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><a href="tag2">tag2</a>,
<a href="tag3">tag3</a>
<!-- Your post here -->
<!-- Your post here -->
<!-- ... -->
<!-- ------------ -->
<!-- Page Footer -->
<div id="footer">
<a href="index.html">Home</a> |
<a href="mailto:youremail@yoursite.com">Contact me</a>
</div><a href="mailto:youremail@yoursite.com">Contact me</a>
...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;
}
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 PluginIt'all! For other suggests or to add interesting links about this topic please add a comment :)
Comments
Nice post and interesting topic!
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!
Have you seen this?
http://developer.yahoo.com/ypatterns/wireframes/
Has some great stencils which are very helpful when designing for mobiles.
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!
great! I'm searching an article like this. Thanks!
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.
awesome! excellent post
Thanks for explaining it so well.
There's another option for bloggers who want something quick without any coding - use Google Reader.
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.
Thanks for this great post.
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.
Or, you can just install the WPtouch iPhone Theme (http://wordpress.org/extend/plugins/wptouch/) plugin for use with your Wordpress-driven site.
Very Usefull
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.
Excellent subject to cover!! I've been thinking for some time to create mobile theme for my blog.
.. off topic
Can you tell me which software you used to annotate the images in this post ??
Nice work man keep it up!
Very Good Post.
I Love You :D
Superb Posting and very interesting topic!
Just visit in my site:
Contract Mobile Phone Deals
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
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
Post a Comment