Yambo's Blog
Our Blog » Adaptively Responsive Web Design... Say What?
Adaptively Responsive Web Design... Say What?
At Yambo we adhere to the Adaptive Web Design approach when building mobile responsive websites, however recently we've started to combine both Adaptive and Responsive techniques together to create one ultimate Adaptively Responsive Web Design Monster... who eats extra code for breakfast...
but what the heck are we on about?
Adaptive Web Design (AWD) and Responsive Web Design (RWD) are very similar to each other, especially from a user's perspective, as they essentially do the same thing - they show an optimised version of a website for a particular device.
In this explanation I'll be using mobile responsiveness in my examples, but this can apply to any device in which the design/layout adapts to show an optimised version (small laptop screens, tablets, etc).
What is Responsive Web Design?
Responsive Web Design (RWD) uses a single design theme with a fluid layout which adjusts to various screen widths on a device, meaning only one page theme is needed in order to show both desktop and mobile the same website.
An easy way to determine whether a site uses this method is to re-size the browser window, if the layout starts to adjust and change to fit the content within then it's pretty much certain the site you are viewing is using the Responsive Web Design method (although this is not always guaranteed).
With this method the layout is determined on the client side via the user’s browser, rather than server side.
Pros:
- Easy to Maintain: using only one single design means only making changes the once
- Fits to any Screen Size/Width: regardless of the device the design will constantly adjust to fit
- Clever Responsive CSS Frameworks: Bootstrap, Sleek, Skeleton, etc, are really clever and intuitive in how they work, and once you understand a framework it becomes easier to build responsive sites
Cons:
- Slow Page Speeds: the same code is loaded by both the desktop and the mobile version, this is regardless of whether certain elements are hidden or not
- Unnecessary Extra Code is Hidden instead of Removed: the extra code is only hidden by either CSS or Javascript but is still requested by the browser
- Fits to any Screen Size/Width: it's practically impossible to design for every single screen size and device, and because of this, sometimes the design doesn't look quite right between break points - there isn't a dedicated layout
What is Adaptive Web Design?
With Adaptive Web Design (AWD) the website is designed specifically with the device in mind, there isn't one single fluid layout which automatically (or responsively) adjusts to each device. Instead, each device has it's own personal design layout (theme).
The layout is determined on the server side and the decisions are made by the web server, not via the browser. The server detects which device or browser is connecting to the webpage and then sends the correct design layout of the site to the device, making it quicker for the user.
Pros:
- Fast Page Speeds: this is by far the main reason why we build sites using the Adaptive Web Design method - the code is not simply hidden away, it's completely removed making the page load super fast - which Google loves!
- User Experience: the design is built to maximise the compatibility of the device, meaning an improved User Experience (or UX for cool kids)
- Bespoke Design/Functionality: want the mobile site to have a completely different design and feel to the main site? Then as crazy as it sounds, it's possible
Cons:
- Fits to any Screen Size/Width: technically you could design a separate theme for each device and screen width, but this would be overkill and very time consuming
- Harder to Maintain: it usually requires more effort to manage a separate mobile theme and a desktop theme
So Who's this Adaptively Responsive Web Design Monster?
Yep you've guessed it, it's a combination of the two responsive design methods using the best of both worlds.
A mobile theme built specifically for the mobile device but responsive enough to allow flexibility between mobile screen sizes.
New devices are constantly coming out and screen sizes are invariably going to change - but by using this method we can continue to support all devices and maintain 100% responsiveness.
Yum! Taste that cereal.