What is Responsive Web Design?

Responsive design is the process of building a website that will automatically adjust to the screen size of any device. 

Early Design

When the internet first went public in 1993, computers were the only devices rendering websites. Desktop screens were typically 800px or 1024px wide. As a result, developers created websites for just two sizes, and the dimensions were hardcoded.

When smartphones arrived on the scene in 2001, there was no infrastructure to make websites look nice on these small devices. There was just horizontal scrolling, making reading textual paragraphs difficult. Users would have to scroll right, read, and then scroll back to the next line. 

Developers adjusted by using tables and making the widths of columns percentage-based, but that made multi-column tables have super narrow columns on phones that were almost impossible to read, making users perform tons of vertical scrolling.

In 2007, when the first iPhone came out, there were no CSS standards to help make websites adjust to smaller screen sizes. So, to provide more internet-friendly experiences for smartphone users, developers created device-specific applications. This meant companies were having developers build iOs apps, Android apps, and a desktop website to help promote their information, products and services with the same logic in 3 distinct code sets. 

While programmers introduced the concept of media queries as early as 1994, W3C didn’t start working on them until 2000. Then, it took 11 more years before web browsers adapted to rendering them. 

Responsive Web Design

When media queries were standardized and browsers incorporated them, Responsive Web Design (RWD) began to flourish. RWD means a website can change its appearance dynamically based on the screen size and orientation of the device viewing the site. 

The beauty of Responsive Web Design websites are:

• They have only one codebase
• There have only one set of designs
• The site adjusts to the device automatically and looks nice without any user input
• The site does not need JavaScript to render, only HTML and CSS

Having only one code base to maintain and update is a huge way of saving costs. Also, having only one URL that serves the same experience to many devices opens up your business to users all around the globe.

Design Impacts

Every year new devices are introduced to the market: smartwatches, folding phones, tablets, ultra-wide screens, and smart TVs, along with smartphones, tablets, and laptops. As devices and screen sizes become more and more diverse, companies that want to be successful must optimize their websites for all devices—not just for mobile or desktop devices.

Fluid Design

This means that designers must think of the content on their sites in a fluid or liquid state, which, like water, will automatically rearrange itself to its container. 

Designers and business owners need to:

• Define Design Boundaries: Agree upon the expected demographic of devices used and define two to five viewing ranges where developers will generate formal designs.
• Prioritize Content: Decide what content and features are most pertinent to users and reduce what is present on smaller devices. Remember, it’s always easier to add in content as the device gets bigger but much harder to take things away. So, start with your smallest device in mind.
• Address the smallest boundary condition: Decide what the user experience will be if the viewport is smaller than the designs to be generated.
• Address the largest boundary condition: Decide what the user experience will be if the viewport is larger than the designs to be generated.

Businesses typically study the use of devices and decide on three or four breakpoints. Or follow the CSS framework’s current breakpoints. For example, a “too small for device” content warning is often added for the smallest boundary condition. Likewise, a container max-width is put around their content, so it doesn’t become too wide on devices that exceed their base preferences.

Development Impacts

There are three key tools to master when coding in Responsive Web Design.

Media Queries

Media queries are one of the best tools in your styling toolkit. They help you adjust what a website displays based on a screen’s size and resolution. 

To build a responsive website, it’s usually best to think of media queries in a mobile-first manner where rules are prescribed from the smallest devices to the largest in your CSS files.

• CSS unbounded by a media query is at the top of the file.
• Media queries follow by min-width declarations @media screen and(min-width: 767px){
• Order Queries by increasing min-width.

The advantage of the mobile-first methodology is that 80% of your CSS is applicable across the site, and a mobile site should look okay, if not a bit spacey on a desktop. In comparison, a desktop website will look horrible on a small device. Therefore, it’s easier to deliver small device stories first.

Once you have your media queries set for the design’s boundaries, you can start defining your CSS and fill any needed media query overrides as you deliver stories for larger devices.

Fluid Layouts

In the beginning, websites were built with fixed dimensions for the structural elements on the page. Containers would be defined with exact measurements like:

• width: 800px;
• width: 1024px; 

When it comes to fluid designs, its best to keep the layout element sizes relative by using percentages or proportions between the elements:

• width: 100%;
• width: calc(100% – 1.2rem);

Flexbox is another set of CSS properties to use with fluid layouts. Flexbox has the added bonus of incorporating a grid-like structure. You can change the display of children HTML elements between rows and columns and use an order property to place one element before another. The ordering and switching between columns and rows are helpful when paired with media queries to reorganize the website’s information as the device width changes.

Responsive Images

The imagery used on an RWD site should:

• Render in landscape and portrait mode
• Retain its aspect ratio, so it doesn’t stretch or skew
• Be an appropriate resolution, not too small, so they are pixelated and not too large to hold up the display of the site.

W3Schools has a nice intro to using CSS properties of height, width, and max-width to make images responsive.

Malia Havlicek, Code Institute Student

Want to compare Responsive Web Design to Adaptive Web Design? You can read about it here. 

How to learn Responsive Web Design

Code Institute’s Full Stack Software Development programme brings beginners to full-stack developers within 52 weeks. On it, students are taught responsive web design so that the sites they build are viewable on all devices. 

Want to learn the basics of Responsive Web Design for free? On Day 4 of Code Institute’s free 5 Day Coding Challenge, students learn the basics. By the end of day five, you will have built your first ever web page. The challenge takes just one hour a day over five days. Participants also learn the basics of HTML, CSS and JavaScript. Register now through the form below.