How to Go Mobile

How to Go Mobile



We often speak with clients who are confused about what are their options for mobiles and tablets, how they should progress with a mobile site, and finally how they should be setting up or progressing their mobile presence.

Mobile needs not be a mystical or magical concept — there are only a few options that you can go with and the decision criteria can be boiled down to something simple and straightforward.

Option 1: Responsive Website

A responsive website is a website that adapts its display to fit whatever size of screen it is displayed on. Regardless of if you are on a tablet or a mobile phone you always get the optimised content for that size of screen. You can view examples what a responsive site is by looking at the Foundation site and resizing your browser window width to mobile size — watch the transition of the elements on the page as the page width shrinks.

Because the experience is optimised for each device, and that it’s only one codebase (there are multiple css rules called media queries and sometimes javascript support), its overall a better user experience AND easier to maintain on an ongoing basis. We strongly recommend this for all new websites, and for older websites it does make sense to redo them as responsive (although this is not a trivial effort, as it is essentially rewriting the theme of any existing website). Generally, a responsive website is the best mobile solution.

Leafcutter Development

Option 2: Mobile Website

A mobile website is a special website that is separate from you main website just for mobile users. You need to setup your main website to redirect visitors to this mobile optimised presence (via .htaccess rules or php code magic). When setup correctly, your mobile visitors reach this separate site and are able to experience your content in the way it should.

Note that a mobile website is quite different to being responsive — tablets and in-betweens don’t get the optimised experience (they will either get a desktop or a mobile experience, depending on how the redirects work). Therefore, mobile websites are best as a quick fix — as a landing page or a simple version of your website until you are ready to move to a fully responsive site.

Option 3: Mobile App

A mobile app has a completely different use case to a responsive website or mobile website.

Mobile Apps are for creating experiences that need to make use of device-only functionality (e.g. camera, microphone), that need to be used on an ongoing possibly push-notified basis (e.g. Words with Friends) or used offline (e.g. iBooks). They do not need to be used as simple informational apps — this is a job best left to websites.

Mobile Apps work best when you are trying to create a really smooth user experience or something that can only be done with that hardware. An example might be an app for a clothing brand that let users take photos and share them to gain in-store loyalty points — that functionality is really unique to a mobile platform versus a website.

Note that they are typically more work and thus more expensive (Android and iPhone or iPad), although they can create experiences and use cases that cant be matched by current web technology. Always go native for the top end experience — if someone discusses using Phonegap or Ionic be sure you understand the downfalls of that approach.

Leafcutter Mobile Web Development

In summary…

If you are building a website from scratch, go responsive. If you are looking at putting in a mobile solution quickly, use a mobile site then move to responsive when you have the time and funds. If you want to create an innovative, top-end mobile only experience, look at developing a native mobile application.

Mobile is not something to be confused over — it is a technology that once embraced will provide benefits to your users and your business.

James Hornitzky is the CTO and co-founder of Leafcutter Creative Digital.