Progressive Enchantment: Crafting a Responsive Redesign

With my cohorts, or partners in crime as they may become, we will knock the socks off of the audience and NTEN staff when we redesign the NTEN homepage!

Crafting a Responsive Website RedesignDaniel Ferro of Forum One, Sean Powell of The Engage Group, and myself, Karin Tracy of Confluence are excited to have the opportunity to create an exciting presentation and panel discussion for NTEN’s 2014 Nonprofit Technology Conference in March. We all represent DC-based firms and are thrilled to have NTC ’14 in the beautiful Woodley Park neighborhood of Washington, DC.

So how did three strangers come together and craft a presentation and panel discussion on responsive design? After each submitting individual RD presentations, NTEN approached us to see if we were interested in working together on a joint presentation. Ever the adventurers, we all said yes and dove in. It’s a rare treat to get to collaborate with peers outside of your company and we make a pretty cool trio. My background is in creative strategy and user experience, Daniel is a designer through and through and Sean is a lead developer who is used to working with creatives. After a few brainstorming sessions by phone, the three of us met for a pint of beer at an Irish pub…and cue the revelatory lightbulb!

Rather than trying to find a common thread from our companies’ responsive design projects – a task that felt too one-sided for a panel discussion, we decided to completely recreate the NTEN home page as a responsive design.

We are approaching this “redesign” in a similar manner to a real project, save the discovery and client interviews. I am responsible for creating a responsive wireframe that clearly organizes and presents all necessary homepage content and we will integrate some additional functionality and user interface options than are present on the current homepage.  In the spirit of educating the audience, I will create – and demonstrate – a variety of ways to wireframe a webpage, from quite simple to a fully responsive codebase.

Daniel will take my wireframes and, with a handoff discussion similar to one we would have within the workplace, I’ll explain the various user experience (UX) decisions that we made, hierarchy of content, areas that will need more, or less, flexibility and so on. He will design the user interface, or the visual display, of the NTEN homepage using the wireframe as the supporting structure. Always of interest, we will see how the user interface varies from the wireframe. Great designers know that a wireframe is a structural tool; the design is what brings the experience to life.

After Daniel finishes the design, he’ll work with Sean on the handoff and ensure that Sean has the visual assets and components he needs to code the page using HTML5 and CSS3. Sean will look to the wireframes as well while he’s composing the overall page markup. Thorough testing of the homepage in myriad end devices – after all, that’s the point of responsive design – will occur before we declare the homepage “ready to go live!”

Our presentation will describe our efforts, methodologies, and tools used, in addition to conveying the types of internal conversations necessary during a project that spans multiple departments and skill sets. The session will be useful for any nonprofit professional thinking about, involved with, or managing a responsive website. It will not be an overly technical discussion but we are sure it will appeal to professionals within a range of positions, from EDs to marketing to IT. We expect the presentation and panel discussion to be a lively, informative session and we are excited to see many of you in lovely DC in a few months!