Why you need a mobile-friendly site, Pt. 2 (Or, does your website have cat-like responses?)

Why you need a mobile-friendly site, Pt. 2 (Or, does your website have cat-like responses?)

 

HSUS site Chrome and iPad

The Humane Society of the United States (http://www.humanesociety.org/): Windows 7, Chrome 25 vs. Apple iPad 3rd, iOS.

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.

WWJJD?My site isn’t responding. I mean responsive. Now what?

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 Themes (which I have used to build my site and my clients’) 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 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 your colors.

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! 

Bottom line

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.

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!

Share on Facebook0Tweet about this on Twitter0Share on LinkedIn0Pin on Pinterest0Share on Google+0Buffer this page
Get smart(er)

With my Superhero tips and tutorials you'll rule your Website Queendom

3 Responses to Why you need a mobile-friendly site, Pt. 2 (Or, does your website have cat-like responses?)

  1. Great info, Natalia!!

    My website is responsive, but my header doesn’t look right on larger screens! I guess I’ll need to dive into that code stuff!

    Thanks for posting — very useful.
    Jennifer

    • Nat says:

      Hey Jennifer,

      Thank you! I’m happy you found it so useful. That’s fantastic.

      Lots of luck playing with the code Hope you can have some fun with it.

      xo
      Nat

  2. […] Because I’ve gotten so many questions about responsive design, I wrote a second post covering my answers. It includes more details on how to tell if your site is mobile-friendly, what […]

Lay it on me!