We should start with the most fundamental question: What is Responsive Web Design (RWD)? We'll answer it as simply and concisely as possible.
Responsive web application (website) design changes its size and layout and supports different resolutions depending on the diagonal of the screen on which the application is displayed.
In other words, a web application will be displayed differently on different screens, adapting to them each time in order to achieve the optimal layout of elements.
Responsive Web Design, in basic terms, has two primary goals.
To achieve the best possible user experience on each device and obtain visual consistency.
The appearance of the web application displayed on a monitor screen, laptop screen, phone, or tablet shouldn't differ significantly.
Responsive Design (RWD website development, RWD technology) grew out of the belief that the size of available space, aspect ratio, and screen resolution are the key context.
It is treated as a design challenge aimed at meeting user expectations. Its popularity also stems from the fact that mobile devices are gaining a larger share of the market pie every year.
We Audit. We Research. We Design.
Responsive Web Design and the challenges of Mobile
As my statistics professor used to say – "You don't argue with numbers; you interpret them." And the numbers have been indicating for many years that the future belongs to mobile devices.
Already in 2015, Google recommended creating responsive web applications.
Websites created in the spirit of the Mobile First approach, dedicated to mobile devices, could expect to rank higher in search results. The change was so revolutionary that it earned its own name in the trade press – Mobilegeddon.
More than 3.5 billion people were using smartphones by the end of 2020. On average, we spend almost 3 hours on mobile phones. Nearly 70% of "smart users" search for product information via mobile devices.
A similar amount makes purchases in online stores using mobile phones. And so on. Those interested in more statistics, I direct you to the source of this data. You can find it here.
From a design standpoint, these trends imply the need for RWD applications (Responsive Websites). Mobile First has become a standard approach. Although not the only one. Later, I will write more about the competitive approach (Adaptive Design) in this article.
Responsive Web Design is also related to the uniqueness of mobile devices. The tactility of mobile phones and tablets enforces a different approach to design (e.g., interfaces, menus).
And here, we arrive at the pivotal divide between the two dominant approaches to web application development. Responsive Web Design and Adaptive Web Design.
Where did Responsive Web Design and Adaptive Web Design come from?
Both terms, approaches, design methods owe their popularity to books published by two authors: Ethan Marcotte and Aaron Gustafson. The first author wrote the book "Responsive Web Design," while the second is the author of "Adaptive Web Design: Crafting Rich Experiences With Progressive Enhancement."
Both works have left their mark on web application development and divided the design world into two camps – followers of Responsive Web Design and Adaptive Web Design. However, the state of the balance of power at present strongly suggests that the first approach is more popular.
It's worth learning more about both approaches because, as it often happens, they have their advantages and disadvantages. Many variables influence the decision to choose one of them. And it simply depends on our goals, needs, and capabilities.
What is the difference between Responsive and Adaptive Design?
All signs indicate that the problem of adapting application designs to current devices on the market will continue to grow. The variety of sizes, proportions, and resolutions requires deciding on the preferred design type.
What is the difference between responsive and adaptive design? Let's start with the RWD design.
Responsiveness of an application means its smooth and automatic adaptation to the available space. The style changes depending on the target device; hence the main design point is simplicity.
Adaptive web design doesn't rely on an application's smooth and automatic adaptation to the size and resolution of a device's screen. Instead of one "flexible" design, we have many "static" designs.
Usually, there are 6 of them – for the 6 most popular screen width sizes – 320, 480, 760, 960, 1200, and 1600 pixels. The appearance of an app on each device is slightly different, and the difference doesn't only come from the limitations of a device but also from the need to create an app that provides a very good user experience.
Advantages and disadvantages of Responsive Design and Adaptive Design
Both approaches have many advantages and are not without flaws. Evaluation of their usefulness is largely subjective and depends on needs and goals.
We will find an equal amount of applications from reputable companies created in RWD and AWD models. Let's go through the key characteristics of both approaches.
Responsive Web Design is:
- less work-intensive
- relatively simpler, certainly more consistent
- less problematic but not problem-free
- problematic if the application is to be upgraded rather than built from scratch
- SEO friendly – to a greater extent – it's recommended by the Google search engine
- relatively easier to implement
- more effective in terms of user experience
- enables designers to create the best UX for a given device
- more flexible when it comes to less common screen sizes
- doesn't provide much control – however, applications aren't as time-consuming to maintain
- requiring more work on the programming side
- easy to modify and optimize
- based on a medium-sized pattern
- less responsive to user needs.
Adaptive Web Design is:
- more work-intensive
- less flexible for non-standard screens
- considered as more problematic
- more useful for upgrading or customizing existing websites
- SEO unfriendly – in many cases, Google's crawlers may have trouble recognizing the identicality of content in different versions
- more difficult to implement
- providing more control but is more time-consuming to maintain
- less problematic in terms of programming
- much more problematic in terms of modification and optimization
- devoid of a template acting as a reference
- more capable of meeting user expectations.
Standalone mobile design
For the record, let's also note that there is a third approach, which is to create separate mobile versions. Although many companies used such a solution a few years ago, it is no longer popular or recommended today.
This solution didn't prevail because of several reasons. Among other things, this was due to Google's search engine policy, which didn't favor mobile versions. Another reason was the problematic nature of maintaining consistency between variants.
The Three Major Principles of Responsive Design
Responsive Design has lived to see not only its fans and popularizers but also patterns of best design practices. Here they are.
Fluid Grid Systems
So far, websites have been designed in a manner similar to newspaper layout design. The elements' placement, size, spacing, and hierarchies were expressed in absolute values – in centimeters and millimeters. In the case of websites – pixels. The good old days of designing with only desktop screens in mind are gone, and a completely different approach to design is needed in the mobile era.
In the case of Responsive Design, it is much more useful to express such values in a relative way, and therefore dependent on two variables – the target size and the display context, i.e., the value of the dimensions on a given device.
The idea is simple, but it requires an example for better understanding. The relative size is equal to the ratio of the target size to the context size. So, if the design was created with a standard page width in mind, i.e., 960 pixels, and will be displayed on a device with a width of 1280 pixels, the relative size will be 75%. In practice, this means that our project will occupy 75% of the available area.
All we need to do now is to specify the percentage (width, margins, etc.) in the CSS script properties.
Fluid Image
Responsive design also means the problem of adjusting graphic elements to a given size – for example, photos or graphics. An effective way to deal with this problem is to use the CSS command: img {max-width: 100%;}.
This provides the browser with a clear indication of how the image should be scaled. It protects images from overstretching when the available space is larger.
Media Queries/Breakpoints
Media Queries allow us to specify how to display an application on a given device and at a given size. They enable us to determine under what conditions the site layout can be changed and how to do it.
For example, an application whose layout in the desktop version is based on 3 columns in the mobile version will be displayed in a single-column variant. With Breakpoints, it is possible to specify the points where the layout is to be changed.
Frameworks
The development of the Mobile First approach has resulted in a number of publicly available frameworks. Hence, one of the best practices is to use them. Looking for solutions on our own usually means an unnecessary waste of time. Bootstrap is a good example of a recommended framework, which you can download here.
Summary
- Responsive design (RWD) involves adapting the size and layout of the page to a device, diagonal, and screen resolution on which the application is to be displayed.
- Responsive Web Design is one of the two dominant approaches to web application design. Adaptive Web Design is an approach currently (at the end of 2020) less popular.
- RWD is the approach recommended by the Google search engine.
- Both approaches – RWD and AWD – have their advantages and disadvantages, and deciding which to choose is a matter of goals, needs, but also individual preferences.
- Standalone mobile version designs with the distinctive letter “m” in the address (e.g., m.example.com) are slowly becoming a thing of the past and are not recommended.
- Responsive Web Design has lived to see patterns of best practices.
- The Three Major Principles of Responsive Design recommended by the Interaction Design Foundation are Fluid Grid System, Fluid Image, and Media Queries/Breakpoints.
- Researchers from the Interaction Design Foundation recommend supplementing the aforementioned principles with another concerning open-source frameworks.
