What is responsive web design?

Responsive web design was merged to answer the various sizes of mobile, tablet and desktop screens that quickly became normal in last decade. Prior to that, websites were designed mostly with standard width and most of the layouts were designed for desktop.

Responsive added some adjustments on the browsers rendering capabilities and additions to CSS markups, allowing developers to fold the pieces of a page and make the rules the need with media queries for each screen size.

Media queries are defined through a grid system usually, but also following the web standards and devices that are most common. These would identify if the screen width is less than certain pixels, apply different layout and styling rules on the page.

Responsive web design initially added a ton of work for developers; soon enough some companies like Twitter invested in developing Bootstrap to help rapid development and responsive system through their predefined CSS and Grid setup. Foundation by Zurb was and still is among the front-end frameworks.

In most recent years and HTML5 and CSS are adapting with the needs and becoming more capable to handle responsive layouts with the grid CSS properties.

What is responsive web design?
Posted in CSS