What is Responsive Web Design ?


Responsive Web design (RWD) is a Web design methodology aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors)

A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images and CSS3 media queries, an extension of the @media rule.

  • The fluid grid concept calls for page element sizing to be in relative units like percentages, rather than absolute units like pixels or points.
  • Flexible images are also sized in relative units, so as to prevent them from displaying outside their containing element.
  • Media queries allow the page to use different CSS style rules based on characteristics of the device the site is being displayed on, most commonly the width of the browser.
  • Server-side components (RESS) in conjunction with client-side ones such as media queries can produce faster-loading sites for access over cellular networks and also deliver richer functionality/usability avoiding some of the pitfalls of device-side-only solutions

    Responsive Web design is an approach whereby a designer creates a Web page that “responds to” or resizes itself depending on the type of device it is being seen through.  That could be an oversized desktop computer monitor, a laptop, a 10-inch tablet, a 7-inch tablet, or a 4-inch smartphone screen.

    Responsive Web design has become one of the hottest trends in 2013.  This is due in part to the  growth of smartphones and other mobile devices. More people are using smaller-screen devices to view Web pages.

    What Does Responsive Web Design Look Like?

    The purpose of responsive design is to have one site, but with different elements that respond differently when viewed on devices of different sizes.

    Let’s take a traditional “fixed” website.  When viewed on a desktop computer, for instance, the website might show  three columns. But when you view that same layout on a smaller tablet, it might force you to scroll horizontally, something users don’t like. Or elements might be hidden from view or look distorted.  The impact is also complicated by the fact that many tablets can be viewed either in portrait orientation, or turned sideways for landscape view.

    On a tiny smartphone screen, websites can be even more challenging to see. Large images may “break” the layout. Sites can be slow to load on smartphones if they are graphics heavy.

    However, if a site uses responsive design, the tablet version might automatically adjust to display just two columns. That way, the content is readable and easy to navigate. On a smartphone, the content might appear as a single column, perhaps stacked vertically.  Or possibly the  user would have the ability to swipe over to view other columns.  Images will resize instead of distorting the layout or getting cut off.

    The point is: with responsive design, the website automatically adjusts based on the device the viewer sees it in.

    How Does Responsive Web Design Work?

    Responsive sites use fluid grids. All page elements are sized by proportion, rather than pixels. So if you have three columns, you wouldn’t say exactly how wide each should be, but rather how wide they should be in relation to the other columns. Column 1 should take up half the page, column 2 should take up 30%, and column 3 should take up 20%, for instance.

    Media such as images is also resized relatively. That way an image can stay within its column or relative design element.

    Related Issues

    Mouse v. touch: Designing for mobile devices also brings up the issue of mouse versus touch.  On desktop computers the user normally has a mouse to navigate and select items.  On a smartphone or tablet, the user mostly is using fingers and touching the screen.  What may seem easy to select with a mouse, may be hard to select with a finger on a tiny spot on a screen. The Web designer must take “touch” into consideration.

    Graphics and download speed: Also, there’s the issue of graphics, ads and download speed. On mobile devices, it may be wise to display fewer graphics than for desktop views so that a site doesn’t take forever to load on a smartphone.  Larger ad sizes may need to be exchanged for smaller ads.

    Apps and “mobile versions”:  In the past, you might have thought about creating an app for your website — say an iPad app or an Android app.  Or you would have a mobile version specifically for BlackBerry.

    But with so many  different devices today, it’s getting harder to create apps and versions for every device and operating platform. As Smashing Magazine wrote, “When will the madness stop? It won’t, of course.”  A responsive design that is flexible enough to be viewed on multiple devices just makes sense.

    Why Small Businesses Need to Switch to Responsive Web Design

    More people are using mobile devices. A recent Pew study found that 45% of American adults own a smartphone, and 31% own a tablet computer. As we reported yesterday, smartphone shipments outpace those of regular mobile phones, and tablet growth is surging.

    Check your traffic and you might just be shocked at how many visitors are getting to your website  through mobile devices.  (In your Google Analytics, select “Audience” on the left side, then “Mobile” to see what proportion of traffic is from mobile devices. You can even drill down to see which devices are sending the traffic.)

    Responsive design templates are everywhere now, for purchase.  If, for instance, you have a WordPress site you can visit a reputable template gallery such asThemeForest and search for “responsive WordPress themes.”  Purchase one for under $50. Your Web developer can then customize it for your logo and brand.

    The Basics of Responsive Web Design

    How can websites possibly keep up with the millions of screens out there?

    The short answer is they can’t.

    So how does a web page adapt responsively to the needs of a computer screen versus an iPad or Blackberry screen?

    One of the ways is through responsive web design.

    Responsive web design uses CSS media queries to serve different style properties depending on the screen size, orientation, resolution, color capability and other characteristics of the user’s device.

    Using the responsive web design approach, a web page can adjust itself on the device it’s being displayed on.

    Why Responsive Web Design Benefits Web Designers

    Responsive web design relieves web designers, user interface designers, and web developers from working day and night creating websites for every single different device in existence. Here are a few benefits:

    • One site for every device: Whether viewed on a 27-inch iMac with a wireless connection or from the screen of your Android phone with T-mobile 4G coverage, the website will be configured for the user’s optimal viewing pleasure.
    • Optimal design for the device: With the responsive web design approach, all images, fonts and other HTML elements will be scaled appropriately, maximizing whatever screen size the user has.
    • No need for redirects: Other options towards designing for multiple devices require the use of redirects to send the user to the appropriate version of a web page. Without the need for redirects, the user can access the content he wants to look at, as quickly as possible.

    How to Get Started with Responsive Web Design

    Here are resources that will help you build responsive web designs:

    • Responsive Design in 3 Steps (webdesignerwall.com) — this wonderful tutorial distills responsive web design into a handful of steps
    • Adaptive layouts with media queries (netmagazine.com) — this is a good responsive web design tutorial
    • Responsive Web Design (alistapart.com) — the original article that debuted the concept of responsive web design
    • Skeleton (getskeleton.com) — An open source web design boilerplate that will get you started with responsive web design quickly

      Adjusting Screen Resolution

      With more devices come varying screen resolutions, definitions and orientations. New devices with new screen sizes are being developed every day, and each of these devices may be able to handle variations in size, functionality and even color. Some are in landscape, others in portrait, still others even completely square. As we know from the rising popularity of the iPhone, iPad and advanced smartphones, many new devices are able to switch from portrait to landscape at the user’s whim. How is one to design for these situations?

      Portrait Landscape

      In addition to designing for both landscape and portrait (and enabling those orientations to possibly switch in an instant upon page load), we must consider the hundreds of different screen sizes. Yes, it is possible to group them into major categories, design for each of them, and make each design as flexible as necessary. But that can be overwhelming, and who knows what the usage figures will be in five years? Besides, many users do not maximize their browsers, which itself leaves far too much room for variety among screen sizes.

      Morten Hjerde and a few of his colleagues identified statistics on about 400 devices sold between 2005 and 2008. Below are some of the most common:

      Sizes

      PART OF THE SOLUTION: FLEXIBLE EVERYTHING

      A few years ago, when flexible layouts were almost a “luxury” for websites, the only things that were flexible in a design were the layout columns (structural elements) and the text. Images could easily break layouts, and even flexible structural elements broke a layout’s form when pushed enough. Flexible designs weren’t really that flexible; they could give or take a few hundred pixels, but they often couldn’t adjust from a large computer screen to a netbook.

      Now we can make things more flexible. Images can be automatically adjusted, and we have workarounds so that layouts never break (although they may become squished and illegible in the process). While it’s not a complete fix, the solution gives us far more options. It’s perfect for devices that switch from portrait orientation to landscape in an instant or for when users switch from a large computer screen to an iPad.

      In Ethan Marcotte’s article, he created a sample Web design that features this better flexible layout:

      More Flexible

      The entire design is a lovely mix of fluid gridsfluid images and smart mark-up where needed. Creating fluid grids is fairly common practice, and there are a number of techniques for creating fluid images:

      For more information on creating fluid websites, be sure to look at the book “Flexible Web Design: Creating Liquid and Elastic Layouts with CSS” by Zoe Mickley Gillenwater, and download the sample chapter “Creating Flexible Images.” In addition, Zoe provides the following extensive list of tutorials, resources, inspiration and best practices on creating flexible grids and layouts: “Essential Resources for Creating Liquid and Elastic Layouts.”

      While from a technical perspective this is all easily possible, it’s not just about plugging these features in and being done. Look at the logo in this design, for example:

      Cropping Logo

      If resized too small, the image would appear to be of low quality, but keeping the name of the website visible and not cropping it off was important. So, the image is divided into two: one (of the illustration) set as a background, to be cropped and to maintain its size, and the other (of the name) resized proportionally.

      <h1 id="logo"><a href="#"><img src="site/logo.png" alt="The Baker Street Inquirer" /></a></h1>

      Above, the h1 element holds the illustration as a background, and the image is aligned according to the container’s background (the heading).

      This is just one example of the kind of thinking that makes responsive Web design truly effective. But even with smart fixes like this, a layout can become too narrow or short to look right. In the logo example above (although it works), the ideal situation would be to not crop half of the illustration or to keep the logo from being so small that it becomes illegible and “floats” up.

      Flexible Images

      One major problem that needs to be solved with responsive Web design is working with images. There are a number of techniques to resize images proportionately, and many are easily done. The most popular option, noted in Ethan Marcotte’s article on fluid images but first experimented with by Richard Rutter, is to use CSS’s max-width for an easy fix.

      img { max-width: 100%; }

      As long as no other width-based image styles override this rule, every image will load in its original size, unless the viewing area becomes narrower than the image’s original width. Themaximum width of the image is set to 100% of the screen or browser width, so when that 100% becomes narrower, so does the image. Essentially, as Jason Grigsby noted, “The idea behind fluid images is that you deliver images at the maximum size they will be used at. You don’t declare the height and width in your code, but instead let the browser resize the images as needed while using CSS to guide their relative size”. It’s a great and simple technique to resize images beautifully.

      Note that max-width is not supported in IE, but a good use of width: 100% would solve the problem neatly in an IE-specific style sheet. One more issue is that when an image is resized too small in some older browsers in Windows, the rendering isn’t as clear as it ought to be. There is a JavaScript to fix this issue, though, found in Ethan Marcotte’s article.

      While the above is a great quick fix and good start to responsive images, image resolution and download times should be the primary considerations. While resizing an image for mobile devices can be very simple, if the original image size is meant for large devices, it could significantly slow download times and take up space unnecessarily.

      FILAMENT GROUP’S RESPONSIVE IMAGES

      This technique, presented by the Filament Group, takes this issue into consideration and not only resizes images proportionately, but shrinks image resolution on smaller devices, so very large images don’t waste space unnecessarily on small screens. Check out the demo page here.

      Filament Group Image Resizing

      This technique requires a few files, all of which are available on Github. First, a JavaScript file (rwd-images.js), the .htaccess file and an image file (rwd.gif). Then, we can use just a bit of HTML to reference both the larger and smaller resolution images: first, the small image, with an .r prefix to clarify that it should be responsive, and then a reference to the bigger image using data-fullsrc.

      <img src="smallRes.jpg" data-fullsrc="largeRes.jpg">

      The data-fullsrc is a custom HTML5 attribute, defined in the files linked to above. For any screen that is wider than 480 pixels, the larger-resolution image (largeRes.jpg) will load; smaller screens wouldn’t need to load the bigger image, and so the smaller image (smallRes.jpg) will load.

      The JavaScript file inserts a base element that allows the page to separate responsive images from others and redirects them as necessary. When the page loads, all files are rewritten to their original forms, and only the large or small images are loaded as necessary. With other techniques, all higher-resolution images would have had to be downloaded, even if the larger versions would never be used. Particularly for websites with a lot of images, this technique can be a great saver of bandwidth and loading time.

      This technique is fully supported in modern browsers, such as IE8+, Safari, Chrome and Opera, as well as mobile devices that use these same browsers (iPad, iPhone, etc.). Older browsers and Firefox degrade nicely and still resize as one would expect of a responsive image, except that both resolutions are downloaded together, so the end benefit of saving space with this technique is void.

      STOP IPHONE SIMULATOR IMAGE RESIZING

      One nice thing about the iPhone and iPod Touch is that Web designs automatically rescale to fit the tiny screen. A full-sized design, unless specified otherwise, would just shrink proportionally for the tiny browser, with no need for scrolling or a mobile version. Then, the user could easily zoom in and out as necessary.

      There was, however, one issue this simulator created. When responsive Web design took off, many noticed that images were still changing proportionally with the page even if they were specifically made for (or could otherwise fit) the tiny screen. This in turn scaled down text and other elements.

      iPhone Scale
      (Image: Think Vitamin | Website referenced: 8 Faces)

      Because this works only with Apple’s simulator, we can use an Apple-specific meta tag to fix the problem, placing it below the website’s <head> section. Thanks to Think Vitamin’s article on image resizing, we have the meta tag below:

      <meta name="viewport" content="width=device-width; initial-scale=1.0">

      Setting the initial-scale to 1 overrides the default to resize images proportionally, while leaving them as is if their width is the same as the device’s width (in either portrait or lanscape mode). Apple’s documentation has a lot more information on the viewport meta tag.

      Custom Layout Structure

      For extreme size changes, we may want to change the layout altogether, either through a separate style sheet or, more efficiently, through a CSS media query. This does not have to be troublesome; most of the styles can remain the same, while specific style sheets can inherit these styles and move elements around with floats, widths, heights and so on.

      For example, we could have one main style sheet (which would also be the default) that would define all of the main structural elements, such as #wrapper#content#sidebar#nav, along with colors, backgrounds and typography. Default flexible widths and floats could also be defined.

      If a style sheet made the layout too narrow, short, wide or tall, we could then detect that and switch to a new style sheet. This new child style sheet would adopt everything from the default style sheet and then just redefine the layout’s structure.

      Here is the style.css (default) content:

      /* Default styles that will carry to the child style sheet */
      
      html,body{
         background...
         font...
         color...
      }
      
      h1,h2,h3{}
      p, blockquote, pre, code, ol, ul{}
      
      /* Structural elements */
      #wrapper{
      	width: 80%;
      	margin: 0 auto;
      
      	background: #fff;
      	padding: 20px;
      }
      
      #content{
      	width: 54%;
      	float: left;
      	margin-right: 3%;
      }
      
      #sidebar-left{
      	width: 20%;
      	float: left;
      	margin-right: 3%;
      }
      
      #sidebar-right{
      	width: 20%;
      	float: left;
      }

      Here is the mobile.css (child) content:

      #wrapper{
      	width: 90%;
      }
      
      #content{
      	width: 100%;
      }
      
      #sidebar-left{
      	width: 100%;
      	clear: both;
      
      	/* Additional styling for our new layout */
      	border-top: 1px solid #ccc;
      	margin-top: 20px;
      }
      
      #sidebar-right{
      	width: 100%;
      	clear: both;
      
      	/* Additional styling for our new layout */
      	border-top: 1px solid #ccc;
      	margin-top: 20px;
      }

      Moving Content

      MEDIA QUERIES

      CSS3 supports all of the same media types as CSS 2.1, such as screenprint and handheld, but has added dozens of new media features, including max-widthdevice-widthorientation andcolor. New devices made after the release of CSS3 (such as the iPad and Android devices) will definitely support media features. So, calling a media query using CSS3 features to target these devices would work just fine, and it will be ignored if accessed by an older computer browser that does not support CSS3.

      In Ethan Marcotte’s article, we see an example of a media query in action:

      <link rel="stylesheet" type="text/css"
      	media="screen and (max-device-width: 480px)"
      	href="shetland.css" />

      This media query is fairly self-explanatory: if the browser displays this page on a screen (rather than print, etc.), and if the width of the screen (not necessarily the viewport) is 480 pixels or less, then load shetland.css.

      New CSS3 features also include orientation (portrait vs. landscape), device-widthmin-device-width and more. Look at “The Orientation Media Query” for more information on setting and restricting widths based on these media query features.

      One can create multiple style sheets, as well as basic layout alterations defined to fit ranges of widths — even for landscape vs. portrait orientations. Be sure to look at the section of Ethan Marcotte’s article entitled “Meet the media query” for more examples and a more thorough explanation.

      Multiple media queries can also be dropped right into a single style sheet, which is the most efficient option when used:

      /* Smartphones (portrait and landscape) ----------- */
      @media only screen
      and (min-device-width : 320px)
      and (max-device-width : 480px) {
      /* Styles */
      }
      
      /* Smartphones (landscape) ----------- */
      @media only screen
      and (min-width : 321px) {
      /* Styles */
      }
      
      /* Smartphones (portrait) ----------- */
      @media only screen
      and (max-width : 320px) {
      /* Styles */
      }

      The code above is from a free template for multiple media queries between popular devices by Andy Clark. See the differences between this approach and including different style sheet files in the mark-up as shown in the post “Hardboiled CSS3 Media Queries.”

      CSS3 MEDIA QUERIES

      Above are a few examples of how media queries, both from CSS 2.1 and CSS3 could work. Let’s now look at some specific how-to’s for using CSS3 media queries to create responsive Web designs. Many of these uses are relevant today, and all will definitely be usable in the near future.

      The min-width and max-width properties do exactly what they suggest. The min-width property sets a minimum browser or screen width that a certain set of styles (or separate style sheet) would apply to. If anything is below this limit, the style sheet link or styles will be ignored. The max-widthproperty does just the opposite. Anything above the maximum browser or screen width specified would not apply to the respective media query.

      Note in the examples below that we’re using the syntax for media queries that could be used all in one style sheet. As mentioned above, the most efficient way to use media queries is to place them all in one CSS style sheet, with the rest of the styles for the website. This way, multiple requests don’t have to be made for multiple style sheets.

      @media screen and (min-width: 600px) {
           .hereIsMyClass {
                width: 30%;
                float: right;
           }
      }

      The class specified in the media query above (hereIsMyClass) will work only if the browser or screen width is above 600 pixels. In other words, this media query will run only if the minimum width is 600 pixels (therefore, 600 pixels or wider).

      @media screen and (max-width: 600px) {
           .aClassforSmallScreens {
                clear: both;
      		  font-size: 1.3em;
           }
      }

      Now, with the use of max-width, this media query will apply only to browser or screen widths with a maximum width of 600 pixels or narrower.

      While the above min-width and max-width can apply to either screen size or browser width, sometimes we’d like a media query that is relevant to device width specifically. This means that even if a browser or other viewing area is minimized to something smaller, the media query would still apply to the size of the actual device. The min-device-width and max-device-widthmedia query properties are great for targeting certain devices with set dimensions, without applying the same styles to other screen sizes in a browser that mimics the device’s size.

      @media screen and (max-device-width: 480px) {
           .classForiPhoneDisplay {
                font-size: 1.2em;
           }
      }
      @media screen and (min-device-width: 768px) {
           .minimumiPadWidth {
                clear: both;
      		  margin-bottom: 2px solid #ccc;
           }
      }

      There are also other tricks with media queries to target specific devices. Thomas Maier has written two short snippets and explanations for targeting the iPhone and iPad only:

      For the iPad specifically, there is also a media query property called orientation. The value can be either landscape (horizontal orientation) or portrait (vertical orientation).

      @media screen and (orientation: landscape) {
           .iPadLandscape {
                width: 30%;
      		  float: right;
           }
      }
      @media screen and (orientation: portrait) {
           .iPadPortrait {
                clear: both;
           }
      }

      Unfortunately, this property works only on the iPad. When determining the orientation for the iPhone and other devices, the use of max-device-width and min-device-width should do the trick.

      There are also many media queries that make sense when combined. For example, the min-width and max-width media queries are combined all the time to set a style specific to a certain range.

      @media screen and (min-width: 800px) and (max-width: 1200px) {
           .classForaMediumScreen {
                background: #cc0000;
                width: 30%;
                float: right;
           }
      }

      The above code in this media query applies only to screen and browser widths between 800 and 1200 pixels. A good use of this technique is to show certain content or entire sidebars in a layout depending on how much horizontal space is available.

      Some designers would also prefer to link to a separate style sheet for certain media queries, which is perfectly fine if the organizational benefits outweigh the efficiency lost. For devices that do not switch orientation or for screens whose browser width cannot be changed manually, using a separate style sheet should be fine.

      You might want, for example, to place media queries all in one style sheet (as above) for devices like the iPad. Because such a device can switch from portrait to landscape in an instant, if these two media queries were placed in separate style sheets, the website would have to call each style sheet file every time the user switched orientations. Placing a media query for both the horizontal and vertical orientations of the iPad in the same style sheet file would be far more efficient.

      Another example is a flexible design meant for a standard computer screen with a resizable browser. If the browser can be manually resized, placing all variable media queries in one style sheet would be best.

      Nevertheless, organization can be key, and a designer may wish to define media queries in a standard HTML link tag:

      <link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
      <link rel="stylesheet" media="screen and (min-width: 600px)" href="large.css" />
      <link rel="stylesheet" media="print" href="print.css" />

      JAVASCRIPT

      Another method that can be used is JavaScript, especially as a back-up to devices that don’t support all of the CSS3 media query options. Fortunately, there is already a pre-made JavaScript library that makes older browsers (IE 5+, Firefox 1+, Safari 2) support CSS3 media queries. If you’re already using these queries, just grab a copy of the library, and include it in the mark-up: css3-mediaqueries.js.

      In addition, below is a sample jQuery snippet that detects browser width and changes the style sheet accordingly — if one prefers a more hands-on approach:

      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
      
      <script type="text/javascript">
      	$(document).ready(function(){
      		$(window).bind("resize", resizeWindow);
      		function resizeWindow(e){
      			var newWindowWidth = $(window).width();
      
      			// If width width is below 600px, switch to the mobile stylesheet
      			if(newWindowWidth < 600){ 				$("link[rel=stylesheet]").attr({href : "mobile.css"});	 			} 			// Else if width is above 600px, switch to the large stylesheet 			else if(newWindowWidth > 600){
      				$("link[rel=stylesheet]").attr({href : "style.css"});
      			}
      		}
      	});
      </script>

      There are many solutions for pairing up JavaScript with CSS media queries. Remember that media queries are not an absolute answer, but rather are fantastic options for responsive Web design when it comes to pure CSS-based solutions. With the addition of JavaScript, we can accomodate far more variations. For detailed information on using JavaScript to mimic or work with media queries, look at “Combining Media Queries and JavaScript.”

      Conclusion

      We are indeed entering a new age of Web design and development. Far too many options are available now, and there will be far too many in the future to continue adjusting and creating custom solutions for each screen size, device and advancement in technology. We should rather start a new era today: creating websites that are future-ready right now. Understanding how to make a design responsive to the user doesn’t require too much learning, and it can definitely be a lot less stressful and more productive than learning how to design and code properly for every single device available.

      Responsive Web design and the techniques discussed above are not the final answer to the ever-changing mobile world. Responsive Web design is a mere concept that when implemented correctly can improve the user experience, but not completely solve it for every user, device and platform. We will need to constantly work with new devices, resolutions and technologies to continually improve the user experience as technology evolves in the coming years.

      Besides saving us from frustration, responsive Web design is also best for the user. Every custom solution makes for a better user experience. With responsive Web design, we can create custom solutions for a wider range of users, on a wider range of devices. A website can be tailored as well for someone on an old laptop or device as it can for the vast majority of people on the trendiest gadgets around, and likewise as much for the few users who own the most advanced gadgets now and in the years to come. Responsive Web design creates a great custom experience for everyone. As Web designers, we all strive for that every day on every project anyway, right?

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s