What Is Responsive Web Design?

Spend even a short amount of time researching the topic of web design and the attribute “responsive” is bound to pop up. Whether you’re trying to understand how to optimize your online presence, learning the ropes in the industry, or just plain curious about this omnipresent term, you’ve come to the right place. We’ll explore the most important aspects of responsive web design, talk about its origins, and show how it works in practice.  So without further ado, let’s get to the question at hand: What is responsive web design?

In short, responsive web design refers to an approach to designing web pages that ensures they look good regardless of the device used to view them. The goal is to make sure that no matter the screen resolution, window size, or orientation of the device, a web page is legible.

Why all the fuss? If we take a look at some stats, it quickly becomes apparent why taking the time to make sure your website is mobile responsive is paramount.

  • In April 2018, mobile internet traffic accounted for 51.2% of total web traffic, and this number is expected to rise.
  • 8 out of 10 consumers will stop engaging with content if it doesn’t render well on their device.
  • 61% of users are unlikely to return to a website if they have trouble accessing it.

Mobile use is also changing the way we shop: 34.5% of total eCommerce revenue in 2017 came from mobile, with future projections as high as  53.9% by 2021.

Responsive Design History

A  responsive webpage has become standard practice rather than a passing trend, and it all started with designers in the early 2000s toying with the idea of adjusting the layout of their web pages according to browser width. The true “reign of responsive” didn’t come about until 2010, when web designer Ethan Marcotte coined the term “responsive design” in an article for A List Apart.

With users increasingly accessing web pages on mobile devices, the need for mobile responsive designs was becoming apparent. Google officiated the mobile focus shift with “Mobilegeddon” — an announcement made in 2015 prioritizing mobile-friendly websites for searches made on smartphones; the following year mobile and tablet internet usage surpassed desktop for the first time, and the numbers have continued to go up. Statistics show that the global share of mobile phone website traffic was 52.2% in 2018, which is a 1.9% increase compared to 2017. Asia is the region with the highest share of mobile usage — a whopping 65.1% for 2018.   

How Do You Build a Responsive Site?

The idea behind responsive web design is to use the same HTML code regardless of the device being used to access the page. In this way, the need to create separate websites is eliminated. The same elements of the webpage are reshuffled to fit the viewpoint depending on its size. See the screenshots below, showing the same page opened on a desktop versus a mobile device.

What is Responsive Web Design - Desktop Version

What is Responsive Web Design - Mobile Versionsource

Elements of Responsive Web Design

Different elements are utilized to achieve these screen-dependent dynamic changes to the website’s layout. Below are some of the main components of responsive web design.

CSS techniques commonly implemented for attaining responsiveness include media queries. These work by adding a block of properties only if a certain condition is true. Most commonly this refers to browser width.

The idea behind fluid grids relates to sizing all page elements of the grid using percentages instead of absolute units. This means the grid is divided into columns with proportional widths and heights relative to one another, allowing for their flexible, fluid reconfiguration based on browser width, and all of this is achieved using HTML

Website example: The images below show how Cowlick Studios utilized this kind of fluidity in one of their website designs. Notice how the three elements “expand” horizontally when the browser is open to full screen and “contract” into a column formation when browser size is decreased, remaining completely visible regardless of browser changes.

What is Responsive Web Design - Elements of Web Design Desktop

 

What is Responsive Web Design - Elements of Web Design Mobilesource

Just as the grid itself needs fluidity to adapt and be viewable no matter the device, the content must also be fluid to adhere to responsive design requirements. For visual content, this is accomplished using flexible visuals, or rather images that are scaled in percentages, just like the grid elements.

Aside from making sure images follow changes in the grid, it is essential to curate their contents. This is where art direction comes in. Simply scaling down a photo so that it fits a smaller screen isn’t always the way to go. Making sure the focal point of the photo is still prominent enough even when scaled down sometimes entails zooming and cropping. This is an often overlooked detail which can significantly improve the overall experience of a responsive website.

The examples below illustrate the point well. As the screen size changes, so does the photo. It continues to convey the message of the accompanying article while making the most of the available space. The article in this example has to do with phone talks between two world leaders. On a larger screen, we see the oval office in full. President Obama is on the phone, sitting behind his desk. The same photo on a smaller screen loses a lot of the detail. Zooming in and keeping the essentials in the frame is a far better choice.  

What is Responsive Web Design - Art Direction

What Is the Difference Between Responsive and Adaptive Web Design?

