Responsive Design vs. Adaptive Delivery: Achieving Accessibility

All organizations must be up to date with the latest trends to promote their business, and that includes website development. Responsive versus adaptive design currently leads the debate on website accessibility from various devices. Deciding which of the two best suit your needs has everything to do with the content of your site and the user’s intent when accessing your pages. According to eMarketer, 4.55 billion people worldwide are expected to use a mobile phone for general features in 2014. They also estimate that the total number of mobile phone internet users will rise 16.5% in 2014 and maintain double-digit growth through 2016. Why is this relevant to your website? It is all about the need for speed. Website speed has become increasingly important and slow loading times mean losing visitors and not meeting their needs. Having a design that fits your user's intent and is accessible from a mobile device is not only friendly, but necessary. The numbers speak for themselves.

Of the two designs, responsive design is currently the most common choice, offering a “one template fits all” approach that works for both desktop and mobile users. The idea is that one design template is created to suit all devices using CSS media inquiries and regions along with flexible and fluid layouts to adjust all elements based on the screen size. This is best used for content-heavy sites where technical and design aspects are not the main priority and there is slight variation between mobile and desktop sites, yet optimization is ensured across all devices. On the other hand, responsive design can slow down loading times on mobile sites when users have to wait for maps, text, graphics, and more to download, regardless of whether or not it will appear on their screen.

Example of responsive design – All elements from Desktop homepage (Image A) are displayed on Tablet view (Image B) and Mobile (Image C) in a fluid design for a better user experience.

If your site is painfully slow, users will get frustrated and leave quickly. This means all that awesome content you created isn’t going to be seen by the people who abandoned your slow-loading site. Fewer visitors means fewer conversions, fewer sales, and less revenue. Furthermore, you may be sabotaging all of your other SEO work by dropping the ball at the goal line with a slow site. You’ve optimized your Meta tags, created search engine-friendly content, built links — the whole nine yards. And now all of that is for naught because once you got users to click through, they didn’t want to wait for your site to load.

"It would be like getting a date with someone you impressed by being talkative and personable and then not speaking for the first 20 minutes of your date.” says Simon Slade for Traffic Travis. (“Is Your Website Speed Hurting Your Rankings?”).

Designer insider tip: When designing a responsive site, you must think in terms of mobile first design. Responsive design means that all elements may not translate seamlessly between devices therefore, it is best to design based on a mobile version first and then expand from there. Otherwise streamlining your design process becomes increasingly difficult as you begin testing your site.

Adaptive design is not necessarily new to the web world, but considering the extra resources and development skills required, not everyone is able to go with adaptive delivery. Differing from responsive websites that adjust all elements to all devices, the adaptive approach identifies which device is making a request and downloads only the batches of HTML and CSS necessary based on the characteristics of that specific device. This design allows developers to deliver the most important elements based on the user and their intent depending on what device they access the site from. The widely discussed downfall to this type of site is that multiple templates need to be created for every device and screen size. This means that design time, updates, and changes become more time-consuming with every additional template and, inherently, every resolution out there. Though, adaptive does seem to better fit the ever-growing need for faster load times and increased user satisfaction.

Since there is no way to predict what new devices and screen sizes will evolve, or definitively say whether responsive or adaptive design is more “future-proof,” right now there is no right or wrong answer to which choice is best. Most importantly, you have to think about your user. What is your user looking for in a mobile site? If the intent of your mobile and desktop sites vastly differ from one another, then consider adaptive design to enhance your consumer’s experience. Otherwise, your can simplify the design process and go with responsive design. Put your business needs, combined with your users’ desires, at the top of your goals and you can’t go wrong.

Image Credits: Rock ‘em Sock ‘em Robots: CC Flickr- User: David Erickson.
Responsive Design Image: Sharp Innovations, Blog Adaptive Delivery Image: Business2Community

Content Source: Great Circle Studios SEO Blog, Business 2 Community, Sharp Innovations, inc, Traffic Travis, eMarketer.