Ever had to redo a site design without access to the files? Sounds ridiculous I know, however that’s exactly what I had to do recently when applying the Starbucks rebrand and associated redesign to their non-US sites (e.g. Russia, Canada) and investor relations site.

The sites were hosted by Starbucks and build by a third party, and for security vs. tight schedule reasons they wanted to limit the update to overwriting assets, specifically CSS and images, so…

First step was to get a copy of their CSS onto my localhost (or whatever local http development space you have to hand). Straightforward enough.

Next I needed to persuade the browser, when viewing the live site, to redirect the request for that CSS to my copy.

Initially I did this by editing the path in the net inspector of Firebug, however I quickly realised this would be a pain if I accidentally refreshed. It also wouldn’t allow cross browser testing.

I then looked at Fiddler (a desktop proxy tool that allows you to inspect and interfere with browser requests) but couldn’t find the requisite functionality (please enlighten me if you know how). Then a colleague suggested Charles Web Debugger might do the job. Charles is similar to Fiddler, but I’d skipped it since it wasn’t free. Turns out it has a functionality complete trial however, and after a bit of a rummage I found it can bind specific request paths to new URLs. The benefit of that? It works for as long as Charles is running, and will apply to all browsers.
Now work could start, edit the local CSS, view the live site, see changes appear.

If the site is CSS-based (as in the investor relations site) all the design images will referenced from the CSS, so updating them just means hosting the new images locally alongside the CSS and updating the URL() values in the background{} declarations to reference the localhost. (Just remember to change them back before packaging up the files for delivery.)

If the site is a bit older (tables and img tags) you can locally host those images alongside the CSS and add new paths (including * wildcards if useful) to Charles. Bit of a pain, but then working with tables always was, right?