Responsive Design 101

Image of Responsive Design 101

It wasn't too long ago that designers didn't really need to worry how websites looked on mobile phones and tablets. Phones weren't yet really practical for web viewing, and before the iPad, tablets were more of a novelty than an essential.

Obviously, all that has changed and most tech experts predict that in the next few years, likely sooner rather than later, mobile browsing will overtake desktop browsing as the dominant way of viewing the Web.

With an ever-evolving range of screen sizes and devices, including video game consoles and Internet TVs, the old ways of design are simply no longer up to the task. And with businesses realizing the need to optimize their online experience for mobile users, designers who don't adapt will be left behind.

The main components of Responsive Design

That's where Responsive Web Design comes in, content and/or layout that automatically adapts to the size of the screen on which it's viewed. At its most basic, the three primary elements of Responsive Design are a flexible grid, flexible images, and Media Queries, the latter introduced as a part of CSS3s. More on those in a moment.
Flexible grids

Flexible grids are basically themes and templates in which design elements are set in percentages rather than pixels. With percentages as the unit of measurement, that means that an element that's designed at 50% will always take up half of the screen, no matter how big or small the screen is.

Posted by editorial 3913 days ago in HTML5 & CSS3  |

Who Voted

Vote For The Best