2010 will be the year of consolidation of internet usage via mobile devices. According to internetnews.com, which reports a Gartner analysis, mobile device sales will rise (9%) in 2010. This scenario will impose to internet companies, online newspapers, bloggers, to provide mobile versions of their websites to simplify the fruition of their contents and enlarge their audience. In this post I prepared a roundup of code snippets inspired to some mobile versions of popular websites (such as Facebook, Flickr, The New York Times, Digg, Google, …) that illustrate some HTML best practices to develop perfect websites for iPhone and mobile Devices.
Facebook Touch for iPhone
Let’s start with Facebook Touch for iPhone (touch.facebook.com). The iPhone version of Facebook is characterized by single-column structure (with fluid width) that contains three main sections: header, main content and footer.
The header section contains the top bar, which includes the notification icon, Facebook logo and search, and the menu bar that contains four links (home, profile, friends and inbox).
The main content section contains information about the current page (home, profile, wall, info…).
The footer section contains links to select language, switch to full site, logout, and copyright information. This kind of HTML structure (single-column, fluid width, three main sections: header, main content and footer) is widespread in mobile web design because it allows to organize content in a way that fits perfectly most mobile screen sizes. Here is the sample HTML code you can use to implement this layout:
<div id="header">
<div id="topbar">...</div>
<div id="menubar">
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="profile.html">Profile</a></li>
<li><a href="friends.html">Friends</a></li>
<li><a href="inbox.html">Inbox</a></li>
<ul>
</div>
</div>
<div id="content">
<div id="page_menu">...</div>
<div id="page">...</div>
</div>
<div id="footer">...</div><div id="header"> contains <div id="topbar"> (notification icon, Facebook logo and search) and <div id="menubar"> (home, profile, friends and inbox).
<div id="content"> contains <div id="page_menu" (wall, info, photos) and <div id="page"> (current page loaded, in this case the Wall of my Facebook profile).
Flickr Mobile
Flickr mobile (m.flickr.com) also implements a single-column layout that presents the same characteristics of Facebook Touch layout (one column, fluid width, three main sections: header, main content, footer).
The header section contains Flickr logo, sing-in information and the navigation bar.
The main content section contains information about the current page (in this case the Flickr home page).
The footer section contains some information about Flickr and links to switch to original site, download the iPhone app, report abuse and sign-out.
Here are some suggestions to implement a perfect navigation bar for mobile devices. I suggest you to use tab-based navigation, tabbed links with relative width and the display CSS property set to block.
Here is the typical HTML code to implement a standard navigation bar:
<div id="nav">
<ul>
<li><a href="/activity">Activity</a></li>
<li><a href="/you">You</a></li>
<li><a href="/contacts">Contacts</a></li>
<li><a href="/more">More</a></li>
<ul>
</div>
And here is a sample CSS code:
#nav ul li {
float:left;
width:25%;
text-align:center;
...
}
#nav ul li a {display:block;}The New York Times Mobile
Now let’s take a look at the mobile version of The New York Times newspaper (mobile.nytimes.com).
The HTML structure is a little bit more complex than the previous websites but it maintains the same characteristics and sections of Facebook and Flickr layouts (one column with, fluid width, three main sections: header, main content, footer).
The header sections contains The New York Times logo, date, weather, financial information and the search field.
The main content section contains latest news. Below the main content section there are other sections organized by topic (Technology, U.S. News,…) with a list of links.
The footer section contains links to download the iPhone app, send feedback, copyright information and an user login form.
Just a note for sections below the main content section. You can use the <h3> tag for section titles and the <ul> tag for the list of links.
<h3>Technology</h3>
<ul>
><li><a href="link_1.html">Title 1</a></li>
><li><a href="link_2.html">Title 2</a></li>
><li><a href="link_3.html">Title 3</a></li>
<ul>
Time
The layout of the mobile version of Time (mobile.time.com) is similar to The New York Times.
The header section contains Time logo and a button with a link to switch to standard site.
The main content section contains a list of Top Stories. Below this section there are other sections organized by topic (U.S., Quotes of the Day, Photo Essays,…). You can use the <h3> tag for section titles and the <ul> tag for the list of links.
The footer section contains links to Help, About Time, Subscribe to Time, CNN International, and copyright informations.
Digg
The mobile version of Digg (m.digg.com) is clean and minimalist.
The header section contains a top menu (digg logo, Topics, Login) and a navigation bar.
The main content section contains the most recent stories (digg counter and title) and pagination buttons.
The footer sections is really simple and just contains the link to the regular version of Digg.
Here is the sample HTML code you can use to implement a Digg-like layout for mobile devices:
<div id="header">
<div id="h_menu">...</div>
<div id="nav">...</div>
</div>
<div id="stories">
<div class="story">...</div>
</div>
<div id="pagination">...</div>
<div id="footer">...</div>Just for curiosity, the mobile version of Digg uses tables for the website layout! Here is the code used for the top menu:
<table>
<tr>
<td class="h-logo"><a href="/"><img src="/img/logo.gif"/></a></td>
<td class="h-menu">
<a class="settings" href="/topics">Topics</a>
<a class="button" href="/login">Login</a>
</td>
</tr>
</table>
As you see, it uses the <table> tag to separate links in the top menu. Using tables for design the structure of HTML pages is not a good practice but, I have to admit, in some cases is simpler and quicker than creating floating elements.
Mixx
The HTML structure of Mixx (i.mixx.com) is similar to Digg but it’s simpler.
The header section contains Mixx logo and the navigation bar.
The main content section contains a list of stories. No footer is present.
Google Mobile
The mobile version of Google is a great balance between simplicity and perfect usability.
The header section contains the navigation bar and Google logo.
The main content section contains the search field and short messages with the latest news about Google services.
The footer section contains links to iGoogle, Settings and Help.
It’s interesting to take a look at the multi-level navigation bar present in the Google home page. When you click on the link “more” it appears a list that contains links to other Google services. The following image illustrates an example of typical HTML structure you can use to implement a multi-level navigation bar like that:
Here is a sample HTML code you can use to implement a multi-level navigation bar simply using nasted <ul> tags:
<div id="header">
<div id="nav">
<ul>
<li><a href="/web">Web</li>
<li><a href="/image">Images</li>
<li><a href="/News">News</li>
<li>More
<ul>
<li><a href="/Maps">Maps</li>
<li><a href="/Readers">Readers</li>
<li><a href="/Translator">Translator</li>
</ul>
</li>
</ul>
</div>
</div>Bing Mobile
The mobile version of Bing (m.bing.com) tries to replicate the simplicity of Google mobile, but the alignment difference between some elements make the page less neat than the Google home page (the bing logo is aligned to left, navigation bar and search field are centered, location settings and “Bing for iPhone” message are aligned to left, footer links are centered).
Mashable Mobile
I want to conclude this roundup of websites with the mobile version of Mashable (mashable.com) that can be useful to take inspiration for the mobile version of your blog.
The header section contains Mashable Logo, search field and the navigation bar with links to main channels.
The main content section contains a list of most recent posts.
The footer section contains copyright information and a link to switch to standard site.
Frameworks for iPhone Developers
Here is a small list of my favorite Frameworks to develop websites for iPhone:
IUI is a User Interface Framework for Safari development on iPhone that allows you to make WebApps that look and feel like iPhone native application.
jQTouch is a jQuery plugin for mobile web development on the iPhone, iPod Touch, and other forward-thinking devices.
jQuery iPhone UI is a JavaScript library for prototype iPhone interface on web pages.
What a beautiful post Antonio! It’s rare to see posts with detailed illustrations like this. Thank you so much. I’m pretty new to this so please excuse my silliness, but is there any difference in rendering HTML/CSS between various browsers on mobile devices nowadays?
@Luu Xuan Hao: There are enormous differences unfortunately but it all depends on the user you want to target. You can head on to http://www.quirksmode.org/m/table.html for a full compatibility table although things are changing fast in the mobile world (we may even see Blackberry switching to a Webkit browser fairly soon)
I am planning to do a mobile site for me and now you posted this. Thanks God. You have gone into the details I am looking for. This will be very helpful to me. Great.
Great post! The awesome practices are from popular websites!
Off course this post worth a thumb-up!
Thanks Lam :)
Fantastic. Great reading to start 2010!
Mobile development will be the thing.
Great post and very detail for me. Thanks so much Antonio… I will try check compability with device like your post…
Great article. I used Mobify.me to create my own mobile version, but I’m stuck at trying to get commenting to work (not possible, most likely). I also have to introduce spacing, etc. as it is quite dirty right now. Your examples, analyzed in-depth, are quite inspirational.
Any plans to install Disqus on WordPress? I miss it.. Also, I could’ve twt’d my comment easily..
The right post at the right time. I recently updated the design of my website, and was planning to come up with a mobile version of it. Thanks to your post, I can plan ahead now.
Great roundup. Thanks for the post.
I just went through the process of learning all this and developing my own unique code for the iPhone after having several clients requesting it. Wasn’t too bad of a process (few days at max).
After playing with all of the above frameworks I can say that the only one really worth spending time on is jQTouch. IUI and jQuery iPhone UI are basically worthless, in my opinion. Notice that IUI hasn’t never gone beyond version 0.40, and there is a reason for that (I would say it has potential in the future). And jQuery iPhone UI is very restrictive in nature, not allowing that much flexibly in the development and design.
I found jQTouch to be quite useful. It functions great and it is definitely quite impressive as far as eye candy goes. My only gripe about jQTouch was how you basically had to start from scratch on the mobile website. By the time I found jQTouch I was 80% done with my mobile site and it was already structured in a very unique way. Most jQuery plugins are quite flexible and allow you to implement them on just about anything. However jQTouch restricts how you build the site, and essentially makes you have to go their way or the highway (but not as much as jQuery iPhone UI).
My recommendations. Either start with jQTouch from the start, or develop your own from the start.
Its a beautiful post Antonio
Hi Antonio, great article. The link to the NY Times is broken though.
Great list. For so long, mobile browsing has been touted as the future. Now its here and mobile optimisation is being ignored by a lot of large organisations where a mobile access site would be crucial…
All the frameworks Antonio offers are for iPhone optimization.
This is not a good idea, mobile versions should be mobile for every mobile device, not only iPhones.
Be careful with this.
It’s correct, I agree with you.
You need a dedicated iPhone variant. And it should be considered to be on the upper end of the degradation process. You will end up getting up to 80% of your traffic from iPhone users, followed by iPod Touch (Android devices handle iPhone sites fairly well anyway) – if you compromise those user’s experience, they will probably not return.
Every other device is second-tier, that’s just the way it is. I am not saying you should ignore them, but it makes sense to concentrate on the demographic actually using the mobile web comfortably (unless you are offering a public service that needs to be accessible from even an eight year old Sony Ericsson K550).
really nice tips and you highlight some good points. the mobile version of flickr is really cool, and tools like iWebKit can only make it even easier to build mobile/iphone websites!
I just love mobile websites! I’ve done some using mobify.me site and just love it!
Antonio I expect a mobile version of woorkup after reading this tutorial
I was curious about an issue related to this topic, maybe it’s a right time to ask.
When using a fluid width for the mobile site, why don’t they set a “max-width” for the container?
Say I’m using a device with a very large screen, (but which still identifies itself as a mobile device) do I really need the full horizontal width?
Or say… I’m on a computer, but for some reason I’m being served the mobile version of a website. Same thing–I get a lot of really wide disproportionate divs.
Wouldn’t something like “max-width:600px;” help?
Oh, yeah… for all you WordPress folks out there there’s a great stupid simple solution called WPtouch ( http://www.bravenewcode.com/wptouch/ ). It’s a WP plugin that acts as a mobile theme when your visitors are on iPhone, iPod, Android, Storm or Pre.
It packs quite a few options and it’s simple to set up (did I mention that?)
Yay! My vote for the wptouch plugin. It works really well if you have a WordPress blog. I use it on a couple of websites of mine and am pretty satisfied with the results. Also cache friendly (if you use wp super cache or other similar plugins).
Great tips :-)
thanks very much, for this article. Grazie Antonio :)
I definitely wanna check out the jQuery iPhone UI
Great tutorial, in the future developers will defnitely need to develop every website with a smartphone in mind. Thanks for the article!
Great Read!
Nice tutorial to read !
Fantastic post – very logical and well thought out. An impressive and useful posting. Thank you!
wow~!
thanks so much~!!!!!
Awesome post !! very helpful
This was an interesting read. I’m currently using a WordPress Plugin for iPhones but ideally would like to delve into some more depth in the future – this is a very informative post.
Is there any any iphone web deveolpment tool avilable for .net?
very useful but i am still hitting the brick wall where the pages i make never fit the screen on my htc desire. any help on getting the width right would be much appreciated