One of the things I love about having my own business is that there’s always more to learn. And one of the ways I figure stuff out is to write about it. So lucky you… you get to learn a little along with me. Several clients recently have asked about making their websites look better on their phone or tablet. So I’ve been looking into the options. Here’s what I’ve learned.
There are three basic approaches to making a website more friendly to the assortment of devices now on the market.
- Responsive Design: The first would be to design your site from scratch using “responsive design”. What this means is that while the site is being designed, aspects are setup to automatically adjust according to the size of the device viewing the site. In this case there is only one version of your site which is scalable. This is not something I’m able to add to an existing site. But a coder/developer could write code to make this happen. You can get a general sense of how this works by viewing this article on Mashable about why this is the year of responsive design. Simply adjust the size of the browser window on your desktop computer to see how elements respond to the new size. I currently am designing exclusively in Pagelines DMS because it is built to be responsive.
- Adaptive to Device: This would be making additional unique pages and settings for the initial site to “adapt” to various device shapes and sizes. This can be done before building the site or after. But if you haven’t built the site yet, responsive is a better way to go. This still requires coding OR the addition of a plug-in.
- Plug-ins: The simplest option, if you already have a WordPress website, is to add a mobile plug-in that creates a new device-aware mobile-specific theme that may be quite simple or totally custom designed depending on your budget. These will generally offer a toggle switch to move between the standard desktop view of the site and the mobile version of it.
Mobile devices will outpace personal computers by 2015
Chidozie Bright in his Marketing NW article “The Need for “Responsive Design”
Because I’m more of a designer than a coder I would either start with a theme that is already responsive or for existing sites, I would choose a plug-in approach. There are a few plug-ins that do an adequate, though simple, job of giving viewers a re-sized and simplified version of your site on mobile devices. The most readily available is included in Automatic’s JetPack which is a free collection of plug-ins created by the makers of WordPress. It’s just a matter of activating it. No settings at all which means no customizations either. There’s also iThemes Plug-in Buddy Mobile. But the leader of the pack is WPTouch. It’s easy to use and offers a lot of plug-n-play options. The best is that you can turn off plug-ins you do not want displayed on mobile devices.
What’s it going to cost you ask? That will depend on what you want and what you’re trying to accomplish. The simplest plug-n-play with no customizations can be accomplished for as little as $200-500. It’s recommended that you have a custom mobile landing page and that you setup a custom mobile menu that is a simplified version of your menu. Do you need it to have a lot of custom styling? These and other variables can quickly drive the cost up.
Before jumping on the bandwagon to retrofit your site it would be wise to take a look at your site traffic to see how many are visiting via mobile devices. And consider what you want to accomplish by doing this and how much it’s worth to you. While this is clearly the wave of the future, at the pace things change, if you don’t need it yet, you can wait and get more/better for less down the road. On the other hand, if you’re about to create a new website it most definitely should be responsive!
Further Reading
There’s a ton of information out there about this subject. A lot of it is geared to developers. This article goes into more detail about how to make your blog mobile-friendly. I think it does a good job of laying out the pros and cons of the options. This one is targeted to folks with photography sites. And for the visual learners here are some great Infographics to aid in understanding responsive web design. Here’s one more helping you determine if responsive design or a mobile site is the best solution for your needs.
For fellow developers here are some related links of possible interest courtesy of Taylor Black at Fizzy Media:
- Patterns in Responsive Design
- A little more on “Off Canvas” design
- An article that sparked many things in 2010
- Foundation to prototype all our sites and run drafts by clients
- Bones to build out themes from scratch
And finally from Teri Gleason at Circa Consulting check out this Smashing article about Responsibly Retrofitting an Existing Site.
See how your site looks in various devices using this simulator.