Visual Basic Help — What Are Adaptive, Responsive, and Liquid Websites?
Even though there are many articles about responsive, adaptive, and liquid types of websites, the mess around this terminology only increases.
In the post below, we are going to clear up the principal difference between types of websites and approaches to development.
Use our visual basic help to build a modern website for any device.
Types of Maquettes
Fixed Mockup in Pixels
Fixed layout is a type of maquette where the width of the content is locked in pixels, and it is not changeable from the sizes of the browser window.
Fixed page layout is a survival of times past when the width of content was dictated by the resolution of the most popular screen sizes (800 x 600 and then 1024 x 768).
Even now it is possible to see websites with a fixed width of content of 960 pixels.
Fluid Mockup in Percentage
This type of website is called fluid because the content is sized by relative measure.
Therefore, instead of static pixels, a developer is using percentage to adapt content to different monitor sizes.
This type of mockup is also dated, as it counts only one kind of device. It is not applicable for huge or small widths.
Adaptive Mockup in Pixel with Media-Queries
Adaptive type of mockup has some similarities with the responsive mockup and based on media queries usage for adaptation of content to different screen parameters.
The main difference from the responsive type of mockup lies in the kind of page layout that “jumps” to fixed points, moving and adapting content each time to the nearest point.
As a consequence, we have an array of different fixed mockups with different screen resolutions.
A disadvantage of this approach is obvious — we cannot second-guess how content will look like on all devices, considering that canvas between main points can be substantial.
Responsive Layouts in Percentage with Media Queries
Responsive type of layout is based on the liquid principle but also uses media-queries to adapt to screen width.
As a consequence, responsive websites do not “jump” to points — they change their size frequently.
Mixed Type of Mockup
There do exist other decisions for making mockups. For instance, an adaptation of a website to different devices can be something in between adaptive and responsive layouts.
This situation is frequent as an attempt to optimise an existing website to different types of devices and also called “mobile last.”
Visual Basic Help — Approaches to Creation of Websites and Web-applications
By approaches, we mean making decisions regarding problems at the level of user interaction, page restructuration, and the adaptation of user content.
In this case, an expert developer, web designer, and graphic designer are needed to build an accurate design and code for the project has to be found.
Responsive Web-Design Approach
Firstly, this type of approach was described in the article A List Apart.
Its name is taken from the example of response architecture.
Responsive architecture of the building presupposes adaptation of the building (form and colour) following the environment.
In 2011, Marcotte published a similarly named book where he gathered all the existing examples of content adaptation.
Ethan Marcotte did not invent something new; he just systematised information and offered solutions for old devices and browsers.
However, it was just what was needed in a time of substantial amounts of OC, devices, and browsers.
His primary approach was based on fluid mockups, media-queries, and responsive media-elements (images and videos) — subsequently, responsive mockup of the page with the usage of responsive images and videos.
It must be noticed that the responsive technique uses the resources of HTML and CSS for adaptation tasks for different devices.
Adaptive Web-Design Approach
Adaptive web design as an approach was described in an eponymously-named book by Aaron Gustafson.
The approach takes the best from the”Mobile First” concept and progressive enhancing and amplifies it.
Consequently, if a new feature is available for a new version of a browser or device, it could be applied only after an examination of its availability (saving its compatibility with the device that does not support this feature).
For instance, it could be touch-events that are not supported by all versions of browsers.
We hope that this article helped you understand all the differences between adaptive, responsive, and fluid websites.
If you need more time to figure everything out but are always forced to do homework, our cheap assignment writing service will save your time and nerves.
Feel free to ask any questions to our online support team and apply for help to our writers any time your needs.
Devote time to your career instead of boring written assignments.
Originally published at https://inkbotdesign.com on May 7, 2019.