6min read

What is Responsive Website Design and Why Does it Matter?

by Article by Remington Begg Remington Begg | May 3, 2018 at 11:00 AM
 

When your website looks and works the same across all screens, it is considered responsive. Consumers access the internet on a multitude of devices; each with unique screens sizes. From early editions of the iPhone to giant high resolution computer monitors, your customers are experiencing your digital presence at home, in the office and on the go. Having a website that is accessible and usable in all of these scenarios is paramount to the success of your online brand.

Bad user experiences can decrease conversions, pump up bounce rates and harm your chance at building brand equity.

You wouldn’t want your customer service department to be remembered for being unhelpful or rude.

Similarly, you don’t want your website to be left behind because it is broken or isn’t serving your users the answers they seek.

Breaking Down What Makes a Website Responsive

Shuffling of Elements

As the browser window grows or shrinks, much of the on-page elements will ideally reorder themselves to ensure they remain in place for the user. On a desktop browser, for instance, this may lead to columns of text lining up next to one another across the screen. Conversely, on a mobile device, these same text blocks will stack on top of one another. In either case, the content will remain in order it’s been designed to: left to right, top to bottom, and so on. This helps users remain oriented at all times, so as not to be confused about where they can find things.

There’s nothing worse than when a user begins browsing your website from a mobile device, only to lose track of where they were when they revisit from a desktop computer later. And vice versa. In 2017, half of all holiday shopping was done on a mobile device, but a majority of purchases were completed on a desktop. Keeping the experience familiar is key to converting.

What to Cut, What to Keep

Best practices suggest the goal of responsive web design is to keep the experience the same regardless of screen size. In some cases however, this doesn't always ring true. Especially when moving from larger screens to smaller ones.

When thinking about your web experience on mobile, you’ll want to optimize for speed. Data is precious and many users aren’t on an unlimited plan. If your website header includes a background video, or some of your content features heavy transitional animations, dialing these back will greatly improve the speed at which the rest of your website loads. Your users will love you for it, albeit subconsciously.

Admittedly the desktop experience of a website is always more fun, simply because of processor speed and screen real estate. But the bells and whistles don’t make your website usable. Delivering content when and where it’s needed should win out over design flare every time, so cut the fat when moving from desktop to mobile. For more on prioritizing content, check out Nielsen Norman Group’s write up on the subject.

website-design-process-wireframes

Mobile First Mindset

The two points above speak directly to why mobile first is the way to go when designing or redesigning your website. If you approach your web experience from a point of view which is the narrowest you’re more likely to think critically about the experience as a whole, regardless of screen size or device type.

“Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.”

-Antoine de Saint-Exupery

Now, no website is perfect. Not by any means. But the rest of Saint-Exupery’s quote above rings true, especially for design. When you tackle your website’s content strategy and visual design with a mobile first mindset, you force yourself to explore how to convey your message with least amount of info possible. Also, 64% of the world is accessing the internet through their smartphone or other mobile device. So taking a mobile first approach isn’t only wise for your brand, but for your business as well.

Why Should You Make Your Website Responsive

I have alluded to the number one reason you need a responsive website: better user experience.

Who is the user? It could be your next customer. When a visitor makes their way to your website, by way of smartphone, desktop, or any device in between, you want to deliver an experience that is unobstructed. According to comScore, ¼ of the entire world is mobile ONLY. In some countries, mobile only accounts for 70% of all internet access. Build your website to meet your customers demands, wherever they are and however they access it.

Your website should be built to provide, not prohibit.

Beyond pleasing your visitors, responsive web design makes sense for improving SEO. Many search engines, including Google and Bing, will give preference to responsive websites. In other words you’re more likely to rank higher in search results if your website is optimized for multiple device types. Numerous studies have concluded that responsive websites perform better and load faster. When a website loads quicker, search engines can easily discover and index content quickly and efficiently. Landing on the front page of your favorite search engine should be as much a part of your design strategy as it is your content strategy.

Now aside from search engines, a lot of traffic to your website is coming from social media. In fact as far back as 2015, social media was already responsible for 31% of referral traffic. We’ve reached a tipping point. It makes absolutely no sense to have a website design that isn’t responsive. With a majority of users consuming social media from their mobile device, your web design must respond to as many screen size as possible. Chances are, if the user is reading your blog and the experience is frictionless, they’re more likely to share your content, generating even more page views. More page views can me more conversions.

Taking The Next Step

Every website we create here at Impulse Creative is responsive. It’s pretty much the industry standard at this point. We sketch out wireframes and develop high fidelity concepts with a mobile-first mindset. If you’re working with a partner that doesn’t operate in this way, you may be sacrificing a lot. You get what you pay for.

Approaching web design with the strictest parameters first allows design teams to think about content strategy and worst case scenarios from the outset. Scaling up to larger screens becomes easier and more efficient when you’ve already removed everything that can be taken away. Partnering with a design agency, whose processes are developed to maximize efficiency, guarantees a product that is better and friendlier to your bottom line. If your web design agency isn’t responsive to your needs, how can they guarantee your website will be responsive to the need of your users?