RWD: Responsive web design

Responsive web design (RWD) was not always the rule. Back in the Nineties, we built pages with particular screen sizes, which was doable when developers and designers had to worry about a single desktop viewport. This wild west era of web development came to an end with the multiplication of viewports: desktop and mobile.

 

Responsive web design is a set of practices that allows web pages to respond and alter their layout to adjust to different devices. Responsive sites change according to different screen widths and resolutions, making them look smooth at any size.

 

In this sense, RWD has changed how we design due to devices multiplying year by year. The amount of viewports designers have to consider is too damn high, and there is no standardization on the horizon.

 

As the mobile web became more relevant, companies who wished to embrace change created dedicated mobile versions of their sites. As a former BlackBerry user, I can tell you: it was a pain. I don’t know if every user was as passionate about design as me but having to navigate the web with my phone ten years ago was a horror movie.

 

As smartphones got bigger, smarter, and faster (and more expensive), development started considering the importance of a mobile-first approach. Today, there are conflicting views about how to begin your website development. What is not up to debate anymore is the importance of mobile devices in our daily lives.

 

Zoe Mickley Gillenwater was a crucial developer in her work to establish how to create flexible sites, attempting to mix both liquid (or fluid) and static sites. But responsive web design has come a long way since then. The term was coined by Ethan Marcotte in 2010 and established three techniques:

 

• Fluid Grids
• Fluid images
• Media queries

 

Lastly, it is fundamental to understand that responsive web design is not a separate technology. It is an innovative way of using the tools these ingenious designers already had on their hands. Sometimes we have the solution to our problems in front of us; we only need creativity.

10 basics of responsive design

In his video, Jesse Showalter puts forward the 10 basics of responsive web design. Let's review them to get a better understanding of how responsive web design works.

Responsive vs. adaptive

The two possible options nowadays are responsive and adaptive web design. In responsive design, content flows with the site. In adaptive, it adapts to certain sizes.

The Flow

Every HTML document is made of a natural flow of elements. When the size gets narrower, they start to take more vertical space.

Relative Units

Designers no longer use pixels or millimeters but with relative units of measurement as percentages (%), viewport width (VW), and viewport height (VH).

Breakpoints

Breakpoints are predefined areas of measurement. These allow rearranging a layout depending on the size of the browser or the device.

Max & Min values

Maximum and minimum values: sometimes it makes sense to stretch content to the max space a viewport has, sometimes it does not. Think of a line of text. Does it really make sense to stretch a paragraph all along with a giant desktop screen? No, that is why Max & Min values are also relevant.

Nested Objects

Containers or nested objects: Devs can nest an element on a “div” by putting it inside a container, which allows them to control the container instead of every element inside the container separately. Think of a blog card with its corresponding title, description, image, author name, and reading time.

Mobile or desktop first?

That is an ongoing debate, so I will keep the question mark at the end. Mobile-first development has many advantages, but this discussion is still not solved. As with many opinions in the software industry, it depends on the team entirely: each position holds pros and cons, it is about measuring trade-offs

Web Fonts vs. System Fonts

Web Fonts refer to specific types of font selected for the project and are not pre-loaded on the user's computer, so there is an extra step to fetch the font before it is cached. System fonts, therefore, load faster and maintain the familiarity that many users like. Which one should you choose? I do not know; it is all about the trade-offs.

Bitmaps vs. Vectors

This is not exactly a vs. situation, as you could read in our article about scalable vector graphics (SVG images). For photos or any detailed image, bitmaps are a must. In all other cases, meaning images that can be converted into vectors, essentially maths, we go with SVGs.

Make it Work

Make it until you break it. What does this mean? Use responsive to the maximum extent possible, then consider a breakpoint, media query, or layout change. The idea behind this is to avoid hardcoded interventions in every possible scenario and then add corrections for extreme cases.

 

All in all, these were the basics of responsive web design till now. But things are changing on the internet.

The new responsive design

According to Una Kravets at Google Chrome Developers, the web community is shifting to a new era of responsive web design. These new technologies allow for preference queries, container queries, and other form-factor queries. Thanks to these new possibilities in RWB, Una argues that a new kind of responsiveness will emerge, allowing developers to factor in user needs according to containers, form-factor, and implementation.

 

As revolutionary as responsive web design was ten years ago, it still is on the path of innovation. Many developers try to break the boundaries of what is possible with just the basics of HTML, CSS, and JavaScript.

 

At Awkbit, we understand the importance of design in service to the user. The era of the clunky internet is no more, but bloated solutions are also not going to cut it anymore. Responsive web design was, and still is, a sophisticated solution to a major problem. Striving for versatility is one of our main goals. Setting up a scalable and flexible product is a must.

 

Would you like to look good on any device?