30 Days to Your First Website Design

Lesson Notes * Fluid Thinking * Understanding Progressive Enhancement

Transcript Hi guys, welcome back to 30 Days to Your First Website Design, a Tuts+ Premium course. I’m Ian Yates and today we’re going to talk about browsers.

We’ll begin as always by taking a quick look at what we’re going to cover in this video:

• We’ll firstly take a look at some browser examples
• Then we’ll explore something called Graceful Degradation
• Then another something known as Progressive Enhancememnt
• After having discussed that we’ll look at our own CSS in relation to various browsers
• Lastly, as always, I’ll give you some further reading, plus an assignment.

As a web designer, you’re aiming to have your work experienced by the global masses, and more often than not, via a web browser. There are several browsers around, and as it’s nothing to do with you which of those browsers are used to view your sites, it’s advisable to bear each one in mind when building your projects.

The most significant browsers are those you see here: Google Chrome, Mozilla Firefox, Opera, Internet Explorer, and Apple’s Safari. And if we take a look at the figures provided by W3Schools, we can get a good idea of the proportion of internet activity which finds its way through each one.

Implementing your own analytics will give you a more accurate picture of the browsers used to view your own sites, but we can see here that most web pages are viewed with Firefox, then Chrome, then Internet Explorer. Safari and Opera, as you can see, hold a relatively small portion of the market.

We can explore these figures further and examine the proportion each version of each browser holds. Let’s look at Internet Explorer, for example. We can see that currently. most Internet Explorer users have version 8 running, a smaller, but growing number use version 9, and some folk still have versions 7 and even 6 running.

So why is this relevant? Well, unfortunately, browsers behave differently where your markup and styling is concerned. Some, older versions may not understand the CSS rules you’re using. Then again, they may well understand them, but deal with them differently to other browsers. This means that your design can look very different from one browser to the next.

The solutions. There are a few approaches to dealing with this harsh reality:

Firstly, you could ignore older browsers, and make sure that your design works in more modern versions. Many people these days, ignore Internet Explorer 6, as it’s very outdated, and can cause web designers a lot of (costly) extra work. The risk, of course, is that by shunning some browser users, you’re alienating part of your audience.

Secondly, you could employ what’s known as graceful degradation. Build your designs so that they’re optimized for modern browsers, making use of the latest web techniques, but ensuring that older browsers can still make perfectly good use of the site. Perhaps a user has images in their browser disabled – adding a description of your image in the alt attribute will ensure that they at least know what should be there.

Thirdly, there’s the progressive enhancement approach, which is similar in some ways to graceful degradation, which we just spoke about. In this case, a site is designed according to the capabilities of the lowest common denominator – perhaps we would aim for a site to perform perfectly from IE7 onwards. We would then progressively enhance our design for more modern browsers, according to what they are capable of. We may, for example, apply CSS3 gradients to backgrounds for Chrome, which in IE7 appear as flat colors. Users who have more modern browsers enjoy a richer experience.

Lastly, we can work our socks off to make sure that our site appears and behaves as near to identically as possible, in ALL browsers. Which option you favor is down to your own discretion.

Next Steps OK, it’s time for some further reading: I have two articles worth reading for you – both of which I quoted in this video. This first is a classic from 2002 by Peter Paul Koch. He describes the concepts behind graceful degradation. Secondly, for a great summary of the ideas behind progressive enhancement, try this article on A List Apart by Aaron Gustafson.

And before we jump into the next video, I’d like you to decide for yourself which approach makes most sense to your design. Remember to consider your audience – it’s the users who you’re catering for after all. I’d also like you to take a look at our CSS and update what you’ve done if you’re following along.

Next time on 30 Days to Your First Web Design we’re going to move on to the next level in the standards model: behavior. We’re going to get our slideshow up and running.

I’m Ian Yates and from all of us at Tuts+ thanks for watching!