Responsive Web Design

What is it?

Responsive Web Design (RWD) is what makes our web pages function on all devices, whether it's a smart phone, tablet, or PC. It keeps the our sites aesthectically pleasing and usable no matter what the screen size is.

Why use it?

As web developers, we want the user to keep coming back to our site. They're not going to keep coming back if they're constantly having to swipe the screen larger and scroll back and forth to see what's on the page. RWD allows us to build one site for any device and happens to be a huge time saver in the process.

Process

Some basic terminology you'll hear when discussing RWD:
Viewport - This sets the visible area of our page. It is set in your html head and is one of the first things to consider when it comes to RWD.
Flexbox - This allows boxes to grow or shrink as we resize our browser window. It also allows us to order boxes any way we like
Wireframe - Wireframing is how we create a sketch of our webpages using a grid system. Making a sketch of how we want our site to look and flow will save us time when it comes to coding. In the wireframing process, it's also important to consider our color scheme and font choices. It's really just about organization.