Creating a mobile version of a web sitePosted on October 4, 2009 by Frederik Vig in ASP.NET, CSS, EPiServer, Web design
When 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.
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.
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
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.
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 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.
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