Five Lessons from the RWD Classroom
I’ve taught Responsive Web Design (RWD) at a large state university just outside Austin, Texas, for the past two years to almost 200 design students. With support from my colleagues and a handful of designers and agencies in Austin providing priceless input, writing the curriculum for the course was exciting, but not easy. I wanted to make sure that I had a solid curriculum in place that, like its subject matter, could be fluid and iteratively developed to reflect the industry’s needs. I also wanted to have a component where students meet professionals and participate in internships so a big part of the course work includes opportunities to learn from and work with industry professionals in Austin and beyond. Our program also has a modest device lab that fits perfectly into a custom-built briefcase. All these elements together provide what I think is a real-world experience for my students—and I want to keep taking it further.
I always expected that RWD would add to the students’ toolkits, but I never expected that it would entirely shift their way of thinking, or even my own. I’ve realized I’m not just teaching RWD, specifically, but that by teaching responsive design, I’m teaching the following key principles of design as a whole:
1. Be Flexible and Adapt
At a recent talk at the university, Happy Cog designers Sophie Shepherd and Kevin Sharon, shared my favorite answer to every question asked about web design: “It depends”. Responsive Web Design focuses on being flexible and adapting (although, there is a lot more to it than just that). What works for one responsive site may not work for another. Each problem requires a different process that must be tailored reach the best design solution. For some designers that process includes creating Photoshop or Keynote comps, or using StyleTiles or Element Collages, or designing in the browser. Each project or client may need one process over the other. Be open to any of them, or make your own process. Follow what makes sense for the task at hand, rather than a trend that you see is out there.
2. Plan better, plan first
Coding may seem like the hardest part of RWD, but it isn’t. Strategy (be it design, content, or technological) is much harder. Luckily, Jesse James Garrett’s 9 Pillars of Successful Web Teams is a great starting point on planning out the process. By planning out the process first—where design, technology, content, and testing are all factors—it makes it easier to see the big picture. Designers usually visualize the outcome, but can benefit greatly from visualizing the steps and time it takes to reach their goals. Writing out the goals is extremely valuable, as well. Students write proposals for each project that includes the problem, how they intend to solve it, what technology they anticipate using, who their audience is, and who the competition is. Then, if they ever reach a roadblock or a moment of indecision, they look back at their proposals, realign and get back on track, or on a newer, better track. Design the process, then design.
3. Expand your Audience
In the first semester of the course, we designed just for iPhones and iPads, because we are a predominantly Apple device program. Then Android. Then Samsung Galaxies, and now even Kindles. We used what we had. Once we received funding for our mini device lab, the flood gates opened, as they should have. We stopped making media queries for devices, and made them for design/grid changes when needed. Expanding our device lab expanded our audience, and our understanding of that audience and their experience. Now, students think beyond what their experience is and what they know, put themselves in someone else’s shoes, and make better work that goes beyond just the visuals. Step outside of your office, away from your desk, and wear a different thinking cap. And, if you don’t have access to a device lab, do what my students do: go to a local electronics store and test your sites on display devices.
4. Get feedback
Having 20 or so students per class—who can open each others’ sites wherever and whenever they want—means there is a lot of feedback to share. Sometimes, the feedback comes from testing the site in a mobile device lab; other times it comes from users or audience and what they see or need. Either way, the students need to be open to it. A responsive site can’t work without feedback. Feedback is just as important in the design process as the actual design itself. Feedback comes from devices, peers, and even self-critique. Do not avoid it or be afraid of it—embrace it. Think of feedback as free precious knowledge that will help you to grow as a designer.
5. Learn & Unlearn
Design is an evolving process and technique. What a designer learned in 2007 (pre-iPhone), isn’t what a designer needs to know now. It’s a constant process of learning and unlearning. During conversation on Twitter how students and new web designers embrace responsive design, Trent Walton said, “Every 3 years or so, I’ve had to get in the habit of forcing myself to unlearn and rethink.” I completely agree. This is something we will get used to, if we haven’t already. Schools will adapt, clients and businesses will too. With software, devices, and capabilities changing so rapidly, the only constant will be change. We’re all learning, we’re all changing, and we’re all being responsive. The truth is, we’re all students, and that’s the only constant.
I originally wrote this article for .net Magazine in July 2013. In September, the magazine migrated over to Creative Bloq, and the piece has not transitioned over yet. So, I thought I should post it on my own blog, which doesn't seem like a bad idea anyways.