Tom's Blog

From industry’s leader in connecting buyers and suppliers

By Shawn Fitzgerald |  April 10, 2015

responsive_design_sizes

So, how confused are you over Mobilegeddon?
You know, those pesky changes Google is rolling out on April 21 that will alter search results on smartphones and tablets… And if you’ve been keeping up with the blogs and news stories, you’re likely overwhelmed with advice about responsive design and making your site mobile friendly. But do you know what this algorithm change will really bring?



Let’s break this down: Google’s goal is simply to provide a better user experience for all of the folks searching on their mobile devices. That's it. No smoke and mirrors. And certainly no hocus-pocus.

Think of the last time you accessed a site on your phone and tried to click on a button to navigate but hit the wrong one. Then you had to hit the back button and zoom in just to try to click the correct link, only to miss again and hit the one next to it. Super frustrating, right? This has to end — that’s why Google is taking this stand.

I wanted to set the record straight, so I brought up the topic to the ThomasNet RPM team. (I know — I’m pretty lucky to have some of the best designers, coders, SEO analysts and digital marketers at my disposal.) They came back with some research and advice, which I’ve compiled into four basic rules for complying with the new Google mobile requirements. Check it out below:

  1. Tap-size: Minimum 10mm
    This should be your minimum target height for your buttons. Using the proper size helps to eliminate the clicking frustration I outlined above. The bigger the button, the easier time you’re going to have clicking on it as a user.

  2. Viewport: Put this in the <head> tag: <meta name="viewport" content="width=device-width, initial-scale=1">
    This line of code will force the page into the size of the screen available, which means text will wrap, and there will be no horizontal scroll bar.

  3. Font-size: Default size is recommended at 16px with a minimum of 12px.
    Text needs to be easy to read on your mobile device. Make it as big as you can until you feel uncomfortable then drop it back a notch.

  4. Line-height: Recommended 1.2em
    Again, this is to allow for spacing between your lines of text to create a better reading experience. This is about 18 or 19 pixels.

Google made suggestions over the years in an attempt to passively change the best practices for web design to include mobile display and usability. Unfortunately, their search result pages continued to return links to pages that caused frustration to mobile users. But April 21 marks the end of their passive campaign and the start of punitive measures to ensure a positive experience for its users.

So if you like these tips and are ready to jump into the “responsive” side of things, take a look at this “9 Steps to Successful Responsive Website Design” download and let me know how you’re faring with all this Mobilegeddon hype in the comments below.

 9 Step Guide to Responsive Website Design

Topics: Website Strategy

Shawn Fitzgerald

Shawn Fitzgerald

Shawn Fitzgerald is the Vice President of Digital Media at ThomasNet. Shawn leads a complete suite of digital marketing services featuring social media, SEO, SEM, email marketing, content writing, graphic design, and branding.

ADD A NEW COMMENT

Subscribe to our newsletters.

Hey Tom, how can ThomasNet.com help me...

...find the right suppliers?”


Get your FREE account

Give yourself the sourcing power of industry’s leading supplier discovery platform. It’s easy. It's FREE.

...get more of the right customers?"


Get your FREE profile »

Promote your company where serious buyers go looking for suppliers. Getting started is FREE.