Specifications and #RWD

As we close out 2012, a big thing that stands out for this year is the way responsive web design (RWD) has changed the work we do. We have thought about and worked on how to tackle RWD in strategy, design and implementation. One particular issue I’ve spent time on is how we document the specifications for responsive website implementations. We’re still learning and evolving, but here are some things I’ve learned this year.

HTML Specifications
We’ve done HTML specifications for taking our designs into HTML for years. With responsive, this is more important than ever. Specifications have become more detailed, with things like browser and accessibility requirements; HTML framework specifications; javascript and jQuery library recommendations; performance guidelines and the usual functional guidance for rollover states and the dynamic components of pages.

Responsive Prototypes
During the course of the year we tried several approaches to mapping out how a desktop design should look and behave across various screen sizes on different devices. We started using an HTML prototype of a wireframe, with boxes indicating placement of content elements.  It is responsive and demonstrates how page elements shift as we change the size of the browser window. So far, this has been the best way for our project teams and clients to make decisions about how design and content will behave across devices before we start building the HTML.

Functional Specifications
To make functional specifications for CMS implementations more consumable, we’ve moved away from lengthy word processing documents with endless screen shots and bullets. We still have some of that, but we’ve also been using a tool called Hotgloo to do collaborative annotations on our designs with our clients. This has been a great step forward both in the use of a more dynamic tool and in helping make the functional specifications easier to digest.  This helps us define the work correctly before any implementation begins.

I’m always interested in the ways other people are making use of different tools to build their responsive websites. I’m also looking forward to refining our process in 2013 as we continue to find better ways to make beautiful designs into functional websites.