What is responsive design, anyway?

Simply put, a responsive website adapts its layout according to the device being used to access it. The website will dynamically change its layout depending on the device's screen size and orientation.

Some examples of this include menus that collapse, images that resize, and column structures rearranging (for example, a two-column layout converging into one column).

The goal of this book is to make designing and building a website less of a daunting task for the ever-growing number of devices that we use to obtain information from the Internet. We access the Internet from so many different devices, ranging from smart watches to mobile phones and desktops with large high-resolution displays, that responsiveness has become an almost essential feature in web design and development nowadays.

There are prerequisites for a site to qualify as a responsive website. Fluid grids, media queries, and flexible images are a few of them. Additionally, a distinction does need to be made between an adaptive layout and a responsive layout.

Adaptive Layout

An adaptive layout uses fixed-width grids or columns that are triggered at specific and static points.

Responsive Layout

A responsive website makes use of fluid grids; in other words, the grids resize as the viewport size changes.