Why Your Website Needs to be Mobile Responsive


Today I’m talking about why your website needs to be mobile responsive. I’m going to be giving you some statistics about mobile use, talking about the different types of mobile design, and then going over the benefits of having a mobile responsive design for your website. We’re also going to talk about how you can make your website mobile-friendly and some of the common mistakes that Google lists as problems that can hurt your search engine ranking with them and your overall user experience.

If you have a website, you need to listen to this episode to make sure that your website mobile responsive or mobile-friendly so that you’re not missing out on any of these big benefits.

Plus, a big thanks to Jodi Graham who walked through my website with me!

Topics Discussed:

  • Why having a mobile responsive website is important
  • The difference between mobile-friendly and mobile responsive design
  • The benefits of having a website that is mobile-friendly
  • How you can design a website that is mobile responsive
  • Common mistakes to avoid when designing for mobile

Resources Discussed:

Read Full Transcript

Stats about mobile use

  • There are more mobile devices than people in the world
  • Mobile use has grown 400% since 2011
  • 20% of users between ages 18-34 spend all of their online time on a mobile device
  • In 2017, mobile traffic made up 52.64% of all online traffic
  • 50% of ecommerce purchases were made on mobile devices in 2017
  • 40% of people abandon a website that takes more than 3 seconds to load
  • 47% of consumers expect a web page to load within 2 seconds

The difference between mobile-friendly and mobile responsive

Google defines responsive website design as “Responsive web design (RWD) is a setup where the server always sends the same HTML code to all devices and CSS is used to alter the rendering of the page on the device. Google’s algorithms should be able to automatically detect this setup if all Googlebot user agents are allowed to crawl the page and its assets (CSS, JavaScript, and images).”

Responsive websites respond or change based on the needs to the user and the width of the device they are viewing the website on.

  • Move from multiple column to single column layout
  • Changes the layout instead of shrinking everything to fit and making a user zoom in
  • Dynamic content that changes
  • Navigation is condensed
  • Optimized images
  • Correct padding and spacing

Friendly websites work the same way on any device. This means that nothing moves or changes (or becomes unusable on mobile devices)

  • Static content that doesn’t change
  • Simplified navigation
  • Images display smaller

Benefits of having a mobile-responsive design

  • SEO - In April 2015, Google changed their algorithm so that if your website is not mobile-friendly, it would not rank as high in mobile search results
  • Social media conversions - in 2015, 80% of the time people spent on social media was on a mobile device
  • Increased sales - In 2012, 67% of people said they are more likely to make a purchase from a website that is mobile-friendly
  • It’s an expected practice - 8 in 10 website visitors will leave a website that doesn’t display well on their device
  • Builds credibility - 57% of internet users say they won’t recommend a business with a poorly designed website on mobile
  • Increased revenue and location visits - 88% of consumers who search for a type of business on a mobile device call or go to that business within 24 hours

How to make a website mobile friendly

You don’t need a separate website anymore, instead your website should change based on the device it’s viewed on. In fact, having two websites could hurt your Google ranking, as Google doesn’t like duplicate content

Instead, you should choose a platform that allows for easy mobile responsive design. Showit allows you to design the mobile version of your website separately from the desktop version, so you have control over every piece.  Squarespace is mobile-responsive and lays out the mobile version of your website based on where content blocks are placed. More and more templates are also allowing for style changes only for mobile devices. Whichever option you choose, make sure to test your design across all devices and as new updates are released.

Common Mistakes of mobile design

  • Blocked javascript, css, and image files – you want search engines and users to see all of your content so that it can index it correctly
  • Unplayable content – some types of video (such as those constrained by a license or that require Flash) won’t work on many mobile devices. If a video can’t be played, the visitor will see an error, which can be frustrating. To get around this you can either use HTML5 tags or embed the video content through a player that’s available on all devices (like YouTube). You can also include a transcription for those who can’t watch the video.
  • Faulty redirects -If your mobile site is designed so that you have separate pages from desktop and mobile devices, you need to make sure the every page has both versions and they are correctly set to redirect based on the device information.
  • Pop-ups - Many websites use pop-ups to encourage people to perform a certain action, like subscribing to an email list. These tend to have high conversion rates, but can frustrate users on mobile devices because they aren’t easy to close and block the content someone is trying to read. If you are using a pop-up, either turn it off on mobile devices or redesign it so that it’s easy to close.
  • Small font size - Font size should be at least 14px so users don’t have to zoom in. Readability studies suggest that columns should ideally be 8 to 10 words per line.
  • Touch elements too close - Make buttons large as well to avoid users clicking on the wrong thing. Apple recommends buttons on mobile be at least 44px by 44px. Any touch elements should be at least 32 pixels apart, both vertically and horizontally so that a user’s finger can easily touch the element.
  • Low resolution images - Use high resolution images – all mobile devices, like most desktop monitors, display images in high definition. Having hi-res images means that your images won’t appear blurry or pixelated
  • Slow page speeds - 40% of people abandon a website that takes more than 3 seconds to load, 47% of consumers expect a web page to load within 2 seconds

Need more help?

Get the Guide to see example questions, tasks, and my tips for conducting a successful UX test.

Learn more about how I use your information in my Privacy Policy.