Responsive Design and Animatics

The Question

To really define what this article is about and the problem I wanted to tackle, I had to ask myself what I was REALLY looking for. I believe that there have been some great articles written about responsive design and its purpose in web design. I think most would agree that it is a viable practice which isn’t going to be leaving us anytime too soon in the future. Smashing Magazine had a great article by Kayla Knight, Responsive Web Design: What It Is and How to Use It, all about responsive design and practical application. Kayla Knight relies heavily on Ethan Marcotte’s article on responsive web design and fluid grids, the list goes on and on.

So as a web or visual or interactive or experience or graphic based designer, how could my process change to work with responsive design?

Other’s Ideas

This hasn’t been a recent question mind you. I’ve been on the lookout for solutions and ideas to this problem. Many have offered up solutions here and there. Those like Style Tiles, Responsive Wireframing, Bearded Studios, have suggested certain things and ideas which I find very interesting and look forward to hearing more about them. I’m not for or against mocking responsive sites up in browser though I have my concerns. What are those concerns? Well I’m glad you asked!

Concerns

My concerns mostly fall under the wonderful process that our industry has tried so hard to build. A process which helps establish designers and developers as more than mere service based grunts but as actual scientists and thinkers. It took us almost two decades to figure out that we could be more than “pretty makers” or “code junkies” and I’d hate to devolve back into my keyboard mashing ancestor, the one with the baggy jeans and Cake albums playing on my portable cd player.

There has to be other ways to incorporate responsive thinking, visualization, and movement into the process which would be beneficial, even slightly, to those involved. To add to the existing pool of experience and knowledge without taking away from it. 

Animators and Animatics

Animation has been dealing with the issue of…well…animation for as long as its existed (go figure). Just because they have to figure out how to make something move and react they didn’t decide just to animate it and see what happens. They realized the importance and purpose of having a process to identify problems before they hit them. Saving them time and money in the long run so they could produce the best quality, pleasing them and the client.

Animators generally start with a storyboard which details the important aspects of the animation in question. They highlight important moments, camera angles, facial expressions, and generally pitch the story moving through the boards at the proper time and pacing. If they can solve the issue now, before they’ve invested a lot of time then the time they put into the beginning is already worth what they would’ve spent at the end.

Next they generally move on to an animatic, which basically takes the proposed sketches and visualizes them. Timing, movement, transitions, sound, are all considered and watched in these. Take the Gorilla’s animatic for Dirty Harry as an example. It pretty effectively sums up the music video and tackles all the major parts without having to go too far in depth. For an even better example, almost weird actually, check out this Avatar: Last Airbender animatic (the cartoon not the movie, wipe the worried look of your face)

Who Cares?

How does this effect us? Maybe it does maybe it doesn’t. The real concern with responsive design is not knowing how a design will actually respond while in browser. Where are the break points? How should everything collapse? How should it expand? Etc. By taking a page from animators we could include a new section into the process after the initial wire framing, even after initial concept sketching on post it notes if you want! It just becomes a matter of plugging content or design in whatever form and planning out the interactions.

This could be done in an animatic fashion. Take the initial sketches of wireframes with planned content and navigation, place them into a program like Adobe After affects and map out several different ways that content could shift, react, or change. Why would this be worth your time? Maybe its not. It does provide you with a “responsive looking” mock up to either discuss, test, or fight over. It gives you a deliverable to a client who may have no idea what they’re paying you to do. Yes, its another step to the process. Yes, it will require fairly basic knowledge of any sort of animation or editing program. Yes, it doesn’t really address the biggest problem of where and how will a design break. It could help both parties know what to design for. With a solid plan and visuals to back up a thought process, it should be possible to get both working smoothly. I’ve never tested it as of yet so I can’t honestly say.

The Moral of the Story

Whether or not the idea has much clout behind it isn’t the real point. The real point is that responsive web design shouldn’t be “forced” into cutting corners because we aren’t sure what to do with it. The reality of the situation may be that it requires a tool we haven’t been given yet. One that allows for quick, responsive mockups. One that could even be saved as a PDF deliverable for clients to expand, which changes its design whether its viewed on a smartphone or tablet. How cool would that be? Perhaps its time everything we use becomes responsive…they’re already testing the idea out in architecture.

I think its important to look outside of the normal box we are in. There are a myriad of great ideas and solutions that other fields have discovered that we should pull from. I know of others who are now using Keynote and Powerpoint to mock up mobile apps. Utilizing the transitions, animations, etc that can be used in those applications. With CSS 3 and HTML 5 we can create in browser presentations (Its already happened) which use transitions but shouldn’t important presentations still be planned out before jumping in? 

Maybe its a combination of the ideas that have been presented. Maybe as the site is developed there is a large push for ideation as the basics are figured out. Again, I don’t know what the answer is but I look forward to seeing what happens.

Brant Day