Modern Website Design Lesson 4

Modern Website Design the final Insides

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 modern website 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”.

2 Modern Website Design Projects

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 modern website 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!

The progressive Modern Website Design approach

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 Hostgator. And so what I want you to do is actually create a hostgator account and get that all set up, in order to be able to post your content .

You can get an account at hostgator,  they have a complete walk through on how to use it 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.

That is it for this inside look on modern website design, I hope you liked it and see what work is involved. Feel free to take a look at our portfolio and maybe just ask for a special quote. Have a nice day 😉