Responsive Web Design

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.

Vangie Beal
Vangie Beal is a freelance business and technology writer covering Internet technologies and online business since the late '90s.

Top Articles

List of Windows Operating System Versions & History [In Order]

The Windows operating system (Windows OS) refers to a family of operating systems developed by Microsoft Corporation. We look at the history of Windows...

How to Create a Website Shortcut on Your Desktop

Website Shortcut on Your Desktop reviewed by Web Webster   This Webopedia guide will show you how to create a website shortcut on your desktop using...

What are the Five Generations of Computers? (1st to 5th)

Reviewed by Web Webster Learn about each of the 5 generations of computers and major technology developments that have led to the computing devices that...

Hotmail [Outlook] Email Accounts

Launched in 1996, Hotmail was one of the first public webmail services that could be accessed from any web browser. At its peak in...

Nimble CRM

Nimble CRM is a social CRM (customer relationship management) with sales and marketing...

What is Insightly CRM?

Insightly CRM is customer relationship management (CRM) software that focuses on an intuitive,...

Indicators of Compromise

When a system administrator finds anomalous or malicious behavior within network...