View
1.280
Download
0
Category
Preview:
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.
Citation preview
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/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
www.gravityworksdesign.com
Jeff McWherter
Thanks! Any Questions?
jeff@gravityworksdesign.com@jmcw
Tuesday, April 16, 13
Recommended