Since we were talking about designing for mobile browsers earlier, I want to point out some tips for creating animations and slideshows without using Flash, which doesn’t work on iPhone or iPad and can bog down other mobile browsers.

I’m an Apple junkie, so I know a lot more about their devices than about others (but if Apple keeps messing around with making it difficult to get subscriptions and buy media for apps like Kindle and Sony Reader, I may have to switch to an Android phone), so let’s start with some features that make SiteGrinder especially useful for designing for iP* mobile devices.

• Animated CSS image galleries that work on the iPad
• Lightbox display of gallery images
• Easily embed your favorite YouTube video, viewable on iPads
• Place QuickTime and MPEG movies anywhere on the page
• Create finger friendly drop down menus
• Support for CSS drop shadows, rounded corners and transparencies
• Use two finger scroll to navigate long text in small areas

Next week, I will post more how-to details for most of these topics. For now, let’s look at how to create animated CSS image galleries that work on the iPad.

SiteGrinder Animated CSS

As of SiteGrinder 3.04, the SiteGrinder Animated CSS Picturebox is lightweight and requires no Flash plug-in so it works on the iPad yet still supports animated crossfade transitions.

What’s a Picturebox?

While not required for any gallery, a picturebox is often the main event for a gallery.  It’s the rectangular area of the page where the actual image you are navigating to should appear, and it’s often the most visually prominent part of a gallery.  While pictureboxes are not strictly necessary, most galleries feature one.

How do you make a Picturebox?

To make a picturebox just create a rectangular filled area in an image layer or a rectangular object layer and add the “-picturebox” hint to the end of its name.

Congratulations.  With only one Photoshop layer you’ve just made a simple, yet complete, gallery!  Why is it complete?  A single picturebox is the simplest possible complete gallery because many picturebox types support navigation from image to image.   The simplest picturebox can move to the next image in the gallery when you click it, for example. (You upload your images to the picturebox gallery in the Control Manager.)

How is a picturebox configured?

You determine how you want users to interact with pictureboxes, such as what happens when the box is clicked and whether to protect the images from right-click saving, using the gallery controls in the Design Manager.

The SiteGrinder Animated CSS picturebox-type supports:

• Alignment of images within the box for images smaller than the box
• Auto-play with auto-play timing settings
• Looping or URL to go to at end of show

What about a slide show?

A slideshows is just a self-playing picturebox. To create a slideshow:

1. Create a -picturebox layer in your psd
2. Optionally create a thumbsheet and/or next and previous buttons which can control the slideshow
3. Build your page
4. In the design manager edit the picturebox and choose the “SiteGrinder Animated CSS” type
5. Select your animation settings
6. Deploy and add your images in the Content Manager

The main slideshow on the medialab.com home page is a -picturebox set to use the Animated CSS display option, and it looks great even on my iPhone! (On this blog page, the same images are combined into an animated gif.)