• Like
  • Save
Dynamic Media and Responsive Web Design
Upcoming SlideShare
Loading in...5
×
 

Dynamic Media and Responsive Web Design

on

  • 672 views

 

Statistics

Views

Total Views
672
Views on SlideShare
574
Embed Views
98

Actions

Likes
0
Downloads
0
Comments
0

4 Embeds 98

http://benseymour.com 87
https://www.linkedin.com 6
http://www.linkedin.com 4
http://plus.url.google.com 1

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Dynamic Media and Responsive Web Design Dynamic Media and Responsive Web Design Presentation Transcript

    • 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 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/
    • 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: 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.
    • 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 Thank you for your time @bseymour bseymour@amplience.com