So I’m building a website at the moment and of course it’s responsive. It features a full-width content/image slider (http://www.woothemes.com/flexslider/) that goes from 1060px wide down to 320px (iPhone 3/4 size).

To start with I was just going to use display:none¬†to show/hide the different image sizes using CSS3 media queries. Then I read that just hiding the images doesn’t mean that they don’t get downloaded still. Which sucks for the user on their mobile with a poor signal, or with a limited data contract.

So I needed to serve ‘adaptive’ images somehow. Being a WordPress site I delved into the plugins world, as well as looking at other solutions. ¬†After trying a LOT of different solutions I went with a WordPress plugin called Mobble.

Mobble allows you to wrap your template code in if statements to detect the device being used to view the site.

Such as:

/* image size a */
} else if(is_mobile()){
/* image size b */
} else {
/* original image size */

It’s worked out pretty well. I ended up using 3 image sizes (using custom image sizes in WordPress), one for mobiles, one for tablet size down to mobile size and one for desktop down to tablet size. Sure, I could have used a lot more different sized images, but I think these 3 sizes will work pretty well.

Once the site is finished and live I’ll put a link to it on here.

Digg this

No Comment.

Add Your Comment