Modern Web Design Lesson 01 (4 of 4)

Welcome back. So far we’ve learned
a bit about what front end development
entails and where it fits into the project. But before we jump
in the code, it’s worth taking a break
to discuss philosophy. The philosophical approaches
to front end web development can really be boiled down
into two major camps. The first of those is
graceful degradation. This concept came to web design
from the engineering world, and the general
idea was that you could provide a degraded
or lower quality service, or no service
to some people, as long as you don’t
cause any major errors. Following on that concept,
the web design community focused our time and our
energy on modern browsers and paid little to no
mind to older browsers, often leaving testing
on those browsers to the very end of the
project and fixing only the most egregious errors. If a browser proved
particularly problematic, we might outright block
it and present the user with a message telling
them they needed to use a different browser. Trust me when I say you
don’t want your customers feeling like this little kid. There are so many
instances in which a user has no control
over the browser they use. It could be because of
ignorance, or financial means, or because their company
has a browser lock down and they can only use that
corporate standard one. To deny users access to
content or the ability to accomplish key tasks, like
viewing their bank account, simply because their browser is
not the one that you want them to have is just plain rude. In some cases, it might even
be grounds for a lawsuit. Anyway, round about
2003, Steve Champion, of the Web Standards
Project, proposed a new way of approaching web design. And he dubbed it
“progressive enhancement.” The idea behind
progressive enhancement is that you’re creating a
website that doesn’t have any technological restrictions. In other words, you are
starting with the baseline and enhancing the experience,
based on the capabilities of the browser. It’s about focusing on the
content and the core tasks, and then expanding out and
adding more enhancements as you have the ability to do so. If you’re a comedy
fan, like I am, Mitch Hedberg has a great
quote, “I like an escalator because an escalator
can never break, it can only become stairs.” In many ways,
progressive enhancement is the same concept. Here we have, again, the square
IE8 version and the rounded corner IE9 version,
and this would be a progressive enhancement. The IE8 browser doesn’t
understand rounded corners, IE9 does, so IE9 gets the
rounded corners and IE8 doesn’t. And that’s all right. Now, I’m a big proponent
of progressive enhancement, and I like to use an analogy
of the continuum from a peanut to a peanut M&M. Here on the
left we have the peanut, which is a rich and tasty treat. And as long as you don’t
have a peanut allergy, it’s a perfectly
acceptable snack. If you wrap it in chocolate,
now all of a sudden you have what we refer
to– in the states at least– as a goober. And a goober is so much better
than just a plain peanut because it’s got
chocolate on it. Now, when you add the candy
shell to turn it into a peanut M&M, it becomes amazing. But the thing to keep in mind
here is that any of these are valid snack options. But in the steps along the
way, moving from the peanut to the peanut M&M, we’ve created
better and better experiences for the people who
are eating them. In the same way,
we should strive to create better and better
experiences for people, based on their browser
capabilities or device capabilities. Now, these two philosophies are
actually intrinsically related because progressive enhancement
is actually a very specialized form of graceful degradation. All progressively enhanced
websites will automatically degrade gracefully. The same cannot be said of all
sites that gracefully degrade. Not all of them are
progressively enhanced. Andrew Wight tweeted that,
“progressive enhancement is an escalator that
becomes stairs,” whereas, “graceful
degradation is building a lift and then having to add
stairs when it breaks.” And I think that’s a pretty
good upgrade of Mitch Hedberg’s analogy. Now since we’re talking
about relationships here, I’ll also bring up
that when you’re looking at two concepts of
responsive design and mobile first, where the two
of those intersect is actually progressive
enhancement as well, because responsive
design, approached from a mobile first standpoint,
is progressively enhancing the visual design
of a site, based on the amount of screen real
estate available to the user. Now, the last thing that
I want to share with you, with respect to this chapter,
is a little bit of a story. So here we have two
different projects that my company worked
on, the first of which we were specifically instructed
to use graceful degradation as our philosophical approach. In the second, we were asked
to use progressive enhancement as our philosophical approach. In the first, we were asked to
target just one single browser, and that was the Chrome
browser, because we were building a Chrome app. In the second project,
we were targeting four specific browsers. Now once these
projects were completed and had been out on the
internet for awhile, each of these clients came
back to us to upgrade the site, in order to add more
browser support. In the case of
the first project, they wanted to add
two new browsers. In the case of the
second project, they wanted to add
1400 new browsers. Now, when we went to do
this, what we discovered was that with the graceful
degradation approach, it actually took us 40%
of the original budget to add support for
two new browsers, because we had built it solely
expecting to have that single, one browser. In the case of
Project B, however, we had built with progressive
enhancement in mind, so we were automatically
able to reach more browsers with less headaches. So we had given them a
budget that was about a third of the original project, and
we ended up coming in at half of that. So for one sixth of the cost
of the original project, we were able to add
1400 more devices to their support matrix,
which is pretty awesome. Progressive
enhancement just works. Now, throughout
this course, I’ll be approaching things from
a progressive enhancement standpoint because
that really is the gold standard for how you
should be building on the web today. Well, this wraps up
lesson one of the course. And so, I’ve got an
assignment for you. In order to ease the process
of putting your files online, we’re going to use GitHub. And so what I want you to do is
actually create a GitHub page and get that all
set up, in order to be able to post your content
and share that in the forum. You can get an
account at, and if you go to, they have a complete walk
through on how to use GitHub Pages for hosting. The other assignment
I have for you is to figure out what
the subject is that you want to build your site about. And I want you to
look specifically on Wikipedia for that content. I want you to look
for enough content on a subject to fill
at least five pages and have a handful of images. You could do a project
on whatever you like. I particularly chose
to look up cuttlefish, and I found a treasure
trove of content there about cuttlefish, a
bunch of different sections that I could use as pages, and
a bunch of different images and even some videos. As I mentioned earlier
in this lesson, my site is up and available
at heart cuttlefish, and you
can view that on your desktop browser, or even on
your mobile device. Well, that wraps
it for lesson one. I hope to see you in lesson
two, where we’ll start digging into HTML markup. See you soon.

Add a Comment

Your email address will not be published. Required fields are marked *