Enter Adaptive Web Design, Exit Responsive Web Design..

websites
You have a Website.. Now What?
October 17, 2018
responsive web design

As you know, the internet is an environment of ever changing formats and brings on the obsolescence of platforms, plugins, and even experiences in regards to how information is displayed and this definitely includes websites and their ability to display on mobile devices. It's highly important to note how pervasive end-users are now using mobile devices for search. A whopping 52% of searchers are using some sort of mobile device to search and access websites. Up from about 30% less than 5 years ago. It is also important to understand how browsers, desktop and mobile servers up and display websites based on the platform and on how each browser reacts. You also cannot discount the role that Google servers plays in regards to this. Let's it as a business, you cannot afford not to have some form of mobile version of your site. You practically miss out on over 50% of the potential traffic coming to your site if you are not "mobile".

First lets understand the differences between the terms of mobile themes, responsive web design (RWD), adaptive web design (AWD) and progressive web apps (PWA) and what they can do for you.

What is a Mobile Theme?

These are responsible for the mobile-dedicated sites of the world – or m-dot. They are easy to add to existing desktop experiences, but each change to the site requires both mobile and desktop updates. What’s more, Google frowns upon serving two different experiences as its crawlers must essentially read two sites because the content and code of mobile themes are separate. Enter: responsive web design.

What is Responsive Web Design?

Responsive design is client-side, meaning the whole page is delivered to the device browser and the browser then changes how the page appears in relation to the dimensions( or ratio )of the browser window. For example if the page is opened up on an android device like a Galaxy 6, it would actually look a little different in size proportionately on a pad like the Galaxy 10. The responsive code literally "reads" the type of device and will resize according to the device being used to read it. There are some positives of RWD are often stated in that the sites are easy to maintain, and they provide a consistent experience across devices. On the other hand, one channel typically suffers. If mobile first, for example, then the desktop does not look quite right. If desktop first, then mobile is overloaded. Still, there is unified content and code, which minimizes the resource burden of catering to both desktop and mobile users.

What is an Adaptive Website Design?

You just learned that responsive design is when you flick the switch, and the lamp responds by turning on the light. Adaptive web design is when you’re able to adjust/adapt the lamp so that you can see better. The positives of AWD are under-stated in that it delivers a device-specific experience and it improves website performance as speed, load times which also affect SEO. AWD does come with negatives though in that it includes having to manage separate code branches, which can add time to development and site updates thus the initial costs of developement– even though it uses a single content repository – still very much better than dedicated mobile sites. The content and code are both unified. Now, the mobile experience for both the end-user and the organization hosting the site itself, is becoming more mature.

Progressive Web Design

“PWAs enable companies (and the designers and developers they employ) to deploy their digital creations natively (on iOS or Android for example) and on the mobile/desktop Web itself, taking advantage of both channels, and the benefits of both channels – again, simultaneously Name a retailer alive who does not want to reach more people. This is where Progressive web aps are user experiences that have the reach of the web, and the web reaches three times as many people as native apps. Once they reach them, the users are presented with an app-like experience, using features of phone and browser to enhance mobile web experience – and quicker than other design options allow. Like each of the design approaches mentioned here, PWAs do have their downfalls in that organizations need to manage separate code branches. Managing separate code branches can add time to development and site updates, but PWAs use a single content repository so it is still faster than updating mobile themes.