Another way of approaching the challenge of designing web pages for a multitude of screen configurations is a concept called adaptive design. When designing an adaptive web page, it is necessary to create multiple distinct versions for each possible screen configuration. When a user accesses the website, the size of their screen is detected. In response, the appropriate version of the page loads. Let’s explore how adaptive design measures up to its responsive counterpart to get a broader answer to the question, How is responsive design different from adaptive design?

Difficulty

While it might seem like creating multiple versions of the same website, as in adaptive design, would be time-consuming, the reality is that designing one single webpage with the ability to respond to any given screen configuration takes quite a bit of planning. Ranking the difficulty of adaptive and responsive design seems to be a somewhat divisive topic in web designer circles. So noting that there is a number of sources claiming otherwise, the consensus seems to be that designing a responsive web page is the more difficult, more expensive approach.

Flexibility

As the names of some of its key features suggest, this point goes to responsive design. A responsive design will adapt to any screen configuration that gets thrown its way. Meanwhile, adaptive design will fully shine only on the specific set of platforms it was designed for.

Loading Time

Studies show 47% of consumers expect a web page to load in 2 seconds or less, and 40% will abandon a website that takes more than 3 seconds to load. Loading time is of the essence, which is why it’s important to note that a web page built according to responsive design principles will have a shorter loading time than an adaptive-based one of a similar size.

Adaptive vs. Responsive

So which is the better choice? With its one-size-fits-all approach, responsive has been the go-to technique for quite some time now. This choice makes a lot of sense in an ever-changing tech environment. It’s a great way to “future-proof” your website against any new devices that might enter the playing field in the future.

That being said, adaptive web design has its advantages. If a longstanding, popular desktop version of a website just isn’t cutting it for mobile, it makes more sense to use an adaptive approach and simply configure the existing design to a different resolution.  This seems like a far better option compared to scrapping everything and creating a responsive website from scratch. The answer, as ever, lies in having a precise understanding of the specifics of each project and the strengths and weaknesses of both design methods.

Responsive Web Design Trends

Now that we’ve covered the basics of responsive web design (definition, elements, differentiating it from adaptive design) it’s time to explore what it looks like in practice. Designing a web presentation to look good on screens of all shapes and sizes is no easy task, and the responsive design revolution has led to the emergence of some interesting web design trends which have proven versatile and moldable to different viewpoints while staying in line with responsive web design characteristics.

The hamburger menu is known under several other food-related aliases, including hot dog and sandwich. This type of menu has become a standard feature in apps and mobile websites alike. Sparking some debate in designer circles, the hamburger menu has faced criticism for the less than ideal way in which it showcases features.

On the other hand, it is a compact, tried and true solution for narrow screens, it has become almost universally recognizable to users and it has solidified its status as an accepted feature in responsive design; explained best using an example, this trend can be seen in action by clicking here.

Horizontally challenged mobile devices have also given rise to the popularity of narrower, more elongated vertical menus.

Some of the fonts that once dominated in print don’t work quite as well on the newest screen formats. This is giving rise to new, optimized styles of typography.

Speaking of fonts, font resizing is another popular feature of responsive design. It’s a simple technique from a coding perspective, yet a visually compelling one.

All this focus on smaller devices begs the question: What is responsive web design bringing to the table as far as larger screens are concerned? The large screen design trend doesn’t forget about the super large, high-definition screens that are having a revolution of their own, with 4K and even 8K displays becoming increasingly mainstream. 

This has sparked a trend of utilizing grandiose, high-resolution images sure to take full advantage of the potential these impressive larger formats possess. This makes sense since accessing the internet using large screen TVs or multiple desktop monitors side by side is not uncommon nowadays.

Responsive Web Design Examples

Check out some real-life examples of amazing responsive web design in action using a responsive screen testing tool like QuirkTool’s Screenfly, which allows you to see what a particular page would look like on many different devices. Aside from being helpful, if you’re trying to gauge the responsiveness of your existing web presentation or test one still in the works, this tool can provide a useful visual learning aid for beginners still grappling with the question, What is a responsive website?

Check out our picks below and put them through the screen testing tool to see amazing examples of responsive design in action:

Milwaukee Ballet

The stunning videos and delicate design element capture the essence of the art of ballet. Thanks to good art direction, the video footage is equally stunning regardless of the device used.

Melanie David’s Portfolio

Melanie David is a UX Designer from Australia. Her web presentation is simple yet visually captivating. It shows that responsive design doesn’t have to have elaborate elements to impress.

Boston Globe

The Boston Globe is a shining example of a newspaper adapting to the digital age. It’s a textbook example, a real-life responsive web design definition. The articles seamlessly shift into one column or expand into several. Depending on screen size text is spread out out or pushed together. Photos and text adjust accordingly, making for a pleasant reading experience on any device.

