It’s Monday, and I’d like to start the week with an important question for you: How does your website look on small screens?

No matter how vehemently some of my clients fight me on this, it is essential that your website be accessible to visitors on mobile devices. With the average site receiving 30-60% of its traffic from tablets and phones, we can no longer afford to ignore the diverse ways people choose to consume our content.

Personally, I’d say more of my web browsing happens on my phone and/or iPad than on my computer. When I’m at my desk, I’m working, so I like to save articles to Pocket to read later (usually in bed right before I turn in for the night). When a website doesn’t resize for decent viewing on whatever device I’m holding at the time, I usually skip that article and move on to something else.

If your site is built on the Genesis framework, it’s likely that you already have some degree of mobile responsiveness baked into your site. But have you ever checked to make sure your site actually looks good on mobile devices?

How to Test Your Site for Mobile Responsiveness

As a recent addition to the Nuts and Bolts Media website, we now offer an easy, free way to test your site on a number of mobile devices, including the following:

• iPhone 3/4 and 5
• Low-end Android phones
• Nexus 4
• iPad
• Kindle

You can scroll, click links, and even use Firebug/Inspector on each device’s rendering to get an idea of what your readers are seeing when they visit. Here’s how this website displays on each device using the tester (click to view larger):

Ready to test out your own website to see how it looks? Go right ahead!

Nuts and Bolts Responsive Design Tester

If you’d like to be able to check any website on the fly, you can add a bookmarklet to your browser by creating a bookmark with the following as the link:

javascript:void(window.open(%27https://nutsandboltsmedia.com/?url=%27+window.location.href,%27_blank%27));

To use it, simply navigate to the site you’d like to check, click the link in your browser bar (or bookmarks folder), and the tester will open in a new browser tab with the site loaded automatically.

Other Tools

Obviously the Nuts and Bolts tester isn’t unique and there are dozens of ways to check your website’s mobile responsiveness. You can check directly on the StudioPress website, for example, even if you aren’t using a Genesis theme, or you can use a tool like Am I Responsive? to get a cool rendering of your site on a desktop, laptop, phone, and tablet.

Another tool I love is the Resolution Test browser extension for Chrome, which changes your browser window to various device sizes so you can make sure your site loads correctly for mobile. It also allows you to select custom sizes and offers a quick button to reset your browser to its previous resolution once you’re finished.

What if Your Website Looks Awful on Mobile?

Let’s say you check your website using one of the tools above and it doesn’t provide a great experience for mobile visitors. What are your options?

1. Use Jetpack’s built-in mobile theme. If you’re already using the Jetpack plugin for WordPress, you can activate the Mobile Theme module to automatically resize your content for phone/tablet traffic. It’s kind of generic, but it works well and can be turned on or off without a lot of fuss.

2. Use WP Touch. The newest iteration of WP Touch is a vast improvement from previous versions, and the pro version of the plugin offers more options than ever before to customize the mobile experience for your readers.

3. Use a mobile responsive theme. A great number of WordPress themes offer mobile responsive capabilities, including most of the child themes for the Genesis framework (my personal recommendation). It’s easy to get a great-looking site on all devices if you’re willing to undergo a theme change (or have the skills to add media queries to your stylesheet for your current theme).

4. Stick your head in the sand (NOT recommended). As I mentioned, some of my clients are still pretty resistant when it comes to mobile responsiveness. If I had a dollar for every time I heard, “I want it to look exactly like the regular site but smaller,” I could probably retire. While I understand wanting visitors to see (and hopefully click) the ads in your sidebar, I can promise that mobile visitors aren’t going to click those ads no matter what size they are. And if your site requires them to zoom and scroll side to side, they won’t be there long enough to view the ads anyway.

So how does your site look on mobile devices? Any other resources you’d recommend to check responsiveness? What methods do you use (responsive design, plugins, etc.) to create a good user experience?