How to make your site mobile friendly

This post will cover how you might proceed with making your existing site more mobile-friendly.

If you have an existing site that is not mobile friendly there are a few techniques you can use make it work better on smartphones and tablets.

Complete redesign

The purest approach to making your site mobile friendly is to do a complete redesign with a mobile-first mindset. It’s the most expensive, but you should at least consider starting from scratch with your site’s design. This approach will ensure that your design, writing, and calls-to-action are super-focused with the mobile version and expand out to larger devices from there. This is a concept called “mobile-first” design. It seems to me that this is the most sensical way to approach a mobile design because you can focus your visual design and information architecture to work well across all devices; starting with designing for limited screen space and computing power and building up to amazing experiences for more powerful hardware.

Partial redesign

The second-best approach: you can use responsive design techniques to make your site adapt its layout to smaller screens. This involves adding CSS, in the form of media queries, to the existing site’s code and is usually a job for a front-end developer or designer. CSS media queries, in this context, are a way of giving your site some rules on how it displays itself based on the width of the device that your visitor is using. In this way, you can keep your existing design and content; you’ll just need to use content-based breakpoints to determine where to apply your media queries and CSS tweaks. I’ve had great results with this. It’s a perfectly good way to extend the life of an existing, non-mobile-responsive site without paying for a complete, ground-up redesign.

No redesign budget?

Lastly, I’d like to briefly acknowledge that you could use a plugin, add-on, or service of some kind that uses software to generate a mobile version of your site. Examples of these, if you’re using WordPress, are the WPtouch Mobile plugin and JetPack’s Mobile Theme module. I haven’t had great experiences with these, but don’t take my word for it…just be sure to test these out thoroughly before deploying them on your site. I only mention these because they don’t necessarily cost any money for you to try, and you might be perfectly happy with the result.