Progressives enhancement, graceful degradation and developing for IE7?

max7
max7 used Ask the Experts™
on
Greetings,

I'm beginning work on a website whose user base mostly views it in MSIE, specifically versions 7 & 8.  Despite this, the website owner wishes to update the website using the latest standards so that it looks better in more standards compliant browsers while still presenting well in these versions of IE.

I'm trying to figure out the best approach to this.  At this point, my thoughts are I will be almost developing two separate websites: one that uses the latest HTML5 technologies as much as possible and the other which will rely on a lot of conditional comments and separate styles sheets, images for drop shadows, etc.

My question is: what is the best approach to avoid making a mess while producing the best results?  Am I correct in my assumption that I will essentially be developing separate websites for this request?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
LZ1
Top Expert 2011

Commented:
First, you will NOT be developing 2 separate websites. Your only going to add to your maintenance and development bugs/hassles down the road.  

2nd, you can use HTML 5 and have IE adapt to that. There are a number of plug-ins scripts that help older versions of IE play nice with modern code.

Here's 1 option: http://net.tutsplus.com/tutorials/html-css-techniques/how-to-make-all-browsers-render-html5-mark-up-correctly-even-ie6/

Then if you want to use CSS3: http://fetchak.com/ie-css3/ 
or
http://aext.net/2010/04/css3-ie-support/

The bottom line is nothing will be 100% fool-proof in getting a dated/legacy browser up to snuff.  The best you can do is code for modern browsers first and use good, clean, semantic and validated code to ensure the best possible outcome.  

Don't forget, you will also want/need to use a CSS reset like this one:
http://meyerweb.com/eric/tools/css/reset/
This helps level the playing field between all browsers.
Top Expert 2013

Commented:
IE 7 and 8 are obsolete, and IE9 is only marginally modern. Instead of trying to make a silk purse out of a sow's ear with tricks, just do the site to current standards.  If a browser cannot do a drop shadow it will just ignore the code.  If a browser does not know what a section tag is, it will treat it as plain text.

If you use this doctype:

<!doctype html>
<html  lang="en">
  <head>
    <meta charset="utf-8">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />

IE8 and IE9 will render in standards mode and there will not be a lot of issues.

IE7 was not very good to begin with and is now well past its useful life.  It will give you some problems, and you may have to do some conditional coding.

What you end up with will not look the same in all browsers, and it is foolish to expect that.  The users are not looking at pages in multiple browsers, so they don't care about a consistent look; they just want pages that work correctly, and the way to disappoint them is to start screwing around with hacks to try and make all browsers work the same.

If you get into the game of "they have to be the same", get ready for a lot more work because IE 10 is very different from IE9, but will support a wider spectrum of standards compliant features.



Cd&

Author

Commented:
First, thanks to you both for responding and I apologize for my late response on this.  They are great answers and I think they represent two different approaches to this issue.

First, you will NOT be developing 2 separate websites. Your only going to add to your maintenance and development bugs/hassles down the road.

Trust me, I realize that.  But currently the website does have elements of this already though a few pages: for more standards compliant browsers they use CSS3 properties such as gradient for the background, drop shadows, rounded corners, etc.  But when you load the website up on IE7 (and while they force the browser to render in IE7 using the meta content tag, they still have conditional comments for IE8), a different a style sheet is used and all these images are brought in to recreate the website for IE.  To me, that is basically redoing the website for one browser i.e. de facto two websites.


Then if you want to use CSS3: http://fetchak.com/ie-css3/  
or
http://aext.net/2010/04/css3-ie-support/ 

Aren't those links for the same thing, both using the same file at fetchak.com?  I guess this is the same as this: http://css3pie.com/about/   ?  Either one better than the other you think?

Instead of trying to make a silk purse out of a sow's ear with tricks, just do the site to current standards.  If a browser cannot do a drop shadow it will just ignore the code.  If a browser does not know what a section tag is, it will treat it as plain text.

So basically, you'd argue for graceful degradation, which is to say users in IE7 will see a different and perhaps less visually impressive design than those using more standards compliant browsers?  I personally agree with this approach.  I guess it really comes down to how insistent these people presenting the same design across all browsers.
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Top Expert 2011
Commented:
This is going to start a war, I know it. :)

I think graceful degradation is fine. However, I think it comes down to your demographic/end-user. If you know your end-users uses older browsers like IE and have no choice to upgrade, then you'll definitely want to make sure that the site is at least readable and visible in IE. If all you have to do to make IE play nice with the newer code is insert a JS file, then by all means do it. It won't hurt you, development or the end-user(unless of course JS is off, which is a rarity).  In fact, it will be better.


What you end up with will not look the same in all browsers, and it is foolish to expect that.  The users are not looking at pages in multiple browsers, so they don't care about a consistent look; they just want pages that work correctly, and the way to disappoint them is to start screwing around with hacks to try and make all browsers work the same.

I really have to disagree with that. Users now are accessing the web from multiple devices/platforms and resolutions. That's why we ultimately like to design responsively.  We need to accommodate as many users as possible. More people are going mobile, but you still need to understand that people still use IE 7 & IE 8.  I don't like it either, but writing semantic and valid code along with a proper CSS reset, you shouldn't have too much of a problem. I've done this for years and my sites still look fine across all browsers.

I believe, in certain respects, that the site should look similar across as many platforms and browsers as possible. Obviously when coding responsively you have different options/choices to make when it comes to what will be shown on the screen and what each break-point will look like.  

Ultimately, you'll have to choose what you want to do as it relates to HTML5 and CSS3.  If you code your site in valid and semantic code, you shouldn't have too many problems to begin with. Your markup should be as valid as possible and should be thoroughly tested as well. If you have problems on your own, there are a number of boiler-plates to get you started.

http://html5boilerplate.com/
http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries
http://stuffandnonsense.co.uk/projects/320andup/
Top Expert 2013
Commented:
I have no issue with doing a little extra code to support relics, but if more than 2 or 3% of resource time is spent doing browser specific code, and that code is for cosmetics as opposed to functionality, then resources are being wasted and development costs are higher.

If the client is enough of a moron to insist on the browser rendering the same even after they are told it involves higher costs, then by all means do it; because you tried to cure their ignorance with some knowledge.  That is all you can do and there is no cure for stupidity.

As for user using multiple platforms for browsing: That refers to modern users who understands why the browsers are different. No one expects a page on an iphone to be the same as it is on their laptop.

I am at the point in my life where I don't have to please clients (not that I was ever that eager to compromise).  I develop for modern browsers, and if they don't like the work I do, I give them a list of other developers who might be more to their liking.

Cd&

Author

Commented:
Thanks guys, I really appreciate the invaluable insight.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial