Survive Mobilegeddon: Designing for the Mobile Web

Editor's Notes

• #2: Thanks for that intro – I should let David introduce me to everyone. That was awesome. So welcome to Survive Mobilegeddon, an admittedly dramatic title but I think you’ll see that this is an important topic for making sure you’re getting the most out of your website.
• #3: Today we’re going to be talking a little bit about what exactly Mobilegeddon is, why mobile is so important, and then review a few important notes to keep in mind when designing for the mobile web. We’ll also learn about three popular methods for delivering websites to visitors on smartphones and tablets. And then finally we’ve pulled together some useful resources for you and we’ll hopefully have time for a discussion and to field questions.
• #4: Ok, so what is Mobilegeddon?
• #5: It’s actually called “The Mobile-Friendly Update,” and is one of the biggest changes to Google’s ranking algorithm in the past few years. Any time Google makes these kinds of sweeping changes or introduces new rules, web people tend to freak out a bit.
• #6: If you read articles about SEO or web marketing you’re likely to have seen headlines like this. It can’t really be this dramatic – the world isn’t actually ending – but let’s take a look at what is happening.
• #7: On April 21st, Google rolled out a series of long-anticipated changes to the way they rank pages in their search results. The net effect is that Google now uses this somewhat ephemeral concept of “mobile friendliness” as a key factor in how pages are ranked. If your site isn’t seen as mobile-friendly, it will be heavily penalized in certain kinds of search.
• #8: So who is this going to affect? Or actually – who is this already affecting, as the changes have been in place for a couple of weeks already? (And just to clarify, Google mentioned that the changes would take a few weeks to impact rankings, so we’re likely just starting to see some of the effects now). The new rules affect all websites in all countries. They affect rankings on mobile search results pages – so basically, mobile-unfriendly sites are being lowered in rank when returned on searches people make while mobile. And this “mobile-friendly” assessment is being made on a page-by-page basis. So it is possible for your homepage to be mobile-friendly, and other pages on your domain to fail the test.
• #9: Fortunately, Google’s put together a very simple way to find out if your website is mobile friendly or not. It’s called the Mobile-Friendly Test, and you can actually just click on this link, type your URL in, and you’ll get an answer pretty quickly.
• #10: So clearly there are is a checklist of attributes Google is grading against, but what’s the real goal here? When folks click on Google mobile search results, they can either land on a page that loads well, is legible, and helps them carry out whatever task they had intended, or they can land on a page that looks broken, requires zooming to read, or might have content or code that doesn’t render properly on a smartphone. Google’s interest is in providing the best possible experience for people with phones, so these changes are a way to ensure that when you use Google on your phone, you’re more likely to see pages that have been designed for usability on mobile. In other words, if you provide a better mobile experience, Google is delivering a better mobile experience. But there’s a reason you should care about this regardless of whether Google is incentivizing you to as well: people who find your site unusable aren’t going to stick around. You put a lot of effort into getting your target consumer to visit your site: if when they get there, they can’t find what they’re looking for, buy what they want, or contact you, they’re going to bounce. Usually very quickly.
• #11: So Google’s message to web owners here is that optimizing your site for mobile is no longer a choice, it’s a need-to-have.
• #12: Let’s explore that a little.
• #13: When the first iPhone came out and pretty much revolutionized the way most consumers use their phones, the sale of mobile devices still trailed far behind those of desktop PCs and laptops. As you can see here, that trend very quickly reversed itself – 2013 was the first year people bought more smartphones and tablets than PCs. Sales of smartphones this year will dwarf sales of PCs. The technology as a platform of access is ubiquitous. OK, but most people use their phones to play Angry Bird and browse Tinder and share selfies, right?
• #14: Well, not only. In early 2014, mobile surpassed desktop and laptop as the way most people access the internet.
• #15: So what’s this usage like? We mentioned before that these new changes only impact mobile searches, and not desktop searches. So does any of this matter? Are people actually using Google on their phones?
• #16: Yup, they are. This is the actual point last year in which mobile searches surpassed desktop searches in the United States. So more people are actually searching on Google on their phones than at their desk.
• #17: So we know that mobile-friendliness is affecting our rankings. What does it mean to create a mobile-friendly website? How does one design for the web in 2015?
• #18: Google recognizes three different configurations as being “mobile friendly”. These are “Responsive design,” essentially a website which flexes and rearranges itself to properly fit the best view. The second method, referred to as dynamic serving, actually includes different versions of the website’s code on a single URL, and serves it up to the browser after detecting the device the user is on. Under the mobile website method, there are actually separate websites (with completely different URLs) being served to the user depending on the device.
• #19: Dynamic serving can be complex to implement and error-prone, and the mobile website method requires you to maintain two or more versions of your content (that means any time you make a page edit on the desktop version, you must make an edit on the mobile version – or versions – as well). Fortunately, Google agrees that responsive is the way to go, and so while other types of sites do pass the mobile friendly test when properly implemented, Google actually recommends responsive as the best design pattern for mobile-optimized sites. There are a few other benefits to the responsive approach: From the standpoint of visitors, it’s really seamless – it’s the same URL and the same content, so if you view the page from multiple devices during multiple sessions, you’re getting a consistent experience. From the standpoint of content editors and marketers, you’ve only got one site to edit.Finally, because there’s only one site, Google’s crawling bots only need to check it once, which saves them resources.
• #20: Let’s take a look at how responsive sites behave and look. We’ve got three websites here that we’ve completed recently that should give you an idea of what we’ve been talking about.
• #22: The first thing we would recommend is that you choose responsive as your design pattern. For the vast majority of situations, it’s likely to be the best fit, and it also happens to be the one that Google prefers. You can’t go wrong with a well-designed responsive site. A few of the other recommendations I would make here, from a high-level, are things that any web designer worth your time should know. It’s important to keep the main goals of each page in mind at all times. Using a content management system also allows you to create chunkable content that can condense cleverly. As you saw in some of the examples we just showed you, not all content is important for all users. Some should be shortened on smaller screens, some will even disappear. Approaching the planning stage, and the content creation stage, with this in mind will yield web content that really can help users regardless of the context within which they are visiting your site. Finally, design for user intent. DON’T approach designing a mobile or responsive site as a way to just hit all the checklist items on Google’s list. As we talked about before, Google’s interest is in providing the best user experience to people. If you were to totally forget about Google, and simply design the best, most intuitive and usable site you could for people on smartphones, you’ll be on your way to passing this with flying colors.
• #23: Secondly, people aren’t using their mouse and keyboard on their phones. Usually they’re tapping their fingers. So design for fingers. You can see in the example shown here, that that big prominent blue “DOWNLOAD” button remains just as prominent and easy to click on the mobile size. You can also see that text remains large and easy to read – they aren’t packing a ton of stuff into a smaller screen.
• #24: Here’s another example, from the World Wildlife Fund. You can see that in this case the DONATE and ADOPT buttons actually become even more prominent on mobile sizes.
• #25: This also happens to be a super easy one for search engines to check, and because of that is a super easy rule to follow. Google recommends using a base font size of at least 16 CSS pixels, and resizing based on the font’s properties. For tap targets, like CTAs and buttons on mobile, the rule is similarly easy. Google recommends that these be at least 48 CSS pixels tall or wide (which translates to 7mm if you have your viewport set up properly). There should also be at least 5mm between tap targets, to avoid users accidentally clicking on one button when they meant to use another.
• #26: #3 is to avoid technical mistakes that usually can lead to pages’ mobile experience coming across poorly. Some of these tips are more for the technical folks on the call, but it’s a good idea to take note of them and make sure your site isn’t making any of them. Blocked code is one of the most common mistakes. You’ve spent a bunch of money and time building a beautiful, responsive site, but when Google crawls it, they see it. All the hours you or your agency spent making break points, image resizing instructions, and minimized design elements goes completely unnoticed. Blocking image, CSS, and JavaScript resources from their bots is against Google’s webmaster guidelines and is the usual culprit here. The solution here is simple: don’t do it. Get rid of those meta robots instructions. Check your robots.txt files; especially if your resources are delivered via a CDN. Show off all those beautiful images and stylesheets to the search engines!
• #27: Unplayable content is another big problem. Most mobile browsers don’t render Flash-based content. Therefore, mobile visitors won’t be able to use a page that relies on Flash to display content, navigation, or animations. More modern techniques such as HTML5 and Jquery should be used and Flash eliminated whenever possible.
• #28: Many websites like to use interstitials to promote mobile apps or other offerings. This is essentially a pop up that stands between the user and the site content until it is closed or accepted. If you are using an interstitial that blocks site content, you will be penalized. The correct way to promote web apps is using banners, as seen in the example on the right.
• #29: Finally page load times are an important piece of the puzzle. Users are impatient, and anything slower than 2 seconds for a page load is generally perceived as slow. In one study, over three-quarters of web users actually abandoned pages that took longer than five seconds to load. Accordingly, Google uses page load as a ranking factor. There are many ways to cut down the size of the page you’re making a browser render, including minimizing HTTP requests (which are the number of components being downloaded), optimizing images, enabling browser caching, optimizing CSS delivery, and reducing redirects. However, the first thing to do is know where you stand. Google provide a tool called PageSpeed Insights which allows you to quickly test your load times.
• #30: #4 is the really the low-hanging fruit. Because visitors to your site use a variety of devices with varying screen sizes—from large desktop monitors, to tablets and small smartphones—your pages should include the viewport tag, which tells browsers how to adjust the page’s dimension and scaling to suit the device. Google takes this tag to mean that your site has been designed with mobile in mind. Once your site is responsive, make sure this tag has been specified.
• #31: The last piece here is being iterative. You can’t think of a website anymore as a property that is “finished” and just sits there doing its job. It’s a living document that should be in a constant state of flux. If you’ve got a web content management system and it’s been properly set up with a design that encourages iteration, your life will be a lot easier. Once you launch, pay a lot of attention to how people are using your site. We recommend taking your Key Performance Indicators, those measures you’ve decided give you a good idea if your site is working or not. So look at time on site, look at how many pages are being viewed – and compare these between desktop and mobile. If things seem off-kilter or one is performing worse than the other, try different things (possible run A/B tests) to improve, continuously. And focus on conversion, especially. If you’re an manufacturing or a high-tech or a software company, this might mean forms filled out, new contacts registering. For an e-commerce company this can mean sales, or items added to the shopping cart, or downloads. Universities and colleges might be looking for online applications or alumni donations. For a bank or credit union, we’re talking about new account opening, or loan requests. These actions that are the main point of your site – watch them constantly and try to always improve.
• #32: And we also thought it would be useful to leave you all with a set of resources that you might find valuable. I would assume that many of you would opt to work with an agency or a designer who should be aware of the guidelines above, but if this is fully on your plate or you have an in-house team that will be helping you go mobile-friendly, these can be great to bookmark.
• #33: The first, again is Google’s Mobile Friendly Test, which you’ve already seen. The second is a really substantive, great, and very easy to understand guide that Google has put together to document the requirements and guidelines for going mobile-friendly. This contains both general recommendations as well as more technical documentation for developers. The third is an article from Moz.com (the provider of a suite of SEO tools) that I thought did a good job of providing another perspective on the changes. And finally, Screenfly is a cool tool I like to use sometimes
• #34: So, we’ve tried to focus here on info that will be useful to you and not spend a bunch of time selling, so if you do need to explore a redesign with mobile in mind and want to learn about how we can help you – or even if you have questions about the presentation, feel free to reach out to us. We’ll also accept funny pictures.
• #35: So, that’s it. I know we wanted to leave a bit of time for questions. Anybody got one?