7 Minute Responsive Design Checklist
We all know that a good portion of our visitors view our websites over their mobile devices, right? We regularly observe our analytics and see which devices are the most used… right?
This is actually important because a site that isn’t mobile responsive or mobile-friendly will not be indexed in the coming months. Google has said they are creating a mobile-only index and experts predict our regular ol’ Google will soon be mobile-first. This means that if you have two different sites – one for mobile and one for desktop, the mobile will be the one indexed. (Indexed = recorded in the all-knowing Google Database.)
Testing for Responsiveness
If you’re using a Restored316 theme purchased since 2015 you needn’t worry about responsiveness. If you’ve made any style edits, you might want to work through this quick checklist.
View your site in all different sizes of mobile devices by going to this site: https://ami.responsivedesign.is/. Type in your url, and voila! It magically places your site into their pretty mockups.
Your Responsive Design Checklist
When it comes to responsive design, Google is looking for more than just pretty, on top of the regular SEO factors of relevance, authority and date, the mobile first index also takes a closer look at user experience.
Crawlable Content
This sounds geeky to the extreme, but the thing to know here is that you should never play with your robots file. Regardless who tells you to do what – ignore them! Use Yoast SEO plugin for WordPress – it will automatically enter anything you need into the robots file.
Use the Google Search Console Crawlable Errors report to find and fix the links that are resulting in errors.
[clickToTweet tweet=”Never edit your robots file. Use Yoast SEO plugin for #WordPress for automatic entries. #blogging” quote=”Never edit your robots file. Use Yoast SEO plugin for #WordPress for automatic entries. #blogging”]
Accessible Content
Don’t have videos on your site that cannot render in mobile browsers.
The most reliable way for video to play on mobile, is to use HTML5… pretty geeky right? Lauren has done this for you with every Restored316 theme you buy with the “Pro” at the end of it. That “Pro” signifies that you’re using an HTML5 theme, which is perfect for videos that will actually work for your mobile users.
Bad Redirects
Avoid redirects that move people from yourdomain.com/this-post to m.yourdomain.com.
SEO is primarily about the user experience. Landing somewhere you didn’t expect is not a great user experience!
Avoid Interstitials
At the beginning of 2017, Google took a hard line against interstitials. Having no idea what those are, I looked them up. Apparently we need a fancy way of saying “pop-up”.
Interstitials are anything that block the user’s flow on the page. Things that pop-up or things that have nothing to do with the topic but take up a lot of real estate, as well as ads are all interstitials.
NOTE: pop-ups on mobile display will immediately result in a lower ranking.
Speed
This is an important part of overall SEO and we will cover this next time in depth. For now, avoid testing your site with tools like GT Metrix and Pingdom because they give you (if you use ads) an incomplete picture. What is most important is that the user experience isn’t interrupted by the page load time. So above the fold is the most important thing. You also want this to be the case if you use ads because you want those ads above the fold to render while the user is actually viewing above the fold!
HINT: test your site with Google Pagespeed Insights instead
Readable Fonts on Any Mobile Device
You’ve been to sites where the text is so small it’s barely legible. And you have to pinch and scroll and move and hope you don’t click on anything else by accident. Clearly this is not the best experience for your users – so always keep the font sizes as they are built in your Restored316 theme. These sizes use a special measurement – rem, em or px. They are very intentional, from an aesthetic standpoint but also responsive.
The text must be viewable on a 40″ TV, down to a 320px mobile phone.
Touchability
The last and important element to any mobile responsive site, is designing for a touch screen. Think: big man-fingers. This morning my trees were all given a hair cut by a big burly logger with dirty calloused hands (who did an amazing job). Will he be able to navigate through your site? Are the menu items far enough apart that he can click on the drop-down items?
[clickToTweet tweet=”Mobile responsive design #7: design for a touch screen. Think: big man-fingers. ” quote=”Mobile responsive design #7: design for a touch screen. Think: big man-fingers. “]
If he clicks “next” will he also click the meta data, comment link and Facebook share?
The links and items on a touch screen have to be far enough apart that big man-fingers can navigate them.
