Responsive web design is an approach to building a website that considers the different types of devices that a visitor might use to access the site.
What does responsive web design do?
Responsive web design adjusts how content on a page is displayed according to the dimensions of the device’s screen. This is in direct contrast with non-responsive web design, which maintains the same properties regardless of what size screen is being used.
The goal of the responsive approach to web design is to ensure website users have the same experience regardless of the device they use to access a site.
As a user switches from desktop to their mobile device, responsive websites will switch without any input from the user. Due to responsive web code, images, text content, and other elements will move and change depending on display size. Responsive web design prevents issues such as text that appears too small on mobile devices.
What is a non-responsive website?
An example of a non-responsive web design page is one that reads well on desktop browsers but has very small, unreadable text on smartphones, often due to having too many columns or images that are too large to fit within a smartphone’s limited viewport display width. With responsive web design, web developers don’t have to focus on specific display sizes; rather, their responsive web code is designed to automatically adapt to a range of display sizes.
History of responsive web design
Websites were originally developed to fit a specific screen size as device options were limited. However, over time, more screen sizes became readily available.
Developers began experimenting with various methods for designing websites to try and improve the user experience. For example, liquid layouts, a method coined by Glenn Davis, resulted in website content displayed based on a percentage. These liquid layouts could be adjusted based on screen resolution and size.
As technology continued to evolve, new devices such as laptops, tablets, and smartphones entered the market. These new devices often displayed websites that were cumbersome to use. Text that was too small, images that were too large, and an inability to scroll were all common issues.
Developers tried to combat the new size requirements by creating websites specifically for mobile devices. While these mobile-specific websites had their advantages, many developers found they took time to develop and manage, as they required a separate subdomain.
The answer was finally found in responsive web design, a term coined in 2010 by Ethan Marcotte.
In his 2010 article “Responsive Web Design”, Marcotte posed the question, “Can we really continue to commit to supporting each new user agent with its own bespoke experience? At some point, this starts to feel like a zero-sum game. But how can we—and our designs—adapt?”
His answer builds the foundation of the web design of today.
“We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them,” said Marcotte. “In short, we need to practice responsive web design.”
How does responsive web design work?
Responsive web designs work by changing the elements on a website based on viewport, or the visible area of a web page. For example, desktops and mobile devices both have different viewports.
Although several elements work to make a responsive website work, perhaps the most important element is the CSS breakpoint, also known as a media query breakpoint. These breakpoints are selected based on screen size or viewport. Once a breakpoint is reached, the website content responds based on CSS code. As a result, the website adapts to the device.
How to make a website responsive
Responsive website design consists of the following three main components:
- Flexible layouts – Using a flexible grid to create the website layout that will dynamically resize to any width.
- Media queries – An extension to media types when targeting and including styles. Media queries allow designers to specify different styles for specific browser and device circumstances.
- Flexible media – Makes media (images, video and other formats) scalable, by changing the size of the media as the size of the viewport changes.
A variety of responsive design techniques can be utilized to create responsive websites. Most frequently, web developers will set major and minor width breakpoints based on viewport tags and CSS media queries. Then, code is added across the site to create an optimized content layout based on the display sizes between the set breakpoints.
Another key is using relative values as much as possible as opposed to fixed attributes like width. This enables content to scale in size based on the device and platform the reader is using at the time. Both of these tactics can also be accomplished by using a basic template or theme that supports responsive design.
Why is responsive web design important?
Responsive design is important for a number of reasons primarily centered around user experience and site performance. First, it makes text and images easier to read/view for someone using a mobile phone or tablet since the screen is smaller than a standard desktop computer.
This is especially important because mobile browsing continues to trend upward, and a significant portion of most website traffic is driven by social media links. Responsive design is also helpful for users who might be viewing a condensed desktop browser window or a split-screen view.
It also signals to search engines that the page is optimized for any viewing experience, which boosts SEO performance. To that end, Google announced in 2015 that mobile responsiveness would become a key factor in determining search engine rankings, effectively reprioritizing responsive design as a critical component of a website’s key performance indicators.
Responsive web design vs. adaptive web design
Adaptive web design takes the principles of responsive design one step further by considering the unique needs of someone accessing a page from a mobile device. Adaptive designs are particularly concerned with touch-friendly features and ensuring the most relevant information is clearly displayed.
Adaptive web design can also put in place controls to detect the user’s unique device settings, like display brightness, text size, and default language.
Where responsive web design prioritizes the desktop experience of a site first and the mobile experience second, adaptive web design considers both simultaneously and with equal weight. Adaptive web design usually takes much longer to execute than simple responsive design, but the finished product offers an improved user experience.