Phosys web design

Phosys web design

iPhones, iPads and Flash: An Update

Back at the beginning of 2011 we wrote a post on our changing approach to Flash, which you can see here.

This follow-up post will cover some of the new additions we’ve made to our collection of galleries in the past 12 months.

 ***

It’s safe to say that the advent of the iPad (and tablet devices in general) has changed the way a lot of people get online and view websites. This has some far-reaching consequences for web design as whole; it means we’re creating more ‘touchscreen friendly’ chunky buttons and menus, we’re changing how we lay out pages and testing in a much greater variety of resolutions and devices. This is a big topic worthy of much more consideration, so we’ll leave those details for another time. In photography website design, the change with probably the biggest impact has been Apple’s decision to drop Flash from its mobile devices.

Flash is much-maligned on the web (with good reason – see usability expert Jakob Nielsen’s article “Flash: 99% bad” from way back in 2000) – however it does create dynamic and exciting transitions and slideshow formats that make photography websites more interesting and impressive to browse.

Prior to Apple’s ban on Flash, we installed Flash ‘plugins’ (Flash galleries that sit inside an HTML website) as a first-choice right up until the iPad was released and the tide began to turn. In 2011 many of the questions at the Focus On Imaging and SWPP trade shows were on Flash galleries and how images would be displayed on iPhones and iPads. New and existing customers alike were calling to ask our opinion on Flash and its use on their websites.

We decided fairly quickly to stop using Flash as our first-choice for new websites, and began developing some alternatives using jQuery, a Javascript library. jQuery is well-supported by mobile devices and is seen by many as the natural successor to Flash.

You’ll see from the examples below that, if anything, jQuery makes for better slideshows than the Flash alternative. We can customise these new slideshows with close control over the structure of the code, the position of the elements and the appearance of buttons and active elements. Best of all, the new jQuery galleries function perfectly on the vast majority of mobile devices and internet browsers.

Here is a selection of the new galleries, with examples:

Cycle

A simple, classic slideshow, Cycle allows for soft blended transitions or a quick switch of images with a variable delay. Also includes the option for button controls to allow visitors to skip forward and back.

Example: http://www.pbphotos.co.uk/

SmoothDivScroll

SmoothDivScoll animates images into a sliding horizontal gallery. Hotspots on the left and right allow the visitor to speed up the scrolling left or right. Extra buttons can also be added to give an additional increase in speed.

Example: http://desifontaine.co.uk/

Colorbox

Colorbox displays the image on top of the rest of the site. This enables you to have much bigger gallery photos. Also includes captions and forward and back buttons to skip through.

Example: http://www.ukbikerphotos.com/action.aspx

Masonry

Masonry tiles a gallery of images dynamically into rows. Can be used in conjunction with Colorbox to create a seamless array of images.

Example: http://www.martinwardphotography.co.uk/

AD Gallery

AD Gallery is a more traditional slideshow format gallery, with right-to-left image transitions as well as blended effects. You can also display thumbnails of the images underneath so visitors can skip to any photo in the sequence. The main image and thumbnail areas include forward and back controls.

Example: http://www.nigelordsmith.com/weddings/portfolio/

Galleriffic

Similar to AD Gallery, Galleriffic displays a large image with a bank of thumbnails alongside. Options include different grid layouts for the thumbnails and a variety of transitions.

Example: http://www.markcarrphotography.com/

SuperBG

SuperBG dynamically adjusts the image to fill all of the available space on a screen. Used for background images, SuperBG also includes soft fade and rolling transitions.

Example: http://www.ukbikerphotos.com

Leave a Reply