14/03 2010

Progressive Enhancement is a good thing

The Web of today is changing. Whether we, as Web professionals, like it or not. There are currently about 10 browsers (taking into account versions, which often differ from each other) on the market within which Web sites need to function.

As a front end designer who is conscious of the way businesses have to run, I have been concerned for some time about the current design process within the Industry. It simply does not cater for all these browsers in a way that supports the workflow of a business.

I absolutely love the build process and try to build every site I am involved with from the start, in a way that is as near perfect as possible.

Where we are TODAY

With new browsers comes new technologies, rendering engines and tools that, with a little help from are made to make everyones lives a little easier. Most people involved in the front end design of Web sites (within that I include UX Designers and strategists, Designers AND sales and Marketing guys) want to be able to use these technologies as soon as possible and who can blame them, as the people who actually put Designs into browsers, Front End Designers are champing at the bit to use them.

I personally believe that a bit of education and changing the way clients and users in general view the Web, could be the way to make the Web a little more accessible for all the browsers and devices available today.

Move with the times

In a world that is fast becoming rammed full of devices that can now access the internet, we need to be able to make the content of Web sites available, potentally, on all of them in the future. Progressive Enhancement is the way in which we can do this. We want to be able to use ideally the same Website and reformat the information to appear on other devices in the most user friendly, accessible way possible.

In my experience, a selling point of a lot of Web sites is the fact that they will look the same in all browsers. This is both misguided and will often be the cause of the Front End build running over time, adding extra cost to the project. If the client were to be educated early on, maybe even offering a key individual a browser upgrade to firefox so they can see how much improved their site will be, it would be a step in the right direction. If every agency did something like this and word spread, it could only be a good thing.

With all the different kinds of things browsers are capable of these days with all their varied features and different types of support for various standards, I believe we should be viewing them in the same way we view say, the iPhone and Nexus One. They are similar devices but what drives them is completely different. The same is true of Internet Explorer when comparing it to Firefox and we need to move with them, instead of trying to force them to do things which slow them down or make them harder to find on google.

My suggestions

Taking everything I've already said above:

  • What are the actual benefits of being more friendly to Web standards?
  • Why aren't we building with future browsers in mind, rather than staying in the past?

Well in an attempt to answer these questions, I have built two virtually identical Pages which use very different techniques to demonstrate the benefits:

The above site would keep everyone happy. It looks the same no matter where you are or what you are using. My question is, would you rather have this Front End with its enourmous amount of markup and css, images that are unnecessary and which isn't easily scalable?

This looks exactly the same if you are in any of the forward thinking browsers like Firefox and safari but will have the minor difference in that the corners are squared off in Internet Explorer. The benefits of this to the accessibility of the site outway the slight differences in design across browsers. The file size across an entire site and the resulting reduction on strain on the server and loading times is reduced, markup is cut down by virtually a half, making updates easier and also makes it more transferrable across other platforms and devices.

The end decision is of course up to the client, however, they need to be made aware of what is possible and why the differences would far from being a bad thing, for future proofing and making their site accessible to many other formats, it is the way of the future.

I used the example of rounded corners as an easy to undertsand example. It is a common design feature these days, so it seemed appropriate. This idea could be applied to many new techniques coming into existance with very similar streamlined results.

2 Responses to Progressive Enhancement is a good thing

  1. Great examples; and a well thought post. have to say I agree with you on most points.

    Personally, I will try my best wherever possible to meet the demands of the designer. If the designer comes up with an idea / concept / design, then I will do whatever it takes to make sure it works as close as possible in all browsers.

    If however, I see the opportunity to use some CSS3 or jQuery, I would consult with the designer and client and say; “how about we add this for modern browsers?”. In my eyes, we’ve met the design we promised the client and that the designer envisaged, but have also gone the extra mile and added some “posh” to liven things up a little.

    Our clients are mainly IE users, and I agree that a little bit of education is needed but I unfortunately don’t have the power to persuade clients to upgrade. we have though dropped support for ie6, which made me very happy ;o)

    Until then, I will keep pushing for us to be more open with our clients and I will keep enhancing progressively.

  2. Webegg says:

    Thanks for the comments Tjobbe, its good to hear that others feel the same way and that we’re spreading the word.
    We all try to think the same it’ll make the Web better for everyone.

Leave a Reply

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

This article is in the Web Industry category. Here are some other related articles also in this category.