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.
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.
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:
[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: firstname.lastname@example.org