Jump to content

Responsive web design: Difference between revisions

From Wikipedia, the free encyclopedia
Browse history interactively
← Previous editNext edit →
Content deleted Content added
VisualWikitext
LittleBenW (talk | contribs)
8,599 edits
changed images
Line 1: Line 1:
[[Image:Boston Globe responsive website.jpg|thumb|alt=Screenshots of The Boston Globe website|An example of a responsive website, [[The Boston Globe]]]]
[[Image:Ethan Marcotte at An Event Apart Minneapolis July 2010.jpg|thumb|alt=Ethan Marcotte, wearing jeans and a sports coat, speaking from a stage|Ethan Marcotte, who coined the term Responsive Web Design, spoke on that topic at the web design conference An Event Apart in [[Minneapolis]], MN, on 27 July 2010.]]'''Responsive Web Design''' ('''RWD''') essentially indicates that a web site is crafted to use [[Cascading_Style_Sheets#CSS_3|Cascading Style Sheets 3 media queries]], an extension of the <code>@media</code> rule<ref>[http://www.w3.org/TR/CSS2/media.html#at-media-rule @media rule]</ref><ref>{{cite web|last=Gillenwater|first=Zoe Mickley|title=Crafting quality media queries|date=Oct. 21, 2011|url=http://zomigi.com/blog/essential-considerations-for-crafting-quality-media-queries/}}</ref><ref>{{cite web|last=Gillenwater|first=Zoe Mickley|title=Examples of flexible layouts with CSS3 media queries|date=Dec. 15, 2010|url=http://zomigi.com/blog/examples-of-flexible-layouts-with-css3-media-queries/}}</ref>, with fluid proportion-based grids (which use percentages and EMs instead of pixels)<ref>{{cite web|last=Marcotte|first=Ethan|title=Fluid Grids|date=March 3, 2009|publisher = A List Apart|url=http://www.alistapart.com/articles/fluidgrids/}}</ref>, to adapt the layout to the viewing environment, and probably also use flexible images.<ref name=fluid_grid>{{cite web|last=Marcotte|first=Ethan|title=Responsive Web Design|date=May 25, 2010|publisher = A List Apart|url=http://www.alistapart.com/articles/responsive-web-design/}}</ref><ref>{{cite web|last=Marcotte|first=Ethan|title=Fluid images|date=June 7, 2011|publisher = A List Apart|url=http://www.alistapart.com/articles/fluid-images/}}</ref><ref>{{cite web|title=Adaptive Images|url=http://adaptive-images.com/}}</ref><ref name=EM>{{cite web|last=Jacobs|first=Denise|title=21 top tools for responsive web design|date=August 23, 2011|publisher = .net Magazine|url=http://www.netmagazine.com/features/21-top-tools-responsive-web-design}}</ref><!--ref>{{cite web|last=Bhatt|first=Dilip|title=ISkeleton Framework|date=April 19, 2012|url=http://iskeleton.blogspot.in}}</ref--> As a result, users across a broad range of devices and browsers will have access to a single source of content, laid out so as to be easy to read and navigate with a minimum of resizing, panning, and scrolling.
'''Responsive Web Design''' ('''RWD''') essentially indicates that a web site is crafted to use [[Cascading_Style_Sheets#CSS_3|Cascading Style Sheets 3 media queries]], an extension of the <code>@media</code> rule<ref>[http://www.w3.org/TR/CSS2/media.html#at-media-rule @media rule]</ref><ref>{{cite web|last=Gillenwater|first=Zoe Mickley|title=Crafting quality media queries|date=Oct. 21, 2011|url=http://zomigi.com/blog/essential-considerations-for-crafting-quality-media-queries/}}</ref><ref>{{cite web|last=Gillenwater|first=Zoe Mickley|title=Examples of flexible layouts with CSS3 media queries|date=Dec. 15, 2010|url=http://zomigi.com/blog/examples-of-flexible-layouts-with-css3-media-queries/}}</ref>, with fluid proportion-based grids (which use percentages and EMs instead of pixels)<ref>{{cite web|last=Marcotte|first=Ethan|title=Fluid Grids|date=March 3, 2009|publisher = A List Apart|url=http://www.alistapart.com/articles/fluidgrids/}}</ref>, to adapt the layout to the viewing environment, and probably also use flexible images.<ref name=fluid_grid>{{cite web|last=Marcotte|first=Ethan|title=Responsive Web Design|date=May 25, 2010|publisher = A List Apart|url=http://www.alistapart.com/articles/responsive-web-design/}}</ref><ref>{{cite web|last=Marcotte|first=Ethan|title=Fluid images|date=June 7, 2011|publisher = A List Apart|url=http://www.alistapart.com/articles/fluid-images/}}</ref><ref>{{cite web|title=Adaptive Images|url=http://adaptive-images.com/}}</ref><ref name=EM>{{cite web|last=Jacobs|first=Denise|title=21 top tools for responsive web design|date=August 23, 2011|publisher = .net Magazine|url=http://www.netmagazine.com/features/21-top-tools-responsive-web-design}}</ref><!--ref>{{cite web|last=Bhatt|first=Dilip|title=ISkeleton Framework|date=April 19, 2012|url=http://iskeleton.blogspot.in}}</ref--> As a result, users across a broad range of devices and browsers will have access to a single source of content, laid out so as to be easy to read and navigate with a minimum of resizing, panning, and scrolling.
==Elements of Responsive Web Design==
==Elements of Responsive Web Design==
The basis of a responsive website is a fluid, proportion-based grid; flexible images; and media queries.<ref>{{cite web|last=Marcotte|first=Ethan|title=Responsive Web Design|date=May 25, 2010|publisher = A List Apart|url=http://www.alistapart.com/articles/responsive-web-design/}}</ref>:
The basis of a responsive website is a fluid, proportion-based grid; flexible images; and media queries.<ref>{{cite web|last=Marcotte|first=Ethan|title=Responsive Web Design|date=May 25, 2010|publisher = A List Apart|url=http://www.alistapart.com/articles/responsive-web-design/}}</ref>:
Line 10: Line 11:
==Challenges==
==Challenges==
Luke Wroblewski has summarized some of the RWD and mobile design challenges, and created a catalog of multi-device layout patterns.<ref>{{cite web|last=Wroblewski|first=Luke|title=Mobilism: jQuery Mobile|date=May 17, 2011|url=http://www.lukew.com/ff/entry.asp?1330}}</ref><ref name=RWD>{{cite web|last=Wroblewski|first=Luke|title=Rolling Up Our Responsive Sleeves|date=February 6, 2012|url=http://www.lukew.com/ff/entry.asp?1494}}</ref><ref name=RESS>{{cite web|last=Wroblewski|first=Luke|title=Responsive Design ... or RESS|date=February 29, 2012|url=http://www.lukew.com/ff/entry.asp?1509}}</ref><ref>{{cite web|last=Wroblewski|first=Luke|title=Multi-Device Layout Patterns|date=March 14, 2012|url=http://www.lukew.com/ff/entry.asp?1514}}</ref> He suggests that, compared with a simple RWD approach, Device Experience or RESS approaches can provide a user experience that is better optimized for mobile devices.<ref name=RESS /> Server-side implementation of dynamic stylesheet languages like [[Sass (stylesheet language)|Sass]] can be part of such an approach.
Luke Wroblewski has summarized some of the RWD and mobile design challenges, and created a catalog of multi-device layout patterns.<ref>{{cite web|last=Wroblewski|first=Luke|title=Mobilism: jQuery Mobile|date=May 17, 2011|url=http://www.lukew.com/ff/entry.asp?1330}}</ref><ref name=RWD>{{cite web|last=Wroblewski|first=Luke|title=Rolling Up Our Responsive Sleeves|date=February 6, 2012|url=http://www.lukew.com/ff/entry.asp?1494}}</ref><ref name=RESS>{{cite web|last=Wroblewski|first=Luke|title=Responsive Design ... or RESS|date=February 29, 2012|url=http://www.lukew.com/ff/entry.asp?1509}}</ref><ref>{{cite web|last=Wroblewski|first=Luke|title=Multi-Device Layout Patterns|date=March 14, 2012|url=http://www.lukew.com/ff/entry.asp?1514}}</ref> He suggests that, compared with a simple RWD approach, Device Experience or RESS approaches can provide a user experience that is better optimized for mobile devices.<ref name=RESS /> Server-side implementation of dynamic stylesheet languages like [[Sass (stylesheet language)|Sass]] can be part of such an approach.
[[Image:Ethan Marcotte at on Flexible Images at An Event Apart Minneapolis 2010.jpg|thumb|alt=Ethan Marcotte, wearing jeans and a sports coat, speaking from a stage|Ethan Marcotte, who coined the term Responsive Web Design, spoke on that topic at the web design conference An Event Apart in [[Minneapolis]], MN, on 27 July 2010.]]

One problem for RWD is that advertisements are not fluid. But search advertising and display advertising support specific device platform targeting and different advertisement size formats for desktop, smartphone, and basic mobile devices, and different landing page URLs can be used for different platforms.<ref>[http://support.google.com/adwords/certification/bin/static.py?hl=en&page=guide.cs&guide=23292 Google AdWords Targeting (Device Platform Targeting)]</ref> So this can be part of a solution.<ref name=RWD /> It seems wise to compare "one-site RWD", "same site, with separate mobile URL", and "separate mobile site" approaches.<ref>[http://analytics.blogspot.jp/2012/07/mobile-websites-vs-responsive-design.html Mobile Websites vs Responsive Design (Google blog)]</ref> [[Polyfill|Polyfills]] can be used to enhance HTML5 support on Internet Explorer, allowing one URL to serve both smartphones and desktop clients, if a separate URL or separate site is used for basic mobile devices.
One problem for RWD is that advertisements are not fluid. But search advertising and display advertising support specific device platform targeting and different advertisement size formats for desktop, smartphone, and basic mobile devices, and different landing page URLs can be used for different platforms.<ref>[http://support.google.com/adwords/certification/bin/static.py?hl=en&page=guide.cs&guide=23292 Google AdWords Targeting (Device Platform Targeting)]</ref> So this can be part of a solution.<ref name=RWD /> It seems wise to compare "one-site RWD", "same site, with separate mobile URL", and "separate mobile site" approaches.<ref>[http://analytics.blogspot.jp/2012/07/mobile-websites-vs-responsive-design.html Mobile Websites vs Responsive Design (Google blog)]</ref> [[Polyfill|Polyfills]] can be used to enhance HTML5 support on Internet Explorer, allowing one URL to serve both smartphones and desktop clients, if a separate URL or separate site is used for basic mobile devices.
==History==
==History==

Revision as of 10:43, 26 August 2012

Screenshots of The Boston Globe website
An example of a responsive website, The Boston Globe

Responsive Web Design (RWD) essentially indicates that a web site is crafted to use Cascading Style Sheets 3 media queries, an extension of the @media rule[1][2][3], with fluid proportion-based grids (which use percentages and EMs instead of pixels)[4], to adapt the layout to the viewing environment, and probably also use flexible images.[5][6][7][8] As a result, users across a broad range of devices and browsers will have access to a single source of content, laid out so as to be easy to read and navigate with a minimum of resizing, panning, and scrolling.

Elements of Responsive Web Design

The basis of a responsive website is a fluid, proportion-based grid; flexible images; and media queries.[9]:

  • Media queries, which are part of CSS3[10][11], allow the page to use different style rules based on characteristics of the device the site is being displayed on, most commonly the width of the browser.
  • The fluid grid concept calls for page elements to be measured in relative, rather than absolute, sizes.[12] Element sizes are expressed in percentages or EMs, instead of pixels.
  • Flexible images are a technique in which images are constrained from displaying at a size that exceeds their containing element.[13][14]

"Mobile First" and "Progressive Enhancement/Unobtrusive JavaScript" (strategies for when a new site design is being considered) are related concepts that predated RWD as explicitly stated strategies: browsers of basic mobile phones do not understand media queries or Javascript, and it is wise to create a basic web site then enhance it for smart phones and PCs — rather than attempt "graceful degradation" to try to degrade a complex, image-heavy site to work on the most basic mobile phones.[15][16][17][18] Browser detection and mobile device detection are two ways of deducing if Javascript and certain HTML and CSS features are supported, however Javascript libraries like Modernizr, jQuery, and jQuery Mobile that directly test for features/user agents are also popular.

Challenges

Luke Wroblewski has summarized some of the RWD and mobile design challenges, and created a catalog of multi-device layout patterns.[19][20][21][22] He suggests that, compared with a simple RWD approach, Device Experience or RESS approaches can provide a user experience that is better optimized for mobile devices.[21] Server-side implementation of dynamic stylesheet languages like Sass can be part of such an approach.

Ethan Marcotte, wearing jeans and a sports coat, speaking from a stage
Ethan Marcotte, who coined the term Responsive Web Design, spoke on that topic at the web design conference An Event Apart in Minneapolis, MN, on 27 July 2010.

One problem for RWD is that advertisements are not fluid. But search advertising and display advertising support specific device platform targeting and different advertisement size formats for desktop, smartphone, and basic mobile devices, and different landing page URLs can be used for different platforms.[23] So this can be part of a solution.[20] It seems wise to compare "one-site RWD", "same site, with separate mobile URL", and "separate mobile site" approaches.[24] Polyfills can be used to enhance HTML5 support on Internet Explorer, allowing one URL to serve both smartphones and desktop clients, if a separate URL or separate site is used for basic mobile devices.

History

Ethan Marcotte coined the term Responsive Web Design (RWD) in his article in A List Apart.[5][8] He describes the theory and practice of responsive web design in his brief 2011 book on the subject.[25] Responsive Design was listed as the #2 Top Web Design Trend for 2012 by .net magazine[26]


References

  1. ^ @media rule
  2. ^ Gillenwater, Zoe Mickley (Oct. 21, 2011). "Crafting quality media queries". {{cite web}}: Check date values in: |date= (help)
  3. ^ Gillenwater, Zoe Mickley (Dec. 15, 2010). "Examples of flexible layouts with CSS3 media queries". {{cite web}}: Check date values in: |date= (help)
  4. ^ Marcotte, Ethan (March 3, 2009). "Fluid Grids". A List Apart.
  5. ^ a b Marcotte, Ethan (May 25, 2010). "Responsive Web Design". A List Apart.
  6. ^ Marcotte, Ethan (June 7, 2011). "Fluid images". A List Apart.
  7. ^ "Adaptive Images".
  8. ^ a b Jacobs, Denise (August 23, 2011). "21 top tools for responsive web design". .net Magazine.
  9. ^ Marcotte, Ethan (May 25, 2010). "Responsive Web Design". A List Apart.
  10. ^ Gillenwater, Zoe Mickley (Oct. 21, 2011). "Crafting quality media queries". {{cite web}}: Check date values in: |date= (help)
  11. ^ Gillenwater, Zoe Mickley (Dec. 15, 2010). "Examples of flexible layouts with CSS3 media queries". {{cite web}}: Check date values in: |date= (help)
  12. ^ Marcotte, Ethan (March 3, 2009). "Fluid Grids". A List Apart.
  13. ^ Marcotte, Ethan (June 7, 2011). "Fluid images". A List Apart.
  14. ^ "Adaptive Images".
  15. ^ Wroblewski, Luke (November 3, 2009). "Mobile First".
  16. ^ Firtman, Maximiliano (July 30, 2010). Programming the Mobile Web. ISBN 978-0-596-80778-8.
  17. ^ "Graceful degradation versus progressive enhancement". February 3, 2009.
  18. ^ Designing with Progressive Enhancement. March 1, 2010. ISBN 978-0-321-65888-3.
  19. ^ Wroblewski, Luke (May 17, 2011). "Mobilism: jQuery Mobile".
  20. ^ a b Wroblewski, Luke (February 6, 2012). "Rolling Up Our Responsive Sleeves".
  21. ^ a b Wroblewski, Luke (February 29, 2012). "Responsive Design ... or RESS".
  22. ^ Wroblewski, Luke (March 14, 2012). "Multi-Device Layout Patterns".
  23. ^ Google AdWords Targeting (Device Platform Targeting)
  24. ^ Mobile Websites vs Responsive Design (Google blog)
  25. ^ Marcotte, Ethan (2011). Responsive Web Design. p. 143. ISBN 978-0-9844425-7-7.
  26. ^ "15 top web design and development trends for 2012". .net magazine. January 9, 2012.
Retrieved from "https://en.wikipedia.org/w/index.php?title=Responsive_web_design&oldid=509226088"