Dynamic Media and Responsive Web Design


Published on

Published in: Technology, Art & Photos
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Dynamic Media and Responsive Web Design

  1. 1. 1 Dynamic Media & Responsive Web Design Ben Seymour Director, Professional Services
  2. 2. World of devices “The web is an inherently unstable medium” : Ethan Marcotte Credit: Tom Maslen
  3. 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. 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. 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. 6. Product Image re-use
  7. 7. Content Forking
  8. 8. Dynamic Media Ordinarily, there aren’t any silver bullets….
  9. 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. 10. Amplience Asset Ingestion 10
  11. 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. 12. Responsive Images : Responsive Layout
  13. 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. 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. 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. 16. TTs : Imaging Rig 16
  17. 17. TTs: Page Load Performance If your analytics suggested list on mobile is loading slowly. Time = Money
  18. 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. 19. Amplience Viewers 19 Amplience has Spin, Zoom and Video viewers available. Configurable via the back office, and automatically generating embed code.
  20. 20. Video Transcoding
  21. 21. Video Transcoding Thumbnails are auto generated
  22. 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. 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. 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. 25 Thank you for your time @bseymour bseymour@amplience.com