4 Tips For Your Mobile-Friendly Responsive Design

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?

responsive_design_sizes

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:

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.

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.

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.

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, let's talk.

New Call-to-action

Turn Your Dreams into Realities with RT Engineering Next Story »