Why Is Responsive Design Important?
Let’s Talk About Responsive Design
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 that aims to allow native web page 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 into 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?
Scaled images are just that, images which have been scaled up or down. Images are a huge part of web design, they take up the bulk of space and load times for websites, that’s why that scaling is so important. You don’t want to use a thumbnail sized image as a logo or header image, it’ll look like something out of a 1930’s film. Image scaling can be done server-side for the most part through the use of CSS or Javascript, but you can also use multiple sized images to achieve the same effect. Not only do correctly scaled images decrease storage space and load times they also give a huge UX boost by helping to maintain correct aspect ratios and maintain Retina quality images.
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!
