Responsive vs Adaptive Design
📐 Responsive design
Ethan Marcotte coined the term ‘responsive web design’ in 2010. This term refers to the ability of web pages to adapt and reposition elements based on the dimensions of the device.
Simply put, responsive design utilizes a single web page layout that flexibly adjusts to optimize the user’s viewing experience, whether they are on a desktop, laptop, tablet, or mobile phone.
From a technical standpoint, responsive web pages employ CSS media queries and size markers (breakpoints) to dynamically adjust the scaling of images, wrap and scale text, and manipulate other elements.
What specific breakpoints should be used?
In most projects, you will need to create layouts for personal computers (PCs), tablets, and mobile devices. You can check popular frameworks to get an idea of which approach to follow.
Bootstrap has next system of breakpoints:
- small : 0px to 576px
- medium : 576px to 768px
- large :768px to 992px
- extra large : 992px to 1200px
- Extra extra large : 1200px to 1400px
- small : 0px to 640px
