Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Adaptive images


Published on

Adaptive images with DNN Mobile-friendly, "responsive" websites are a trend in web development. If you are creating a new web site, it often makes sense to include a mobile strategy. Designers and developers will need to learn about media queries, and how to manipulate HTML for various screen sizes (resizing images to download smaller images for an often slower-bandwidth context). In the session we will explore strategies for adaptive images within DNN.

  • Be the first to comment

  • Be the first to like this

Adaptive images

  1. 1. Adaptive Images with DNN 200 Kb 100 Kb 70 Kb 30 Kb 1382px X 778px 992px X 559px 768px X 443px 480px X 271pxTuesday, April 16, 13
  2. 2. Thanks to all our Generous Sponsors! TextTuesday, April 16, 13
  3. 3. What We’ll Cover • What is Responsive Design • What are Adaptive Images • The state of Adaptive Images • Adaptive Images within DNN • The future of Adaptive ImagesTuesday, April 16, 13
  4. 4. What is Responsive DesignTuesday, April 16, 13
  5. 5. What are Adaptive ImagesTuesday, April 16, 13
  6. 6. The Current State Filament Group Solution Matt Wilcox Solution Dave McDermid .net Port retina.js, April 16, 13
  7. 7. Matt Wilcox Solution 1 2 3 4 Download the Upload the Add this line of Configure the latest version of included .htaccess JavaScript: $resolutions Adaptive Images. and adaptive- variable to match images.php files to the breakpoints the server document- you are using for root. your designs.<script>document.cookie=resolution=+Math.max(screen.width,screen.height)+; path=/;</script>Tuesday, April 16, 13
  8. 8. Adaptive Images in DNN • Open source module • Settings set on Host menu • Have not used in production • Have not load tested, April 16, 13
  9. 9. Future of Adaptive Images <picture  width="100%"  height="100%">    <!-­‐-­‐  Mobile  Layout  -­‐-­‐>    <source  media="(max-­‐width:  30em)"  src="img/race@mobile.jpg">              <!-­‐-­‐  Tablet  Layout  -­‐-­‐>    <source  media="(min-­‐width:  48em)  and  (max-­‐width:  60em)"  src="img/race@tablet.jpg">    <!-­‐-­‐  start:  Stationary  Devices  -­‐-­‐>    <source  media="(min-­‐width:  60em)  and  (max-­‐width:  80em)"  src="img/race@desktop.jpg">    <!-­‐-­‐  Source  intended  for:  Notebooks  and  normal  Desktop  Layouts  -­‐-­‐>    <source  media="(min-­‐width:  80em)"  src="img/race@hires.jpg">    <!-­‐-­‐  fallback  img  if  picture  is  not  supported  -­‐-­‐>    <img  src="img/race@fallback.jpg"  alt="A  very  exciting  yacht  race.">    <!-­‐-­‐  alternate  text  -­‐-­‐>    <p>A  very  exciting  yacht  race.</p> </picture>Tuesday, April 16, 13
  10. 10. Thanks! Any Questions? Jeff McWherter @jmcw www.gravityworksdesign.comTuesday, April 16, 13