Responsive Web Design (RWD)

Responsive Web Design (RWD) is a powerful approach with which you can solve the problem of different resolutions. This is standard – most websites use responsive design to adapt pages to various devices and their orientation. RWD can be obtained with a fluid grid, relative units, and @media rule in CSS code (Cascading Style Sheets). This technique allows the website to work on any device, even those that will be introduced in the future.

Content is like Water. You put water into a cup it becomes the cup. You put water into a bottle it becomes the bottle. You put it in a teapot, it becomes the teapot.

Josh Clark

It's hard to find someone who doesn't have at least two digital devices – a smartphone, tablet, computer, and, recently, a smartwatch. Each of these devices has a different screen size. As users, we expect that each of these screens will allow us to interact with it pleasantly.

Designers have a bigger problem with these non-standard sizes. It is quite a trick to prepare a prototype for different screens – for a smartphone or a desktop. And what to do with the additional fact that each screen has to be differentiated by the operating system? How to deal with non–standardized screen sizes?

What is Responsive Web Design?

RWD is nothing but an acronym for Responsive Web Design. The Nielsen Norman Group offers the best definition:

“Responsive web design (RWD) is a web development approach that creates dynamic changes to the appearance of a website, depending on the screen size and orientation of the device being used to view it. RWD is one approach to the problem of designing for the multitude of devices available to customers, ranging from tiny phones to huge desktop monitors.”

Observing this dependency while changing the browser window’s width is best. In theory, the page should change its layout and location of elements without harming the logic of the page – in other words, page elements try to fit into the available space.

A responsive website changes dynamically – it’s smooth, which can be seen, e.g., on the Dodonut website. By changing the window, the elements change “on their own.” On mobile phones, this process is automatic – the site determines the available space and then presents the content in an ideal layout.

We can compare the feature of responsiveness to the characteristic of water. It has the shape that we give it and this feature, quick and smooth adaptation to the environment, is what we should care about when creating websites.

What is the difference between Responsive Web Design and Adaptive Web Design (ADW)

RWD and AWD are based on the same – in both cases, the page's appearance is changed using the width property.

However, RWD is more fluid – each gradual width modification causes the page to respond to that change.

On the other hand, adaptive websites adjust to the points set by the designer – if the width of the page is 1440px, the layout will adapt to this value. The website "looks for" specific points to which it can adapt. It can be the width of a desktop, tablet, or smartphone, determined by fixed points defined by pixels.

We can notice the difference between RWD and AWD in the motion of such websites. A responsive website will smoothly change the look of the website – it's flexible. AWD is static, and the movement of change is more intermittent.

We told ourselves about the easiest way to spot the visual difference. However, it is worth going deeper and discussing the RWD's pros and cons.

Pros for RWD:

1. Better User Experience.

Responsive pages ensure easy navigation of the page on any device and in any orientation (portrait or landscape). It's about providing the feeling that we're on the same page.

2. Ease of execution.

Creating a good, responsive website is about refining the CSS (Cascading Style Sheets) code.

3. Budget-friendly.

A responsive site uses a single codebase on all devices, which means no additional mobile site is needed.

4. Improved SEO.

Mobile-friendly websites rank higher in search results.

5. Sustainability.

In RWD, we have no additional pages designed and developed for different devices, which means we need less energy to create it and generate less CO2.

Cons for RWD:

1. Loading time.

The most significant disadvantage of responsive websites is their longer loading time. It happens because images and other features are scaled down rather than changed or deleted from the page, resulting in poorer performance.

2. More difficult integration of ads on responsive pages.

It is worth paying attention to in terms of accessibility.

Pros for AWD:

1. ADW is very user-friendly.

You are creating designs for specific devices rather than targeting width ranges.

2. Faster website loading.

It is a result of loading the page dedicated only to a specific device.

3. Easier to upgrade.

Implementing and modernizing your code is easier, as adaptive pages often have source code.

Cons for AWD:

1. Time-consuming and less sustainable process.

Adaptive web design requires more time and effort as you create web page layouts to fit different devices. An additional page layout means another code — the need for more code impacts more work to develop it. So, at the same time, AWD is less sustainable than RWD.

2. Expensive investment.

Time is money. Creating adaptive websites requires a lot of time and the involvement of many people to develop them. You should also consider the work on maintaining the pages and their constant modernization.

3. The difficulty of keeping.

It can be challenging to keep all versions of the website the same.

The 3 major principles of RWD

RWD seems to be simple, but only in theory. The key to any design's success is creating a product that allows users to access it from any device. The website should work on every screen, so the user doesn't have to think about the choice of medium. However, there are a few rules to follow for that to be the case.

I will present the three most important principles that should be followed to create a smooth experience. In this part, I will refer to coding with CSS as it is the best example for presenting an RWD. The CSS is the point where the magic happens.

1. Media queries.

You can create a functional skeleton of the page with HTML (Hypertext Markup Language) and beautiful styling with CSS code, but all this will go to waste if the page is static and doesn't react responsively to changes in width. It is in the CSS code that we can do what guarantees the flexibility of the website.

