By James Rosewell

The mobile web is huge with 1 billion active mobile broadband subscriptions and is fast becoming the primary method of accessing the web in the western world. In developing countries most people’s first experience of the internet is via a mobile device. If not today, then very soon, your business will need to optimise for mobile and tablets.

Designers should start by considering the context and purpose of the mobile and tablet web site and create separate designs unconstrained by the existing web site. For example; a retailer’s web site will place greater focus on finding nearby stores than the big screen version. Once the new designs have been created they can be compared to the existing web site considering the differences in Navigation and Page Layout. If they’re the same, typically the case with tablets and desktop, CSS3 can be used to alter the layout of the page. If they’re different, typically the case for mobile phone, a solution based on shared content, but logically separate sites will be required. The following diagram shows the 3 major approaches.

clip_image002

Once a high level conceptual design has been created the next challenge becomes implementation. How does the web server know which type of page or site to provide to the specific device? 51Degrees.mobi provides the answer.

The easiest way to add 51Degrees.mobi to a web site is via NuGet and searching for 51Degrees.mobi. Once installed properties such as Request.Browser.IsMobileDevice, or Request.Browser.ScreenPixelsWidth will be enhanced with more accurate data. New properties will be available as key names of the Request.Browser object. For example; Request.Browser[“LayoutEngine”] will return the layout engine used by the browser as a string. The solution is open source and licenced under the Mozilla Public Licence 2.

More properties are available via the Premium version including IsTablet, physical screen size, input methods, and many more.

51Degrees.mobi also provide optimisation tools to efficiently use the bandwidth and computing resources available. For example; an image which is 640 pixels wide and displayed on a device which is 320 pixels wide does not need to be sent as a 640 pixel wide image. 51Degrees.mobi’s Framework solution will automatically resize images on the server, working in conjunction with the device, to optimise bandwidth resulting in a faster user experience which is particularly noticeable in lower bandwidth situations.

51Degrees.mobi is regularly used by Microsoft Evangelists such as Scott Hanselman to create great mobile web sites. Find out more at the web site http://51degrees.mobi. We’ll be hosting a workshop on mobile web design for the Microsoft platforms in the near future. To register your interest please navigate to http://51degrees.mobi/AboutUs/ContactUs. The 1st 5 people to contact us will get a voucher for a 1 year subscription to Premium device data.

clip_image001James Rosewell
Founder & CEO, 51Degrees.mobi

http://51degrees.mobi

Prior to starting 51Degrees.mobi in 2009 James spent 10 years running major mobile programmes for Vodafone, plus founded and sold a mobile marketing business. He’s passionate about delivering great user experiences cost effectively to all mobile devices.