Slide 54
Slide 54 text
One SRC to rule all images
There are 16 beer labels on the On
Tap Now page that use an img tag
like this one for the Bensons Bubbler.
Despite the need for multiple versions of this image depending on the
screen size, HTML only allows one value for the src.
There are 16 beer labels on the On
Tap Now page that use an img tag
like this one for the Bensons Bubbler.
Despite the need for multiple versions of this image depending on the
screen size, HTML only allows one value for the src.
Slide 59
Slide 59 text
Option 1: Use JavaScript to set
screen width in a cookie
Information on location of
large file in query string
Instead of using query string,
some use data attributes
Information on location of
large file in query string
Instead of using query string,
some use data attributes
Slide 62
Slide 62 text
Option 2: Use noscript to prevent
image from loading
File doesn’t download because anything inside noscript
tags is not is the DOM if the JavaScript is enabled.
$(‘noscript[data-large][data-small]’).each(function(){
var src = screen.width >= 500 ? $(this).data(‘large’) : $(this).data(‘small’);
$(‘
’).
insertAfter($(this));
});
Script assumes jQuery is loaded.
File doesn’t download because anything inside noscript
tags is not is the DOM if the JavaScript is enabled.
$(‘noscript[data-large][data-small]’).each(function(){
var src = screen.width >= 500 ? $(this).data(‘large’) : $(this).data(‘small’);
$(‘Slide 63
Slide 63 text
Option 3: Use Sencha.io SRC or
similar solution to resize images
Set the first part of the src to
http://src.sencha.io/
After the slash add the full URL of
the image you want to have resized.
Sencha.io SRC will resize the image to fit the size
of the device screen. For example, if an iPhone
visits the site, the image will be constrained to its
screen size of 320 by 480 pixels.
Replace with your domain and
path to the images.
Replace with your domain and
path to the images.
Slide 67
Slide 67 text
Option 2: Use noscript to prevent
image from loading
File doesn’t download because anything inside noscript
tags is not is the DOM if the JavaScript is enabled.
File doesn’t download because anything inside noscript
tags is not is the DOM if the JavaScript is enabled.
Slide 68
Slide 68 text
Option 2: Use noscript to prevent
image from loading
File doesn’t download because anything inside noscript
tags is not is the DOM if the JavaScript is enabled.
Ugh, markup is no longer semantic. We’ve changed
HTML to t one and only one solution.
File doesn’t download because anything inside noscript
tags is not is the DOM if the JavaScript is enabled.
Ugh, markup is no longer semantic. We’ve changed
HTML to t one and only one solution.
Slide 69
Slide 69 text
Option 3: Use Sencha.io SRC or
similar solution to resize images
Set the first part of the src to
http://src.sencha.io/
After the slash add the full URL of
the image you want to have resized.
Sencha.io SRC will resize the image to fit the size
of the device screen. For example, if an iPhone
visits the site, the image will be constrained to its
screen size of 320 by 480 pixels.
Replace with your domain and
path to the images.
Replace with your domain and
path to the images.
Slide 70
Slide 70 text
Option 3: Use Sencha.io SRC or
similar solution to resize images
Set the first part of the src to
http://src.sencha.io/
After the slash add the full URL of
the image you want to have resized.
Sencha.io SRC will resize the image to fit the size
of the device screen. For example, if an iPhone
visits the site, the image will be constrained to its
screen size of 320 by 480 pixels.
Replace with your domain and
path to the images.
Ugh, we’re routing everything through a third party.
And how does Sencha.io know what size image to send anyways?
Replace with your domain and
path to the images.
Ugh, we’re routing everything through a third party.
And how does Sencha.io know what size image to send anyways?
Slide 74
Slide 74 text
Only real solution is a new element
Long description