What Is Responsive Design and Why Your Website Should Have It in 2016

What Is Responsive Design?

C’mon, it’s 2016. Time to get with it already. If I land on your website from my smartphone and I have to “pinch to zoom” to read some of your text or see images in their entirety, I’m bouncing off the page.

Also, if the only suitable mobile representation of your company is an app or mobile-only website (such as m.website.com), I’m probably not going to be too happy either.

This is because your website needs responsive design, an ability to deliberately adapt to screens large and small. Websites across the internet have been making the upgrade over the last few years, and just last year Google puts its final say on the matter by de-emphasizing sites that aren’t responsive.

Wait, doesn’t everybody have a responsive design? You’d be surprised. Take Reddit, for example. Other websites utilize responsive design but aren’t all too happy about it.

If your website is a little older and not optimized for mobile devices, 2016 is the year you should make the upgrade to responsive design. No more excuses. You owe it to your company and your website visitors to make your site responsive. While you’re at it, you might as well revamp the appearance of the site and its navigation, while also reviewing your current content and then cleaning it up and making it better.

Let’s dig a little deeper into what responsive design is and how you can go about implementing it in the near future.

‘Mobile-Friendly’ vs. ‘Responsive Design’?

The terms “responsive design” and “mobile-friendly” are close to being synonyms, and they’re often used interchangeably on blogs, web forums, social media, etc. Responsive design means the website can shrink or expand to fit all devices, whether a smartphone, tablet, monitor or even a TV screen.

A responsive website is mobile-friendly, but not all mobile-friendly sites are responsive. Some mobile-friendly sites simply shrink to fit your smartphone, appearing just as their desktop equivalents, only smaller. This isn’t true responsive design.

Responsive design also means that elements of the website will condense or disappear from the page as the device gets smaller and smaller, yet the layout and organization still makes sense to the user. The horizontal navigation on responsive websites usually gets condensed into a drop-down “hamburger”-style menu (although some designers are now advocating against the icon), as you can see with the green button below..

Responsive design isn’t just about making a website look pretty no matter the device. It’s about fostering a great user experience no matter the device.

Many companies used to get around upgrading to a mobile-friendly website by building a separate phone app that looked and functioned very similarly to the desktop version of the site. Others created sub-domain sites with an “m” right before the website’s name, and these such sites featured either standalone mobile pages or stripped-down versions of the desktop equivalents.

You don’t have to go either route anymore. Some businesses still have legitimate reasons for creating a separate mobile app, but we don’t recommend doing this in lieu of making the main website mobile-friendly.

Google Rankings and Users’ Habits: The Importance of Responsive Design

SEO analysts disagree on the exact month when mobile search first began to overshadow that of desktop, but it looks like it happened somewhere between mid-2014 and early 2015. Smartphones are nearly ubiquitous now, and users are becoming more and more comfortable with turning to their phones first, rather than their desktop or laptop computers, to search the web, use apps, go on social media, etc. Mobile usage, including mobile search, is only going to continue to get more dominant in 2016.

Another game-changer that happened around the same time as mobile search’s rise to the crown was a Google algorithm update that began to accommodate mobile-friendly sites. This means that sites that weren’t responsive saw a dip in their search engine rankings. When you’re searching Google from a smartphone, you’ll even see the term “Mobile-friendly” show up before the meta descriptions of the applicable pages.

I searched for “Flower Store Phoenix” on my smartphone, and here are my results:

There actually are some slight variations between the results after searching for the same term on a mobile phone and a desktop computer. Here is my search for the same term, but this time from a desktop:

What’s interesting to note is that tablets don’t count as mobile searches, according to Google. The mobile-friendly algorithm update of 2015 only impacted searches via smartphones, not on tablets, laptops or desktops. Even if having a non-mobile-friendly site doesn’t negatively impact your rankings in mobile search, you’re missing out on scores of additional visitors because smartphone use is so prevalent now.

If users can’t find your site in mobile search and smartphones are the No. 1 device for search now, how can you expect your website’s visitation to grow?

