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. 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.
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.
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 to responsive web design 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 web 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 that 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.
Whereas responsive web design prioritizes the desktop experience of a site first and the mobile experience second, adaptive web design considers both experiences simultaneously and with equal weight. This means adaptive web design usually takes much longer to execute than simple responsive design, but the finished product usually offers a much better user experience.