Imagine you have built a stunning website for your blog or business. You have slaved away to get every detail perfect, create quality content, and lay it out beautifully. Everything is going great and you’re ready to launch! That is until you look at it on your smartphone. The text is so small it’s illegible, elements are too big for the screen size and causing horizontal scrolling – it’s a mess! Today mobile responsiveness is the standard in web design that you can’t avoid. Keep reading to learn what it means, why it’s important, and how you can make sure your mobile users aren’t leaving your website.

 

What is responsive web design?

 

Responsive mobile design means that a single URL will react seamlessly to whatever device the user is viewing it on, be it a desktop, laptop, tablet, or smartphone. A site that is mobile responsive features a layout which will flexibly adjust based on the screen size of the device, or size of the browser. Some examples of mobile responsiveness include text that adjusts in size based on the screen or columns in a row that stack vertically when viewed on a smaller device. It’s also helpful to keep in mind that less is usually more with mobile. Having certain elements reorder or disappear entirely on smaller devices can provide much better flow, giving the user only the most essential information. This way, they don’t have to spend a lot of time scrolling through all the content that may fit concisely on a desktop, but not so much on a smartphone.

Here are a few requirements of responsive web design:

 

• The text is readable and doesn’t require the user to zoom in
• There is enough space for the user to click on tap targets, such as links, buttons, videos, etc.
• There is no horizontal scrolling – the page and all elements fit within the device screen size perfectly
• There is consistency in look and user experience across all devices

 

Why is it important?

 

So now that you know what responsive design is, we can discuss why it is so important. In 2015, Google made drastic changes to the search engine algorithm that heavily factor in mobile responsiveness in how a site ranks. While this alone should be enough to convince you of its importance, here are some statistics that may blow your mind:

 

• Smartphone users worldwide surpassed 2 billion in 2016 (Emarketer, 2016)
• Over 60% of online searches come from a mobile device (thenextweb, 2015)
• 57% of all U.S. online traffic now comes from smartphones and tablets (BrightEdge, 2017)
• 57% of users say they won’t recommend a business with a poorly designed mobile site (socPub)
• People today have 2X more interactions with brands on mobile than anywhere else—that includes TV, in-store, you name it (Google, 2017)
• Over 40% of online transactions are now done on mobile (Google, 2017)
• 44% of Fortune 500 companies are not mobile-ready at this time, meaning you can get ahead by making sure your website is (techcrunch.com)

And these numbers are steadily climbing.

 

So in essence, responsive web design is no longer an option that will enhance your website, it is paramount to your website’s success. If you don’t have it, you are not only missing out on invaluable search engine exposure, you are alienating up to 60% of your consumer base who are only coming to your site via their smartphone.

 

How to Make Sure Your Site is Mobile Responsive

 

Fortunately, creating a mobile responsive site is relatively easy these days. All major website builders, such as Squarespace, Wix, and Shopify, offer pre-made templates that are fully responsive already. Most WordPress themes are also mobile responsive. All you have to do is fill in your information and test. If you’d like more control and customization over your responsive designs, and have a bit of HTML and CSS knowledge, you can use

<a href=”https://www.w3schools.com/cssref/css3_pr_mediaquery.asp” target=”_blank”>media queries</a> 

to change or hide elements based on the screen size they are being viewed on.

 

How to Test Your Website

 

Though it is recommended to physically test your website on as many different devices and browsers as possible, some websites offer free tools that will show how your website will look on a variety of devices. Here are a few that we recommend:

 

https://search.google.com/test/mobile-friendly – This tool was made by Google and will tell you if they consider your website mobile friendly, and will rank it higher accordingly.

 

http://responsiv.eu/ – This tool allows you to view a website as it will appear across a variety of screen sizes, from iPhones up to 27″ iMacs.

 

Another way to test responsiveness is by opening your website on a variety of internet browsers and adjusting the size of the window to see if everything adjusts.

 

It is important to note that these tools may not be 100% accurate, considering disparities between device manufacturers as well as internet browsers, so it’s important to do as much testing on different devices and browsers as possible.

 

At Utah Media Group, we pride ourselves in our quality, mobile responsive web design. If you have more web design questions, or would like to work with us, <a href=”#” target=”_blank”>contact us</a> today!