Steve Roberts

jQuery plugin for quickly making legacy sites responsive




CSS, html, JavaScript, mobile

Over the last few years I have occasionally had to revisit old web sites and work out a quick and easy way to make them responsive. Any site designed prior to 2010 is unlikely to have an css media queries that provide different CSS styles depending on the width of the device used to view the page. Sometimes you can just add some css and make a passable mobile web version without changing the markup of the existing site. Other times you have to dive in, bite the bullet and recode. Unfortunately the latter option is not always possible – budget may not allow it or the code may be generated by templates from a CMS that are too hard to change, or require someone that know’s a specific back-end language (Java/.NET/Ruby).

One trick that I have used on a few sites (here, here and here for example) is a little jQuery plugin that lets you ‘mobify’ an existing element. For sections of content on a page you simply specify what you want to be a trigger, what you want to summarise the section. This plugin will then make a simple collapsible/expandable section which is much easier to naviagte via a mobile phone. It also has an optional accordion mode so you can ‘mobify’ several elements on a page and ensure that only one is open at a time.

GitHub link

Posted in Development. Tagged with CSS, html, JavaScript, mobile.

Published 07 January, 2014