Post on 22-Jan-2018
RESPONSIVE IMAGESIN A CMS
IS SENDING ALL PIXELS TO ALL DEVICES
THE "RIGHT ANSWER"?
June, 2014Duke Speer J and Beyond
THIS TALK IS NOT ABOUT MAX-WIDTH: 100%;
June, 2014Duke Speer J and Beyond
WHY LISTEN TO THIS GUY?NO REASON! – JOOMLA! SINCE 2008
JOOMLA! TRADEMARK / LICENSING TEAM
GOVERNANCE WORKING GROUP
MARKETING TEAM
JRD TEAM
June, 2014Duke Speer J and Beyond
June, 2014Duke Speer J and Beyond
June, 2014Duke Speer J and Beyond
PLAN
THE TERMINOLOGY
SET THE STAGE - THE NEED FOR SPEED
THE CMS CONTEXT
THE RESPONSIVE + ADAPTIVE APPROACH
June, 2014Duke Speer J and Beyond
RWD
June, 2014Duke Speer J and Beyond
RESPONSIVE TO WHAT?
June, 2014Duke Speer J and Beyond
“RESPONSIVE” OF RWD =
1. FLUID GRID
2. RESPONSIVE IMAGES
3. LAYOUT BREAKPOINTS
June, 2014Duke Speer J and Beyond
1. FLUID GRID
% EM/REM
June, 2014Duke Speer J and Beyond
2. RESPONSIVE IMAGES
.IMG {
MAX-WIDTH: 100%;
}
June, 2014Duke Speer J and Beyond
3. LAYOUT BREAKPOINTS
MEDIA QUERIESDEFAULT FOR DUMB BROWSERS
IN DUMB PHONES – SMALL FILE
- UNDER 641 PX
- UNDER 1025 PX
- OVER 1024 PX
June, 2014Duke SpeerJoomla and
Beyond 14
MEDIA QUERIES
.CONTAINER {
BACKGROUND-IMAGE:URL(“PIC.JPG");
}
@MEDIA ALL AND (MAX-WIDTH: 600PX) {
.CONTAINER {
BACKGROUND-IMAGE:URL(“PIC-SM.JPG");
}
}
June, 2014Duke SpeerJoomla and
Beyond 14
MEDIA QUERIES
BACKGROUND V. FOREGROUND
MEDIA QUERY FOR IMAGES
IN ARTICLES AND BLOGS?
June, 2014Duke SpeerJoomla and
Beyond 14
THIS TALK IS NOT ABOUT MAX-WIDTH: 100%;
June, 2014Duke Speer J and Beyond
THE NEED FOR SPEED
June, 2014Duke Speer J and Beyond
HE NEED FOR SPEED
June, 2014Duke Speer
E NEED FOR SPEED
HTTP://BLOG.KISSMETRICS.COM/WP-
ONTENT/UPLOADS/2011/04/LOADING-TIME.PDFJune, 2014Duke Speer
ED FOR SPEED
HTTP://BLOG.KISSMETRICS.COM/WP-
NT/UPLOADS/2011/04/LOADING-TIME.PDFJune, 2014Duke Speer
THE NEED FOR SPEED
HTTP://BLOG.KISSMETRICS.COM/WP-
CONTENT/UPLOADS/2011/04/LOADING-TIME.PDF
June, 2014Duke Speer J and Beyond
THE MAIN CONCERNS
DRAWN HEAVILY FROM:
HTTP://CSS-TRICKS.COM/WHICH-RESPONSIVE-IMAGES-SOLUTION-SHOULD-
YOU-USE/
HTTPS://DOCS.GOOGLE.COM/SPREADSHEET/CCC?KEY=0AL0LI17FOL9DDDGXTFVORZF
PV3VCDHK2NTBMDVI2OXC#GID=0
June, 2014Duke Speer J and Beyond
VALID SUPPORTED HTML?
June, 2014Duke Speer J and Beyond
VALID SUPPORTED HTML?
<PICTURE ALT="DESCRIPTION">
<SOURCE SRC="SMALL.JPG">
<SOURCE SRC="MEDIUM.JPG" MEDIA="(MIN-WIDTH:
400PX)">
<SOURCE SRC="LARGE.JPG" MEDIA="(MIN-WIDTH: 800PX)">
</PICTURE>
<NOSCRIPT><IMG SRC=…></NOSCRIPT>
PICTUREFILL
June, 2014Duke Speer J and Beyond
JAVASCRIPT DEPENDENCY?
<PICTURE> …
</PICTURE>
<NOSCRIPT><IMG SRC=…></NOSCRIPT>
PICTUREFILL
June, 2014Duke Speer J and Beyond
THIRD PARTY CDN?
SENCHA.IO
*REQUIRES IMG TAG ADJUSTMENT
June, 2014Duke Speer J and Beyond
SERVER-SIDE / BROWSER SNIFFING?
WURFL DATABASE
WIRELESS UNIVERSAL RESOURCE FILE
3RD PARTY SERVICES
DEVICE ATLAS CLOUD, ET AL
June, 2014Duke Speer J and Beyond
BANDWIDTH TESTING?
FORESIGHT.JS (& HISRC)
June, 2014Duke Speer J and Beyond
CHANGING MARKUP / VIEWS?
<IMG SRC="200X100.PNG"
DATA-1X="400X200.PNG"
DATA-2X="800X400.PNG">
HISRC
June, 2014Duke Speer J and Beyond
ART DIRECTION?
June, 2014Duke Speer J and Beyond
June, 2014Duke Speer J and Beyond
24 SOLUTIONS – REALLY?
June, 2014Duke Speer J and Beyond
24 SOLUTIONS – REALLY?
THE CMS CONTEXT
RECONSTRUCTING THE IMAGE TAG?
YES:
HTTP://ARCHIVE.KEIRWHITAKER.COM/ARCHIVE
/AUTOMATIC-RESPONSIVE-IMAGES-IN-
WORDPRESS/
1000’S OF LEGACY ARTICLES
NO:
HTTP://ADAPTIVE-IMAGES.COM
June, 2014Duke Speer J and Beyond
LEGACY CONTENT?
June, 2014Duke Speer J and Beyond
ADAPTIVE TO THE RESCUE?
MATTHEW WILCOX
ONE HTACCESS FILEONE PHP FILE
A SINGLE LINE OF JAVASCRIPT
ADAPTIVE-IMAGES.COM
June, 2014Duke Speer J and Beyond
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
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
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
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
LOW MAINTENANCE
WORKS WITH APACHE AND NGINX
/AI-CACHE CLEANOUT
June, 2014Duke Speer J and Beyond
QUESTIONS
DUKE.SPEER@COMMUNITY.JOOMLA.ORG
@DUKE3D
June, 2014Duke Speer J and Beyond