What is it?
First, we must know what responsive design is before we can know why it’s important.
Responsive design is a style of web development who’s aim is to allow native webpage viewing in whatever format in which it is viewed. A good analogy would be that page content is like water. It takes the shape of the container that it’s in. An unresponsive design would be like dropping an unmelting ice cube into a cup, content will never fit the container.
How is Responsive Design Achieved?
Responsive design is achieved by using objects called media queries along with flexible grids and scaling images.
What are media queries?
An example of a media query would be: @media screen and (min-width: 480px). This is a standard media query that checks to see if the screen is 480px or wider, it would be used for devices such as landscape phones, tablets, laptops and computers. Here’s another example: @media screen and (min-width: 1024px). This media query would be used almost exclusively for desktops and laptops.
For a list of standard media queries, check out css-tricks.com
What are flexible grids?
A flexible grid consists of columns and rows of equal size. Generally, 12 columns are used and instead of using a hard size for each, such as 150px we use a flexible size of 100%. This allows the columns to expand and contract depending on the size of the screen.
For a responsive grid generator, check out responsivegridsystem.com
The image below is a representation of flexible columns.
What are scaling images and why are they important?
For a list of common mistakes people make while dealing with images, check out cloudinary.com
There you have it, the importance of responsive web design.
Here’s a quick recap:
- Responsive design is the backbone of a good user experience across multiple platforms.
- Responsive design is achieved through media queries, a flexible grid system, and properly scaled images.
- With the ever growing usage of cell phones and tablets, responsive websites are the way of the future.
What are some good and bad examples of responsive design that you’ve seen? Comment below!