Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Real World Web Development

Real World Web Development

Flourish! Conference - April, 2011

Mark Meeker

April 02, 2011
Tweet

More Decks by Mark Meeker

Other Decks in Technology

Transcript

  1. How to build 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. Alternate Title:
  2. “ ” -Tim Berners-Lee The primary design principle 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.
  3. “ ” - Douglas Crockford Browsers are the most hostile

    software engineering environment possible.
  4. ‣ Current state of the browser space ‣ What’s about

    to change ‣ A bit of history ‣ How to approach the future ‣ Impact on mobile ‣ Resources Agenda
  5. 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
  6. ‣ New Tags ‣ Web Forms 2.0 (new input field

    types) ‣ Multimedia (audio and video) ‣ 2D and 3D Drawings (Canvas and WebGL) HTML
  7. ‣ New Selectors ‣ Client Side Storage ‣ Web Workers

    ‣ Drag and Drop API ‣ Geolocation JavaScript
  8. “ ” -Tim Berners-Lee 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.
  9. VS.

  10. http://www.useragentstring.com 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
  11. 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/ Version 10.0
  12. “ ” - @csssquirrel “This site works best in Safari

    4” is ok where “This site works best in IE4” wasn’t?!? Open standards or double standards?
  13. photo: http://www.flickr.com/photos/goldfishsnaps/2830876853/ quotes: http://forabeautifulweb.com/blog/about/fearful 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.
  14. ‣ Start with basic HTML ‣ Add CSS styles (but

    work ok without) ‣ Add JavaScript (but work ok without) Progressive Enhancement
  15. ‣ Check for a capability before using it ‣ Avoids

    browser detection Feature Detection
  16. “ ” - Joaquin Lippincott Devices really should be treated

    as a spectrum (based on capabilities) rather than put into a mobile vs. desktop bin.
  17. “ ” - John Allsopp We control which designers 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.
  18. ‣ Serve a single version for all devices / screens

    ‣ Modify layout, image sizes, functionality ‣ Uses “media queries” ‣ Similar concept to print stylesheets Responsive Design
  19. ‣ Firebug plugin for Firefox ‣ Chrome Developer Tools ‣

    Safari Web Inspector ‣ IE Developer Tools (F12) ‣ Opera Dragonfly Tools
  20. ‣ crossbrowsertesting.org ‣ IE Application Compatibility Images ‣ Virtual Machines

    ‣ Phone Emulators ‣ Keynote MITE Cross Browser Testing
  21. Designing with Progressive Enhancement New Riders Press Designing with Web

    Standards Jeffery Zeldman HTML5 for Web Designers Jeremy Keith (abookapart.com) CSS3 for Web Designers Dan Cederholm (abookapart.com)