Responsive web design – SMFA freelance project

Working on a freelance project for an exhibition of SMFA students’ artists’ books in Turkey entitled Textual Image/Visual Text. The site includes a splash page with some basic jQuery fades and effects and pages for each artist/work. Here are the mockups:

I’m using this project as an opportunity to learn responsive web design using the 1140 CSS grid. The trick to designing for different devices and screen resolutions is to structure CSS with %s instead of pixels and to take advantage of CSS3′s @media queries. The queries allow you to create differing styles according to how your site is viewed.

A few weeks ago at WordCamp Boston, Sara Cannon gave an excellent and inspiring presentation “Theming & Mobile – Optimizing your Site for Various Devices”. Check out her slides here.