Responsive Web Design ( RWD ) is an approach to web design that makes the web page. Recent work also considers the viewer as part of the viewing context as an extension for RWD [1] . Content, design and performance are necessary across all devices to ensure usability and satisfaction. [2] [3] [4] [5]

A site designed with RWD [2] [6] adapts the layout to the viewing environment by using fluid, proportion-based grids, [7] [8] flexible images, [9] [10] [11] and CSS3 media queries , [4] [12] [13] an extension of the @mediarule, in the following ways: [14]

  • The fluid grid concept calls for page element sizing to be in relative units like percentages, rather than absolute units like pixels or points . [8]
  • Flexible image sont également sized in relative units, so as to prevent prevention Them from Their Containing displaying outside element . [9]
  • Media queries allow the page to use different CSS is based on the content of the browser.

Responsive web design has become more important as the amount of mobile traffic accounts for more than half of total internet traffic. [15] Therefore, Google announced Mobilegeddon in 2015, and started to boost the ratings of sites that are mobile friendly if the search is made from a mobile device. [16] Responsive web design is an example of user interface plasticity . [17]

Related concepts

Mobile first, unobtrusive JavaScript, and progressive enhancement

“Mobile first”, unobtrusive JavaScript , and progressive enhancement are related concepts that predate RWD. [18] Browsers of basic mobile phones Do not Understand JavaScript or media queries , so a recommended practice is to create a basic website and Enhance it for smart phones and PCs, Rather than Rely on graceful degradation to make a complex image-heavy site work on mobile phones. [19] [20] [21] [22]

Progressive enhancement based on browser, device, or feature detection

Due to the high volume of use of internet on mobile devices they can not be ignored. In 2014, for the first time users of the Internet from their mobile devices than desktop [23] . Where a web site must support mobile devices that lack JavaScript, browser (“user agent”) detection (also called ” browser sniffing “) and mobile device detection [20] [24] are two ways of deducing if certain HTML and CSS features are supported (as a basis for progressive enhancement) -however, these methods are not completely reliable unless used in a device capabilities.

For more mobile phones and PCs, JavaScript frameworks like Modernizr , jQuery , and jQuery Mobile that can directly test browser support for HTML / CSS features (or identify the device or user agent) are popular. Polyfills can be used to support media queries (required for RWD), and enhance HTML5 support, on Internet Explorer. Feature detection also might not be completely reliable; It is possible that this feature is available, when it is effectively or not effectively implemented. [25] [26]

Challenges, and other approaches

Luke Wroblewski has written some of the RWD and mobile design challenges, and has created a catalog of multi-device layout patterns. [27] [28] [29] He suggests that, compared with a simple RWD approach, device experience or RESS (responsive web design with side-server components) approaches can provide a user experience that is better optimized for mobile devices. [30] [31] [32] Server-side ” dynamic CSS ” implementation of styles and languages ​​like Sass or Incentivated MML can be part of such an approach with a device capabilities database in order to improve usability.[33] RESS is more expensive to develop, requires more than just customer-side logic, and so tends to be reserved for organizations with larger budgets. Google recommends responsive design for smartphone websites over other approaches. [34]

ALTHOUGH Many publishers are starting to Implement responsive design, one Ongoing challenge for RWD Is That Some banner advertisements and videos are not fluid. [35]HOWEVER, search advertising and (banner) display advertising media platform targeting specific device size and different advertisement formats for desktop, smartphone, and basic mobile devices. Different landing page URLs can be used for different platforms, [36] or Ajax can be used to display different variants advertisement was page. [24] [28] [37] CSS tables permit hybrid fixed + fluid layouts. [38]

There are many ways of validating and testing RWD designs, [39] ranging from mobile site validators and mobile emulators [40] to simultaneous testing tools like Adobe Edge Inspect. [41] The Chrome, Firefox and Safari browsers and the Chrome console offer responsive design viewport resizing tools, as do third parties. [42] [43]

Use cases of RWD will expand with increased mobile usage; 51% and are increasing. [44]

