This was a project I worked on this Winter throught to Easter. The idea was to preserve as much of the current website as possible while making it responsive to mobile devices.
The website had been redesigned fairly recently, and they didn't feel the need for a full redesign. There would be no content update or review and no visual design either. They were to stay as is. So over the course of a few workshops in their premises, I made an inventory of the website's components and designed how they should behave at different viewport widths.
The main challenges were related to navigation. The main navigation has entries and 3 levels dropdown on the desktop width. That's a lot. This generates long breadcrumbs…
This was solved by pulling out the third level navigation. The main menu was display the first and second levels in a expand/collapse fashion, and the third level would be available via a toggle switch when it existed. The best place to put it turned out to be next to the breadcrumb.
On narrow viewports, the breadcrumb was trimmed to display a link to the parent level only. This mimics the back button behaviour and is immediately understandable. For more options on third level links (our current level), expand the third level navigation by clicking on the arrow next to the breadcrumb.
Navigation: 1st and 2nd levels
Navigation: 3rd level
The three column layout was easily tackled as its content was used systematically throughout the site (second level navigation / main content / aside content). These could easily be linearised.
The upper right toolbar was the only markup that required a major markup change. Webfonts were used for icons and the whole block was moved down in the page footer. Absolute positioning moves it up on wider viewports.
Otherwise, some custom jQuery, Modernizr, and a couple of IE conditional comments took care of gluing everything together. It was a fun project to work on and the BIS team did a brilliant implementation. Congratulations to all :)