Making Your Site Mobile-Friendly

Be advised This post is quite old (19 Nov 2012) and any code/references may be out of date. Proceed with caution.

There's no refuting the statistics - over 20% of all web traffic comes from mobile users, and almost everyone agrees that this figure will grow.

Mobile users can use standard web sites, but mobile-friendly sites are going to have better click through, more page visits, and more time spent on pages (there's probably a cooler digital marketing term for this, but you get the idea).

Part of the pain of mobile-friendly sites is that you must accommodate many different screen sizes and aspect ratios. Check out this comparison from Phone Size:

Very different from one to the next. And realistically, this is a very small sampling of phone sizes.

Let's walk though a couple scenarios and talk about solutions.

Starting From Scratch

If you have no web presence at all, you have the advantage of a clean slate. You don't have to try to retrofit your existing content and code to work on various screen sizes. If you have no technical background, plan on hiring a web developer or contracting out to a firm. If you are like me and can code well enough to get yourself into trouble, check out initializr, specifically the Responsive and Bootstrap package demos. initialzr provides frameworks for building mobile-friendly sites - if you are on your computer, try re-sizing your browser window so it's about the size of a smart phone screen. You'll see that the layout of the page will actually change based on the window size. This is what's called a 'responsive layout' or 'responsive web design.' The advantage is you build your site once, and it should work on any device. Obviously, as you customize the frameworks and add your own content, you have to be careful not to violate the framework such that it can no longer adapt to the window size.

Re-directing to a Mobile-Friendly Page

This approach is a very sharp double-edged sword, depending on how you do it. The advantage is clear - you don't have to butcher your existing site to create a mobile friendly page.

Re-directing browsers to different pages based on their browser is quite easy. It is even easier if you hop over to Detect Mobile Browsers' web site and have them generate the code for you! I've used their Javascript code for a redirect in the past, and it was dirt simple. I've only used/tested their Javascript code, and it didn't actually work out-of-the-box. When I deployed their code, it redirected mobile browsers to THEIR site. I had to add the URL to my mobile site to the code in place of the default value of their URL. Just a heads up, you may need/want to double check their code. Otherwise it works great!

The disadvantage of using a redirect - be prepared to double the amount of web work you do going forward. You now have two totally disparate sites to maintain. You may be able to re-use some of your CSS styles from your original page, but unless you get clever about how you populate the content of your sites, you could be doing a lot of duplicate work. Look for opportunities to use server-side code to inject your text/content into pre-defined areas in both sites to limit the impact.

Retrofit an Existing Site to be Mobile-friendly

Doable, but obviously this is going to heavily depend on how your site is structured now, so I can't give you many specifics. Stick with percentages for sizing components, avoid fixed pixel counts. When dealing with fonts, try using em for sizing, so that size is always relative. Keep in mind that mobile browsers have two views, landscape and portrait, which may vary heavily by device (both in raw value and aspect ratios). For forms, try to stick with standard HTML input tags, as all mobile devices can handle them gracefully.

Hope some of those thoughts and resources help, and please post comments if you have any questions.