Web 3.0 is responsive vs adaptive Web design

Responsive Design

It seems like the next generation of Web evolution (Web 3.0) is centered around this concept of responsive vs adaptive Web design. There is so much information around this concept of architecture and design for your Web experience across online, tablet and mobile that I am spending some more time researching the concepts.  With my direct experience in corporate Digital marketing, I know this is still a very relevant issue with most companies  out there today.

awd vs rwd beeiconic2

The Basics

When designing and building a website today, it’s essential for enterprises to think about how users will access their website – will it be from desktops, smartphones, tablets (or all three)? What’s not as clear to many, however, is the best way to achieve this state of cross-device compatibility. Two of the hottest approaches to implementing multi-screen websites are responsive Web design (RWD) and adaptive Web design (AWD), but there is a lot of confusion about the two. While some consider RWD and AWD to be competing, they are, in fact, complementary.

RWD is a design technique that results in websites being displayed properly on any screen size. The main idea behind RWD is that the HTML markup sent from the server is the same no matter which device or screen is requesting the Web page. The only thing that changes is the CSS and Javascript code that formats the content differently according to the screen size using CSS media queries. RWD uses a fluid grid concept where content is split into rows and columns with clear “breakpoints” that determines when columns are “breaking” and are displayed in a new row.

AWD is a technique to design websites that are optimized for the device, screen and the user by leveraging server side technology, CSS and Javascript. In AWD, the server sends a completely different version of HTML/CSS/JavaScript to the browser by detecting the User Agent to determine if the request is coming from a smartphone or a desktop. The best way to determine if a site is using AWD is by first checking that it is not responsive using the method outlined above, then accessing it from a smartphone browser (or using a user agent switcher) and checking to see if the site adapts to the smartphone without changing the URL in the mobile browser address bar (e.g. not redirecting to an m.domain URL).

So which is better? Well that depends on a few things.

Responsive design is much more popular. Designers only need to change the HTML/CSS of the site in order to implement Responsive Design regardless of the back end in which the site is built on.  Responsive design works with all screen sizes so you don’t have to update your code each time a new device comes out with a new aspect ratio and size.  On the other hand, responsive design uses the exact same HTML, JavaScript and CSS files are being sent to the browser in all cases.  The more complicated a desktop site is, the more difficult it is to use responsive design while providing an excellent experience for your mobile users and performance deteriorates over mobile. Also design becomes an issue when trying to deal with complex desktop interfaces and simplifying that design on mobile using the same code.

With adaptive design, designers can send only what’s needed to the browser in order to provide the best user experience. It can get rid of resources that are not needed and can make sure the HTML is optimized to the screen. Another advantage of AWD is that designers and developers can think beyond screen size and add in other factors that the server can use when outputting the site markup, such as location, device capabilities and more. It is interesting to note that most relatively simple websites like blogs, even popular ones are using RWD, while more complex sites like big news publications, and big e-commerce sites like Amazon and eBay are using AWD or a combination of RWD and AWD.

Websites can use RWD techniques and combine it with AWD whenever it makes sense. This approach can help designers and developers enjoy the best from both worlds – the simplicity of RWD when writing new content and knowing it will always be “responsive,” while still optimizing the overall site layout and structure using AWD server-side scripting.

See the Website magazine article written by Amir Glatt for the full write up >>

Check out great circle studios article for their take on the same concepts. >>

Review the beeiconic.com blog article for their take on UX design with some great visuals >>

Image credit above –  bee iconic




Leave a Reply