Your SlideShare is downloading. ×
Flourish2011
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Flourish2011

1,779
views

Published on

The browser has been called the "most hostile software development …

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
1,779
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. REAL WORLD WEBDEVELOPMENTImage: http://earthobservatory.nasa.gov/IOTD/view.php?id=896 Mark Meeker / Flourish! 2011 / Chicago, IL / April 2, 2011
  • 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. “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. “ Browsers are the most hostile software engineering environment possible. ” - Douglas Crockford
  • 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. Current State
  • 7. http://gs.statcounter.com/#browser_version-ww-monthly-200807-201103
  • 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. http://www.geek.com/articles/mobile/android-ecosystem-seen-through-the-lens-of-tweetdeck-20101019/
  • 10. Speed? Size? Capabilities?
  • 11. What’s About to Change
  • 12. http://blog.mozilla.com/blog/2011/03/25/the-first-48-hours-of-mozilla-firefox-4/
  • 13. http://www.nytimes.com/2011/03/27/business/27unboxed.html?src=busln
  • 14. http://slides.html5rocks.com/#timeline-slide
  • 15. http://html5rocks.com
  • 16. http://html5r0cks.com
  • 17. https://developer.mozilla.org/en/HTML/HTML5
  • 18. http://www.opera.com/docs/specs/presto25/html5/
  • 19. http://www.apple.com/html5/
  • 20. http://ie.microsoft.com/testdrive/
  • 21. HTML ‣ New Tags ‣ Web Forms 2.0 (new input field types) ‣ Multimedia (audio and video) ‣ 2D and 3D Drawings (Canvas and WebGL)
  • 22. http://www.diveintohtml5.org/forms.html
  • 23. CSS ‣ Selectors ‣ Typography ‣ Visuals (rounded corners, gradients) ‣ Transitions and animations
  • 24. JavaScript ‣ New Selectors ‣ Client Side Storage ‣ Web Workers ‣ Drag and Drop API ‣ Geolocation
  • 25. A Bit of History
  • 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. VS.
  • 28. Source: A long defunct page on Geocities
  • 29. Britannica.com Browser Support Page, Circa 2002
  • 30. Hulu.com - 2011 April Fools
  • 31. Mozilla/3.0 (Win95; I)Netscape 3.0 User Agent
  • 32. Mozilla/3.0 (compatible; MSIE 3.0; Windows NT 5.0)IE 3.0 User Agent String
  • 33. Approaches for the Future
  • 34. DangerousVApproaches for the Future
  • 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. 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. http://turbotax.com in Chrome version 11.0
  • 38. http://turbotax.com in Firefox version 4.0
  • 39. http://www.apple.com/html5/
  • 40. ““This site works best in Safari 4”is ok where “This site works bestin IE4” wasn’t?!? Open standardsor double standards? ” - @csssquirrel
  • 41. http://html5readiness.com/
  • 42. http://html5readiness.com/
  • 43. http://html5readiness.com/
  • 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. http://www.ie6countdown.com/
  • 46. BetterV Approaches for the Future
  • 47. Do websites needto look exactly thesame in every browser?
  • 48. http://dowebsitesneedtolookexactlythesameineverybrowser.com
  • 49. http://www.quirksmode.org
  • 50. http://www.findmebyip.com/litmus
  • 51. http://meyerweb.com/eric/tools/css/reset/
  • 52. Progressive Enhancement ‣ Start with basic HTML ‣ Add CSS styles (but work ok without) ‣ Add JavaScript (but work ok without)
  • 53. http://tv.yahoo.com
  • 54. http://tv.yahoo.com
  • 55. http://www.orbitz.com
  • 56. http://gestureworks.com/
  • 57. Graded Browser Support ‣ A-Grade: Known Knowns ‣ C-Grade: Known Unknowns ‣ X-Grade: Unknown Unknowns
  • 58. http://developer.yahoo.com/yui/articles/gbs/
  • 59. http://jquerymobile.com/gbs/
  • 60. Feature Detection ‣ Check for a capability before using it ‣ Avoids browser detection
  • 61. http://www.modernizr.com/
  • 62. http://www.nissanusa.com/leaf-electric-car/index#/leaf-electric-car/index
  • 63. Mobile
  • 64. “Devices really should be treatedas a spectrum (based oncapabilities) rather than put intoa mobile vs. desktop bin. ” - Joaquin Lippincott
  • 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. http:///news.ycombinator.com
  • 67. http:///news.ycombinator.com
  • 68. http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes
  • 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. 320 x 480 1024 x 768
  • 71. http://elections.chicagotribune.com/ 1024px Wide
  • 72. http://elections.chicagotribune.com/ 768px Wide
  • 73. http://elections.chicagotribune.com/ 320px Wide
  • 74. http://mediaqueri.es/
  • 75. Resources
  • 76. Tools ‣ Firebug plugin for Firefox ‣ Chrome Developer Tools ‣ Safari Web Inspector ‣ IE Developer Tools (F12) ‣ Opera Dragonfly
  • 77. Tools ‣ Fiddler (Windows) ‣ Charles (Mac) ‣ HttpFox (firefox add-on)
  • 78. Cross Browser Testing ‣ crossbrowsertesting.org ‣ IE Application Compatibility Images ‣ Virtual Machines ‣ Phone Emulators ‣ Keynote MITE
  • 79. http://wurfl.sourceforge.net/
  • 80. http://www.diveintohtml5.org/
  • 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. http://code.google.com/chrome/chromeframe/
  • 83. Licensed under a Creative Commons attribution license