How do I make RESPONSIVE website work on IE8?

Hey all,

I am new here and needs your advice with a site we developed. We just launched this site -> http://www.commonwellalliance.org/

Site is Customize, Responsive, and displays well on most up to date browser EXCEPT for IE8.

It is a MUST that the website display well on IE8, it doesn't have to be responsive but even viewing it on their desktop, the menus and other parts of the site are all over the place. I just want the site to be displayed well on their desktop using IE8. What options to I have?

Is there a way to just show plain site on desktop IE8 and when others are on Chrome/Firefox or IE11 everything is fine and responsive? Is there an IF / ELSE statement that I can write? What should I do?

Your advice will be a big help.

 

Your developer should have taken care of this and tested along the way, it seems you used a framework, most have IE hacks, well next time start with http://html5boilerplate.com/ html5boilerplate that has various fixes for different browers.

 

Generally speaking you don't... though you CAN make it "gracefully degrade" if you developed it properly by using semantic markup, separation of presentation from content, progressive enhancement and making an elastic and semi-fluid design BEFORE you made it responsive, that's easy. If you skipped all those basic steps well, then it's an uphill battle and the concepts might as well be an alien language.

Most people advocate the "start with the smallest mobile first" approach -- I consider that broken methodology as that's NOT the lowest common denominator; the lowest common denominator is pre CSS3 capable browsers! Like for example, that IE8 you're having problems with. If you start out with a semi-fluid and elastic legacy IE layout as your first step, you can then enhance it for larger and smaller displays with your CSS3. Lowest common denominator should be the starting point, and mobile isn't it no matter how many people who CLAIM to grasp how to do a responsive layout will claim otherwise!

Excuse me as I'm about to be BRUTALLY frank with you, but looking at the page in question it's filled with "gee ain't it neat" PSD Jockey bull that has no business on a website in the first place if you actually care about accessible responsive design. The stupid malfing "revo" slideshow garbage, the perfect width elements, inaccessible (and often absurdly undersized) pixel metric fonts... the design itself is missing the basic stepping stones of accessible design. Peeking under the hood it reeks of the typical HTML 5 asshattery and turdpress' "I can haz intarnets" markup. You care about legacy IE? DO NOT WASTE TIME ON THE POINTLESS HTML 5 bull. All those goofy extra allegedly semantic tags like HEADER and so forth are just pointless code-bloat redundancies. It's got gibberish use of numbered headings, endless pointless DIV for nothing, and on the whole reeks of not knowing enough HTML to be building a website in the first place -- though that's par for the course the moment you have turdpress involved.

For example, if you don't know what's wrong with this:

<li id="menu-item-34" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34"><a href="http://www.commonwellalliance.org/blog/">Blog</a></li>

Code (markup):

Or this:

<div class="tp-caption fade"
					 data-x="345" 
					 data-y="180" 					 data-speed="300" 
					 data-start="800" 
					 data-easing="easeOutExpo"  ><img src="http://70.39.250.27/~cwell/wp-content/uploads/2014/10/heading-tex-slider.png" alt="Image 2">					 					 </div>

Code (markup):

Or this:

<main id="content" class="content" role="main" itemprop="mainContentOfPage">
	
	<article id="post-4" class="entry page publish author-cwell post-4" itemscope="itemscope" itemtype="http://schema.org/CreativeWork">

Code (markup):

Or this:

			<div class="entry-content" itemprop="text">
				<div class="wpb_row vc_row-fluid introbox vc_custom_1411741298073">
	<div class="vc_span12 wpb_column column_container">
		<div class="wpb_wrapper">
			<div class="wpb_row vc_row-fluid">
	<div class="vc_span6 wpb_column column_container">
		<div class="wpb_wrapper">
			
	<div class="wpb_text_column wpb_content_element ">
		<div class="wpb_wrapper">
			<h1>Why CommonWell Health Alliance</h1>
<h2><strong>Interoperability for the Common Good</strong></h2>

Code (markup):

You may want to back away from the keyboard and not come back until you've learned enough HTML to realize what rubbish that is.

Oh, and anyone tells you to use a framework, like that steaming pile of halfwit bull known as "boilerplate', or worse, the outright moronic "turdpress" -- well, they don't know enough on the subject to be flapping their gums!

Of course, this:

<meta name="generator" content="Powered by Visual Composer - drag and drop page builder for WordPress."/>

Code (markup):

Is a serious case of "Well there's your problem."

Toss it and start over, there is little if anything I'd try to salvage from that mess. Though again, it's ENTIRELY what I come to expect when I see HTML 5 and turdpress together.

 

To answer your question, there's a few routes you can go. There is an IF/ELSE solution like you asked called IE conditionals.

<!--[if IE 8]>Special instructions for IE 8 here<![endif]-->

Code (markup):

IE8 will read whatever inside the code above while everything else will treat it like a comment. There's ways to target everything except IE as well. You could serve additional styles for IE8 users, or even a completely different stylesheet. This would probably be the ideal way.

------

You could also use tools like modenizr, which test for features and allow you to write fallback CSS. This is a good option if you're using a ton of features that not available on IE8.

-----

There's also javascripts to make media queries and other CSS stuff work on older browsers.