22. ”
After poking at this problem for a
few weeks, my conclusion is:
every desktop UI should be
designed for touch now. When
any desktop machine could have
a touch interface, we have to
proceed as if they all do.
— Josh Clark
http://globalmoxie.com/blog/desktop-touch-design.shtml
24. ”
Make pages which are accessible,
regardless of the browser,
platform or screen that your
reader chooses or must use to
access your pages.
— John Allsop
http://www.alistapart.com/articles/dao/
48. Behaviours and enhancements with javascript
Presentation with CSS
Solid markup in HTML
Start with a baseline and layer on enhancement.
Photo Credit: http://www.flickr.com/photos/clagnut/315554083
49. ”
Progressive enhancement doesn’t
require that you provide the same
experience in different browsers.
[Apply] technologies in an
intelligent way, layer-uponlayer, to craft an amazing
experience.
— Aaron Gustafsson
http://easy-readers.net/books/adaptive-web-design/
50. Do web sites need to look exactly the same in every browser?
http://dowebsitesneedtolookexactlythesameineverybrowser.com/
Photo Credit: http://www.flickr.com/photos/timdorr/2096272747/
64. Markup needed by a javascript widget
should be generated by javascript
65.
66.
67. Apply no styles before it is time
var collapseWidgets = $("[data-widget=collapse]");
collapseWidgets.each(function() {
!
$(this).attr('aria-expanded', 'false');
$(this).addClass('is-collapsed');
!
.
.
.
68. NOW YOU SEE ME...
Photo Credit: http://www.flickr.com/photos/zopeuse/2766206504/
69. CSS RULES
DISPLAY EFFECT
ACCESSIBILITY EFFECT
visibility: hidden;
Elements hidden from view, but
not removed from normal flow
Content is ignored by screen
readers
display: none;
Element is removed from the
normal flow and hidden
Content is ignored by screen
readers
height: 0;
width: 0;
overflow: hidden;
Element is collapsed and
contents are hidden
Content is ignored by screen
readers
text-indent: -999em;
Contents are shifted off-screen
and hidden from view
Screen readers have access to the
content - limited to text and
inline elements
position: absolute;
left: -999em;
Content is removed from the
normal flow and shifted offscreen
Screen readers have access to the
content
http://easy-readers.net/books/adaptive-web-design/
70. When using e.g. the jQuery built-in
functions such as fadeOut(), slideUp() or
hide() the default result after hiding is
display: none;
79. Behaviours and enhancements with javascript
Presentation with CSS
Solid markup in HTML
Start with a baseline and layer on enhancement.
Photo Credit: http://www.flickr.com/photos/clagnut/315554083
81. ”
I’ve got bad news, though: Progressive
enhancement is dead, baby. It’s dead. At
least for the majority of web developers.
At some point recently, the browser
transformed from being an awesome
interactive document viewer into being the
world’s most advanced, widely-distributed
application runtime.
— Tom Dale
http://tomdale.net/2013/09/progressive-enhancement-is-dead/
85. And so, the PE flame
war went on...
“Progressive Enhancement is dead!”
“No it isn’t!”
“Yes it is!”
“No it isn’t!”
“I hate you!”
Photo Credit: http://www.flickr.com/photos/georgo10/3286708793/
87. ”
We live in a time where you can
assume JavaScript is part of the
web platform. Worrying about
browsers without JavaScript is
like worrying about whether
you’re backwards compatible
with HTML 3.2 or CSS2.
— Tom Dale
http://tomdale.net/2013/09/progressive-enhancement-is-dead/
99. ”
Progressive enhancement is not
about supporting people who
turn off Javascript, it is about
avoiding a single point of failure.
— Jeremy Keith
http://www.lukew.com/ff/entry.asp?1776
104. “Progressive enhancement isn't for building real apps”
“Ok for web sites to be developed with PE, but web apps don’t need that”
“Yeah, but I'm building a web app, not a website”
Image Credit: http://www.visionmobile.com/blog/2013/07/web-sites-vs-web-apps-what-the-experts-think/
105. ”
[The] distinction isn’t clear. Many sites
morph from one into the other. Is Wikipedia
a website up until the point that I start
editing an article? Are Twitter and Pinterest
websites while I’m browsing through them
but then flip into being web apps the
moment that I post something?
— Jeremy Keith
http://adactio.com/journal/6246/
106. ”
“Check out this web thang I’m
working on.”
“Have you seen this great web
thang?”
“What’s that?”
“It’s a web thang.”
— Jeremy Keith
http://adactio.com/journal/6246/
109. Progressive Enhancement is like an Escalator
Photo Credit: http://www.flickr.com/photos/jdn/3365996669/
110. ”
An escalator can never break – it can only
become stairs. You would never see an
“Escalator Temporarily Out Of Order”
sign, just “Escalator Temporarily Stairs.
Sorry for the convenience. We apologize for
the fact that you can still get up there.”
— Mitch Hedberg
http://en.wikiquote.org/wiki/Mitch_Hedberg