Wired Magazine

Wired Magazine is an online publication that takes a somewhat different approach. The article blurbs and their accompanying photos are on the smaller side. They rearrange within a grid depending on screen size.

Food Sense

If this website was a person and you asked it “What is responsive web design?” it would probably just point to itself in response. This gorgeous gallery of delicious dishes converts into an Instagram-like stream of images and condenses the menu on more narrow screens.

More Hazards

This Nashville folk duo’s web presentation seems like it was designed with a definite mobile-first mindset. It expands to utilize the extra space available on larger screens, filling them with beautiful graphics and subtle parallax scrolling.

Government of Victoria

Apart from facilitating new media formats and promoting artistry, what is a responsive website capable of? Quite a bit, it turns out. This web page created by the government of the Australian state of Victoria implements a much tamer version of responsive web design. It serves as a valuable example nonetheless. When opened on a mobile device, the page scales down to the bare essentials. This enables Victorians to easily access the most common features and services. Meanwhile, the desktop version provides additional secondary features such as a twitter feed and news.

FAQ

TL;DR? Still have questions? Help is on the way in the section below.

What does responsive mean in web design?

In web design, the term responsive refers to a website’s ability to respond to a screen of any size by adjusting its contents so they remain visible and legible regardless of the geometry and size of the screen. This ensures that a website can be easy to view on any device. Responsiveness is accomplished using flexible elements, which can be rearranged by screen size.  The dimensions of these elements are expressed relatively, using percentages, so that they scale to fit changes in screen size.

What is responsive in web development?

While the term “responsive” is usually associated with web design, the work needed to achieve responsiveness largely involves web developers because they are the ones in charge of coding and ensuring that the skeleton of the website functions as intended. Web designers mainly focus on the visual aspect of a page. A skilled web designer will also have some understanding of development, though. This is helpful when trying to gauge whether their design is feasible.

What is a responsive framework?

In the context of a website, a framework constitutes a set of precomposed code. The purpose of this code is to serve as a structure to build the website on. It provides automation, eliminating the need to handwrite large portions of standardly used code. It also establishes a standard way to build websites while still allowing flexibility in the final design. A responsive framework provides this type of structure for, you guessed it, responsive websites. Depending on your website’s needs, frameworks can contain different features and options.

What framework is most commonly used in responsive web design?

Bootstrap — this is a front-end framework, which means it pertains to the part of a webpage that users see. These usually include a package containing structures of files of standardized code such as HTML and CSS documents. In the case of Bootstrap, the most important component it provides is the grid. The grid contains twelve equal-width columns. Each element can occupy between one and twelve columns, allowing for a great number of variations. Check out how this grid can be used in different ways here.

What is a responsive web design template?

A framework provides the building blocks for creating your web design. A template, on the other hand, is a tool which brings you much closer to the finish line. It allows you to populate an already structured website with your content and be on your way. They both simplify the process of website creation. Deciding which one is more useful to you depends mostly on your website’s particular needs and your budget, knowledge and available resources. Utilizing a responsive website template ensures your design will adhere to the rules of responsive web design.

What is adaptive web design?

Wikipedia’s adaptive web design definition states that it is “a process of server-side detection that chooses a design layout and size to display.” Adaptive web design will serve a different version of the layout depending on the device being used to access it. The primary focus here isn’t on mobile; however, a version of the website that works well on a mobile screen is available. In other words, the approach here is “mobile separate” rather than “mobile first.” In an increasingly mobile-centric world, it remains to be seen whether this approach holds up.

Why is responsive web design important?

The question “What is responsive web design?” is commonly asked, and for good reason. This term and the type of design it represents are everywhere. A logical follow up would be to investigate why that is the case. The primary reason for the prevalence of responsive web design is the wide variety of different devices used to access web pages these days. Gone are the days of the standardized computer monitors. Today it seems like a new version of a popular device with entirely new screen dimensions pops up every couple months. Ensuring visibility on all of them is crucial for any website.

5 Comments
  1. Responsive web design importance has been increasing sharply for many years but still some businesses do not consider this aspect to be of thought worthy because they are witnessing any traffic from mobile devices but the fact is Google does not rank you for mobile devices if your website is not responsive to those devices.

  2. These sort of simple posts are a great help for beginners, Keep creating such useful content this helps greatly in creating awareness among designers. Write one other post which enhances the importance of responsive design from search engine optimization point of view.

  3. I love it when people get together and share views.
    Great website, continue the good work!

  4. This is great and extremely helpful thank you. Really this topic is very useful for seo users. Thanks for posting its advantages.

    Leave a reply

    Designadvisor