Grid—a simple guide to responsive web design

Grid—a simple guide to responsive design by Adam Kaplan.

Grid—a simple guide to responsive design by Adam Kaplan.

It feels like the web is evolving at a frightening rate these days, and while we’re being encouraged to design for mobile first even the technical specifications (particularly HTML5, and CSS3) haven’t settled down yet and are still subject to change.

For example, there is currently a lot of energy being put into how to deal with responsive images: you don’t necessarily want mobile devices (possibly with smaller screens and slower bandwidth) to download images that would be more appropriate on desktop browsers, with larger screens and possibly fibre-optic broadband connections.

If you are feeling a little overwhelmed by it all and wondered where to start then I can recommend Grid, a simple guide to responsive design, created by Adam Kaplan, a designed from Chicago.

In seven simple steps he unpacks all the important stuff: why and how. And then he ends it with an encouraging, non-threatening challenge: practice makes perfect.

Two useful resources when planning Web projects

Web ReDesign 2.0

20110823-webredesign20

A few years ago I came across this really excellent book by Kelly Goto and Emily Cotler: Web ReDesign 2.0: Workflow that Works (New Riders, 2005).

In 10 chapters Kelly and Emily lead you through the workflow of a complete website redesign. They break the process down into five phases:

  1. Define the project.
  2. Develop site structure.
  3. Design visual interface.
  4. Build and integrate.
  5. Launch and beyond.

I’ve increasingly found this framework to be really useful, not only for website redesigns but for developing new sites too. I now think in terms of five phases for most Web-related projects that I work on. I’ve found it also provides a very simple overview for clients to help them understand where we are in the overall project lifecycle.

I now have the book sitting on my desk at all times, within easy reach. Their website also has a number of downloadable resources such as a client survey, tech check list, budget tracker, etc.

Web Design Sketchbook

20110823-webdesignsketchbook

Another resource that I’m finding really useful particularly during phase 1 (define the project) is the Web Design Sketchbook from 37 Media.

The first nine pages contain questions to ask the client, which I’ve found really help you understand the project better. Questions such as:

  • What objectives are you trying to achieve with this site design / redesign?
  • What is the primary “action” the site visitor should take when coming to your site (e.g. make a purchase, become a member, search for information)?
  • If you could communicate only one message to visitors, what would it be?
  • What should users think or feel when they look at the design of you site?

The final page of questions includes a list of word pairs to help you determine the tone of the site, e.g.

  • conservative or progressive
  • cold or warm
  • spontaneous or orderly
  • trendy or classic

The second half of the book contains what they call “layout brainstorming pages with full browser chrome and grids to better plan how your site will look and operate when it’s finished”. A nifty idea.

You can order the sketchbook in two varieties (single project at US $12 or a full 104 page sketchbook for US $25) or you can download and print out the free version, which is released under a Creative Commons license.

Build your own

These resources have inspired us to build our own, drawing on resources from each as well as our own experience and requirements here at St Andrews. When we have I’ll post a link to it here.

What would you include in a Web project workbook?

600th anniversary and alumni websites

600

It’s been a quiet couple of weeks on the Web team blogging front. Which is the complete opposite of what it’s been like within the Web team: blinkered, and with heads down we’ve been racing to complete the 600th anniversary website before graduation (which started yesterday).

If you’ve put in a request by email and we’ve not replied as quickly as we might please accept our apologies. We’ve been working, at times and literally, around the clock to get the site done.

And not just one site, we’ve also had the Development/Alumni relations site to work on at the same time.

alumni

Once the sites are both live, and the dust has settled, I’ll blog about our experiences of working with an external design agency and what we learned about working together, as a team of five, on the same project.

How to improve a web page in one simple step

Scania fire engine

Scania P 380 4x2 fire engine with short CrewCab. Photo: Göran Wink Copyright © Scania CV AB (publ)

When asked how one can improve a web page in one simple step it is the considered opinion of certain members of the Web team that this may be done by adding a photograph of a fire engine to the page.

See, this page is more exciting already!  That’s a photograph is of a Scania P 380 with a short CrewCab.

The same can be said about photographs of tractors.