In recent years one of the most discussed issues among web developers is the availability of the websites on different devices. This is not a new topic, but the discusses over the use and implementation of new features not fade. Tablets, smartphones and other mobile devices are progressed from year to year and do it so much faster than all the others. It is make a headache for business owners and causes to solve problems such as the interaction with the user (UX) and availability of a site in modern miniaturized devices. As a rule, users are not interested in what methods do you use, making your site beautiful and comfortable. It lasts only as long as they can walk on the web-site on any device.
Today I will tell about basic designer methods that are used everywhere for web-sites creation that users comfortably could co-operate with them via mobile devices. It is Adaptive Web Design and Responsive Web Design. They have a common purpose, but differ in nature.
Adaptive Web Design (AWD) is a set of design techniques and solutions that focus on the user, not on browser. There is used a predetermined set of models for different screens with CSS and JavaScript codes, thus providing adaptation to the detected device. Process of creation looks approximately so :
Content layer = rich semantic markup of HTML code;
Presentation layer = CSS + styling;
Client scripting layer = JavaScript / jQuery behavior.
In short, the main point of Adaptive Web Design is the change (improvement) of interface in compliance with a predetermined set of screen sizes and devices.
Actually, Responsive Web Design (RWD) is the variety of adaptive web design, which represents as a “rubber” layout, i.e a layout that transforms according to the width of the screen.
Are there any similarities between the Adaptive and Responsive design?
The basic similarity between these two methods consists in adaptation of the website to mobile devices and different screen expansions, eventually providing a more user-friendly mobile interface.
At the same time, these methods differ in structure.
The differences between the Adaptive and Responsive Design.
These two methods have a common purpose, but in reality are different in structure. Responsive design is based on a flexible layout on basis of a grid. He applies code and reanimation strategies for flexible grids, CSS and flexible basis. Adaptive design is based on predetermined screen sizes and uses streamlined and multi-level approach by scripts that used for adaptation to the devices and different screen sizes. Some people think that these methods are the same and the terminology brings only confusion. In fact, Responsive Design not precisely reflects what actually occurs when the website changes the design depending on use of the concrete mobile device.
As an example the website http://abberdein.com/ in 3 options (web, tablet, smartphone).
As an example, we have taken Abberdein group website. Its code contains a set of latitudes of dividing columns in percentage expression and using the Less Framework CSS grid system that contains four prototypes and three sets of typographical procurements which all are based on one grid.
As an example the website https://www.screamingfrog.co.uk/ in 3 options (web, tablet, smartphone).
As an example we took the web-site of marketing company Screaming Frog, that used Adaptive Web Design. There is in CSS using @media query and @media screen properties for setting breakpoints in the specified pixel widths depending on what device has been recognized in the browser window.
Finally, we will add that the websites designed by means of Responsive Design provide to all devices the same URL sets where each URL provides all devices with the general HTML code and modification of the website for different displays is reached by use only of a CSS code. And the websites designed by means of Adaptive Design dynamically report to all devices the general URL but each URL contains different HTML and CSS codes, depending on hardware type.
If this article has made these concepts even more difficult for your perception, than is actually, I will try to state an essence in brief: Responsive Design is a part of Adaptive Design. Responsive Web Design = “rubber” layout, but Adaptive Web Design = “rubber” layout + progressive improvement.
Conclusions.
Actually, the main thing is correct concentration on target audience of your website, irrespective of the fact which technology of execution suits you more. When you precisely understand who your potential users and what devices they uses for viewing of your website then it will be much simpler for you to design models,make content, structure, etc.
Responsive Web Design will remain more popular and widespread, maybe because haven’t yet found the best solution for service of adaptive design. But it doesn’t mean that Adaptive Design has died and possibly in the near future we will see improvements which will give for it more concreteness.
