Presenting Responsive Web Designs Tutorial

On October 24th, 2012, Nathan Smith (@nathansmith), Mark Sims (@marksims), and I (@miketownson) gave a presentation on responsive web design at the DSCV (dsvc.org) working lunch.

During our presentation, I showed a set of slides that I made for a client when we were presenting high fidelity designs. The client meeting went well, and I believe much of the success was due to the time and thought that went into the boards before presenting the designs, and the way I presented them using Keynote. This presentation generated a lot of questions about how we made it and what tools we used. I want to explain how easy it is, with a small amount of extra work beforehand, to convey information to your clients.

Keynote Responsive Side-by-Side Tutorial
For this short tutorial, I used Photoshop and Keynote to make a side-by-side scrolling example of the mobile and desktop versions of the client’s site. The side-by-side approach helped drive home the fact that it is the same content, just in a different format.

Download the files for this tutorial here.

How I did it
First, I found 2 high-resolution images of the latest iPhone (iPhone 4S at the time) and the newest Apple monitor. I suggest Teehan + Lax’s amazing iPhone template. Once you have the assets, cut out the screen and export it as a PNG.

Images of an Apple iPhone and Thunderbolt with the screens cut out and saved as a transparent PNG

Next I exported PNG versions of my phone and desktop designs, at full length: They have the correct width of an iPhone and desktop display but encompass the entire vertical dimension of the page.

Full-length designs of the home page, in both phone and desktop formats:

On the left, the mobile version of the responsive site design. On the right, the desktop browser version of the responsive site design. Imagery in comps is from www.simpledesktop.com

[Note: I did not use a browser wrapper for my demo, but feel free to do so if you think it’s important to your client.]

Go into Keynote and import the images of your site design and your iPhone and desktop display. Arrange them how you like, but make sure to send the site design layers to the back and the phone/monitor layers to the front.

Next, move the designs to fit in the screen as if the user just loaded the page and it’s at the top. Duplicate your slide, and move the site design down to where the footer would be.

Lastly, go back to the first slide (the one you duplicated from) and open your transitions panel. Once there, select “Magic Move” and set the time to 11.00 seconds. Keynote will recognize any artwork that is in the previous slide and move it to where it is set in the current slide.

BOOM! Now you have a slick moving display of a responsive site for your clients.

For more information about responsive web design and how to present it to clients, give us a shout: mike.townson@projekt202.com