The word “Responsive” has turned into a such an overused keyword that people feel is a necessity with web development and they could not be more wrong.  What IS a necessity is having a mobile strategy (I cannot emphasize that enough).  Having a mobile strategy doesn’t mean going responsive with your website.  It can certainly be a solution, but there’s a much better option available: Adaptive Web Design (AWD).

I talk to businesses daily and review specs for new website redesigns and one of the last goals always mentioned is “Oh, by the way… we need it responsive too.”  First of all, why is mobile strategy always thrown in as a last minute item?  It should always be a priority and the building blocks for everything else!  Second, people need to understand there are other options besides responsive and to know the difference (hence the reason for this blog).  Also, don’t be sold by someone dragging the browsers in and out.  That’s all for show and no actual consumer will ever do that (unless they’re really REALLY curious if it’s responsive).

Let’s take a look at 4 different formats of web design:

• Fixed websites have a set width and resizing the browser or viewing it on different devices won’t affect on the way the website looks.
• Fluid websites are built using percentages for widths. As a result, columns are relative to one another and the browser allowing it to scale up and down fluidly.
• Responsive websites are built on a fluid grid and use media queries to control the design and its content as it scales down or up with the browser or device.
• Adaptive websites have a separate codebase for mobile content, which is why some people believe it to be a less attractive option, but the truth is if it’s built correctly, like with Mule CMS, it doesn’t have to be completely separate.

There’s A LOT of conflicting reports about the percentages of small businesses that have mobile optimized websites.  Most reports say that around 10% of small businesses have a website that is mobile friendly.  I would understand that statistic maybe 2 years ago, but it’s 2014… Why aren’t companies investing in how people are actually viewing their website?!

If you don’t have a mobile strategy, we can help!

Think about “Responsive vs Adaptive” like this:  If you had a gallon of water and you pure some into a bottle, or glass, or cup, the water conforms to the dimensions of the container.  It’s the same exact water (“content”), just reshaped.  That’s how responsive works.  If it were adaptive, you would have full control and be able to customize how the water sits in each container.  Having full control allows for a lot more possibilities and designing the exact UX (User Experience) per device:

Responsive Web Design (RWD)

FACTS:

• Your website responds to width changes in browser windows.
• You have scalable images that change size with the browser width.
• Use media queries to determine style rules based on device screen sizes.

PROS:

• Less Maintenance: It’s easier to update content for everything at once.
• One URL: Sharing links and bookmarking is easier because it doesn’t matter the device people open it with.
• Same Experience for everyone:  Different layout, but same UX.
• SEO: I don’t put a lot of stock in this Pro because it was in 2012 that Google stated: “Google can discover your content more efficiently as we wouldn’t need to crawl a page with the different Googlebot user agents to retrieve and index all the content.”  All our data shows that your SEO Ranking is more about having a mobile version and not the format that it’s displayed in.
• You can look cool while resizing your browser in and out from a desktop.

CONS:

• Website Performance:  Load times are a BIG concerns with RWD.  Someone visiting the page is loading the information for ALL devices and not the specific version that they are currently using.
• Integrating Advertisements:  This is a big challenge on RWD because different sizing and different resolutions.
• Sacrificing Functionality:  If you want to do specific UX functionality per device you won’t be able to.
• Your content is the same no matter what devices you’re on (videos are always a challenge).

NOTES:

People who are big WordPress fanatics are all about responsive mostly because they use pre-existing themes that come built for responsive.  The truth is that creating responsive is much more difficult to code if you go custom, but some people just love saying “Our website is RESPONSIVE.”

Adaptive Web Design (AWD)

FACTS:

• Identify the device through auto-detection script to deliver the best version of the website based on the device’s size and capabilities.
• Might use different content and different versions of the site, depending on the device.
• Images and videos can be completely removed to speed up page load time.

PROS:

• Best Experience for Everyone:  You have full control over the content on each device and how it is used.
• Fast Load Time:  Users are only loading the content designed for that specific device.
• Advertising Monetization:  If you’re going to monitize your website and make it as profitable as it can possible be, you’ll want AWD.

CONS:

• Content Management:  You will need to update content separately per device (can also be viewed as a Pro, but it’s more time consuming), unless you have a CMS like Mule CMS that allows the main content to be shared across desktop and mobile.
• Cross-Linking: Internal linking becomes a little more complicated because you have to see which version of which page you’re actually linking to. Again, this can be solved with a system that doesn’t change the URL when you’re on the mobile site.
• SEO:  I don’t put a lot of stock in this because the Google Algorithm is always changing and from experience you get a higher SEO score from having a mobile version and not specifically what format your mobile version is in.
• You can’t look cool while constantly resizing your browser in and out. But we personally feel that’s ok, and is similar to looking cool because you collect beanie babies.

NOTES:

Adaptive Web Design (AWD) offers all the benefits of responsive design without the drawbacks.  This approach is widely consider a new concept but it is rapidly gaining acceptance and in most cases becoming the primary approach when Responsive Web Design (RWD) is the requested spec from a client.

It no longer is about the design of the content to fit a device but rather take into consideration the functionally of the device, which in turn, delivers a richer user experience based on the context of which the content is being consumed.

Conclusion

I’m not sure who is responsible for starting all the rumors that you NEED responsive, but clearly it was someone who doesn’t know what they are talking about.  Through our experience with our clients, we have seen better results in SEO Ranking by building a custom adaptive website instead of going with a responsive option.  When doing ANY website development, take a Mobile First approach!  It doesn’t matter what industry you are in, it will make life A LOT easier and put your business in a much better situation for growth.  While developing that mobile strategy think about how users interact with each device separately and go with an adaptive option.