1. 1
Dynamic Media
&
Responsive Web Design
Ben Seymour
Director, Professional Services

2. World of devices
“The web is an inherently unstable medium” : Ethan Marcotte
Credit: Tom Maslen

3. World of devices : Consoles!
1 in 5 16-24 year olds use a console to visit websites
Ofcom International Communications Report 2011
“The point of creating [responsive] sites is to create functional (and hopefully
optimal) user experiences for a growing number of web-enabled devices and
contexts.” ~ Brad Frost
Credit : Anna Debenham : Wealth of resources at: http://console.maban.co.uk/

4. Content First
Content first on BBC news site:
e.g. if an image was central to a story then it would
always be included, otherwise considered optional
“Cutting the Mustard”
Tom Maslen
What does it mean for Internet Retailers?
“Content : Enhancement :
Leftovers”
Andy Hulme

5. Image Asset re-use
How often are your Media Assets
repurposed across your site?
How many shots and
variants do you utilise
per product?

6. Product Image re-use

7. Content Forking

8. Dynamic Media
Ordinarily, there aren’t
any silver bullets….

9. Dynamic Media – What is it
Store - Manage - Enhance - Deliver
Deliver dynamically rendered images and videos
into any channel and device format from a
single master asset.
How it works:
 High res master assets (images and video)
bulk uploaded to Amplience servers served
through a simple URL request.
 The URL defines:
 Image size, quality, format, crop/sharpen
 The images are then served out via a CDN
 Multiple, configurable viewer with zoom (in
viewer, fly out, full screen) and 360-spin
 Output to browsers, tablets and mobiles

10. Amplience Asset Ingestion
10

11. Amplience Asset Request
11
An image request is just a URL:
http://images.yourdomain.com/i/accID/assetID.jpg
Image control parameters are passed in to the querystring:
http://images.yourdomain.com/i/accID/assetID.jpg?w=150&fmt=jpg&qlt=85
Migrating to Amplience Dynamic Imaging for static images can therefore be a
simple as updating the source in your img tags <img src=“….” />

12. Responsive Images : Responsive Layout

13. Responsive Images : Tablet Orientation
Adapt layouts to content, and allow them to
then adapt to whatever browsers are in use
the devices in use today, or that may come in
the future

14. Image Search Engine Optimisation
14
Image SEO : decoupling asset ID from ‘apparent’ image asset request:
http://images.yourdomain.com/i/accID/sku/seo_friendly_text.jpg
Which can potentially facilitate improved organic search engine results page
ranking in relation to Image Searches.

15. Amplience Transformational Templates
15
The image control settings for a given page template is typically controlled
through ‘Transformational Templates’:
http://images.yourdomain.com/i/accID/assetID.jpg?$lister_page$
http://images.yourdomain.com/i/accID/assetID.jpg?$hero_image$
e.g. $lister_page$ = width of 150px, format of JPG, 80% compression etc..
Provides the business with control over the visual quality (compression/
sharpening) via the back office, and enable you to undertake image
optimisation without involving site code changes and release cycles

16. TTs : Imaging Rig
16

17. TTs: Page Load Performance
If your analytics suggested list on mobile is loading slowly. Time = Money

18. Amplience Sets
18
Group assets using Sets.
Spin sets containing the assets which sequences images to provide a 360 spin.
Image sets containing a hero image and relevant alternative images
Mixed media sets can mix images, spins, video
Set automation scripts can be setup to apply your business logic to
automatically create the Sets from your uploaded assets.

19. Amplience Viewers
19
Amplience has Spin, Zoom and Video viewers available.
Configurable via the back office, and automatically generating embed code.

20. Video Transcoding

21. Video Transcoding
Thumbnails are auto generated

22. Amplience Viewers
22
Amplience has Video viewers available.
Configurable via the back office, and automatically generating embed code.
Custom Viewers provide additional user experience and design variants

23. Processing Jobs
Automate the generation of derivative, secondary or ancillary assets:
Sets: Spins
Hero & Alts
Images – Spin – Video
Document conversion:
e.g. convert a PDF into images of each page (and forming a Set of
those image of pages), which can then be used either in a simple page
turn experience, or can easily utilised within
Interactive Merchandising Modules, to
produce enriched eCats using data feeds
for product panes or video overlays.

24. Ease of Migration?
How difficult is it to migrate to Amplience Dynamic Media?
Images are HTTP requests : just update img source <img src=“…”/>
Viewer (Spin/zoom/video) auto generated embed code from back office.
A recent US launch went live last month, in less than a month of project time
Key benefits:
 Reduce media production costs by 80%+
 Increase product page conversion by 20%+ with easily configurable media players,
featuring zoom, 360-spin and alternative image views
 Improve image and video SEO with descriptive URL generation
 Automate Rich Media workflow

25. 25
Thank you
for
your time
@bseymour
bseymour@amplience.com