Responsive Images in a CMS - JandBEYOND 2014
?Download as PPTX, PDF?
0 likes?454 views
Comparison of leading Responsive and Adaptive Image serving techniques that are relevant to a CMS environment, with an implementation example of Adaptive-Images.com within Joomla!
Responsive Images in a CMS - JandBEYOND 2014
- 1. RESPONSIVE IMAGES IN A CMS IS SENDING ALL PIXELS TO ALL DEVICES THE "RIGHT ANSWER"? June, 2014Duke Speer J and Beyond
- 2. THIS TALK IS NOT ABOUT MAX-WIDTH: 100%; June, 2014Duke Speer J and Beyond
- 3. WHY LISTEN TO THIS GUY? NO REASON! C JOOMLA! SINCE 2008 JOOMLA! TRADEMARK / LICENSING TEAM GOVERNANCE WORKING GROUP MARKETING TEAM JRD TEAM June, 2014Duke Speer J and Beyond
- 4. June, 2014Duke Speer J and Beyond
- 5. June, 2014Duke Speer J and Beyond
- 6. PLAN THE TERMINOLOGY SET THE STAGE - THE NEED FOR SPEED THE CMS CONTEXT THE RESPONSIVE + ADAPTIVE APPROACH June, 2014Duke Speer J and Beyond
- 7. RWD June, 2014Duke Speer J and Beyond
- 8. RESPONSIVE TO WHAT? June, 2014Duke Speer J and Beyond
- 9. RESPONSIVE OF RWD = 1. FLUID GRID 2. RESPONSIVE IMAGES 3. LAYOUT BREAKPOINTS June, 2014Duke Speer J and Beyond
- 10. 1. FLUID GRID % EM/REM June, 2014Duke Speer J and Beyond
- 11. 2. RESPONSIVE IMAGES .IMG { MAX-WIDTH: 100%; } June, 2014Duke Speer J and Beyond
- 12. 3. LAYOUT BREAKPOINTS MEDIA QUERIES DEFAULT FOR DUMB BROWSERS IN DUMB PHONES C SMALL FILE - UNDER 641 PX - UNDER 1025 PX - OVER 1024 PX June, 2014Duke Speer Joomla and Beyond 14
- 13. MEDIA QUERIES .CONTAINER { BACKGROUND-IMAGE:URL(/slideshow/adaptive-v-responsive-images-jandbeyond-2014/35705542/PIC.JPG"); } @MEDIA ALL AND (MAX-WIDTH: 600PX) { .CONTAINER { BACKGROUND-IMAGE:URL(/slideshow/adaptive-v-responsive-images-jandbeyond-2014/35705542/PIC-SM.JPG"); } } June, 2014Duke Speer Joomla and Beyond 14
- 14. MEDIA QUERIES BACKGROUND V. FOREGROUND MEDIA QUERY FOR IMAGES IN ARTICLES AND BLOGS? June, 2014Duke Speer Joomla and Beyond 14
- 15. THIS TALK IS NOT ABOUT MAX-WIDTH: 100%; June, 2014Duke Speer J and Beyond
- 16. THE NEED FOR SPEED June, 2014Duke Speer J and Beyond
- 17. HE NEED FOR SPEED June, 2014Duke Speer
- 18. E NEED FOR SPEED HTTP://BLOG.KISSMETRICS.COM/WP- ONTENT/UPLOADS/2011/04/LOADING-TIME.PDF June, 2014Duke Speer
- 19. ED FOR SPEED HTTP://BLOG.KISSMETRICS.COM/WP- NT/UPLOADS/2011/04/LOADING-TIME.PDF June, 2014Duke Speer
- 20. THE NEED FOR SPEED HTTP://BLOG.KISSMETRICS.COM/WP- CONTENT/UPLOADS/2011/04/LOADING-TIME.PDF June, 2014Duke Speer J and Beyond
- 21. THE MAIN CONCERNS DRAWN HEAVILY FROM: HTTP://CSS-TRICKS.COM/WHICH- RESPONSIVE-IMAGES-SOLUTION-SHOULD- YOU-USE/ HTTPS://DOCS.GOOGLE.COM/SPREADSHEE T/CCC?KEY=0AL0LI17FOL9DDDGXTFVORZF PV3VCDHK2NTBMDVI2OXC#GID=0 June, 2014Duke Speer J and Beyond
- 22. VALID SUPPORTED HTML? June, 2014Duke Speer J and Beyond
- 23. VALID SUPPORTED HTML? <PICTURE ALT="DESCRIPTION"> <SOURCE SRC=/slideshow/adaptive-v-responsive-images-jandbeyond-2014/35705542/"SMALL.JPG"> <SOURCE SRC="MEDIUM.JPG" MEDIA="(MIN-WIDTH: 400PX)"> <SOURCE SRC="LARGE.JPG" MEDIA="(MIN-WIDTH: 800PX)"> </PICTURE> <NOSCRIPT><IMG SRC=/slideshow/adaptive-v-responsive-images-jandbeyond-2014/35705542/></NOSCRIPT> PICTUREFILL June, 2014Duke Speer J and Beyond
- 24. JAVASCRIPT DEPENDENCY? <PICTURE> </PICTURE> <NOSCRIPT><IMG SRC=/slideshow/adaptive-v-responsive-images-jandbeyond-2014/35705542/></NOSCRIPT> PICTUREFILL June, 2014Duke Speer J and Beyond
- 25. THIRD PARTY CDN? SENCHA.IO *REQUIRES IMG TAG ADJUSTMENT June, 2014Duke Speer J and Beyond
- 26. SERVER-SIDE / BROWSER SNIFFING? WURFL DATABASE WIRELESS UNIVERSAL RESOURCE FILE 3RD PARTY SERVICES DEVICE ATLAS CLOUD, ET AL June, 2014Duke Speer J and Beyond
- 27. BANDWIDTH TESTING? FORESIGHT.JS (& HISRC) June, 2014Duke Speer J and Beyond
- 28. CHANGING MARKUP / VIEWS? <IMG SRC=/slideshow/adaptive-v-responsive-images-jandbeyond-2014/35705542/"200X100.PNG" DATA-1X="400X200.PNG" DATA-2X="800X400.PNG"> HISRC June, 2014Duke Speer J and Beyond
- 29. ART DIRECTION? June, 2014Duke Speer J and Beyond
- 30. June, 2014Duke Speer J and Beyond 24 SOLUTIONS C REALLY?
- 31. June, 2014Duke Speer J and Beyond 24 SOLUTIONS C REALLY?
- 32. THE CMS CONTEXT RECONSTRUCTING THE IMAGE TAG? YES: HTTP://ARCHIVE.KEIRWHITAKER.COM/ARCHIVE /AUTOMATIC-RESPONSIVE-IMAGES-IN- WORDPRESS/ 1000S OF LEGACY ARTICLES NO: HTTP://ADAPTIVE-IMAGES.COM June, 2014Duke Speer J and Beyond
- 33. LEGACY CONTENT? June, 2014Duke Speer J and Beyond
- 34. ADAPTIVE TO THE RESCUE? MATTHEW WILCOX ONE HTACCESS FILE ONE PHP FILE A SINGLE LINE OF JAVASCRIPT ADAPTIVE-IMAGES.COM June, 2014Duke Speer J and Beyond
- 35. INSERT IN .HTACCESS <IFMODULE MOD_REWRITE.C> OPTIONS +FOLLOWSYMLINKS REWRITEENGINE ON # ADAPTIVE-IMAGES ---------------------------------------- # ADD ANY DIRECTORIES YOU WISH TO OMIT ON A NEW LINE, AS FOLLOWS: # REWRITECOND %{REQUEST_URI} !SOME-DIRECTORY REWRITECOND %{REQUEST_URI} !TEMPLATES REWRITECOND %{REQUEST_URI} !MEDIA # SEND ANY GIF, JPG, OR PNG REQUEST THAT IS NOT STORED INSIDE ONE OF THE ABOVE DIRECTORIES # TO ADAPTIVE-IMAGES.PHP SO WE CAN SELECT APPROPRIATELY SIZED VERSIONS REWRITERULE .(?:JPE?G|GIF|PNG)$ ADAPTIVE-IMAGES.PHP # END ADAPTIVE-IMAGES ---------------------------------------- </IFMODULE> June, 2014Duke Speer J and Beyond
- 36. NGINX: VIRTUAL HOST CFG INSERT INSIDE SERVER BLOCK: LOCATION ASSETS { } LOCATION AI-CACHE { } LOCATION / { REWRITE .(?:JPE?G|GIF|PNG)$ /ADAPTIVE-IMAGES.PHP; } June, 2014Duke Speer J and Beyond
- 37. SET SETTINGS IN PHP FILE /* CONFIG ------------------------------ */ $RESOLUTIONS = ARRAY(1382, 992, 768, 480); // THE RESOLUTION BREAK-POINTS TO USE (SCREEN WIDTHS, IN PIXELS) $CACHE_PATH = "AI-CACHE"; // WHERE TO STORE THE GENERATED RE-SIZED IMAGES. SPECIFY FROM YOUR DOCUMENT ROOT! $JPG_QUALITY = 80; // THE QUALITY OF ANY GENERATED JPGS ON A SCALE OF 0 TO 100 $SHARPEN = TRUE; // SHRINKING IMAGES CAN BLUR DETAILS, PERFORM A SHARPEN ON RE-SCALED IMAGES? $WATCH_CACHE = TRUE; // CHECK THAT THE ADAPTED IMAGE ISN'T STALE (ENSURES UPDATED SOURCE IMAGES ARE RE-CACHED) $BROWSER_CACHE = 60*60*24*7; // HOW LONG THE BROWSER CACHE SHOULD LAST (SECONDS, MINUTES, HOURS, DAYS. 7DAYS BY DEFAULT) /* END CONFIG ------ DON'T EDIT ANYTHING AFTER THIS LINE -------------- */ June, 2014Duke Speer J and Beyond
- 38. INSERT JS IN <HEAD>* <SCRIPT>DOCUMENT.COOKIE='RESOLUTION=' +MATH.MAX(SCREEN.WIDTH,SCREEN.HEIGHT)+("DEVICEPIXELRA TIO" IN WINDOW ? ","+DEVICEPIXELRATIO : ",1")+'; PATH=/';</SCRIPT> *MUST BE FIRST JAVASCRIPT EXECUTED IN HEAD. June, 2014Duke Speer J and Beyond
- 39. LOW MAINTENANCE WORKS WITH APACHE AND NGINX /AI-CACHE CLEANOUT June, 2014Duke Speer J and Beyond