How to create a website screenshot slideshow on the iPad

When showing to a client a gallery of sample web pages – for market research or styling exploration – I find it useful to quickly flip thorugh a number of saved web pages snapshots, rather than .

These images are often quite large in vertical size,and this poses a small challenge: it is not immediate to flip through them and view the “actual size” image, rather than the whole page fitted into the screen.

While on a desktop this can be easily accomplished with image viewers such as Xee (MAc, free) or ACDSee (Windows), on the iPad it requires a bit more work.

A workflow that is currently working for me is the following:

  • Save the web pages as PNG files
  • Transform the images into PDF files
  • Combine the individual PDF files into a single PDF files
  • Open it on the iPad with GoodReader

Save the web pages as PNG files

To do this, there are many free browser extensions available, the one I’m using right now is Abduction  for Firefox.

There are also standalone application

Transform the images into PDF files

There are many ways to do these. Being a Pgotoshop users, I have just recorded a simple Save action and saved it as a droplet. I have used a modified version of the High Quality Print settings in the Save as PDF dialog, which seems to be a good compromise between quality and file dimensions: the pdf files usually ends up being slightly smaller than the original png files.

Combine the individual PDF files into a single PDF files

Being on a Mac, I have used Automator to create a simple two-steps workflow that does just this, saving a copy of the final file on the desktop

Open it on the iPad with GoodReader

Once the file is ready I transfer it to GoodReader on the iPad – usually through a synced Dropbox folder. On the app’s settings, in the Viewing PDF section, you need to check the following options:

  • Horizontal Swipe
  • Fit page to width (both portrait and landscape)

This will allow us to open the pdf fileso that it looks like the pages are viewed through a web browser, and at the same time we are able to switch among the different pages/images by just swiping horizontally.

Also, Goodreader’s built-in PDF nnotation tools will make it easy to add some comments and bookmarks.

The main drawback is that to keep image quality high each image can be several MB in size, so the final PDF might result quite large.

Leave a comment