Thoughts on Responsive Workflow
Some thoughts on how project workflow has changed at our digital agency with the shift towards responsive design, from @iamandyjones.
Now more than ever, content on the web is accessed via a large range of browsers and devices, including tablets and mobile phones - with these devices becoming the primary means of web access for some users. With this shift in the way that content is consumed has come an inevitable change in the process we follow with our clients in order to deliver that content effectively to the widest range of users.
Regardless of the technical approach we opt for, of which responsive web design is one, the same goal remains - our content should be accessible to as many of our users as possible, regardless of the device they are using now, and may be using in the future. The strategy for how we choose to support user devices and habits is something to be established at the beginning of the project. Analytics data can help us here to assess how our users are interacting with content that already exists.
As part of every project, and ahead of any design or build, time is taken to understand the client and its audience. This early planning includes discovery of what users expect from the website, how the audience engages with the web, and what website features will attract and retain visitors. We also try to gain an understanding of the type of content that will be available, in which formats, and how this will need to be managed & updated ongoing. By establishing a structure to the content early, we can be confident our design and build process is focused around a known quantity, even though approved content may arrive late in the day.
Design & Prototype
We've seen quite significant changes to the traditional waterfall design and build process that involved clear signoff and handover of flat design mockups to technical teams for template development and feature integration. This skillset separation and static design process can't and shouldn't be expected to cater for the range of devices and viewports that we need to consider when developing a responsive system. Instead, we've seen an increased crossover, and blurring of boundaries, between design and build. Our creative design process often now involves HTML snippets prototyped directly in the browser, and our technical build process now involves design adjustment. This sees our creative team working directly on HTML templates in collaboration with front-end developers, and also site planners assembling pages using HTML styleguides and pattern libraries. This allows us to be confident early on that our site design has been considered in the medium to which it will be deployed, a browser.
Iterate & Discuss
By working in small teams of mixed skillsets, we can complete multiple rounds of design, build & testing quickly, and discover the good and bad traits of a system early. We also have more opportunities to interact with the client and show examples of individual components and features as they evolve throughout the project. This could be as flat design mockups, HTML prototypes, or both - it changes based on what is most suitable for the project.
This iterative, collaborative process often occurs throughout the full duration of a project (in varying intensities), but it's also how we arrive at early stage designs. Most projects still demand flat creative designs to be as close to signoff as possible before a project can gain real traction. That doesn't mean there hasn't been on-screen behaviour checks completed in various browsers on various devices as we make design concept decisions. Whereas these early-stage designs used to focus on specific pages, we've moved more towards an approach of flexible design systems. Rather than focusing on a specific piece of content and/or pages, instead these demonstrate global, and site-wide design features such as fonts, icons and colour palettes, along with page components such as forms, tabs and layout grids that will be wrapped around our content. Considering these building blocks of our website independently, ensures that they are flexible and not reliant on specific content or location.
We've taken a quick look at how our process for delivering systems to our clients, and delivering content to end users, is changing alongside advances in the way in which people consume web content. With less and less certainty over which devices will be used to interact with our websites, we're working hard to ensure the more the merrier.