At mStoner, we’ve taken a really open-minded approach to different processes of designing for responsive web design (RWD). I think we all agreed early on that it was important to try a few things. While we’re still forming our best approaches for RWD as it relates to higher ed, the challenge I want to address specifically is our template suite design process: how we compose the different kinds of pages that content editors can choose from in the content management system once a site is live.
Photoshop may still be a tried and true way for landing on initial styles and/or concept design, but designing the actual body of the site and its various internal pages with static graphics isn’t the most efficient deliverable anymore. It’s more difficult for the client to approve an interface without seeing it in-browser where it’s shown at real size and rendered using web fonts. We now can approach the design of site elements in their natural form: with code, in-browser.
We are flexing our processes here, and I now design and do front-end code on a daily basis. With an approved homepage design and a set of strategically drawn-up and user-tested wireframes, I’ve started working with Zurb’s Foundation to code and stylize the template suite. While there are other frameworks out there, it’s the one that mStoner chooses for most of our builds. As a designer, I’ve found it easy to use. There are good tutorials on Lynda.com, and good online courses on Zurb. In collaboration with my CSS-wizard colleague Jim, we’ve been able to troubleshoot things and some of the more complex ideas we dream up.
Tools and things I’ve discovered:
- In the design process, I love being able to share an in-browser prototype with the client so they can see how it works, rather than relying on a description of theoretical functionality with a static comp.
- Adobe Edge Inspect is tops at quickly previewing device views.
- Typecast is an incredibly powerful tool, it lets me use and design with specific fonts hosted by various web type services.
- This process lends itself to good design for tablets, an increasingly important platform.
What we’re trying to do is to provide a more tangible design deliverable. Designing in-browser may not save total time spent on the process, but it certainly enhances the thoughtfulness and usability of the final product.