As you may remember from my “think of responsive design as a kitten” blog post, a responsive, or mobile-friendly, website will automatically detect the size of the screen on which it is showing up and adapt to it. So how can you tell if your website is responsive? And if it isn’t, what can you do about it?
How to tell if your site is responsive
The most efficient way to check if a site is responsive is not by checking it on your phone, tablet, and computer — it’s by using a nifty program like the Mobile Phone Emulator. All you need to know is the URL you want to check and the size of the screen you’ve got in mind. Remember to look at both the vertical and horizontal views (you can play with these and other options, including viewing the site on specific types of cell phones, in the sidebar on the right).
Another, even better, program is Browser Stack, which is fantastic but not free. This one even lets you see how your site looks in different browsers. The free trial lasts 30 minutes.
You checked your site using one of the programs recommended above and realized it doesn’t look so great on smaller screens — the navigation’s wonky, you have to scroll all over the place, etc. So WWJJD?
Look at your theme. Is it responsive? If it is, the developers will clearly state it on the official theme page, whether on WordPress or their own website. For example, the premium Headway* theme (which I have used to build my site) is advertised as a responsive theme. In my last blog post, I recommended a free theme called Responsive, also blatantly described as mobile-friendly (obviously, right?). These and some others are great, but I will throw out a caveat: even if a theme is responsive, you can still unwittingly screw up its mobile-friendly functionalities by changing certain things, and the theme’s official documentation will not always warn you about it ahead of time. But most of the time, they’ll work just fine.
If your theme is not responsive, as I explained in part one of this responsive design series, best practices dictate that you use CSS media queries to make the elements on your site adapt to smaller screen sizes and line up appropriately. In other words, you’ll need custom coding, which I of course will not be diving into in this post because you’d throw rocks at me. You’ll then have to hire a web developer (not a web designer) like moi to type up the code that looks like Chinese to you but will make your site look hawt on mobile devices.
“What about plugins?” you ask. “Don’t they have a plugin for everything?” Kind of. But not for this. I’ll clarify: there are plugins that will ostensibly make your site responsive, but really they’ll make your site look ugly and will hide most of its features, usually not even bothering to keep the same color palette you started with.
Now, what if your site in general is responsive but one feature, such as a video, is not adapting to smaller screens? Many things could be to blame, such as a badly coded plugin that’s interfering with the rest of your site, or maybe you’ve embedded a Flash video (oh-my-g-d don’t use Flash or you will anger the responsive design goddesses). But if the plugins are behaving properly and you’re dealing with, say, a YouTube video, one thing you can try is (warning: codespeak ahead) changing the width attribute to 100%. *Ducks* No rocks, you guys!
If you’re choosing a theme, choose a responsive one like Headway. If you already have a site and it’s not responsive, give some thought to hiring a web developer. Hiring a professional is also a smart way to go if your site is mobile-friendly but you want to change the responsive layout so that, for instance, your opt-in box (a.k.a. email signup form) shows up below the navigation but above your blog posts, instead of below your blog posts (which tends to happen with responsive themes).
Techie action step
Now I’ve got an action step for ya: check your website (or someone else’s site you love) on your phone or using the Mobile Phone Emulator or Browser Stack. Does it adapt to smaller screen sizes? If not, do you know whether your theme is responsive? If you don’t know, Google your theme and read its description. And if you need help, you know who to ask! You know, that chick who keeps finding ways to sneak in cat and punk rock references into her blog posts.
Loving action steps
And if you haven’t yet filled out the Best Survey Ever, what are you waiting for? You’ll get virtual hugs in exchange! I know you can’t say no to hugs. I can’t, anyway. (Feel free to use this information to bribe me at any time.)
There’s always more to know, of course, so if you still have questions or just want to tell me that this post is so brilliant you had to get up and clap your hands [say yeah?], use the magic comment form below and I will merrily get back to you.
Thank you so much for reading!