REAL WORLD WEBDEVELOPMENTImage: http://earthobservatory.nasa.gov/IOTD/view.php?id=896   Mark Meeker / Flourish! 2011 / Chi...
Alternate Title:How to build web sites and applications that work foreveryone and I do mean everyone - any browser, anyOS ...
“The primary design principle underlyingthe Web’s usefulness and growth isuniversality. The Web should be usableby people ...
“   Browsers are the most hostile    software engineering environment    possible.                                 ”      ...
Agenda ‣   Current state of the browser space ‣   What’s about to change ‣   A bit of history ‣   How to approach the futu...
Current State
http://gs.statcounter.com/#browser_version-ww-monthly-200807-201103
1996    1997   1998    1999   2000    2001   2002   2003   2004   2005   2006   2007   2008   2009   2010   2011Source: ht...
http://www.geek.com/articles/mobile/android-ecosystem-seen-through-the-lens-of-tweetdeck-20101019/
Speed?         Size?             Capabilities?
What’s About to Change
http://blog.mozilla.com/blog/2011/03/25/the-first-48-hours-of-mozilla-firefox-4/
http://www.nytimes.com/2011/03/27/business/27unboxed.html?src=busln
http://slides.html5rocks.com/#timeline-slide
http://html5rocks.com
http://html5r0cks.com
https://developer.mozilla.org/en/HTML/HTML5
http://www.opera.com/docs/specs/presto25/html5/
http://www.apple.com/html5/
http://ie.microsoft.com/testdrive/
HTML ‣   New Tags ‣   Web Forms 2.0 (new input field types) ‣   Multimedia (audio and video) ‣   2D and 3D Drawings (Canvas...
http://www.diveintohtml5.org/forms.html
CSS ‣   Selectors ‣   Typography ‣   Visuals (rounded corners, gradients) ‣   Transitions and animations
JavaScript ‣   New Selectors ‣   Client Side Storage ‣   Web Workers ‣   Drag and Drop API ‣   Geolocation
A Bit of History
“In 93 to 94, every browser hadits own flavor of HTML. So it wasvery difficult to know what youcould put in a Web page and...
VS.
Source: A long defunct page on Geocities
Britannica.com Browser Support Page, Circa 2002
Hulu.com - 2011 April Fools
Mozilla/3.0 (Win95; I)Netscape 3.0 User Agent
Mozilla/3.0 (compatible; MSIE 3.0; Windows NT 5.0)IE 3.0 User Agent String
Approaches for the Future
DangerousVApproaches for the Future
Mozilla/5.0 (Windows; U; MSIE 9.0; Windows NT 9.0; en-US)           Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1.8pre)...
Version 10.0    Opera/9.80 (Macintosh; Intel Mac OS X; U; en)    Presto/2.2.15 Version/10.00Source: http://dev.opera.com/a...
http://turbotax.com in Chrome version 11.0
http://turbotax.com in Firefox version 4.0
http://www.apple.com/html5/
““This site works best in Safari 4”is ok where “This site works bestin IE4” wasn’t?!? Open standardsor double standards?  ...
http://html5readiness.com/
http://html5readiness.com/
http://html5readiness.com/
I hope CSS3 will be a standard in the near future, right now you cant really use          anything of it ’cause not every ...
http://www.ie6countdown.com/
BetterV Approaches for the Future
Do websites needto look exactly thesame in every browser?
http://dowebsitesneedtolookexactlythesameineverybrowser.com
http://www.quirksmode.org
http://www.findmebyip.com/litmus
http://meyerweb.com/eric/tools/css/reset/
Progressive Enhancement ‣   Start with basic HTML ‣   Add CSS styles (but work ok without) ‣   Add JavaScript (but work ok...
http://tv.yahoo.com
http://tv.yahoo.com
http://www.orbitz.com
http://gestureworks.com/
Graded Browser Support ‣   A-Grade: Known Knowns ‣   C-Grade: Known Unknowns ‣   X-Grade: Unknown Unknowns
http://developer.yahoo.com/yui/articles/gbs/
http://jquerymobile.com/gbs/
Feature Detection ‣   Check for a capability before using it ‣   Avoids browser detection
http://www.modernizr.com/
http://www.nissanusa.com/leaf-electric-car/index#/leaf-electric-car/index
Mobile
“Devices really should be treatedas a spectrum (based oncapabilities) rather than put intoa mobile vs. desktop bin.       ...
“We control which designers knowin the print medium, and oftendesire in the web medium, issimply a function of the limitat...
http:///news.ycombinator.com
http:///news.ycombinator.com
http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes
Responsive Design ‣   Serve a single version for all devices / screens ‣   Modify layout, image sizes, functionality ‣   U...
320 x 480            1024 x 768
http://elections.chicagotribune.com/   1024px Wide
http://elections.chicagotribune.com/   768px Wide
http://elections.chicagotribune.com/   320px Wide
http://mediaqueri.es/
Resources
Tools ‣   Firebug plugin for Firefox ‣   Chrome Developer Tools ‣   Safari Web Inspector ‣   IE Developer Tools (F12) ‣   ...
Tools ‣   Fiddler (Windows) ‣   Charles (Mac) ‣   HttpFox (firefox add-on)
Cross Browser Testing ‣   crossbrowsertesting.org ‣   IE Application Compatibility Images ‣   Virtual Machines ‣   Phone E...
http://wurfl.sourceforge.net/
http://www.diveintohtml5.org/
Designing with Web StandardsJeffery ZeldmanDesigning with Progressive EnhancementNew Riders PressHTML5 for Web DesignersJe...
http://code.google.com/chrome/chromeframe/
Licensed under a Creative Commons attribution license
Flourish2011
Flourish2011
Flourish2011
Flourish2011
Flourish2011
Flourish2011
Flourish2011
Flourish2011
Flourish2011
Flourish2011
Flourish2011
Flourish2011
Upcoming SlideShare
Loading in …5
×

Flourish2011

2,521 views

Published on

The browser has been called the "most hostile software development
environment imaginable." While at the same time, the ubiquity of the
browser is exactly what makes a web application so powerful. A good
web application is designed to run everywhere and for everyone. Today
that means supporting more browsers on more devices than any time in
history. This session will explore the challenges (and fun) of
building sites in a multi-platform and multi-device world while still enabling features of the Open Web like HTML5 and CSS3.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,521
On SlideShare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Flourish2011

  1. 1. REAL WORLD WEBDEVELOPMENTImage: http://earthobservatory.nasa.gov/IOTD/view.php?id=896 Mark Meeker / Flourish! 2011 / Chicago, IL / April 2, 2011
  2. 2. Alternate Title:How to build web sites and applications that work foreveryone and I do mean everyone - any browser, anyOS (which really means anything non-Windows), smallscreens, no keyboard, with cookies blocked, disabledJavaScript, blind, colorblind, thinks Flash is evil, thinksSilverlight is even worse, uses an old browser, stuck ona really slow connection (or is an AT&T customer), oronly uses their thumb. And do it in a way that you canstart using all the new and cool stuff available with theOpen Web Platform and HTML5.
  3. 3. “The primary design principle underlyingthe Web’s usefulness and growth isuniversality. The Web should be usableby people with disabilities. It must workwith any form of information, be it adocument or a point of data, andinformation of any quality—from a sillytweet to a scholarly paper. And it shouldbe accessible from any kind of hardwarethat can connect to the Internet: ”stationary or mobile, small screen orlarge. -Tim Berners-Lee
  4. 4. “ Browsers are the most hostile software engineering environment possible. ” - Douglas Crockford
  5. 5. Agenda ‣ Current state of the browser space ‣ What’s about to change ‣ A bit of history ‣ How to approach the future ‣ Impact on mobile ‣ Resources
  6. 6. Current State
  7. 7. http://gs.statcounter.com/#browser_version-ww-monthly-200807-201103
  8. 8. 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011Source: http://meyerweb.com/eric/browsers/timeline-structured.html
  9. 9. http://www.geek.com/articles/mobile/android-ecosystem-seen-through-the-lens-of-tweetdeck-20101019/
  10. 10. Speed? Size? Capabilities?
  11. 11. What’s About to Change
  12. 12. http://blog.mozilla.com/blog/2011/03/25/the-first-48-hours-of-mozilla-firefox-4/
  13. 13. http://www.nytimes.com/2011/03/27/business/27unboxed.html?src=busln
  14. 14. http://slides.html5rocks.com/#timeline-slide
  15. 15. http://html5rocks.com
  16. 16. http://html5r0cks.com
  17. 17. https://developer.mozilla.org/en/HTML/HTML5
  18. 18. http://www.opera.com/docs/specs/presto25/html5/
  19. 19. http://www.apple.com/html5/
  20. 20. http://ie.microsoft.com/testdrive/
  21. 21. HTML ‣ New Tags ‣ Web Forms 2.0 (new input field types) ‣ Multimedia (audio and video) ‣ 2D and 3D Drawings (Canvas and WebGL)
  22. 22. http://www.diveintohtml5.org/forms.html
  23. 23. CSS ‣ Selectors ‣ Typography ‣ Visuals (rounded corners, gradients) ‣ Transitions and animations
  24. 24. JavaScript ‣ New Selectors ‣ Client Side Storage ‣ Web Workers ‣ Drag and Drop API ‣ Geolocation
  25. 25. A Bit of History
  26. 26. “In 93 to 94, every browser hadits own flavor of HTML. So it wasvery difficult to know what youcould put in a Web page andreliably have most of your ”readership see it. -Tim Berners-Lee
  27. 27. VS.
  28. 28. Source: A long defunct page on Geocities
  29. 29. Britannica.com Browser Support Page, Circa 2002
  30. 30. Hulu.com - 2011 April Fools
  31. 31. Mozilla/3.0 (Win95; I)Netscape 3.0 User Agent
  32. 32. Mozilla/3.0 (compatible; MSIE 3.0; Windows NT 5.0)IE 3.0 User Agent String
  33. 33. Approaches for the Future
  34. 34. DangerousVApproaches for the Future
  35. 35. Mozilla/5.0 (Windows; U; MSIE 9.0; Windows NT 9.0; en-US) Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1.8pre) Gecko/20071015 Firefox/2.0.0.7 Navigator/9.0 Mozilla/5.0 (Windows; U; Windows NT 6.1; ru; rv:1.9.2.3) Gecko/20100401 Firefox/4.0 (.NET CLR 3.5.30729) Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US) AppleWebKit/533.20.25 (KHTML, like Gecko) Version/5.0.4 Safari/533.20.27 Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US) AppleWebKit/534.17 (KHTML, like Gecko) Chrome/11.0.654.0 Safari/534.17http://www.useragentstring.com
  36. 36. Version 10.0 Opera/9.80 (Macintosh; Intel Mac OS X; U; en) Presto/2.2.15 Version/10.00Source: http://dev.opera.com/articles/view/opera-ua-string-changes/
  37. 37. http://turbotax.com in Chrome version 11.0
  38. 38. http://turbotax.com in Firefox version 4.0
  39. 39. http://www.apple.com/html5/
  40. 40. ““This site works best in Safari 4”is ok where “This site works bestin IE4” wasn’t?!? Open standardsor double standards? ” - @csssquirrel
  41. 41. http://html5readiness.com/
  42. 42. http://html5readiness.com/
  43. 43. http://html5readiness.com/
  44. 44. I hope CSS3 will be a standard in the near future, right now you cant really use anything of it ’cause not every browser supports it. I think till every browser is somewhat close to being the same (render wise), we’ll be stuck working to get the lowest common css version working. I can’t wait to start using the new CSS3 standard, but I don’t think we can start just yet. Especially when IE isn’t supported in some of these. Considering that half the population still uses IE6, I won’t be implementing CSS3 anytime soon.photo: http://www.flickr.com/photos/goldfishsnaps/2830876853/ quotes: http://forabeautifulweb.com/blog/about/fearful
  45. 45. http://www.ie6countdown.com/
  46. 46. BetterV Approaches for the Future
  47. 47. Do websites needto look exactly thesame in every browser?
  48. 48. http://dowebsitesneedtolookexactlythesameineverybrowser.com
  49. 49. http://www.quirksmode.org
  50. 50. http://www.findmebyip.com/litmus
  51. 51. http://meyerweb.com/eric/tools/css/reset/
  52. 52. Progressive Enhancement ‣ Start with basic HTML ‣ Add CSS styles (but work ok without) ‣ Add JavaScript (but work ok without)
  53. 53. http://tv.yahoo.com
  54. 54. http://tv.yahoo.com
  55. 55. http://www.orbitz.com
  56. 56. http://gestureworks.com/
  57. 57. Graded Browser Support ‣ A-Grade: Known Knowns ‣ C-Grade: Known Unknowns ‣ X-Grade: Unknown Unknowns
  58. 58. http://developer.yahoo.com/yui/articles/gbs/
  59. 59. http://jquerymobile.com/gbs/
  60. 60. Feature Detection ‣ Check for a capability before using it ‣ Avoids browser detection
  61. 61. http://www.modernizr.com/
  62. 62. http://www.nissanusa.com/leaf-electric-car/index#/leaf-electric-car/index
  63. 63. Mobile
  64. 64. “Devices really should be treatedas a spectrum (based oncapabilities) rather than put intoa mobile vs. desktop bin. ” - Joaquin Lippincott
  65. 65. “We control which designers knowin the print medium, and oftendesire in the web medium, issimply a function of the limitationof the printed page. We shouldembrace the fact that the webdoesn’t have the sameconstraints, and design for thisflexibility. ” - John Allsopp
  66. 66. http:///news.ycombinator.com
  67. 67. http:///news.ycombinator.com
  68. 68. http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes
  69. 69. Responsive Design ‣ Serve a single version for all devices / screens ‣ Modify layout, image sizes, functionality ‣ Uses “media queries” ‣ Similar concept to print stylesheets
  70. 70. 320 x 480 1024 x 768
  71. 71. http://elections.chicagotribune.com/ 1024px Wide
  72. 72. http://elections.chicagotribune.com/ 768px Wide
  73. 73. http://elections.chicagotribune.com/ 320px Wide
  74. 74. http://mediaqueri.es/
  75. 75. Resources
  76. 76. Tools ‣ Firebug plugin for Firefox ‣ Chrome Developer Tools ‣ Safari Web Inspector ‣ IE Developer Tools (F12) ‣ Opera Dragonfly
  77. 77. Tools ‣ Fiddler (Windows) ‣ Charles (Mac) ‣ HttpFox (firefox add-on)
  78. 78. Cross Browser Testing ‣ crossbrowsertesting.org ‣ IE Application Compatibility Images ‣ Virtual Machines ‣ Phone Emulators ‣ Keynote MITE
  79. 79. http://wurfl.sourceforge.net/
  80. 80. http://www.diveintohtml5.org/
  81. 81. Designing with Web StandardsJeffery ZeldmanDesigning with Progressive EnhancementNew Riders PressHTML5 for Web DesignersJeremy Keith (abookapart.com)CSS3 for Web DesignersDan Cederholm (abookapart.com)
  82. 82. http://code.google.com/chrome/chromeframe/
  83. 83. Licensed under a Creative Commons attribution license

×