Creating a mobile version of a web site
Posted on October 4, 2009 by Frederik Vig in ASP.NET, CSS, EPiServer, Web designWhen building web sites we has developers or designers have to take into consideration all the different types of devices that can be used to access the web sites we create. Not just PC or Mac with Internet Explorer, Firefox, Safari, Opera, Jaws, or any other browser. But also mobile devices, like iPhones, iTouch, Nintendo Wii.
Especially in recent years, after the launch of the iPhone, accessing online information through a mobile device has become more common. This is something that is going to increase even more in the next few years.
Below I’ve listed some resources for creating a mobile version of a web site that I hope you’ll find useful.
Mobify
Mobify is a free online service that lets you convert an existing web site into a mobile version. This is done by selecting the content you wish to display for mobile users, customizing it by changing the display order and tweaking the CSS. The last step is to publish it by creating an url and adding a little JavaScript to your page.
Check out How to implement a mobile version of your blog in three simple steps for a quick introduction.
Mobify is quick and easy way to great a mobile version, but you cannot change the HTML code and you’re stuck with the options the service offers. It can sometimes be better to create a mobile version from scratch.
Update 05.10.2009
Igor Faletski, founder of Mobify, was kind enough to send me an email explaining the use of HTML blocks to add more static content. While this is a great feature I still miss the ability to update my existing markup and easily see what classes and ids that the mobile version uses. Now I have to test and tweak a little before I get the right id or class when changing my CSS.
Creating a mobile version with ASP.NET
Although services like Mobify are great, sometimes you need full control. On mobify.me it says that Mobify supports over 4500+ different mobile devices. This is a lot of different devices to support! Fortunately there is an open source project on CodePlex that has done most of the work for us. It is called Mobile Device Browser File and consists of a browser file with information about what the different mobile devices support (Java, JavaScript, Images, Flash etc). This project is pretty active with new devices added all the time.
You simply download the browser file and add it to your projects App_Browser folder. After you’ve done that you’ll be able to use Request.Browser[“IsMobileDevice”] to detect if the device accessing your page is actually a mobile device. There are also 64 other capabilities that offers a lot of different detection functionality. You can for instance check if the device supports Flash, JavaScript, Color, CSS background images etc.
If you’re using ASP.NET MVC check out Scott Hanselman’s post about how he implemented this with Nerd Dinner.
If you’re using ASP.NET web forms there are a couple of approaches you could take. You could use a different master page for the mobile version by adding some detection code to your base page and switching the master pages in the Init method. Or you could register a custom HttpModule that redirects the user to a different page if it is a mobile device.
Recently I stumbled over another library to detect the mobile device, it is called 51Degrees.mobi. Here is the article that describes how to use it.
iPhone
Apple iPhone uses the Safari browser as its default browser. The great thing about that is that CSS3 stuff like border-radius, multiple background images, canvas and more are supported.
If you like to simply target iPhone users you can do so by simply adding a custom stylesheet with this code.
<link media="only screen and (max-device-width: 480px)" href="iPhone.css" type="text/css" rel="stylesheet" /> |
For more information I recommend reading A List Aparts Put Your Content in My Pocket and checking out the iPhone Dev Center.
WordPress
For WordPress you have a nice plugin called WPtouch, that will help you easily add a mobile view for iPhone, iPod, Android, Storm and Pre. You just need to install and activate the plugin, and you’re ready! You can easily customize it to your needs as well.
Other resources
More and more resources are being added each day. Below are some I’ve bookmarked and that have helped me in the past.
- Quirksmode great set of mobile tests
- Mobify easily turn an existing site into a mobile view
- Cameron Molls book about mobile web design
- Mobile Device Browser File
- W3C Mobile Web Initiative
- W3C Mobile Web Application Best Practices
- Test your website for mobile compatibility
Ben Morris says:
Post Author October 5, 2009 at 19:37Have you had a look at WURFL as an alternative for the mobile device browser file? It has a more active community and appears to be updated more regularly with a wider range of devices.
http://wurfl.sourceforge.net/
Frederik Vig says:
Post Author October 5, 2009 at 19:47Hi Ben
No I haven’t. Thanks for sharing the link will definitely check it out!
Frederik
Martin S. says:
Post Author October 6, 2009 at 10:53Hey man, great post! The mobile web users are indeed a rising force, the earlier we start to adopt to the changed rules, the earlier we gain success.
mobify.me indeed looks interesting too!
Gilbert E. says:
Post Author October 26, 2009 at 17:48Hey guys, im kinda new to asp.net and would appreciate some help on a question that is probably very simple.
Where would i put the Request.Browser[“IsMobileDevice”]? Would it be at the Page_Load of every page?
I would apreciate any imput.
Frederik Vig says:
Post Author October 26, 2009 at 18:08Hi Gilbert
The easiest would be to use an HttpModule for this.
http://geekswithblogs.net/flanakin/articles/ModuleHandlerIntro.aspx
http://www.asp.net/LEARN/videos/video-147.aspx
Hope this helps.
Frederik
Gilbert E. says:
Post Author October 26, 2009 at 18:19This is great! Thank you very much for the quick reply.