Thinking


The view from here

5 Reasons Why Responsive Web Design is a Good Idea

By Joshua McKnight in Web Development on June 23rd, 2015

Responsive design seemed to take over the world overnight. It happened faster than anyone anticipated, and it’s not only changing how websites are designed, but also challenging even the most sacred of web design best practices.  Learn why you should seriously consider making your site responsive.

responsive web design

Consider “the fold.” What once dictated the design process now holds far less merit since there is no longer any sort of set parameter to define it. Websites now have to render on screens that come in almost every shape and size imaginable. They have to be lightweight and easy to navigate. They have to accommodate a different type of user interaction, and, as a result, require a new set of best practices—ones that include weeding out needless content, excess pages and heavy graphics to create clean, simplistic sites that even a toddler could use.

Below are some additional key changes brought about by responsive design that you should take into account when considering your brand's website design.

1. The Death of the Fold

The fold has been the frenemy of every web designer since the 90s. At first, we embraced it as the starting point to good website design. Like the North Star it was constant. Reliable. Bright. But we soon learned there was a dark side to the fold—because the fold is a double-edged sword. We’ve all seen the look in someone’s eyes when they talk about “the fold”—and their revelations about “understanding” it. Suddenly, designers were made to exploit this real estate and cluster content as high as possible on the page, thanks to constant reminders to keep it above the fold. It became a thing of nightmares, with countless designs jeopardized over faulty black-and-white logic that had nearly every web designer contemplating a change in career path. Needless to say, no one is crying about the death of the fold now. It was a true love-hate relationship. We showed up to the funeral but used the time to catch-up on email rather than mourn the loss.

With today’s “mobile first” movement, now designers must approach this beast from a different angle. Devices that render the internet come in every shape, size, resolution and orientation and require different design solutions. Naturally there are some takeaways from the fold that will live with us forever. The top of every web page will always be prized real estate and rightfully so; it’s the first impression a user has. The difference is that we now want to treat each section of the page the same way. With the consolidation of content and longer pages becoming the norm, it’s imperative that the entire page engage the user, not just the flashy stuff clustered at the very top. This brings us to our next change: page length.

2. Fewer, Longer Pages

In the past, websites could be a very confusing place. Sitemaps used to look like jumbled spaghetti noodles. There was one page for every topic, even if that topic only had a paragraph’s worth of content. No more. You see, it’s very challenging for a user to surf a website that’s more like driving through rush hour traffic. It’s even more challenging when the content they’re looking for is nested in the very depths of anarchy. To simplify the user experience, we’ve consolidated content and pages. We’ve embraced the once sinful scroll, and with good reason: scrolling is the most basic user interaction on the web. It’s intrinsic and a familiar standard, so it shouldn’t be feared but rather embraced. Instead of 10 separate pages that lack content and make users frantically click back and forth, we consolidate and organize them onto one page. We reduce the amount of click-throughs and searching. In an age of instant gratification and search results, ain’t nobody got time to dig around for what they want. So have everything pertaining to one category in one place and use sub-pages sparingly.  Keep it simple and clean.

3. Content is King 'Round Here

White space is a right-brain concept that causes some left-brains to get uncomfortable and question that right-brain judgment. But it is a concept that, love it or hate it, is here to stay in this age of responsive web design. You see, as screens get smaller, things like text and buttons need to get larger for the user’s sake. With these elements typically dominating the screen, content’s reign as king isn’t going anywhere. So much so that little to nothing else is even needed to display alongside it. Seeing paragraphs stacked on top of one another with nothing more than white space separating them is the new norm. You’re not wasting space or advertising opportunities. There is no fold mentality pushing you to jumble all this content together. Instead, you’re clearing a path for your user to take, ensuring that everything is neatly laid out for them. Their experience is what matters most along this journey. It’s a weird balancing act, but when done right it’s very effective.

4. Icons and Simplistic Imagery

There’s this little technological advancement you may have heard of: retina display. And it’s wreaking havoc in the design world. Reason being, it requires everything you’ve designed at a standard resolution to be doubled in size to render crisp and sharp on that shiny new device. All the assets you labored over at a standard resolution will now render blurry unless they are two times the size you created them. So, how do you accommodate larger imagery? Note: there is already a need to reduce image file size because of data plan bandwidth limitations and the need to download quickly to a mobile device. So we don’t have too many options here. That’s where SVG files come in. SVG files are essentially scalable graphics for the web. They’re simple, vector based (typically icons) that scale to any size dimension without degrading quality. They are easily implemented in code; you can change the color and size dimensions with a few tweaks to your CSS. Plus, they’re extremely lightweight in file size. They won’t solve every problem, but when combined with small, simple graphics you can dramatically improve your site’s performance.

5. SEO Visibility

Having a single responsive website instead of several versions allows search engines to crawl and index content on one URL. Create good content, attract natural high-quality links, and watch your website rise to the top of search results. Responsive design means you can manage one website with a single set of hypertext links, therefore reducing the time spent maintaining your site. This allows you to focus on link outreach, content creation, and social media with a consolidated Search Engine Optimization (SEO) strategy. SEO can be time consuming and costly, but by creating a responsive site, all of your efforts can be focused on a single site, with unified strategy and tactics across devices. You’ll waste fewer resources in low-level duplication of content across sites; the content need only be applied to a single site, increasing your chances or a higher search engine ranking. Mobile searches have almost overtaken web searches and Google ranks mobile-optimized URLs higher as far as mobile searches are concerned. Therefore a responsive design, which is best for mobile search, is also the best for your SEO.

If you’ve read this far, you’re beginning to realize all the benefits of responsive web design and can see why Google has declared it a best practice for mobile optimization and usability. It’s here to stay, so get comfortable with it, explore it, and remember, keep it simple.

 

Need help transforming your site?

Let our responsive design experts help!