Responsive Web Design

There are so many different kinds of devices out there now.

Whether it’s your phone, laptop or tablet, people expect that when you load a webpage, it just works. If it doesn’t work, or a page comes out all broken, then it will get passed up just as quickly as it was reached. That’s why we need responsive web design.

Responsive web design is the process of creating multiple versions of your webpage for different types of devices. More often than not, it’s a mobile and a desktop version of the site.

Sounds cool right? So how do you do it? That’s where it gets a bit more complicated.

In order to use responsive web design, you need to know what a viewer is looking on, their phone, iPad, or computer. For that, we need media queries. Essentially a check to see what the width of their device is.

Often what developers can do is start with their default view, likely the desktop version, then build it out to their completed site. Then, start working with media queries, first with the tablet version (if needed), then a mobile.

What is great about building a complete version of the site first is you can then resize the site and see where it starts breaking, whether the images are going off screen or text is splitting in a weird way.

And that’s how to do responsive web design!

In many ways it is just doing trial and error on your site until something breaks. Though, it still proves to be one of the most important parts of web design, especially now as almost everyone has and uses a phone, but not everyone has a computer.

Get to know your audience, who you expect to visit the page, and design it for them, so they can see the best possible version of the project.

MozDevNet. (n.d.). Responsive Design - Learn Web Development: MDN. Learn web development | MDN. https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design