Actions

Responsive Web Design (RWD)

Revision as of 18:01, 6 February 2021 by User (talk | contribs) (The LinkTitles extension automatically added links to existing pages (https://github.com/bovender/LinkTitles).)

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.[1]


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.[2]


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:


Responsive Web Design (RWD)
source: W3Schools


History of Responsive Web Design[3]
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[4]
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[5]
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 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 Omega


Responsive Website Vs. Mobile Website[6]

  • 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
Above the Fold
Below the Fold
Progressive Enhancement
User-centered evaluation (UCE)


References

  1. What is Responsive Web Design? Smashing Magazine
  2. Explaining Responsive Web Design (RWD) Annie Pilon
  3. History of Responsive Web Design Wikipedia
  4. The Three Development Principles of Responsive Web Design (RWD) UpWork
  5. 4 Tips to Keep in Mind when Using Responsive Design CommonPlacesInteractive
  6. Why is a responsive website better than a mobile website? itseeze


Further Reading

  • Beginner’s Guide to Responsive Web Design Treehouse
  • Responsive Web Design - 50 Examples and Best Practices DesinModo
  • Responsive vs Adaptive Design – Which is Best for Mobile Viewing of Your Website? The Medium Well