Embed Size (px)
Citation preview
1
Dynamic Media & Responsive Web Design
Ben Seymour Director, Professional Services
World of devices
“The web is an inherently unstable medium” : Ethan Marcotte
Credit: Tom Maslen
World of devices : Consoles!
1 in 5 16-24 year olds use a console to visit websitesOfcom 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/
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
Image Asset re-use
How often are your Media Assets repurposed across your site?
How many shots and variants do you utilise per product?
Product Image re-use
Content Forking
Dynamic Media
Ordinarily, there aren’t any silver bullets….
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
Amplience Asset Ingestion
10
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=“….” />
Responsive Images : Responsive Layout
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
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.
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
TTs : Imaging Rig
16
TTs: Page Load Performance
If your analytics suggested list on mobile is loading slowly. Time = Money
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.
Amplience Viewers
19
Amplience has Spin, Zoom and Video viewers available.
Configurable via the back office, and automatically generating embed code.
Video Transcoding
Video Transcoding
Thumbnails are auto generated
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
Processing Jobs
Automate the generation of derivative, secondary or ancillary assets:
Sets: SpinsHero & AltsImages – 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 feedsfor product panes or video overlays.
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
