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.
2024: Domino Containers - The Next Step. News from the Domino Container commu...
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 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.
3.
4.
5. “
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.
-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
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
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/
53. 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
75. “
Devices really should be treated
as a spectrum (based on
capabilities) rather than put into
a mobile vs. desktop bin.
”
- Joaquin Lippincott
76. “
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.
”
- John Allsopp
80. Responsive Design
‣ Serve a single version for all devices / screens
‣ Modify layout, image sizes, functionality
‣ Uses “media queries”
‣ Similar concept to print stylesheets
92. Designing with Web Standards
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)