Download to read offline
Uploaded byMark Meeker
Flourish2011
The document discusses the importance of universal design in web development, highlighting the need for websites and applications to be accessible to all users, regardless of device or disabilities. It provides insights into the evolution of browsers, upcoming changes in web technologies, and emphasizes principles like progressive enhancement and responsive design. Resources and tools for cross-browser testing and HTML5 features are also mentioned to aid developers in creating more inclusive web experiences.
More Related Content
Flourish2011
- 1. REAL WORLD WEB DEVELOPMENT Image:http://earthobservatory.nasa.gov/IOTD/view.php?id=896 Mark Meeker / Flourish! 2011 / Chicago, IL / April 2, 2011
- 2. Alternate Title: How tobuild web sites and applications that work for everyone and I do mean everyone - any browser, any OS (which really means anything non-Windows), small screens, no keyboard, with cookies blocked, disabled JavaScript, blind, colorblind, thinks Flash is evil, thinks Silverlight is even worse, uses an old browser, stuck on a really slow connection (or is an AT&T customer), or only uses their thumb. And do it in a way that you can start using all the new and cool stuff available with the Open Web Platform and HTML5.
- 5. “ The primary designprinciple underlying the Web’s usefulness and growth is universality. The Web should be usable by people with disabilities. It must work with any form of information, be it a document or a point of data, and information of any quality—from a silly tweet to a scholarly paper. And it should be accessible from any kind of hardware that can connect to the Internet: ” stationary or mobile, small screen or large. -Tim Berners-Lee
- 6. “ Browsers are the most hostile software engineering environment possible. ” - Douglas Crockford
- 7. 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
- 8.
- 11.
- 12. 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 Source: http://meyerweb.com/eric/browsers/timeline-structured.html
- 14.
- 15. Speed? Size? Capabilities?
- 16. What’s About toChange
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26. HTML ‣ New Tags ‣ Web Forms 2.0 (new input field types) ‣ Multimedia (audio and video) ‣ 2D and 3D Drawings (Canvas and WebGL)
- 28.
- 29. CSS ‣ Selectors ‣ Typography ‣ Visuals (rounded corners, gradients) ‣ Transitions and animations
- 30. JavaScript ‣ New Selectors ‣ Client Side Storage ‣ Web Workers ‣ Drag and Drop API ‣ Geolocation
- 31. A Bit ofHistory
- 35. “ In '93 to'94, every browser had its own flavor of HTML. So it was very difficult to know what you could put in a Web page and reliably have most of your ” readership see it. -Tim Berners-Lee
- 36.
- 37. Source: A longdefunct page on Geocities
- 38. Britannica.com Browser SupportPage, Circa 2002
- 39. Hulu.com - 2011April Fools
- 40. Mozilla/3.0 (Win95; I) Netscape3.0 User Agent
- 41. Mozilla/3.0 (compatible; MSIE3.0; Windows NT 5.0) IE 3.0 User Agent String
- 42. Approaches for theFuture
- 43.
- 44. 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.17 http://www.useragentstring.com
- 45. Version 10.0 Opera/9.80 (Macintosh; Intel Mac OS X; U; en) Presto/2.2.15 Version/10.00 Source: http://dev.opera.com/articles/view/opera-ua-string-changes/
- 46. http://turbotax.com in Chromeversion 11.0
- 47. http://turbotax.com in Firefoxversion 4.0
- 48.
- 49. “ “This site worksbest in Safari 4” is ok where “This site works best in IE4” wasn’t?!? Open standards or double standards? ” - @csssquirrel
- 50.
- 51.
- 52.
- 53. I hope CSS3will 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
- 54.
- 55. Better V Approaches forthe Future
- 56. Do websites need tolook exactly the same in every browser?
- 57.
- 58.
- 59.
- 60.
- 62. Progressive Enhancement ‣ Start with basic HTML ‣ Add CSS styles (but work ok without) ‣ Add JavaScript (but work ok without)
- 63.
- 64.
- 65.
- 66.
- 67. Graded Browser Support ‣ A-Grade: Known Knowns ‣ C-Grade: Known Unknowns ‣ X-Grade: Unknown Unknowns
- 68.
- 69.
- 70. Feature Detection ‣ Check for a capability before using it ‣ Avoids browser detection
- 71.
- 72.
- 73.
- 75. “ Devices really shouldbe treated as a spectrum (based on capabilities) rather than put into a mobile vs. desktop bin. ” - Joaquin Lippincott
- 76. “ We control whichdesigners know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. ” - John Allsopp
- 77.
- 78.
- 79.
- 80. Responsive Design ‣ Serve a single version for all devices / screens ‣ Modify layout, image sizes, functionality ‣ Uses “media queries” ‣ Similar concept to print stylesheets
- 81. 320 x 480 1024 x 768
- 82. http://elections.chicagotribune.com/ 1024px Wide
- 83. http://elections.chicagotribune.com/ 768px Wide
- 84. http://elections.chicagotribune.com/ 320px Wide
- 85.
- 86.
- 87. Tools ‣ Firebug plugin for Firefox ‣ Chrome Developer Tools ‣ Safari Web Inspector ‣ IE Developer Tools (F12) ‣ Opera Dragonfly
- 88. Tools ‣ Fiddler (Windows) ‣ Charles (Mac) ‣ HttpFox (firefox add-on)
- 89. Cross Browser Testing ‣ crossbrowsertesting.org ‣ IE Application Compatibility Images ‣ Virtual Machines ‣ Phone Emulators ‣ Keynote MITE
- 90.
- 91.
- 92. Designing with WebStandards Jeffery Zeldman Designing with Progressive Enhancement New Riders Press HTML5 for Web Designers Jeremy Keith (abookapart.com) CSS3 for Web Designers Dan Cederholm (abookapart.com)
- 93.
- 95. Licensed under aCreative Commons attribution license