Adaptive Images with DNN
200 Kb1382px X 778px
100 Kb992px X 559px
70 Kb768px X 443px
30 Kb480px X 271px
Tuesday, April 16, 13
Thanks to all our Generous Sponsors!
Text
Tuesday, April 16, 13
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 Images
Tuesday, April 16, 13
What is Responsive Design
Tuesday, April 16, 13
What are Adaptive Images
Tuesday, April 16, 13
The Current StateFilament Group Solutionhttp://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/
Matt Wilcox Solutionhttp://adaptive-images.com/
Dave McDermid .net Porthttps://github.com/davemcdermid/AdaptiveImages
retina.jshttp://retinajs.com/
Tuesday, April 16, 13
Matt Wilcox Solution
1 2 3 4
Download the
latest version of
Adaptive Images.
Upload the
included .htaccess
and adaptive-
images.php files to
the server document-
root.
Add this line of
JavaScript:
Configure the
$resolutions
variable to match
the breakpoints
you are using for
your designs.
<script>document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/';</script>
Tuesday, April 16, 13
Adaptive Images in DNN
• Open source module• Settings set on Host menu• Have not used in production• Have not load tested
https://github.com/gravityworks/GravityWorks.DNN.AdaptiveImagesTuesday, April 16, 13
Future of Adaptive Images
<picture width="100%" height="100%"> <!-‐-‐ Mobile Layout -‐-‐> <source media="(max-‐width: 30em)" src="img/[email protected]"> <!-‐-‐ Tablet Layout -‐-‐> <source media="(min-‐width: 48em) and (max-‐width: 60em)" src="img/[email protected]">
<!-‐-‐ start: Stationary Devices -‐-‐> <source media="(min-‐width: 60em) and (max-‐width: 80em)" src="img/[email protected]">
<!-‐-‐ Source intended for: Notebooks and normal Desktop Layouts -‐-‐> <source media="(min-‐width: 80em)" src="img/[email protected]">
<!-‐-‐ fallback img if picture is not supported -‐-‐> <img src="img/[email protected]" alt="A very exciting yacht race.">
<!-‐-‐ alternate text -‐-‐> <p>A very exciting yacht race.</p></picture>
Tuesday, April 16, 13
www.gravityworksdesign.com
Jeff McWherter
Thanks! Any Questions?
[email protected]@jmcw
Tuesday, April 16, 13
Recommended
