In the past year, the number of Responsive Themes available for WordPress has exploded. And for good reason as it only makes sense to design sites optimized to the vast numbers of devices, browsers, OS’, and viewports that make up the visitors to your website.
However, with such a dizzying array of options, it can be difficult to make an educated choice on what to look for in a good Responsive Theme—free or otherwise. While Responsive Design techniques are not overly complex, doing it well takes considerable planning and testing. If a theme creator rushed through the process, this can cause headaches as you start to build out your site.
Here are some tips to consider as you’re evaluating themes:
#1 – Determine what resolutions are supported and how
Responsive Designs use Media Queries to reformat the design when the screen resolution is below a specified number of pixels. For example, a design might reformat for mobile when the screen size is 480px or less. You can use a tool like Resizer in your browser to automatically set your desktop browser window to test common device sizes. Viewing the theme you’re evaluating using a tool like this will raise any caution flags if you notice oddities at different sizes.
#2 – Understand how menus are handled
Because the width of your navigation area is affected by the number of items and the length of your navigation labels, this can affect how your nav looks on different devices and viewports. If not handled correctly, your nav might break in odd places on narrow mobile screens. While the nav might look great in the theme’s demo, try to think about how your nav will fit when looking at the demo on different devices. Some of the nicest Responsive navigation I’ve seen is when the desktop view uses a traditional link bar, then this changes to a tappable menu when sized down for mobile screens.
#3 – Pay attention to content hierarchy and what drops out where
An easy solve for content that doesn’t fit at smaller screen sizes is to simply drop it out. For example, things like Sidebars and Widgets might be completely hidden at mobile sizes instead of moved into a scrollable page. While this may perfectly fine and sensible for your purposes, identify what is hidden and what is simply reformatted as your window size becomes smaller. Good Responsive Themes will not only handle Sidebars accordingly, but also design flexible Widget areas within. With content reformatted for narrow screens, pay attention to the hierarchy to ensure the order in which it appears is suitable for how you intend to present your site regardless of screen size.
#4 – How does the theme handle video?
If video is an important part of your site, it can be particularly problematic in Responsive Designs due to the nature of embedding. Special HTML markup must be employed to correctly accommodate video resizing. If the theme’s demo does not have a video example, ask the author if there were any provisions made in the theme to handle video content.
#5 – Will (does) your site run advertising?
Do you have any tips and tricks when evaluating Responsive Themes? If so, please leave them in the comments!