The term “Responsive” has become widely used and misused in web design environments, what it really means can be easily understood if we take a look into the history of the web design world.
Back in the 90s, when having a personal computer was still a luxury, not every family could afford, the content on the internet was really simple (and static) and web design was a task that involved a lot of HTML elements (even for “styling”) and not much of CSS.
Then, most of the users of these pages were always using a PC to access the internet, so there was no need for designing for different screen sizes as most were very similar.
As mobile platforms became more and more versatile and started allowing users to access the internet, we faced a new problem: How to make those web pages look good on every device, regardless of its size, resolution, or even orientation?
The idea was to give the users the best experience possible, providing them with content that adapts to their screen features, and then, the concept of responsiveness was born.
The core idea of the Responsive Web Design is about creating content (using HTML and CSS) that looks good on every device… notice that I say “look good” and not “look the same”, those two are totally different ideas. Responsive web design doesn’t aim for an identical look on every device, instead, it suggests pages that can adjust itself to the features of the different devices (like screen size, resolution, orientation, etc).
To achieve responsiveness we must follow some guidelines:
- All HTML containers widths must be defined in terms of percentages of the viewport’s width.
The viewport is the visible area of a web page.
In HTML5 we can configure the viewport’s width in terms of the device’s, by adding an <meta> element:
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - Images should adjust based on the size of their containers
- We must use media queries
Media Queries
Introduced in CSS3, media queries are a technique used to set rules to apply CSS style selectors. Only when the given conditions are satisfied, the selectors inside it are applied.
For doing so, we must use the @media rule to define the conditions based on the device’s features:
We can define rules based on things like:
- width/height of the device
- Screen orientation
- Resolution
- width/height of the viewport
The general syntax for writing media queries is:
@media screen and (max-width:710px){
body{
background-color:red;
}
} Responsive Frameworks
We can design responsive web content by just using HTML and CSS, with media queries and following the recommended guidelines for setting containers/image widths in terms of percentages or other similar units, but still, any help with that is much appreciated.
In that regard, we have some frameworks that help us go faster and easier when implementing a responsive design, some of the most popular are:
You should use Skeleton if you're embarking on a smaller project or just don't feel like you need all the utility of larger frameworks. Skeleton only styles a handful of standard HTML elements and includes a grid, but that's often more than enough to get started
A Framework for any device, medium, and accessibility. Foundation is a family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails that look amazing on any device. Foundation is semantic, readable, flexible, and completely customizable.
Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins
