How’s the mobile version of your website looking? If you received one of huge number of notices Google sent out this week to webmasters, you need to fix your mobile usability issues now, or face serious visibility issues for your law firm’s SEO in the near future.
Google Sends Mobile Usability Notices
Warnings in your Search Console from Google can incite heavy breathing. It’s a terrible version of Christmas, clicking over to the affected sites to see what some bot or (gasp!) actual human has left under the digital tree. The most recent mass notifications surrounding mobile usability from the search giant are more like Halloween, but without the customary choice of trick or treat. Instead, Google is giving you a trick AND a treat when it warns you that your site doesn’t display well for mobile users while telling you exactly what to do to fix the problems.
The solution presents a couple urgent questions: Where do you even start to fix your website’s mobile problems? How long is Google going to give you to make the changes? Here are some common site issues we’re seeing from the front lines and what you can do to help your sites right now.
Website Images Not Optimized
Images that overflow their containers make for a wonky mobile experience. Users can’t follow the content path to converting elements properly and they bounce off the site before any engagement. That’s not a favorable signal when it comes to your Google rankings. There are several strategies you need to employ in tandem to optimize your images for mobile:
- Do Not Use Static Images: Hard-coding your images with a static height and width guarantees they don’t display appropriately on all devices and screen sizes. Don’t do it.
- Use Relative Size Images: When specifying image width, use relative image sizes. To be safe, set “max-width: 100%” to prevent pics in CSS from spilling over into other content areas.
- Responsive Design Needs Art Direction: Think responsive design solves all your problems? Not quite. Google now supports the “picture” element for Art Direction, allowing you to choose how images display on different screen sizes, resolutions, and orientation.
- Pay Attention to Screen Densities: Screens have varying resolutions (DPI=dots per inch) depending on device type. Leverage the “srcset” and “x” descriptors to support the “img” element so browsers know with a degree of certainty what resolution to display images.
Addressing image problems has to be a priority in cleaning up your site’s mobile experience. Make sure to use your alt tags (describe your pictures) as well so crawlers can understand these elements on your pages.
Fix Critical Rendering Path Issues
The critical rendering path is the order browsers prioritize content loading of your web pages. The faster they complete the path, the faster your full site loads. The time it takes to load pages is a massive performance metric when it comes to gauging user experience and can also help improve search engine rankings. Having critical path load problems in mobile? Check these sections out first:
- No Unnecessary Downloads: If a resource on your site doesn’t perform an essential function for user experience or conversion, get rid of it. You don’t need 1,500 images that need to load before your contact form appears. Examine every resource on your site (try Crazy Egg for user behavior) and cut out the resources that visitors never touch.
- Get CSS Downloaded Fast: Nothing renders before your site’s CSS and HTML, so get it downloaded as fast as possible. Minify or Gzip CSS and HTML files to increase your load times. If you’re dealing with a JavaScript render issue, try moving the code to the footer.
- Shorten Website Menus and Dropdowns: Mobile users need quick access to content and information, not an endless sea of practice area pages. Prioritize your content for mobile, including your contact information and calls to action, to direct users to your desired actions.
Page speed is everything for a clean mobile user experience. If you need different web page loads for different functions like print pages or projection viewing, use CSS media queries and media types to tell the browser how to display content.
How to Configure the Viewport
Did Google tell you there’s something wrong with your mobile viewport configuration? That means your website (or certain pages) display poorly across mobile device types, preventing visitors from engaging with your content. In short, the site looks terrible and no one wants to use it. How could it have all gone so terribly wrong? Don’t worry, here’s low-hanging fruit that may be the culprit:
- No Fixed Width Elements: Just like images, you do not want anything with a fixed width living on your site, if you want a successfully responsive website design. Content needs a fluid viewport to display well across all devices. If fixed width elements are a must in your design, be sure to switch to a fluid width in smaller viewport sizes.
- Enable User Scaling: Do not disable user scaling of pages by device — we mean it.
- Use Meta Viewport Tags: Meta viewport tags control how your pages render in terms of height and width for a given browser. Check your site to see how you’re using them and correct as needed.
- Match CSS and Device Pixels: Add “initial-scale=1” so your content has a 1:1 scaling relationship between your site’s CSS pixels and the viewing device’s pixels.
Don’t forget commas when separating attributes. Old browsers need that little bit of grammar to parse attributes correctly so if you forget to add them you may inadvertently create a poor experience for some of your visitors. If your clientele doesn’t pay attention to browser updates, you could be harming a much larger segment of your customer base than you realize.
New Google Mobile Algorithm Coming?
Speculation abounds across the SEO community about a looming (large) mobile algorithm update. Marketers are all elbowing for room enough to give it a name — skunk is a favorite. For my money, I’m going with Pointer; black and white dog, likes to *ahem* point at things. Or how about Pug? Because…pug.
Aside from naming an as-yet unseen update, how do you know when Google notices and gives you credit for all your mobile changes? Our data seems to indicate they’re revisiting mobile pages every three to five days, though you can try to speed up that process by pushing a Fetch and Render through your Search Console. Add your URL to Google’s ‘Mobile Friendly’ tester, if you’ve done all the right stuff, you should see positive results.
Make sure to prioritize your site’s mobile display sooner than later. If a large algorithm update does come down, you don’t want to be caught on the wrong side of it. It’s better to play offense than defense where Google is concerned.
Image via Flickr via Phil Roeder
Image via Flickr via Phil Campbell
