Return to Firewoiks

Extensions, resources & tutorials for Fireworks, Dreamweaver & HTML5 / CSS3 by UI developer, .

RWD Retrofit - Responsive Retrofitting of an Existing Site

Posted: September 27 2012

RWD Retrofit allows an existing "desktop site" to co-exist with a "responsive site", while also able to serve the desktop site to a different breakpoint on "mobile"

Many clients with existing sites have asked me/Izilla for a mobile site, however, being an Android user, I'm frustrated that my tablets receive the mobile sites, too, as it's not as easy to differentiate their user agents (unlike iPads, for example).

I also don't like the (generally) reduced functionality of "mobile" sites, and see much more benefit in responsive web design.

However, for those with smaller budgets and who are unwilling to redevelop using a mobile-first philosophy, I created this JavaScript solution for Izilla to allow a new responsive site alongside the existing site.

I'm hoping that it could be seen as quite a useful stop-gap solution in to responsive web design.

How RWD Retrofit works

As I'm sure you're aware, a mobile device (generally) has a default viewport width of 980px so that existing desktop sites appear zoomed-to-fit on load.

However, for responsive and mobile sites, the viewport needs be set with width=device-width so that they appear at 320px (or whatever the device's layout viewport is). Without the correct viewport setting, a mobile device would never get the responsive CSS as it wouldn't match the required breakpoint width.

So, RWD Retrofit sets and changes the viewport on the fly, depending on if it should use the responsive CSS or the desktop CSS. It also allows for the desktop breakpoint to be overwritten with a different one on mobile devices.

If the normal desktop breakpoint width is 980px and the client wants the desktop site on iPads, for example, the breakpoint needs to be set to 768px instead. Unfortunately, you can't just set the default breakpoint to 768px, as resizing the browser on a desktop would create a horizontal scrollbar between 768px and 980px.

RWD Retrofit also returns an object containing the desktop (rwdRetrofit.desktop) and optional mobile (rwdRetrofit.mobile) media queries for responding to the breakpoints with JavaScript. I recommend using enquire.js for this.

Since the desktop breakpoint could be different on mobile, using rwdRetrofit.mobile and rwdRetrofit.desktop allows you to easily listen for the breakpoint changes, without needing to also duplicate and manage your media queries in JavaScript.

Usage

Requires cssua.js

  1. Set up the viewport with: <meta name="viewport" content="width=device-width" />
  2. Reference the existing desktop stylesheet with a <link> with a relevant media query, eg. media="all and (min-width: 990px)" and class="rwdretro-desktop"
  3. Reference the new responsive stylesheet with a <link> with a relevant media query, eg. media="all and (max-width: 989px)" and class="rwdretro-mobile"
  4. Add an optional data-mobile-breakpoint="xxx" attribute to the responsive stylesheet <link>, where xxx is the pixel-width that the desktop breakpoint will occur on mobile devices - eg. 768 for iPads and other large tablets
  5. Include cssua.js before rwd.retrofit.min.js

What next?

You can get the code from GitHub and can see it in action on rubik.com.au

You'll notice that on desktops, the media queries kick in at 990px, but on mobile at 768px. I've also used it in conjunction with enquire.js to turn the home page products from a carousel (on desktop) to an accordion (on mobile) and changed the navigation to be more mobile friendly, etc.