Responsive Design

More and more people are using smartphones and tablets to access the web.

What is Responsive Design?

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.

Support The Grid and unlock member exclusive content with a Pro subscription.
Remove these ads and get a free basic custom-made website with Gridsite. It’s just $10 per month.

How is it used?

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?

Support The Grid and unlock member exclusive content with a Pro subscription.
Remove these ads and get a free basic custom-made website with Gridsite. It’s just $10 per month.

Why use it?

Responsive design isn't just a fad. It's essential for your business. You need to be where your customers are.

We know from before that a grid helps to organize content on a page. It creates order and results in better experiences.

So what? Why is that important for my business? Why should that be important?

Support The Grid and unlock member exclusive content with a Pro subscription.
Remove these ads and get a free basic custom-made website with Gridsite. It’s just $10 per month.