I used to use respond.js to make IE8 media query-friendly, but that script stopped working for me suddenly last week in WordPress. I still don’t know why, but after several hours of trying to fix it I realized that I really didn’t need to. Why was I worried about media queries in IE8 anyway? I really wasn’t – my real concern was that I was serving the mobile-first styles to that browser instead of the desktop styles.

But I’m using Sass – have been for a few months now, I love it – and Sass makes it easy to deal with that problem. It’ll help you create desktop styles, sans media queries, and serve those exclusively to IE8 via conditional comments.

I found some good references for how to do this, but I was so frustrated by that time (it was late and I’d been banging my head on the desk for an hour or two) I had a hard time getting my head around any of them. Once I finally got it, it was an ‘aha’ moment! I’m writing this post in hopes that I can make it super-easy for you to use this technique if you’ve recently had a frustrating time with IE8 too.

Compass and Breakpoint

You’ll need to use Compass and the Breakpoint extension for this tutorial. Breakpoint is a Sass mixin that makes it easy to write media queries – learn more about what Breakpoint does here.

Get Breakpoint going by first installing it:

Then if you’re starting a new project with Compass, you can require it now:

Otherwise you’ll need to add this line to your existing config.rb file in your project folder:

Finally, you’ll need to import the Breakpoint partial into your style.scss file (after you import Compass):

And you’re ready to go.

Creating the Media Queries and IE8 Fallbacks

In your utility partial, or maybe in a variables file, add a media query using Breakpoint. It will look like this assuming we want a min-width of 760px:

(Read the examples here if you want more details on the different kinds of media queries you can use).

Now normally you’d use this in your .scss files like this:

And that produces this compiled CSS:

But because we want to take care of old IE by not serving the media queries to it, you’ll first need to add this new mixin to your utilities file (wherever you’ve put the Breakpoint media queries):

And then instead of the @include snippet above, you’ll use this one in your .scss files:

So instead of ‘@include breakpoint($grande)’ you’re using ‘@include grande.’

If you look in the compiled CSS file you’ll see this:

And then, you’ll just need to enable the .ie8 class for IE8 by using this conditional comment in the head section of your site:

Now IE8 will see your width styles and you won’t need to worry about it not seeing the media queries anymore. Sweet!

What you’ll want to do is create one of the new mixins for each breakpoint you add – so if you have 5 breakpoints, you’ll have 5 new mixins.

This works so nicely, and no need for any special Javascript to force IE8 to be mq-friendly. I hope you found this tutorial helpful!

References:

 

I haven’t found one yet.

My current holy grail is a Bootstrap-like responsive menu that I can use in non-Bootstrap custom themes. I followed the few tutorials on how to do this in the last week, but none of them wound up working (or not working like I expected them too).

I’m going to try Rachel Baker’s BootstrapWP (I’ve read lots of good things about its high quality of coding) and see if I can figure out how to get the menu into one of my custom themes based on Hybrid. I know it can be done, but I’m not enough of a programmer to easily get how to do it. Once I figure it out, I’ll post my solution here.

I like a good-looking menu. I want one I can use across the board for any WordPress custom theme.

If you’re working on responsive websites, you may already be familiar with FitVids – a nice little jQuery plugin that allows for fluid-width video embedding. This morning I found there’s also a FitVids plugin for WordPress. Very easy to use, just install it, activate it, then go to Appearance > Fitvids.

FitVids settingsIf you’re not already using jQuery 1.7+ – and you should be fine if your WordPress install is 3.4 or above – tick the checkbox to add jQuery 1.7.2.

Then under jQuery Selector, enter the container element you want to apply FitVids to. It’s probably .post, but if you’re not sure .body always works. Then save changes and you’re done – FitVids should now be resizing videos as browser size changes.

I’m currently working on building a good responsive base version of the Theme Hybrid child theme I use as the starting point for most WordPress sites. To that end, today I destroyed a project-in-progress to rebuild it responsively. It’s going well so far, but I’m not close to being done. 

One thing that is complete: I now have a responsive menu thanks to a little jQuery script called TinyNav.js. This automatically converts any ul or ol-based navigation menu to a select menu. It was very easy to do except for one thing that wasn’t clear from the documentation, which I’ll explain below.

First download TinyNav.js from the link above and upload it to your theme directory. Then in the head section of your theme, connect to the script:

Then add this, changing #menu-primary to the ul id in your WordPress menu. The second part of this makes the current_page_item appear in the select menu by default.

Finally, open up tinynav.js. This was the tricky part because it wasn’t explained clearly. You’re going to need to make one change: the first occurrence of ‘selected’ needs to be changed to ‘current_page_item’ and then the first part of the script should look like this:

Note that that’s just part of the first line in the minified script…

Now you’ll use media queries to control the appearance of the select menu and the hiding of the main menu, perhaps like this:

And you can style select.tinynav in CSS. Enjoy!

I took an excellent class on adaptive design at lynda.com in January. I decided to try mobilizing my main business site, which is a WordPress site that was running WPTouch or one of the other instant mobile plugins. I disabled it and got started about a week ago.

After taking the class, it was much easier to see what I needed to take out for the handheld version, but I hit a snag when I was trying to get images in custom post types to resize. This afternoon I finally got that problem fixed and was able to complete the mobile version, then it only took about 30 minutes to get a separate stylesheet for tablets.

I think it looks pretty reasonable considering it was my first attempt at creating an adaptive version of a WordPress theme – if you have a chance please check out Red Kite Creative on a phone or tablet and let me know what you think.