10
Adaptive Images with DNN 200 Kb 1382px X 778px 100 Kb 992px X 559px 70 Kb 768px X 443px 30 Kb 480px X 271px Tuesday, April 16, 13

Adaptive images

Embed Size (px)

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

Page 1: Adaptive images

Adaptive Images with DNN

200 Kb1382px X 778px

100 Kb992px X 559px

70 Kb768px X 443px

30 Kb480px X 271px

Tuesday, April 16, 13

Page 2: Adaptive images

Thanks to all our Generous Sponsors!

Text

Tuesday, April 16, 13

Page 3: Adaptive images

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

Page 4: Adaptive images

What is Responsive Design

Tuesday, April 16, 13

Page 5: Adaptive images

What are Adaptive Images

Tuesday, April 16, 13

Page 6: Adaptive images

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

Page 7: Adaptive images

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

Page 8: Adaptive images

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

Page 9: Adaptive images

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

Page 10: Adaptive images

www.gravityworksdesign.com

Jeff McWherter

Thanks! Any Questions?

[email protected]@jmcw

Tuesday, April 16, 13