Adaptive and responsive web design are amongst the biggest buzzwords on the internet right now. But what do they mean? What is adaptive web design? What is the difference between an adaptive and a responsive web site?
I’m going to outline below the main differences between Static, Liquid, Adaptive and Responsive web design, as well as the pros and cons of each.
Static Web Design
Static layouts are rigid. They do not change whether you are viewing them on a mobile, tablet or desktop, you get the same website on every device. Static websites make up the traditional web. If the browser window you are viewing the site in is too thin for the sites design you will need to scroll horizontally to view the whole site. To allow for a better experience on a mobile device, static websites traditionally redirected you to a completely different website with a design made specifically for smaller resolutions.
- Quicker and normally cheaper to build.
- Less though and preparation required in the design process.
- Poor user experience.
- Doesn’t allow for optimal layout on different screen sizes.
- Have to create a separate site for mobile users.
Liquid Web Design
Liquid (or fluid) layouts are less rigid than static designs. They use percentage measurements and take into account the size of the screen you are viewing them on. The layout however does not change, so on smaller screens like mobiles, liquid designs tend to fail.
- More flexible than a static layout.
- Allows for a good user experience on desktop computers.
- Doesn’t cater for mobile and smaller tablet users, or larger screens such as iMacs.
- Can result in inconsistent content.
Adaptive Web Design
Adaptive layouts have different layouts for different resolutions. As the screen resolution is reduced below a set threshold the page will change is layout to suit the new resolution. It is similar to having multiple static sites for different devices but with the ease of only having 1 site to manage.
- Allows for a good user experience on multiple devices.
- Only 1 site to manage across all devices.
- Can tailor a design to a specific device.
- Takes longer to build.
- Isn’t optimal for more niche devices with unique screen resolutions.
Responsive Web Design
Responsive web design is in my opinion the best of the bunch. It is a mixture of both fluid and responsive design. The content adjusts as the screen resolution is reduced, but when the screen becomes too small for the content to be displayed correctly, it re arranges the content to a more suitable layout. This means the design isn’t tailored to specific devices, instead the layout is tailored to the content.
- Optimal user experience on all devices.
- Future proof and easily manageable
- Requires more though and preparation at the design stage.
- Takes longer to build.
For a visual representation of what I have explained above visit http://www.liquidapsive.com/ and follow the onscreen instructions.
If you are interested in finding out more please visit our responsive web design page or give us a call on 01293 265 370.