Responsive web design, or RWD as it is called in some circles, is quite simply a combination of media queries, flexible widths, flexible images, and breakpoints. All of which were around well before the term Responsive Web Design was coined. However, it wasn’t until a man named Ethan Marcotte combined the three, revolutionizing how we use and see the web across devices.

Ok...there you have it. Responsive Web Design. I️’ve now used the keyword enough times and provided enough content for Google to crawl the site and help us rank higher for the keyword.

But... that isn’t fair to you right? Of course not!! Let me provide some context and paint a broader picture of what Responsive Web Design entails.

Strap in, put your blog belts on, and get to learning!

A BRIEF HISTORY (not so brief)

The year is 1991, it’s been 15 years since Queen Elizabeth II has sent her first email, and the internet has just been released to the public. This is three years before internet explorer is created, seven years before Google becomes a thing, 12 years before Wordpress is created, 13 years before Markie Zucks ever logged into Facebook, and 23 years before Kim K broke it all with a champagne glass and a trash bag. But more importantly, it’s ten years before the first responsive website, Audi.com, was created by a team of four at Razorfish.

Now that we understand the landscape of the web as members of the public let's fast forward to the late 90s when the internet first hit our mobile devices. Of course, this was strictly text-based data but the interwebs nonetheless, and It isn’t until the 2000’s that terms like fluid design and liquid layout are being thrown around. But you have to understand the hype behind it, ok? Up until this point designers had been working with a fixed layout confine, limiting both their toolkit and imaginations to a strict 800x1024 design/development space.

By now you are asking, ‘Spencer, what does any of this have to do with anything?’ I’m getting there, bear with me.

Mid 2000’s we began seeing massive advancements in the web design/development landscape through the introduction of CSS 2 and improvements to the already popular javascript. Through these advancements, we can view actual websites via mobile browsers on our smartphones. You remember those days right? Pinching and zooming trying to find that specific piece of data you need to prove a point in an argument with the lady at your local Handy Mart (a website RSD designed and developed. Always plug ;)).

This milestone sets the stage for the man, the myth, the legend, Mr. Ethan Marcotte, who is arguably the father of Responsive Web Design. He changed the way we view and use the web by combining existing practices into one cohesive method.

BUT WHAT IS RESPONSIVE WEB DESIGN?

Responsive web design is just that, responsive. The contents and layout of your website adapt and respond differently based solely on the screen size and landscape available to it.

You’ve seen it without noticing. Responsive web design is a list of navigation links on your desktop that are hidden behind a hamburger icon on your mobile device. Or a horizontal grid of images becoming a vertical single column scroll when you resize your browser window to accommodate for word while writing a paper or taking notes.

HOW RESPONSIVE WEB DESIGN WORKS?

To describe how responsive web design works we really must understand the four methods it entails.

Media queries

A simple yet powerful concept allowing developers to create a site that recognizes the properties of a user’s device and depending on what those properties are, load a specific set of rules and CSS properties that best fits the device for a clean and effective user experience.

This is done by using the @media attribute in CSS3, formally known as media type in CSS2.

Upon loading a site and determining the device’s size, the questions asked by media queries could include, but aren’t limited to, items such as these:

• Width and height of the viewport
• Width and height of the device
• Orientation (is the tablet/phone in landscape or portrait mode?)
• Screen resolution

An example of a media query will be changing the background of a page to Purple if the device’s max width is 600px this would be done by syntax looking like this below.

@media only screen and (max-width: 600px) {
   body {
       background-color: purple
   }
}

A brief moment in media queries but a comprehensive digestible one nonetheless.

Breakpoints

Resize your window horizontally. If you need a good one to test this out on check out one of our recent completed projects BeCajun.com (always plug ;)) Notice how the midsection of the site resizes from a 2x2 to a 1x4 as your browser window reaches a certain width. Also, at this point the box changes from a square to a narrow rectangle and as you continue to reduce the width of the browser, the boxes become square again, resizing and rearranging all content accordingly.

This is accomplished by declaring breakpoints. Which doesn’t require a detailed definition other than setting points in the form of pixels that tell a particular div or element how to respond at said sizes.

Flexible Images

Flexible images are in themselves an entire blogpost. However, I will try to keep it short as they do play a very crucial role in responsive web design. Allow me to reference BeCajun.com again to effectively explain how these work while being respectful of your time.

Notice how at normal width the images within the 2x2 container fit appropriately. Let's use the top left image for example. Viewing the site on both desktop and laptop screens the entire building is visible within the container. As we begin to resize our browser horizontally more and more of the parking lot becomes visible. Continue reducing the size and notice that after the breakpoint only the sign and windows of the store are visible and as we continue to reduce the size of the window, the entire image is now visible again as the container has arrived at the true aspect ratio of the image occupying it.

This effect is achieved by declaring a percentage to the image within the container it occupies. For example, if an image takes 100% of a container that is set to 50% of the viewport we are left with said image appearing to take 50% of the viewport. A common issue with this method is the height of an image being distorted. A common work around, and the one you see here on becajun.com, is setting the height to auto. So, no matter the width of the image which we now know is determined by the browser size the height will adjust accordingly to ensure the ratio of the image not skewed.

Flexible Layouts

Unlike fixed layouts which are defined by pixels, flexible layouts are defined by percentages. By setting a percentage we don’t have to think about device size or screen width, and consequently, we can find a reasonable solution for each because our designs adapt for the device used.

It is through this practice that flexible layouts and media queries are so closely linked as percentage based widths are not in themselves enough to accommodate our design for the large variety of screens that we must take into consideration when designing and developing for the web.

IN CONCLUSION

We learned a bit about the internet and what our nation considers significant moments in it. How and when the term Responsive Web Design was created and by who, and a brief description of the various pieces that make up responsive web design. To reiterate those pieces are flexible layouts, flexible images, breakpoints, and media queries.  

Responsive Web Design is more than a fancy phrase that makes us feel better about ourselves. Despite our love for a good buzzword, responsive web design is a phrase that ensures our clients that the content and products we create for them are accessible and navigable by their user base regardless of the device and browser used. Whether it be a restaurant menu or a boating manufacturer, Red Shark Digital is capable of delivering truly stunning websites across all devices.