Tips for easier mobile browser development

It has been common practice for some time now to develop a mobile version of a website when creating the regular desktop site. With almost everybody having a smartphone and a sizable journey to the office every day, making your website mobile-friendly for those on the go seems like a no-brainer.

Whilst you can create entirely separate websites for this purpose, in most cases there is simply no real need. You want the mobile site to have the same or very similar functionality to your desktop site so that users can be familiar with your content and layout, no matter what platform they browse on.

For the developers, here are a few handy tips I have come across recently that have aided me in mobile site development.

Make use of your browser’s User Agent Override abilities. 

Modern browsers such as Chrome make this incredibly easy without the need for extra plug-ins. In Chrome for example, you can easily emulate an iPhone, iPad, Blackberry or Android device. 

Hidden in the bottom right corner of the browser is a little cog icon. By clicking that you can override the User Agent and also apply device metrics such as altered screen resolution. This emulation is not perfect (and in this instance you are only previewing Webkit browsers) but it is certainly enough for core development purposes.

But don’t rely on Overrides alone

As much as it would be nice to be able to solely rely on user agent overrides, they are not completely representative of the mobile device you are testing. For one thing you can’t get a ‘feel’ for the device – no dragging, swiping, and no testing that the icon you designed isn’t too small for fat fingers – so try to get a hold of a real device. Whip around the office during the lazy part of the afternoon and borrow an iPhone, a Samsung Android phone and a Nokia Microsoft and test, test, test. 

You can also obtain desktop emulators for some phones that may give better results than user agent override. Microsoft has an SDK for Windows 8 mobile. If you are a Mac user you can get an iPhone simulator as well.

And most importantly, use MVC4!

If possible, use Microsoft’s latest and greatest version of MVC .NET as it focuses on mobile development. Out of the box, you can have your Views automatically be targeted by mobile phones by simply naming them with the mobile convention. That is:

Desktop view: Content.cshtml

Mobile view: Content.Mobile.cshtml

MVC’s routing magic will automatically look for .Mobile versions of your templates when the user agent calls for it and only fall back to regular templates if it can’t find them. This fallback in itself is handy as it means you only need to make mobile templates for pages that truly benefit from an altered layout.

It is also a good suggestion for SEO purposes (when your site content will be the same on all platforms, that is) to NOT make use of a sub-domain for the mobile site. Using m.sitename.com for the mobile version of the site dilutes your Google ranking as they will see this as duplicate content. By using MVC4’s templates it would be more work to make a site work in a sub-domain anyway, and when the result is lesser than not doing it, why do it!