SlideShare ist ein Scribd-Unternehmen logo
1 von 10
Downloaden Sie, um offline zu lesen
Adaptive Images with DNN



      200 Kb             100 Kb           70 Kb           30 Kb
  1382px X 778px        992px X 559px   768px X 443px   480px 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 State
  Filament Group Solution
  http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/


  Matt Wilcox Solution
  http://adaptive-images.com/


  Dave McDermid .net Port
  https://github.com/davemcdermid/AdaptiveImages


  retina.js
  http://retinajs.com/




Tuesday, April 16, 13
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
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.AdaptiveImages
Tuesday, 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
Thanks! Any
      Questions?

   Jeff McWherter

 jeff@gravityworksdesign.com
            @jmcw




                        www.gravityworksdesign.com
Tuesday, April 16, 13

Weitere ähnliche Inhalte

Kürzlich hochgeladen

Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 

Kürzlich hochgeladen (20)

Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slides
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 

Empfohlen

How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
ThinkNow
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
 

Empfohlen (20)

2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 

Adaptive images

  • 1. Adaptive Images with DNN 200 Kb 100 Kb 70 Kb 30 Kb 1382px X 778px 992px X 559px 768px X 443px 480px X 271px Tuesday, April 16, 13
  • 2. Thanks to all our Generous Sponsors! Text Tuesday, April 16, 13
  • 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 Images Tuesday, April 16, 13
  • 4. What is Responsive Design Tuesday, April 16, 13
  • 5. What are Adaptive Images Tuesday, April 16, 13
  • 6. The Current State Filament Group Solution http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/ Matt Wilcox Solution http://adaptive-images.com/ Dave McDermid .net Port https://github.com/davemcdermid/AdaptiveImages retina.js http://retinajs.com/ Tuesday, April 16, 13
  • 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. 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.AdaptiveImages Tuesday, April 16, 13
  • 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. Thanks! Any Questions? Jeff McWherter jeff@gravityworksdesign.com @jmcw www.gravityworksdesign.com Tuesday, April 16, 13