Talk about mobile and tablet usage dominates computer hardware conversations and the implications are one of the hottest topics in marketing right now as well.
Website visitors are now consuming content from our sites in a dizzying array of devices, formats and orientations. There was a time when browser compatibility was a designer’s primary concern. Today, designers and site owners need to be increasingly concerned with media compatibility or more to the point, the size and shape of the viewer’s screen.
The use of mobile and tablet devices for browsing has crept past 10% in my stats and my guess is this is undereported as some device detection goes unreported. The number one device is the iPad, with the iPhone a close number two.
Tablets, including Samsung Galaxy, Kindle, Nook and Google’s Nexus 7, as well as the still dominate iPad, are poised to make huge strides in adoption and usage in 2013 and may take usage on some sites into the 25% range.
So, yes, now is the time to get serious about making sure mobile and tablet visitors to your site have a great experience.
The first step might be to get a picture of where your site is currently. Test your site’s mobile readiness here, view your site as it might look on dozens of devices here and check out this great education resource.
Whether you decide to hire someone to do it for you, do it yourself or find a solution in the middle, one term that’s important to understand is media queries. Media queries allow web developers to change the layout of a page based on the media that’s displaying it — whether that means adapting it to fit a smaller screen or just stripping it down to the essentials before it heads to a printer.
The term and concept has been around for years – remember visiting a site that had a print friendly option – that site was using what we call today a theme switcher to change the design based on a media query.
This concept is what drives a great deal of what goes on behind the scenes in device specific design.
Below are some of the options you might explore as you determine the best strategy for adopting mobile and tablet design experiences for your website.
Build it for you
You can simply hire a designer to create a mobile friendly design and then integrate it into your current design. In many ways this is how you might get the most useful, yet most costly design. A good mobile designer should understand that good mobile design is more than simply making everything smaller. The best mobile design starts with understanding intent and delivering the must have content beautifully.
The IAB has a nice directory of mobile site builders and long time player moFuse has a hybrid
Add a Plugin
One very simply fix for WordPress blog sites is to explore a number of plugins that do the heavy lifting of detection and switching and come with mobile themes built in. Plugins such as WPTouch Pro and WPMobile Detector are good options. You might also consider simply adding a mobile theme, such as Mobile Pro as your theme.
There are a growing number of what might be called automatic solution – services that take your current site and automatically create a mobile version. These tools attempt to make sense of the navigation and core content, but also allow for some amount of customization and addition of widgets for things like social sharing, contact forms and eCommerce functions.
Dudamobile works very well and has several large integrations including Google Mobile Ads. bMobilized is another player that includes some great customizations, including a large library of widgets.-
Adopt Responsive Design
Another growing option that is preferred by some is something called Responsive Design. The idea behind this concept is that instead of using mobile sites or themes, the design uses media queries to determine the best way to show the content based on the user’s device. The practice makes use of CSS, fluid grids and flexible images to create one experience responsive to many environments.
WordPress theme makers are quickly creating responsive design themes that can replace the need for mobile and tablet specific tactics. Studio Press has many responsive design themes and the Responsive theme also draws high praise.
For those that want to dive in and learn more about this topic check out Responsive Web Design by Ethan Marcotte, The book explores CSS techniques and design principles, including fluid grids, flexible images, and media queries
If you want to explore fluid grid design in a truly geeky way have a look at Gridpack.
Build Your Own App
Of course one final option that you might explore is the app route. There are a number of tools that make it fairly simple to build your own apps. This assumes that you have content that people will want to visit using your their device’s native operating system rather than the web.
It’s a fun option, but might not be the most useful for many businesses.
However, if you want to explore jQueryMobile is a good place to start and check out drag and drop options such as MyAppBuilder and AppMakr.