Responsive Web Design approaches the design and creation of websites with an eye toward providing users with the best possible viewing experience regardless of the device they use.
What Is Responsive Web Design?
A responsive website is capable of adjusting its elements to adapt to the screen size on which it is being viewed. This means that regardless of device or browser screen size, the viewer of a responsive website always sees an optimized version of the website, eliminating the need to squint at miniscule text, or to scroll repeatedly to find specific information on a webpage. The outcome is a happier audience and, as claimed by proponents of the responsive approach, improved web analytics.
Take for example, the following Wikipedia article:
Note that the paragraph widths resize with the browser screen size. Imagine if they did not: the reader would have to scroll left and right and back from line to line in order to read the article properly—that certainly would’t be a pleasant reading experience. With a responsive website, all the scrolling one would typically have to do is upwards and downwards.
Responsive Web Design vs. Mobile Websites
It may seem that a responsive approach primarily caters to users of mobile devices—after all, this is where the web viewing experience differs significantly from a regular desktop or laptop screen. That may be the case for now, but responsive web design proposes itself to be a more flexible, adaptable solution that goes beyond simply accommodating mobile web viewers.
There are plenty of differences between a mobile website and a responsive one. For starters, setting up a mobile website as a means of addressing the growing number of mobile web viewers still adheres to the idea of a fixed width or screen size. This is precisely the kind of thinking that responsive web design seeks to move away from. Instead it utilizes flexibility—technology is adaptive, and no one knows what sorts of screen sizes will be available in the future. This is why it is better to use an responsive design than a static one.
Another significant point of distinction between the two methods is that responsive web design only requires one website, whereas a mobile website is an extra version of a webpage optimized for viewing on small screens. So, with a mobile strategy, you might come up with four different versions of your website to cater to the four general screen sizes—desktop monitor, laptop screen, tablet, and mobile phone!
The Case for Responsive Web Design
Responsive or otherwise, it is important for businesses and web designers alike to recognize the importance of a solution to address the growth of mobile web users. According to recent surveys, 53 percent of American adult smartphone users now access the Web through their mobile device. Web users have options. If a site doesn’t provide the best user experience, no sweat—there is bound to be a competitor that provides what they are looking for. So it’s important to provide a responsive user experience.
When you ask yourself, what is responsive web design – consider that user expectations are increasing. They expect full functionality when they access a webpage from their mobile device; and they expect consistency from one device to the next.
What makes responsive web design superior then? First, we go back to the constantly changing nature of technology and the Web. Now that a significant chunk of the population use their smartphone to access the web, a mobile strategy works. But who’s to say the landscape won’t change again in, say, ten years or less?
For now, web designers can create several iterations of a single webpage, but what if the number of versions necessary continues to increase? Furthermore, when it comes time to update the website, having several versions require multiple edits. Imagine the time and resources one must expend on this type of activity.
What is responsive web design? What does it entail?
According to Ethan Marcotte, the so-called pioneer of responsive web design, there are three main ingredients to a responsive website: media queries, fluid grids, and flexible images. Media queries are a CSS3 module used to “query” or to determine the context in which a website is being accessed. It can, for example, find out the resolution and bits per color component of the device being used. Subsequently, web content will be rendered accordingly based on the conditions set forth on the code.
A fluid grid pertains to having a basic grid structure based not on pixels, which are static, but on ems. Dimensions are stated in terms of percentages or proportions, and will thus adjust to the screen size. Part of having a flexible grid means that components such as padding, margins, and type will adapt according to conditions as well, as in this website:
Notice that the picture on the St. Paul’s School website remains static throughout the three screen sizes. This is not a big deal since it serves mostly as a background image. In most other cases, however, a responsive website would need to have flexible images—that is, images that scale in size depending on browser screen—so as to minimize scrolling due to over-sized images that stretch beyond the screen space. Take, for example, the Food Sense main page:
Notice the change in image size along with other responsive elements like the grid, the navigation, and the text. By the time the screen width approximates that of a mobile browser, the image has scaled down to a size that fits the screen size properly.
Responsive Web Design Done Well
Perhaps the most important thing to remember when asking yourself “what is responsive web design” and then choosing to embrace a responsive approach is the essence of the word “responsive.” The Web is a constantly changing medium, and a responsive approach seeks to roll with the tides, throwing aside the old-fashioned notion of fixed dimensions, an idea that may have served us well in traditional print media but not anymore with the dynamic nature of the Web.
The Internet abounds with lists of websites that have adopted a responsive approach. Designing a successful responsive website requires embracing the responsive mindset and its principles and then complementing these with valuable tips gleaned from successful mobile strategies.
Here are a few closing tips:
- Look beyond layout. Keep in mind that the reason why you are taking a responsive approach in the first place is to provide users with an optimal viewing experience, so think about what sorts of tweaks will benefit them. For example, adjust the target area of your website’s links—clicking on the right link may seem like a piece of cake when using a mouse, but it’s another story when you’re on a touch device with a small screen.
- One of the main differences between the dynamic nature of a responsive website and the static nature of a mobile website is that the latter designs to particular dimensions. In contrast, the former makes use of breakpoints to determine the screen size at which certain elements of the webpage should adjust.
- Remember that users expect full functionality and consistency across all media. Mobile may have meant less content in the past, but that’s no longer the case now. As a result, it is important to keep in mind the context in which a user may be accessing your website and design accordingly. Instead of removing content, rearrange it.
- It is often easier to establish the bare essentials and then work one’s way up. Luke Wroblewski calls this a Mobile First strategy, in which the web designer sets the lowest common denominator for the smallest screen size deemed reasonable, and then adds elements and rearranges content as he scales up.
So what is responsive web design? A responsive website adapts to its users, not the other way around. Thus, make key pieces of information easy to find, and make it easy to navigate your website.
Did we miss any key benefits of responsive web design? Is there anything you disagree with? Let us know in the comments. Responsive web design is a relatively new concept. We’re learning just like everyone else, but we hope the information we’ve provided has been helpful to you.