I gave a talk at WordPress North East last week, and have finally remembered to type up some of the notes to accompany the slides.
The talk was called A responsive workflow for WordPress theme development (catchy, I know), and was a run through of how I deal with responsive projects in WordPress at Peacock Carter.
The basic workflow I discussed was along these lines:
- Content audit: at a basic level, look through what the client already has (or plans to have) on the website in terms of content, and identify any potentially awkward types: video, large tables of data, etc.
- Wireframes: from here, I start planning where content is going to appear at various breakpoints I’ve identified (there’s a grid in the slides I use for sketching wireframes for each main template I’m planning to design versus each breakpoint I have in mind).
- Mock-ups: from here, I go to visual mock-ups based around the wireframes (which provide a low-fidelity idea of where things go, but not necessarily a to-scale layout). The first three stages are typically not presented to clients, because I present the designs in-browser (mitigating issues with different displays in different browsers, and I will sometimes only create partial visuals and move on to designing in-browser once I have a good idea of where I want to go).
- Implementation: this is generally the first deliverable the client sees: a fully functional, responsive design built as a WordPress theme. I use @toddmotto’s HTML5 blank theme for WordPress as a base (I’ve altered it a little to suit my needs). As per Todd’s theme, I use one stylesheet which contains all of the media queries for the designated breakpoints (highlighted as an example in the slides).
- Testing: obviously, some testing is done before presenting the design to the client, but this step gives me more time to try and break the WordPress theme I’ve built, especially between breakpoints. Consensus during the talk was that respond.js was one of the better ways of dealing with IE without too much hassle, though this isn’t part of my workflow (yet!).
- Minification/production: tying everything off before launch.
Hopefully that’ll help anyone who didn’t make the talk itself (shame on you!). There was also a great talk from Roger at 21 Applications on using WordPress for web application-style projects and for prototyping, and another useful talk on the future of WordPress by our wavy-haired host Steven (@stompweb).