Things have been changing quickly over the last couple of years when it comes to designing and building websites that are optimized for mobile, tablet & desktop. While dedicated mobile sites and apps still have their use cases, responsive web design is more often than not where we land after establishing a multi-platform web strategy.
Problems with our traditional workflow
When we first started designing responsive websites we typically worked within our established workflows. Our IA, UX & Design processes were largely static. Sitemaps, Wireframes, prototypes and mockups started on paper (or ipad) and iteratively made their way into Photoshop for final approvals. We needed to produce at least three versions of the wireframes and key page mockups to illustrate structure and design on various devices - a time consuming affair compared with planning & designing solely for desktop.
Back when we used to design for a dedicated mobile site to complement a desktop site, it was two distinct sites to design for. While it was definitely more work, we could still work pretty successfully with our static workflow as we didn't have to contend with fluid grids, breakpoints & content priority. It was easy to show a client exactly how a site will look/work.
However, demonstrating the behaviour of a responsive site in the UX/design phase of a project within our traditional workflow was tricky. Our clients didn't always "get it". Static or even clickable wireframes/mockups that didn't adapt based on screen resolution were not effective enough.
Wireframes & Prototypes with Foundation
As tools like Twitter Bootstrap and Foundation evolved and became excellent tools for responsive prototyping, we jumped on board. Our clients were thrilled with being able to click through live, responsive prototypes. They could view prototype iterations on their tablets, mobile phones or even scale their browser window down to easily evaluate user experience from mobile through desktop. Internally, our developers and themers also found it easier to build from live wireframes/prototypes. We found this process to be both more effective and efficient. Working iteratively in browser eliminated some of the cumbersome static photoshop-centric processes, reduced time and improved clarity.
There are, however, some drawbacks to this workflow. Managing changes to individual pages, elements and especially navigation is tedious and error prone. We realized this workflow was just one step towards a more effective responsive site design/development workflow.
Next step: Prototypes in Drupal with Zurb Foundation theme
So, making things faster and more effective was a good thing, but in the end, we were left with code that was still a bit tough to update/manage (at least for sites with some complexity). We started looking for more efficiencies. The obvious next step was to make our prototypes easier to iterate on and less disposable. We wanted to get into Drupal sooner in the process so that we had more reusable code.
Since we were already feeling comfortable working with Foundation, we started experimenting with the Zurb Foundation theme for Drupal. We were excited as this allowed us to work with our old buddy Drupal from the start and capitalize on Drupal's native menu system which proved to be helpful for prototyping websites with deeper and complex structure. It gave us the same benefit of live, clickable and responsive prototypes but with the added perk of Drupal's infrastructure to speed things along. It reduced the pain points of working with Foundation on it's own and gave us the potential of carrying through the prototype's Drupal codebase through to production. Generally a more agile, iterative approach with less throw-away code.
Still some hurdles
Our ultimate goal is to use a single Drupal install from sitemap to prototype to in-browser design and on through config and theming. We've still got a way to go, but we do have some tools in the works to help us realize this goal. We'd love to hear a bit more about what others are doing with their Drupal-centric workflows. Specifically when it comes to transitioning from prototype to production. So please chime in!