Avatar of max7
max7
 asked on

Progressives enhancement, graceful degradation and developing for IE7?

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?
HTMLCSSWeb Languages and Standards

Avatar of undefined
Last Comment
max7

8/22/2022 - Mon
LZ1

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.
COBOLdinosaur

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&
max7

ASKER
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.
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
ASKER CERTIFIED SOLUTION
LZ1

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
SOLUTION
Log in to continue reading
Log In
Sign up - Free for 7 days
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
max7

ASKER
Thanks guys, I really appreciate the invaluable insight.