One site to rule them all. One site for all devices.
Responsive design is a relatively new technique by web designers and developers that aims to build websites that work across a variety of current devices, from desktops, laptops, smartphones, and tablets as well as future devices and form factors. It is modern and future focused.
In the past, we created different sites for different devices. A desktop site, a smartphone site, and a tablet site. No more.
Responsive design means that you create one site that works everywhere. As the site scales between different screen sizes, it adapts and resizes to that specific screen size. One site that adapts, not three that don't.
Here is an example of a site with responsive design. Try resizing the width of the window using the sliders. Notice how the site resizes and changes based on the width.
This is responsive design. A site that is able to adjust to its surroundings.
No separate mobile site needed.
We know the basics of a responsive site. Now let's see it in action.
Responsive sites adapt to the size of the browser. They are sites built for the modern web– today's modern web and beyond.
Responsive design. It's vital for your business and your website. Your users expect sites to be optimized to the device they are using.
In the previous section, Grid, you saw the importance of a grid to arrange content on a page. It creates order and consistency across pages. Grids help users make sense of a page and find the information they are looking for quickly. When a site isn't organized in a way that is logical and concise, people leave it and go somewhere else.
Grids are what makes up responsive websites.
You know what a grid is. Now apply that to responsive design. It all works together.
Here is the example website from the previous part:
Now visualize the layout of that same website if it was laid out on a grid:
Now try resizing it as you did before:
Notice how the grid resizes. That is how grids and responsive design works together.
Did you see how when it got thinner, the four columns collapsed into rows?
Grids + Responsive Design. One relies on the other. It doesn’t happen on its own.
Here are some examples of responsive websites today. Notice how they change based on the screen size and their reliance on a grid to organize content:
But what about the business benefits. Why should I care? Will it really help my business? Is it a waste of time and money?