Making Your Site Mobile-Friendly
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. You can check out the page I made with initializr’s Bootstrap package to get some ideas (although I didn’t take it very far beyond the demo).
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.
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.