Home > How-to Guides > Making Your Site Mobile-Friendly

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.

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’m using their Javascript code for my redirect (try hitting my site – you’ll get redirected to http://alexdglover.dyndns-web.com/mobile.html if you’re on a mobile device). 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.

Advertisements
Categories: How-to Guides Tags: , ,
  1. No comments yet.
  1. No trackbacks yet.

Care to share your two cents?

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: