2. Alternate Title
How do you build a major website that works for
everyone and I do mean everyone - any browser, any
OS (ok, Linux), small screens, no keyboards, with
cookies blocked, JavaScript disabled, blind,
colorblind, thinks Flash is evil, thinks Silverlight is
worse, uses an old browser, stuck on a slow
connection (so has an iPhone on AT&T), or is using
some new device or browser that no one knew
about yesterday. Oh yeah, and do it while using all
the cool new HTML5 stuff I keep hearing about.
3. Alternate Title
How do you build a major website that works for
everyone and I do mean everyone - any browser, any
OS (ok, Linux), small screens, no keyboards, with
cookies blocked, JavaScript disabled, blind,
colorblind, thinks Flash is evil, thinks Silverlight is
worse, uses an old browser, stuck on a slow
connection (so has an iPhone on AT&T), or is using
some new device or browser that no one knew
about yesterday. Oh yeah, and do it while using all
the cool new HTML5 stuff I keep hearing about.
12. So why the change? We have three fundamental
goals in reducing the cycle time:
1. Shorten the release cycle and still get great
features in front of users when they are ready
2. Make the schedule more predictable and easier
to scope
3. Reduce the pressure on engineering to “make”
a release
Chrome Blog
29. 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
42. "Anyone who slaps a 'this page
is best viewed with Browser X'
label on a Web page appears to
be yearning for the bad old
days, before the Web, when you
had very little chance of reading
a document written on another
computer, another word
processor, or another network."
-Tim Berners-Lee
54. Benefits
1. Separation of layers
2. Phased development
3. Easier to validate and unit test
4. Increased reuse of styles and behavior
5. Forced to focus on core content
6. Handles errors gracefully
80. CSS3
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
The “old” Way
<span><span><span><span>/* button code */</span></span></span></span>
x 100 buttons on PKG200
81. Firefox
Best (JS)
Better (CSS) Better (JS)
Good (CSS) Good (JS)
Content (HTML)
92. X Grade
Unknown browsers
Not significant traffic
Assume will work
Depends on feature detection and
graceful degradation
Get more traffic? Move to A
Get complaints? Move to C
