View source for Responsive Web Design (RWD)

Responsive Web [[Design]] (RWD) is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the [[website]] should automatically switch to accommodate for resolution, image size and scripting abilities. In other words, the website should have the technology to automatically respond to the user’s preferences. This would eliminate the need for a different design and development phase for each new gadget on the [[market]].<ref>What is Responsive Web Design? [https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/ Smashing Magazine]</ref>


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.<ref>Explaining Responsive Web Design (RWD) [https://smallbiztrends.com/2013/05/what-is-responsive-web-design.html  Annie Pilon]</ref>


Responsive Web Design is about using HTML and CSS to resize, hide, shrink, enlarge, or move the content to make it look good on any screen, as seen in the example below:


[[File:ResponsiveWebDesign.png|400px|Responsive Web Design (RWD)]]<br />
source: [https://www.w3schools.com/html/html_responsive.asp W3Schools]


'''History of Responsive Web Design'''<ref>History of Responsive Web Design [https://en.wikipedia.org/wiki/Responsive_web_design Wikipedia]</ref><br />
The first site to feature a layout that adapts to browser viewport width was Audi.com launched in late 2001, created by a team at razorfish consisting of Jürgen Spangl and Jim Kalbach (information [[architecture]]), Ken Olling (design), and Jan Hoffmann (interface development). Limited browser capabilities meant that for [[Internet]] Explorer, the layout could adapt dynamically in the browser whereas for Netscape, the page had to be reloaded from the [[server]] when resized. Cameron Adams created a demonstration in 2004 that is still online. By 2008, a number of related terms such as "flexible", "liquid", "fluid", and "elastic" were being used to describe layouts. CSS3 media queries were almost ready for prime time in late 2008/early 2009. Ethan Marcotte coined the term responsive web design (RWD) — and defined it to mean fluid grid/ flexible images/ media queries—in a May 2010 article in A List Apart. He described the theory and practice of responsive web design in his brief 2011 book titled Responsive Web Design. Responsive design was listed as #2 in Top Web Design Trends for 2012 by .net magazine after progressive enhancement at #1. Mashable called 2013 the Year of Responsive Web Design. Many other sources have recommended responsive design as a cost-effective alternative to mobile applications due to its ability to house all of the code in a single website.


'''Responsive Web Design - Development Principles'''<ref>The Three Development Principles of Responsive Web Design (RWD) [https://www.upwork.com/hiring/mobile/what-is-responsive-web-design/ UpWork]</ref><br />
Responsive web design consists of three development principles. To work properly, all three of these need to be implemented:
*Fluid Grids:A flexible grid-based layout is the cornerstone of responsive design. It uses relative sizing to fit the content to the device’s screen size. The term “grid” is a little misleading because it’s not necessary to implement any of the available grid frameworks. Instead, CSS is used to position the content. This approach is based on percentages and is a departure from traditional pixel-based design principles. Responsive design moves away from the pixel-based approach because a pixel on one device could be eight pixels on another device. By basing text size, widths, and margins on percentages, a fixed size can be turned into a size relative to its display space.
*Media Queries: Media queries, also known as breakpoints, can be used to apply different styles based on the capabilities of the device. The website detects the type of device you’re using or the size of your web browser and correctly displays the page. To see this in action, stretch the window of your web browser to different sizes. Notice how the page adjusts. Features can be used to [[control]] the width, height, max-width, max-height, device-height, orientation, aspect ratio, etc. 
*Flexible Images and Media:This feature allows you to adapt images and other media to load differently, depending on the device, either by scaling or using the CSS overflow property. Scaling in CSS is relatively straightforward—the media element’s max width can be set at 100 percent, and the web browser will make the image shrink and expand depending on its container. An alternative to scaling media is to crop it with CSS. Applying overflow:hidden allows images to be cropped dynamically so that they fit into their containers.


'''Using Responsive Website Design'''<ref>4 Tips to Keep in Mind when Using Responsive Design [https://www.commonplaces.com/blog/responsive-web-design-what-it-is-and-why-we-use-it/ CommonPlacesInteractive]</ref><br />
If you are thinking of building a website using responsive web design, here are a few tips our developers think you should keep in mind:
*1. Try to keep everything in a few [[standard]] layouts: The more sections of the site that have a completely custom look and feel, the more difficult it will be to fit them into a responsive design.
*2. Make your layout flexible: Flexible grids use columns to organize content, and relative instead of fixed width to adapt to viewport size. Fluid layout is the best way to be ready for any kind of screen size and/or orientation.
*3. Avoid large amounts of tabular [[data]]: It is difficult to make tables look good at small resolutions.
*4. Begin with a starter [[framework]]: If this is your first responsive design, you should download something like [http://twitter.github.io/bootstrap/ Twitter Bootstrap]  and get a feel for how they organize their code and the techniques they use to keep things looking good at all device widths. ; If you are creating a Drupal site then check out [http://drupal.org/project/omega Omega]


'''Responsive Website Vs. Mobile Website'''<ref>Why is a responsive website better than a mobile website? [https://itseeze.com/what-is-responsive/ itseeze]</ref><br />
*Responsive websites work effectively whatever device they are viewed on and all website pages are always available. 
*Responsive websites load faster than a mobile website – saving valuable seconds.  
*Google says, ‘40% of people abandon a website that takes more than 3 seconds to load.’ 
*A single responsive website is more effective and less time consuming than a desktop and mobile website: 
**1 site to update. 
**1 site to optimize for search engines. 


===See Also===
*[[Adaptive_Web_Design_(AWD)|Adaptive Web Design]]
*[[Above_the_Fold|Above the Fold]]
*[[Below_the_Fold|Below the Fold]]
*[[Progressive Enhancement (PE)]]
*[[User-Centered_Evaluation_(UCE)|User-centered evaluation (UCE)]]


===References===
<references/>


===Further Reading===
*Beginner’s Guide to Responsive Web Design [http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design Treehouse]
*Responsive Web Design - 50 Examples and Best Practices [https://designmodo.com/responsive-design-examples/ DesinModo]
*Responsive vs Adaptive Design – Which is Best for Mobile Viewing of Your Website? [http://mediumwell.com/responsive-adaptive-mobile/ The Medium Well]