To create several versions of the website for mobile, tablet, or desktop - use the @media rule. You can think of it as a box into which we put code with appropriate values adapted to a specific device and change the appearance of the skeleton written in HTML. If we change the width, but the page and its elements collapse, we are talking about "breakpoints." In this case, we should write the @media rule. This CSS expression creates a range between different widths and styles the elements on the page to be compatible with the new width.

Prototyping tools create several versions of a page or an application to avoid unpleasant surprises. To simplify it, one can assume that the mockup for each device is one @media rule. For the design to be fully responsive, it's also worth considering the device's orientation (landscape or portrait).

2. Fluid visuals.

Imagine making a prototype of a website for mobile. However, the exact dimensions of images or fonts will have to be changed when designing this page for desktop or tablet – it’s quite obvious that what is readable on the desktop will not necessarily be on the mobile. When making mock-ups, we adjust the sizes of all objects to a given device – in other words, we scale. To get the same effect on the website, we use relative measures (including percent, em, or ex) and the values min-width or max-width when writing the @media rule.

3. Fluid grid system.

The grid system is difficult to understand, but imagine a newspaper and how its content is arranged. Every piece of content resembles a box containing text and, in rare cases, a photo. Look at the works of Marine Mugonnier – the artist playfully fills these containers with her paintings. Check out these works, and you'll see what I mean.

However, the fluid grid system is used to prevent the page from behaving like a static newspaper but changing dynamically and reacting to the change of device. All grouped page elements should change with the width change - using the @media rule. It can be determined that, e.g., for a given width, a row of elements will transform into a column.

These principles are linked together. Omitting one of them may result in the user being unable to navigate the page.

Best practices for Responsive Web Design in UX and UI design

From the last parts of the article, it's easy to distinguish elements that would answer the question: what does UX have to do with RWD? However, let's systematize it all so that a clear picture emerges of responsive web design's importance in the context of user experience.

• Mobile-first Responsive Web Design

Users expect that every digital content seamlessly follows all their devices. Like a mantra, we repeat the "mobile first" rule, but designers cannot just focus on the mobile experience or the desktop experience. The statistics show that users use both solutions, and we cannot state that mobile solutions are beating the desktop. Anyway, we should pay attention to diversification in terms of the content users are looking for – mobile solutions are more often chosen in the pharmaceutical, cosmetics, and luxury industries.

• Applying the fluid grid system and using relative units

Poor contrast, annoying pop-ups, or the lack of a proper button – are just a few mistakes that can affect whether the user will stay on the site longer. Now imagine that the responsiveness is weak or not even there. The content doesn't scale; suddenly, something overlaps, so users give up further exploration of the site or, in a better scenario, change the medium. This point is also crucial in terms of accessibility. Scaling the content on the page also ensures the page's readability, i.e., adjusting the font size, graphics, or buttons to the device.

• Use design patterns

These are universal and proven in practice patterns. For example, it is about placing a navigation bar at the top of the page or adding "breadcrumbs" at the top of the page so that users know where on the page they are. These patterns are also familiar to users.

• Create @media rules for at least 3 "breakpoints"

Most often, projects are created for three devices: mobile, tablet, and desktop. However, it is worth testing the design for different widths and whether the design maintains its logic with all width changes.

• Minimalism

When designing responsiveness, it is worth considering what elements on the page should be left and what would be good to hide. In mobile projects, graphics, photos, or a strip with advertisements are often hidden to improve the page's readability. Responsiveness helps to maintain a clean design.

Frameworks

In the context of RWD, it is worth mentioning the frameworks, thanks to which it is easier to implement responsive components into the project.

Frameworks are a kind of support software for building web applications. They define the general operation of such applications and contain ready-made components and libraries that make it easier, faster, and safer for the developer to create an application.

In the context of responsive web design, we are talking about front-end frameworks. They are the structure or foundation of a website to which additional elements and specifications can be added - the pages are different from each other, but their form is similar. Ready components previously developed and tested save time and gain solid foundations for a web application.

Front-end frameworks:

• They allow the use of CSS source code, with which you can create a website with a responsive grid system. It is one of the more complex elements to code, and the framework library helps you get it faster;
• They solve the compatibility problem because some elements of the CSS code and, e.g., JavaScript, may not be compatible with a specific browser or may not be supported at all by older browsers;
• They let on the use of predefined typographic styles. Libraries have defined typographic styles for HTML elements. It means, among other things, that the fonts are appropriately scaled.

Why is RWD important?

RWD is a highly skillful approach in the context of users. It also is a powerful tool for developers and designers. The electronics market is constantly developing – new devices are appearing, and thus new screen sizes are appearing. RWD allows you to write a single codebase for all devices.

As users, we don't consider what devices will serve our favorite sites. It's a win-win situation because both sides are gaining. It's easier for developers to fix a bug or correct an error in the content on the website because it does not apply to several websites but one. If a new smartphone or tablet appears on the market, the code can easily support the devices – the RWD doesn't associate the code with a specific device.

Conclusion

Understanding the rules for managing the code in style sheets allows you to understand why Responsive Web Design and the “mobile first” rule are crucial in web design. One is to make perfect mockups; the other is to keep the @media rule, fluid visuals, and grid in mind. Details are essential, especially regarding how our website will behave on the user’s device. Its perfectly refined design facilitates and improves UX due to its responsiveness.

Remember, content should be like water – it should react unnoticed to changes so that the user never thinks about what device to choose.