First Attempt at Responsive Web Design = Headache

[skunkbad]

I’ve spent a long time working on a RWD, which is based on our current website’s theme. I’ve gone with the mobile first approach, and it works OK, but then I decided to try out older versions of IE, and the media queries don’t work, so it basically gives them the mobile layout, which is bad. I tried adding the css3-mediaqueries.js, and also tried respond.js, and neither seem to do anything. No change to be specific. At least if one of these scripts worked a little, I could figure out what I have to do to tweak the CSS to be perfect for them, but I’m at a wall, and banging my head against it. Our visitor demographic has a large percentage of users who are still using older versions of IE, so we can’t move forward with the responsive design if it means the site looks bad for them. Maybe somebody could give me some advice as to why the respond.js or css3-mediaqueries scripts aren’t working? I’d appreciate your help. I’ve got a little demo of the site up at Your text to link…

[joshuanhibbert]

How about using an IE specific style sheet?

[skunkbad]

If I have to have a second stylesheet then I will have it, I just thought that if respond.js would work, then it would be easier for me because I wouldnt have to maintain a second stylesheet. I know I could also just use the ie classes that are applied to the html tag by the conditional comments, but that just means a lot of duplicate CSS. Do you know why the respond.js isnt working for the demo I put up?

[gilgimech]

I just took a look at you demo page and respond.js isn’t anywhere on the page.
If you’re using the respond.js that’s built into modernizr.js. That can be your problem. There’s a bug in modernizer that causes the built in respond.js not to work.
Get a new copy of modernizr without respond.js and add respond.js in the page directly. You could also use IE condition comments to load it.

[skunkbad]

Thanks for your response. Well, I ended up taking respond.js out, and am now implementing an IE8 and IE7 specific stylesheet. I’m not even going to bother with IE6. Everything seems good now. Tested in multiple browsers on Windows and Mac. Also tested in FF3 on Ubuntu and now the only thing giving me problems is the way the menu renders on the iPad. The background images are not positioned exactly right. Since that’s another topic, I’ll start one if I can’t figure it out.

[Author]

Posts