I recently redesigned and coded the website for the Marine Biological Association. I designed the site mobile first as I feel this makes sense to start with the linear nature of a webpage and it’s elements and then see where these elements can best be focused as the screen size increases.

The site also uses responsive design techniques with a fluid grid. I found Responsive Web Design by Ethan Marcotte had some useful techniques in it and also the templates from the 978 Grid System to calculate layout widths.

As the site is primarily for presenting static page content and adding news posts I chose WordPress for the back end. There are a few custom plugins that I have written in there to deal with membership forms and other bespoke areas of the site.

You can see the site at http://www.mba.ac.uk