Responsive Websites are a Part of Branding, After All

Making a website mobile-friendly is actually a component of a strong brand strategy. How? If somebody happens to have visited your site from a desktop before, they might land on your site on mobile search one day and say, “Hey, I’ve been here before.” But, if you’ve built a mobile site that looks and operates much differently than your primary site, then you have a disconnect in your branding.

Also, those who have visited your website via desktop and are familiar with the breadth of your content and navigation should have no trouble accessing your site with their smartphone and finding their way around, even if the navigation gets condensed into a hamburger menu. Making your site adjust easily to all screen sizes is a good strategy for keeping your longtime visitors around, as well as inviting and retaining new ones.

How to Test for Responsive Design

Not sure if your website already has responsive design? Not to worry. There are several free online tools you can use to give you the answer.

First, you can use Google’s Mobile-Friendly Test to see if your homepage or any sub-page of your website is responsive. Just type in any URL from your site, and Google will analyze it and provide you with the answer.

Second, you can go to ResponsiveTest.net and play around with different dimensions of your website. Just type in your URL at the top of the page. If elements of the site rearrange themselves, grow, shrink, etc., then you’ll know you have responsive design.

A way to test your site without visiting another website is to take your browser out of full screen. Hover your cursor over the bottom-right of your browser and then shrink the window slowly. Shrink and enlarge it as much as you want, and see if elements of your website rearrange, compress, disappear and reappear. If so, great! Your work is done (unless you notice that the website could look a little better at certain sizes).

Difference Between Responsive and Adaptive Web Design

You may have heard the term “adaptive web design” as well. This has to do with coding the website for pre-defined dimensions and deciding what to fit on the screen and what to leave out. For example, the developer would have to code the website differently for smartphone, tablet and desktop/laptop monitor sizes.

In short, adaptive design takes more work than responsive, and you end up spending more money because your developer will need more time to complete all of that work. It also could put you in a bind as new devices with unique screen sizes hit the market in the future.

Some say a responsive website takes a little longer to load than a site with adaptive design, but pretty much everybody is focusing on responsive design right now. In fact, some developers would argue that adaptive design is a component of the responsive process, since you still want to test the look of your website at some of the more common screen sizes, even though responsive allows the site to adjust to any device.

The aforementioned ResponsiveTest.net gives you options for viewing your website at the screen sizes of dozens of the most popular devices on the market. Just look to the upper-right corner of the page for these icons:

How to Make Your Website Mobile-Friendly

Now that you’re likely convinced to implement responsive design on your old, static website, let’s look at some ways you can make the upgrade.

If your website is coded by hand, this Google Webmaster Central Help Forum thread will give you a good start on how you (or your programmer) can make the site mobile-friendly. A high level of technical expertise is required if you want to go this route.

A more recommended direction is to migrate your site to a content management system (CMS), if you don’t utilize one already. WordPress, Joomla and Drupal are some of the most popular CMS’s on the market. If you do decide on this option, we’d highly recommend reworking and redesigning your website in general, since it’s likely outdated.

Redesigning Your Website While Making It Mobile-Friendly

Redesigning your site entails looking over your navigation and all of your content to see what needs to be included on the new site and what can be dropped for the best user experience. For example, if you have service pages that only have a couple of paragraphs of copy and nothing else, you’re probably either going to want to add much more content or just work that copy into a larger service overview page.

It’s going to take a few, long hours with your programmer and/or web developer, and even your content team, to decide on the final look and navigation of your new, responsive website, all controlled by the CMS of your choice. Brace yourself.

We Can Help

If upgrading your website with responsive design sounds daunting and you’re not sure if you have the team or resources to make it happen, outside help is always available. Eminent SEO can help you strategically build and design a new, responsive website, and we’ll set you up with an easy-to-use CMS if you don’t already use one. To learn more, see our wide range of Website Creation services.

If you’re ready to get started now on making your current website mobile-friendly, contact Eminent SEO at 800.871.4130.