adaptive images
DESCRIPTION
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.TRANSCRIPT
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