History

The first website to feature a layout That ADAPTS to browser viewport width Was Audi.com lancé in late 2001, [45] created by a team at razorfish consistant en 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 be dynamically in the browser for Netscape, the page had to be reloaded from the server when resized.

Cameron Adams created a demonstration in 2004 that is still online. [46] By 2008, a number of related terms Such As “flexible”, “liquid”, [47] “fluid” and “elastic” Were being white used to describe layouts. CSS3 media queries were almost ready for prime time in late 2008 / early 2009. [48] Ethan Marcotte coined the term responsive web design [49] (RWD) -and defined it to mean fluid grid / flexible images / media queries-in a May 2010 article in A List Apart . [2] 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 [50] after progressive enhancement at # 1.

Mashable called 2013 the Year of Responsive Web Design. [51] Many other sources have recommended responsive design as a cost-effective alternative to mobile applications.

Related Terms

  • Em (and rem)

See also

  • Adaptive web design
  • CSS framework
  • Progressive enhancement
  • Tableless web design

References

  1. Jump up^ Tafreshi, Amir E. Sarabadani; Marbach, Kim; Norrie, Moira C. (5 June 2017). “Proximity-Based Adaptation of Web Content on Public Displays” . International Conference on Web Engineering (ICWE): Web Engineering . Springer, Cham: 282-301. doi : 10.1007 / 978-3-319-60131-1_16 .
  2. ^ Jump up to:c Marcotte, Ethan (May 25, 2010). “Responsive Web design” . A List Apart .
  3. Jump up^ “Ethan Marcotte’s 20 favorite responsive sites” . .net magazine. October 11, 2011.
  4. ^ Jump up to:b Gillenwater, Zoe Mickley (December 15, 2010). “Examples of flexible layouts with CSS3 media queries” . Stunning CSS3. p. 320. ISBN  978-0-321-722133 .
  5. Jump up^ Schade, Amy (2014-05-04). “Responsive Web Design (RWD) and User Experience” . Nielsen Norman Group . Retrieved 2017-10-19 .
  6. Jump up^ Pettit, Nick (August 8, 2012). “Beginner’s Guide to Responsive Web Design” . TeamTreehouse.com blog.
  7. Jump up^ “Core Concepts of Responsive Web Design” . September 8, 2014.
  8. ^ Jump up to:b Marcotte, Ethan (March 3, 2009). “Fluid Grids” . A List Apart.
  9. ^ Jump up to:b Marcotte, Ethan (June 7, 2011). “Fluid images” . A List Apart.
  10. Jump up^ Hannemann, Anselm (September 7, 2012). “The road to responsive images” . net Magazine.
  11. Jump up^ Jacobs, Denise (April 24, 2012). “50 fantastic tools for responsive web design” . .net Magazine.
  12. Jump up^ Gillenwater, Zoe Mickley (October 21, 2011). “Crafting quality media queries” .
  13. Jump up^ “Responsive design-harnessing the power of media queries” . Google Webmaster Central. April 30, 2012.
  14. Jump up^ W3C @media rule
  15. Jump up^ “Cisco Visual Networking Index: Global Mobile Data Traffic Forecast Update 2014-2019 White Paper” . Cisco . January 30, 2015 . Retrieved August 4, 2015 .
  16. Jump up^ “Official Google Central Webmaster Blog: Rolling out the mobile-friendly update” . Official Google Webmaster Central Blog . Retrieved August 4,2015 .
  17. Jump up^ Thevenin, D .; Coutaz, J. (2002). “Plasticity of User Interfaces: Framework and Research Agenda”. Proc. Interact’99, A. Sasse & Johnson C. Eds, IFIP IOS Press . Edinburgh. pp. 110-117.
  18. Jump up^ “What is Responsive Web Design” . July 23, 2012.
  19. Jump up^ Wroblewski, Luke (November 3, 2009). “Mobile First” .
  20. ^ Jump up to:a Firtman B , Maximiliano (July 30, 2011). Programming the Mobile Web . p. 512. ISBN  978-0-596-80778-8 .
  21. Jump up^ “Graceful degradation versus progressive enhancement” . February 3, 2009.
  22. Jump up^ Designing with Progressive Enhancement . February 2010. p. 456.ISBN  978-0-321-65888-3 . Retrieved March 1, 2010 .
  23. Jump up^ “Mobile Websites | All The Way Up Media” . All The Way Up Media . 2016-10-31 . Retrieved 2017-10-08 .
  24. ^ Jump up to:b “Server-Side Device Detection: History, Benefits And How-To” . Smashing magazine. September 24, 2012.
  25. Jump up^ “BlackBerry Torch: The HTML5 Developer Scorecard | Blog”. Sencha. August 18, 2010. Retrieved September 11, 2012.
  26. Jump up^ “Motorola Xoom: The HTML5 Developer Scorecard | Blog” . Sencha. February 24, 2011 . Retrieved September 11, 2012 .
  27. Jump up^ Wroblewski, Luke (May 17, 2011). “Mobilism: jQuery Mobile” .
  28. ^ Jump up to:b Wroblewski Luke (February 6, 2012). “Rolling Up Our Responsive Sleeves” .
  29. Jump up^ Wroblewski, Luke (March 14, 2012). “Multi-Device Layout Patterns” .
  30. Jump up^ Wroblewski, Luke (February 29, 2012). “Responsive Design … or RESS” .
  31. Jump up^ Wroblewski, Luke (September 12, 2011). “RESS: Responsive Design + Server Side Components” .
  32. Jump up^ Andersen, Anders (May 9, 2012). “Getting Started with RESS” .
  33. Jump up^ “Responsive but not completely optimized mobile | Blog” . Incentivated.
  34. Jump up^ “Building Smartphone-Optimized Websites” . Google.
  35. Jump up^ Snyder, Matthew; Koren, Etai (April 30, 2012). “The state of responsive advertising: the prospect publishers” . .net Magazine.
  36. Jump up^ “Google Partners Help” . google.com . Retrieved May 21, 2015 .
  37. Jump up^ JavaScript and Responsive Web DesignGoogle Developers
  38. Jump up^ “The Role of Table Layouts in Responsive Web Design” . Web Design Tuts + . Retrieved May 21, 2015 .
  39. Jump up^ Young, James (August 13, 2012). “Top responsive web design problems … testing” . .net Magazine.
  40. Jump up^ “Best mobile emulators and RWD testing tools” . The Mobile Web Design Blog. November 26, 2011.
  41. Jump up^ Rinaldi, Brian (September 26, 2012). “Browser testing … with Adobe Edge Inspect” .
  42. Jump up^ “Responsive Design View” . Mozilla Developer Network . Retrieved May 21, 2015 .
  43. Jump up^ Malta Wassermann. “Responsive design testing tool – Viewport Resizer – Emulate various screen resolutions – Best developer device testing toolbar” . maltewassermann.com . Retrieved May 21, 2015 .
  44. Jump up^ “Mobile share of organic search engine visits United States from 3rd quarter 2013 to 4th quarter 2016” . Statista . Retrieved 27 March 2017 .
  45. Jump up^ Kalbach, Jim (July 22, 2012). “The First Responsive Design Website: Audi (circa 2002).” [ self-published source? ]
  46. Jump up^ Adams, Cameron (September 21, 2004). “Resolution dependent layout: Varying layout according to browser width” . The Man in Blue .
  47. Jump up^ “G146: Using liquid layout” . w3.org . Retrieved May 21, 2015 .
  48. Jump up^ “Media Queries” . w3.org . Retrieved May 21, 2015 .
  49. Jump up^ “OutSeller Group – Organize, Optimize, Maximize” . outseller.net . Retrieved May 21, 2015 .
  50. Jump up^ “15 top web design and development trends for 2012” . .net magazine. January 9, 2012.
  51. Jump up^ Cashmore, Pete (December 11, 2012). “Why 2013 Is the Year of Responsive Web Design” .