Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
#WVBCN
ADAPTIVE IMAGESIN RESPONSIVE WEB DESIGN
CHRISTOPHER SCHMITT @teleject
#WVBCN
ADAPTIVE IMAGESIN RESPONSIVE WEB DESIGN
CHRISTOPHER SCHMITT @telejectWhat
Bruce
Said!
CHRISTOPHER SCHMITT
@teleject
@teleject
http://nonbreakingspace.tv/
@teleject
http://dwmgbook.com/
@teleject
http://CSSsummit.com/
@teleject
http://cssdevconf.com/
y
x
WHY DON’T WE ASK
THE BROWSER?
(cc) flic.kr/p/vUBHv
alert("User-agent header sent: " + navigator.userAgent);
alert("User-agent header sent: " + navigator.userAgent);
Mozilla/1.0 (Win3.1)
http://www.useragentstring.com/
(cc) flic.kr/p/vUBHv
Mozilla/1.0 (Win3.1)
Mozilla/1.22 (compatible;
MSIE 2.0; Windows 95)
(cc) flic.kr/p/vUBHv
http://www.useragentstring.com/
Mozilla/5.0 (Macintosh; Intel Mac
OS X 10_7_3) AppleWebKit/
534.55.3 (KHTML, like Gecko)
Version/5.1.5 Safari/534.55.3
(cc...
Mozilla/5.0 (Macintosh; Intel Mac
OS X 10_7_3) AppleWebKit/
534.55.3 (KHTML, like Gecko)
Version/5.1.5 Safari/534.55.3
htt...
FEATURE TESTINGvs. BROWSER SNIFFING
1
2
3
FEATURE TESTINGvs. BROWSER SNIFFING
1 Browser width
2
3
A scripting approach
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = win...
The jQuery approach
// returns width of browser viewport
$(window).width();
// returns height of browser viewport
$(window...
CSS media queries
// default, mobile-1st CSS rules devices go here
@media screen and (min-width: 480px) { ... }
@media scr...
(cc) flic.kr/p/8Lo5Gk
BROWSER WIDTH
GIVES US FRAME,
NOT THE CANVAS
FEATURE TESTINGvs. BROWSER SNIFFING
1 Browser width
2 Screen resolution
3
72PPIHAS SERVED US WELL
(cc) flic.kr/p/6tjjRP
72 points-per-inch =
72 pixels-per-inch
96PPI
IF A WINDOWS USER
72 points-per-inch
x [1+(1/3)]
= 96 PPI
78μm
goo.gl/zpkFy
78μm
“RETINA” DISPLAYS300ppi at 12 inches from the eyes
[In 2013, Intel sees their
product line] offer a higher
resolution experience than a
top-of-the-line 1080p HDTV.”
“
http://...
72 PPI
240
240 PPI
240 PPI
72 PPI
RETINA DISPLAYS =
LARGER IMAGES,
LARGER FILE SIZES
FEATURE TESTINGvs. BROWSER SNIFFING
1 Browser width
2 Screen resolution
3 Bandwidth
(cc) flic.kr/p/4DziUN
SPEED TESTS
HINDER SPEED,
USER EXPERIENCE
Testing for speed of an
internet connection is like
stepping in front of a car to see
how fast it is.”
“
(cc) flic.kr/p/4Dz...
Testing for speed of an
internet connection is like
stepping in front of a car to see
how fast it is.”
“
But, Christopher,...
Speed test image
https://github.com/adamdbradley/foresight.js
Speed test image
+50k
https://github.com/adamdbradley/foresight.js
Native speed test
// @Modernizr's network-connection.js
connection = navigator.connection || {
type: 0 }, // polyfill
isSlo...
FEATURE TESTINGvs. BROWSER SNIFFING
1 Browser width
2 Screen resolution
3 Bandwidth
IMGGIMME THAT OLD SCHOOL
1
2
3
1 .htaccess
2
3
IMGGIMME THAT OLD SCHOOL
Filament .htaccess
# Responsive Images
# Mobile-First images that scale responsively and responsibly
# Copyright 2010, Sco...
Filament .htaccess
<script src="responsiveimgs.js"></script>
<img src="sample-content/running-sml.jpg?
full=sample-content...
...the server has no way to
know what resolution the
client’s device is, so it can’t
send the appropriately sized
embeded ...
http://adaptive-images.com/
ADD .HTACCESS, JS,
PHP 5, GD lib*, &
THEN <IMG>
1 .htaccess
2 <picture> and/or srcset
3
GIMME THAT OLD SCHOOL
IMG
media queries in HTML
<video controls>
<source type="video/mp4" src="video/windowsill_small.mp4"
media="all and (max-width...
<picture> patch
<picture alt="A giant stone face at The Bayon temple in Angkor Thom,
Cambodia">
<!-- <source src="small.jp...
ADD IF-ELSE HTML, JS,
BORROW <VIDEO>, &
THEN <IMG>
@srcset standard?
<h1><img alt="The Breakfast Combo"
src="banner.jpeg"
srcset="banner-HD.jpeg 2x,
banner-phone.jpeg 100w,
...
1 .htaccess
2 <picture> and/or srcset
3 HiSRC
GIMME THAT OLD SCHOOL
IMG
Set, forget it HiSRC
<script src="https://ajax.googleapis.com/ajax/
libs/jquery/1.7.2/jquery.min.js"></script>
<script src...
Set, forget it HiSRC
<div class="hisrc">
<img src="halloween-mobile-1st.png"
data-1x="halloween-x1.png"
data-2x="halloween...
Set, forget it HiSRC
<div class="hisrc">
<img src="halloween-mobile-1st.png"
data-1x="halloween-x1.png"
data-2x="halloween...
SERIES OF CHECKS TO
FIND OUT RESPONSIVE
PATH FOR IMAGES...
DO NATIVE SPEED
TEST FOR MOBILE
DEVICES FIRST...
http://davidbcalhoun.com/2010/using-navigator-connection-android
$.hisrc.devicePixelRatio = 1;
if(window.devicePixelRatio !==
undefined) {
$.hisrc.devicePixelRatio =
window.devicePixelRati...
+50k
https://github.com/adamdbradley/foresight.js
Force speed test
LESS THAN 4G MEANS
MOBILE IMAGES LEFT
IN PLACE
BETWEEN 4G &
300 Kbps MEANS
REGULAR DESKTOP
IMAGES SWAPPED IN
FAST SPEED & HIGH
DENSITY, RETINA
IMAGES SWAPPED IN
https://github.com/crdeutsch/hisrc/tree/v2
2 TRICK PONY
CSS IS CORE.
WE USE CSS MEDIA
QUERIES FOR DESIGN
http://mediaqueri.es/
CSS media queries
// default, mobile-1st CSS rules devices go here
@media screen and (min-width: 480px) { ... }
@media scr...
Single pixel GIF
Single pixel GIF
Single pixel GIF
Single pixel GIF
$.hisrc.defaults = {
useTransparentGif: true,
http://www.w3.org/community/respimg/2012/04/06/responsive-
content-images-us...
$.hisrc.defaults = {
useTransparentGif: true,
transparentGifSrc: 'http://
example.com/spg.gif',
6+5+9+ 11.6+17+
Single pix...
$.hisrc.defaults = {
useTransparentGif: true,
transparentGifSrc: 'data:image/
gif;base64,R0lGODlhAQABAIAAAMz/
AAAAACH5BAEA...
http://css-tricks.com/which-
responsive-images-solution-
should-you-use/
24+http://css-tricks.com/which-
responsive-images-solution-
should-you-use/
http://css-tricks.com/which-
responsive-images-solution-
should-you-use/
ALL SOLUTIONS HAVE
2x HTTP REQUESTS
+ JAVASCRIPT
WORKAROUNDSTRICKS in CONTEXT
1
2
3
&
(cc) flic.kr/p/64fGf6
WORKAROUNDSTRICKS
1 background-size: 100%
2
3
&
(cc) flic.kr/p/64fGf6
http://fittextjs.com/
background-size: 100%
<a href="example.com/link">Download on Github</a>
.download a {
padding: .095em .8em;
background: ur...
WORKAROUNDSTRICKS in CONTEXT
1 background-size: auto
2 SVG
3
&
(cc) flic.kr/p/64fGf6
SVG
Native SVG
http://caniuse.com/#search=SVG%20in%20HTML%20img%20element
PNG 16kb
SVG 7kb
9+5+9+ 11.6+17+
http://petercollingridge.appspot.com/svg-optimiser
Modernizr check
if(!Modernizr.svg){
var images =
document.getElementsByTagName("img");
for(var i = 0; i < images.length; i...
WORKAROUNDSTRICKS in CONTEXT
1 background-size: auto
2 SVG (Clown Car)
3
&
(cc) flic.kr/p/64fGf6
WORKAROUNDSTRICKS in CONTEXT
1 background-size: auto
2 SVG
3 font-based solutions
&
(cc) flic.kr/p/64fGf6
...if you use <meta
charset="utf-8"> (you should
be for HTML5), you’re adding
common Unicode characters
like and ✆, and yo...
Font-based RWD
http://ilovetypography.com/2012/04/11/designing-type-systems/
Font-based RWD
http://ilovetypography.com/2012/04/11/designing-type-systems/
avg file size
40kb/per font
http://css-tricks.com/examples/IconFont/
http://fontello.com/
http://icomoon.io
Font-based icons
<style>
[data-icon]:before {
font-family: 'icon-font';
content: attr(data-icon);
}
</style>
<a href="http...
WORKAROUNDSTRICKS in CONTEXT
1 background-size: 100%
2 SVG
3 font-based solutions
&
(cc) flic.kr/p/64fGf6
4 compressed JPEGs
iCloud iOS 5 OSX Lion iPad 2 iPhone
OS
The world’s most advanced desktop
operating system advances even further.
With over...
iCloud iOS 5 OSX Lion iPad 2 iPhone
OS
The world’s most advanced desktop
operating system advances even further.
With over...
iCloud iOS 5 OSX Lion iPad 2 iPhone
OS
The world’s most advanced desktop
operating system advances even further.
With over...
iCloud iOS 5 OSX Lion iPad 2 iPhone
OS
The world’s most advanced desktop
operating system advances even further.
With over...
(cc) flic.kr/p/64fGf6
446kb < 8,755.2kb
(cc) flic.kr/p/64fGf6
0% vs 100%
Size Type Dimensions Display Px Density File Size
Extreme 2276x1400 1x & 2x 446kb
Extra
Large
1024x1536 2x 1,745kb
Extra
L...
Size Type Dimensions Display Px Density File Size
Extreme 2276x1400 1x & 2x 446kb
Extra
Large
1024x1536 2x 1,745kb
Extra
L...
<picture> Patch
<picture alt="A giant stone face at The Bayon temple in Angkor Thom,
Cambodia">
<!-- <source src="small.jp...
<img src="rock-climber.jpg" alt="" />
One Image, One IMG
(cc) flic.kr/p/64fGf6
EXTREMELYCOMPRESSED PROBLEMS
Clown Car SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 329" preserveAspectRatio="xMidYMid
meet">
<title>Cl...
Clown Car SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 329" preserveAspectRatio="xMidYMid
meet">
<title>Cl...
http://coding.smashingmagazine.com/2013/06/02/clown-
car-technique-solving-for-adaptive-images-in-responsive-
web-design/
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 375 231"
preserveAspectRatio="xMidYMid meet" tabindex="-1"
aria-label...
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 375 231"
preserveAspectRatio="xMidYMid meet" tabindex="-1"
aria-label...
svg {
background-size: 100% 100%;
background-repeat: no-repeat;
}
http://codepen.io/teleject/pen/KlzBe
Combo Move: SVG
svg {
background-size: 100% 100%;
background-repeat: no-repeat;
}
@media screen and (max-width: 400px) {
svg {
background-...
@media screen and (min-width: 401px),
screen and (max-width: 800px) and (-webkit-min-device-pixel-ratio:
1.75) {
svg {
bac...
@media screen and (max-width: 400px) {
svg {
width: 375px;
height: 231px; } }
@media screen and (min-width: 401px) {
svg {...
http://codepen.io/teleject/pen/KlzBe
http://codepen.io/teleject/pen/KlzBe
http://codepen.io/teleject/pen/KlzBe
COMBO MOVEDON’T BLAME THE PLAYER
1
2
3
No additional HTTP request1
Min. # of images = 2
No JavaScript
http://codepen.io/te...
IMGGIMME THAT NEW SCHOOL
1
2
3
IMGGIMME THAT NEW SCHOOL
1
2
3
simple design for users
#rwdimg
1
IMGGIMME THAT NEW SCHOOL
1
2
3
simple design for users
browser, server handshake
#rwdimg
2
IMGGIMME THAT NEW SCHOOL
1
2
3
simple design for users
browser, server handshake
same, several formats
#rwdimg
3
#rwdimg
http://telejec.tv/12uYOC4
#rwdimg
#rwdimg
#rwdimg
#rwdimg
#rwdimg
#rwdimg
#rwdimg
<link rel="shortcut icon" href="/assets/favicon.ico" />
Favicon
#rwdimg
<link rel="apple-touch-icon-precomposed" sizes="144x144"
href="apple-touch-icon-144x144-precomposed.png" />
<link ...
#rwdimg
THANK YOU!CHRISTOPHER SCHMITT @teleject
The Non Breaking Space Podcast - http://nonbreakingspace.tv/
240 PPI
240 PPI
240 PPI
240 PPI
240 PPI
240 PPI
240 PPI
240 PPI
240 PPI
240 PPI
240 PPI
240 PPI
240 PPI
240 PPI
240 PPI
240 PPI
240 PPI
240 PPI
240 PPI
240 PPI
240 PPI
240 PPI
240 PPI
240 PPI
240 PPI
Upcoming SlideShare
Loading in …5
×

Published on

240 PPI

Published in: Technology, Design

×