Using the WordPress Mobble plugin to tweak responsive websites

I just want to give a shout out to the Mobble plugin, as it’s made things easier in the development of a  few responsive websites I’ve worked on recently. The plugin detects which device is viewing the website, handheld, mobile, tablet and at a more granular level iPad, iPhone, Blackberry etc. Whilst it would be great if a fluid grid with a smattering of media queries produced the perfect responsive website,  in practice sometimes you want to be able to tweak things a little more.

I’ve used the plugin for instances where things can’t or shouldn’t bet hidden by CSS, for example:

  • Detecting if the device is  a mobile, if so set the viewport. For one website I worked on we decided that actually it worked better on the ipad/tablet if viewport wasn’t set.
  • Detecting if the device is a desktop, if so serve the all bells and whistles flash video player (client request), if mobile, use a simple YouTube embed.
  • Set different values for a jQuery Gallery plugin, depending on whether mobile, tablet or desktop is viewing the page.

The plugin uses WordPress conditional functions and at a simple level can be used to skip processing certain content, for example superfluous sidebar, large images and so on.

LinkedIn Twitter Instagram