Responsive web design and adaptive web design are two approaches to web designing that can be employed to create a smart UI and UX design of a website suitable for all devices. They are similar and different at the same time, but which one is better? In this article, we’ll define the differences between responsive and adaptive web design and find out which one is better for you to choose.
In 2010, Ethan Marcotte, a web designer, published the article called “Responsive Web Design” where he described a new approach to web designing that provides adaptation of a content on a website according to the width of a device screen. In a while, responsive web design has become a popular approach to designing websites, and Marcotte’s book is a handbook of RWD for many designers.
The basic rule for creating RWD of a website – it should include three vital components:
Anadaptablebase
As I said, RWD changes the content on a website relatively to the width of a device screen. That’s why it requires only one but an adaptable layout. So, how can you make content on a web page change the size? All you need is to employ percents or ems for fonts in lieu of pixels, and, in this way, all components on a web page will change proportionally. For example, if a text block takes 65% of place on a page on a PC screen, it will remain so on any other device screen.
Flexiblevisualcontent
While creating RWD, don’t forget media content. Pictures and videos should not only change their size according to a screen’s width but also they should adjust to a content block. That’s why you have to establish maximal width for media components, so they won’t become wider than a content block.