Responsive redesign of the Institute of Intellectual History website

I’ve been interested in responsive web design since reading Ethan Marcotte and then Scott Jehl on the subject in the excellent A Book Apart series, but this summer has afforded me the first chance to put the principles into practice with a redesign of the Institute of Intellectual History website, which is the research centre I am associated with at St Andrews.

I first cobbled together the design for this website, which runs on WordPress, over a period of about three days in late 2013 and, in my opinion, it has aged really badly. With the redesign, I wanted to achieve a few things:

  • a responsive design that worked on mobile and small screens (25% of traffic is from these sources, and they were previously served the desktop site)
  • an integrated events management system that could display a calendar and automatically add previous events to an archive (replacing a tiresome manual process)
  • much better functionality, such as pure-CSS drop-down menus and a full-site search
  • as small a CSS file as possible, taking into account the principle of DRY
  • not use !important in anger

The new design is now online. The WordPress theme itself is based on _S, while the events management is handled by the Events Organiser plugin, created by Edinburgh’s own Stephen Harris. The CSS comes in at about 14kb minified.

New IIH site on laptop and mobile
Corny promo shot

This was also one of the first projects where I tracked development using GitHub, and you can see all the code that makes up the initial release in the repository.