Rwd slidedeck

Responsive Design:
Clever Tips and Tricks
Vitaly Friedman
28/11/2012 @ FOWD, Prague

Vitaly Friedman, editor-in-chief
and co-founder of SmashingMag

This talk is about RWD techniques.

And simple, clever tricks and ideas.

And simple, clever tricks and ideas.
And (a bit) about our 2012 redesign.

Responsive Web
Design (Extended)

The dangerous thing is not that
machines might start thinking like
humans, but that humans might start
thinking like machines.
— Sydney J. Harris
“
When Sydney J. Harris said that, he meant
human society and our understanding of
computers. But it can relate to what we do as
we'll. When we think about the Web, what do

We are blinded by chrome. When it
comes to RWD, we think about layouts,
and often we should, but we have to
keep in mind that we are not rectangle
artists. we explore solutions to
problems. Browsers think in boxes, but
humans shouldn't.

Wir denken dass das Web so aussieht.
Als Designer sehen wir uns oft als Pixel-Pusher
oder Rectangle Zeichner. So sieht das Web aber
nicht aus
When it comes to responsive design, we think
about layouts, and sometimes we should, but we
have to keep in mind that we aren’t rectangle
artists. We explore solutions to problems.

A ﬂuid, unpredictable, chaotic,
interconnected environment
with plenty of right and wrong
solutions. I always feel weird
about blog posts on why RWD is
a wrong technique, or HTML5/
native is a wrong solution. The
Web isn’t black and white, it’s
rich, extremely diverse and it
requires pragmatic thinking.

Responsive Web Design is an
appropriate tool for this “ﬂuid” Web.

It’s a new mindset that requires us to
rethink and extend our practices.

“
Media queries can be used to do
more than patch broken layouts:
with proper planning, we can
begin to choreograph content
proportional to screen size,
serving the best possible
experience at any width.
— Trent Walton

Content Choreography
• From the technical standpoint, arrangement
of boxes is often implemented using Flexbox.
@media screen and
(max-width: 33.236em) {
#main { display: flex; }
#main > nav,
#main > aside { flex: 1; }
#main > article { flex: 2; }
#main > nav { order: 0; }
#main > article { order: 1; }
#main > aside { order: 2; }

We can manipulate
experiences to make
them genuine across
different viewports —
be it desktop, mobile or
anything else.

Resolution Independence
• High pixel density displays prompt us to
create future-proof solutions for graphics.
• Creating multiple assets for the same
graphics (not photos) isn’t future-proof.
• Two options: SVG and Icon Fonts.

• HTML:
<ul class="actions">
<li><a class="a-share" href="#">Share</a></li>
<li><a class="a-print" href="#">Print</a></li>
</ul>
• CSS:
.actions a { font-size: 1em; /* Sprite: 30x160px */
background-image: url('sprite.png'); }
.actions .a-share {
background-position: 10px 0; }
.actions .a-print {
background-position: 10px -40px; }
PNG sprites

• HTML:
<ul class="actions">
<li><a class="a-share" href="#">Share</a></li>
</ul>
• CSS:
body { font-size: 100%; } /* = 16px by default */
.actions a { font-size: 1em;
background-image: url('sprite.svg');
background-size: 1.875em 10em; }
.actions .a-share {
background-position: 0.625em 0; }
SVG sprites

Resolution Independence (SVG)
• SVG ﬁles are usually larger and browsers
need more time to rasterize and display them.
• Good SVG support: Chrome 4+, Safari 4+,
FF4+, Opera 9.5+, IE9+, mobile browsers.
• For legacy browsers (and Android 2.3)
we need PNG-fallback with Conditional
Comments (IE<9) or Modernizr.

• HTML:
<a class="icon share" href="#">Share</a>
• CSS:
@font-face { font-family: 'Icon Font';
src: url('icon-font.eot');
src: local('☺');
url('icon-font.woff') format('woff'),
url('icon-font.ttf') format('truetype'),
url('icon-font.svg') format('svg'); }
.icon { font-family: 'Icon Font'; font-size: 20px; }
.share:before { content: "s"; }
Icon Fonts

• HTML:
<a class="icon" data-icon="s" href="#">Share</a>
<a class="icon" data-icon="h" href="#">History</a>
• CSS:
.icon:before {
content: attr(data-icon);
/* Optional color definition */
}
Icon Fonts

Resolution Independence
(Web Fonts)
• There are many comprehensive Web fonts:
Entypo and FontAwesome are free.
• Excellent support: everywhere but Opera
Mini and Android 2.1.
• Build custom, small “bundles” with Fontello
(combines popular open-source fonts).

Compressive Images
• To display photos properly on high pixel
density displays, we don’t need hi-res images.
• If a JPG image has relatively small dimensions,
we can use a workaround to keep its size small.
• Solution: given a “normal” image resolution,
double it and use minimal JPEG compression.

“
...Given two identical images that
are displayed at the same size on a
website, one can be dramatically
smaller than the other in ﬁle size
if it’s highly compressed and
dramatically larger in dimensions
than it is displayed.
— Daan Jobsis

600×400px ﬁle, 0% JPEG compression,
displayed in 600×400 (ﬁle size 7 Kb)

600×400px ﬁle, 0% JPEG compression,
displayed in 300×200 (ﬁle size 7 Kb)

600×400px ﬁle (7 Kb)
________________________________
0% JPEG compression
displayed in 300×200
300×200px ﬁle (21 Kb)
_________________________________
80% JPEG compression
displayed in 300×200

“
If you [...] had to choose between
employing media queries to make
the design look good on a mobile
device or optimizing the site for
performance, you would be better
served by making the desktop site
blazingly fast.
— Jason Grigsby

Conditional CSS
• We ask browsers to load assets progressively —
and only when they can be displayed.
• Idea: if a CSS media query was ﬁred, catch it
with JavaScript and load additional assets.
• CSS:
@media all and (min-width: 45em) {
body:after {
content: 'desktop';
display: none;
}
}

Conditional CSS
• JS:
var size =
window.getComputedStyle(document.body,':after').get
PropertyValue('content');
if (size == 'desktop') {
// Load some more content.
}
• CSS:
body:after {
content: 'desktop';
display: none;
}
}

Conditional CSS (Example)
• CSS:
body:after {
content: 'desktop';
display: none;
}
}
• HTML:
<a href="desktop-friendly-version.jpg">
<img src="mobile-version.jpg"
data-medium="tablet-friendly-version.jpg"
data-large="desktop-friendly-version.jpg" /></a>

Conditional CSS (Example)
• JavaScript:
var size =
window.getComputedStyle(document.body,':after').get
PropertyValue('content');
if (size == 'desktop') {
$('img').each(function(index) {
var large = $(this).data('large');
$(this).attr('src',large);
}
}
if (size == 'tablet') {...

Lazy Loading
JS, Social Buttons

Gmail’s Lazy Loading
• Latency is the time between when a browser
requests a resource from a server and when it
starts to receive the server’s response.
• On mobile, latency is a major UX killer. For a
1Mb page with 85 requests per page, it is 4.5s!
• JavaScript is expensive; parsing takes time and
blocks the rendering of the page. Usually you
don’t need all JavaScript right away.

• Idea: let browsers download all of the JS right
away, but evaluate it “on demand”, i.e. when
users need a particular feature.
• Much of the downloaded JS is commented out,
and when needed uncommented and eval-ed.
• Gmail’s case:
200 Kb of JS -> 2600 ms page load
200 Kb of JS (lazy loaded) -> 240 ms page load

• <script id="lazy">
// Make sure you strip out (or replace) comment
blocks in your JavaScript first.
/* JavaScript of lazy module */
</script>
<script>
function lazyLoad() {
var lazyElement = document.getElementById('lazy');
var lazyElementBody = lazyElement.innerHTML;
var jsCode = stripOutCommentBlock(lazyElementBody);
eval(jsCode); }
</script>
<div onclick=lazyLoad()>Lazy Load</div>

The Two-Click Social Widget
• Load social widgets only when user explicitly
chooses to take that action to share content.
• Idea: load small social icons by default, and
load the FB, Twitter and G+ widgets on click.
• Cuts down on bandwidth and on latency.
(FB button alone weighs 120 Kb + 4 requests).

Protecting image/
video aspect ratios

Protecting Image Aspect Ratios
• When max-width: 100%; is applied to an
image with width and height attributes
deﬁned in HTML, image rescales incorrectly.
• Solution: add height: auto; for images to
which max-width: 100% is applied.
• CSS:
img, video { max-width: 100%; height: auto; }

Intrinsic Ratio For Videos
• To ensure the intrinsic 4:3 or 16:9 ratios for
videos, we create a box with the proper ratio,
then stretch the video inside to ﬁt the
dimensions of the box.
• HTML:
<div class="wrapper-with-intrinsic-ratio">
<div class="element-to-stretch"></div>
</div>

Intrinsic Ratio For Videos
• CSS:
.wrapper-with-intrinsic-ratio {
position: relative;
padding-top: 25px; /* player chrome */
padding-bottom: 56.25%; /* 9:16 = 0.5625 */
height: 0; }
.element-to-stretch {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: teal; }

Responsive Videos
• We can serve different video files to different
devices by using media attribute on the
video <source> attribute.
• Supported in the latest versions of Chrome,
Opera, Safari, FF 15+, IE9+, mobile browsers.

Responsive Videos
• HTML:
<video controls preload="none">
<source type="video/mp4" src="video_small.mp4"
media="all and (max-width: 480px),
all and (max-device-width: 480px)">
<source type="video/webm" src="video_small.webm"
media="all and (max-width: 480px),
all and (max-device-width: 480px)">
<source type="video/mp4" src="video.mp4">
<source type="video/webm" src="video.webm">

</video>

Vertical media
queries & splitting

Vertical Media Queries
• min-height and max-height are useful for
adjusting the font-size, padding, margin and
cropping images.
• Beware of h/v-media queries collisions when
resizing the browser. Things might easily
get out of control.

Media Queries Splitting
• In development, we can use a breakpoint-
based organization for CSS (“min-width”):
0-up.css, 450-up.css, 720-up.css etc.
• We can also set breakpoints 1px apart and
split styles instead of overriding from one
media query to the next (“min/max-width”):
base.css, 0-449.css, 450-719.css etc.

Media Queries Splitting
• In practice, it’s often a good starting point to
work with em media queries right away.
0-up.css, 25em-up.css, 35em-up.css etc.
• If it’s not an option, it’s a good idea to convert
px to em for production code to improve
maintenance and avoid zooming issues.

“
Designing for the Web is like
visualizing a tesseract. We build
experiences by manipulating their
shadows.
— Tim Brown

Debugging Media Queries
• Due to lack of convenient tools, debugging
RWD often feels like groping in the dark.
There are some popular techniques though.
• Setting the body bg color to diﬀerent colors for
each breakpoint. Also box-sizing: border-box.
• The * technique for testing for optimal
measure in the browser.

People like to test a number
of metrics to see why people
are not * staying on a site. I
think sometimes we spend
so much time focusin* g on
analytics that we have no...
*
*

Typography-Out Approach is an option
for building responsive websites.

We prepared a series of
moodboards to further
explore the idea we had,
especially to ﬁnd
elements that a new,
content-heavy layout
could use.

We focused
speciﬁcally on
macro- and
microtypography as

Our design process was deﬁned by one
major constraint: perfect measure.

If we could adequately typeset an article and
thus establish the general context of the
design, everything else would follow. [...]
The key attribute for achieving perfect
typesetting was perfect measure: a good
average between 45 and 90 characters per
line—on all screen resolutions.
— Elliot Jay Stocks, “Smashing Book 3”
“

So we started looking for typefaces that would best express our
new vision, values and our deisgn persona...and oh boy were we
excited. We felt like a kid in a candy store... until we had to be
thrown into cold shower.
With the abundance of rich typefaces on the Web, we excitedly
jumped into the myriad of possibilities. We experimented with
literally dozens of typefaces from several type foundries in various
pairings: we considered Centro Sans and Centro Serif, Meta and
Meta Serif, Adelle, Ronnia, LFT Etica, FF Tisa, just to name a few.
We observed how they looked at diﬀerent font sizes and how well
they worked together. We examined how well they appeared in bold
and italic and in headings and body copy, as well as how they worked
in less obvious contexts such as image captions.

Typefaces should be optimized for
long reading on (many) screens and
ﬁt various contexts.

We started out with setting up a couple of demo pages for
typography, including links, italics, bold.
With all design distractions removed, we could pay a great
deal of technical attention to the type once we set up our
basic styles. How legible is this typeface at a particular size?
How well does it perform on Windows? Is there a superior
version from an alternative font delivery network that
perhaps uses PostScript outlines for display sizes?
Focusing on these ﬁne details is much easier when you’re
looking purely at the type and nothing else.
Because there’s a lot going on visually on Smashing
Magazine—screenshots, buttons and noisy ads—a sans-serif
felt like a more sensible, uncluttered route for body copy. In
fact, it was diﬃcult to imagine a serif typeface being used for
code-heavy articles in the coding section.

Sorry, Proxima Nova rendering is
incorrect on this screenshot, but we
lost the original ﬁles. :-)

We started from mobile, and worked
our way upwards to desktop views.

Navigation changes: we
used two markups: one
with select, another
with a nested unordered
list. and switches them
on and off with CSS.
The keywords were carefully
chosen and tested.
We kned that it would take too
much space, but we decided to test
it and it performed fairly well.
We’ve developed a toggle menu here
as well, it is currently in the queue
for testing. We had drop-down...
initially here...

We never targeted speciﬁc devices—
and introduced media queries
whenever it felt natural to do so.

Responsive design aﬀects viewports
and media, including print.

Responsive Design Patterns
• Responsive design aﬀects all design assets:
layout, images, type, navigation, tables,
calendars, galleries, forms, maps, ads...
• Oﬄine access and mobile UX enhancements
complement RWD very well (e.g. HTML5
localStorage, GeoLocation, Telephone links).

Responsive Design Patterns
• Media queries aren’t supported in Android
2.1 native client, Gmail app on all platforms,
Win Mobile 6.1 & Phone 7, BlackBerry OS 5.
• Also, Webmail services tend to ignore media
queries and overwrite them with their custom
CSS code.

http://bradfrostweb.com/blog/mobile/anatomy-of-a-mobile-first-responsive-web-design/

There are still many
unsolved problems.

There are still many
unsolved problems.
Web forms
Images
Performance
Consistency
Maintenance
Debugging

Thank You
For Your Attention!
@smashingmag

Image credits
• Front cover: Geometric Wallpapers
by Simon C Page (http://simoncpage.co.uk/
blog/2012/03/ipad-hd-retina-wallpaper/)
• Homer Simpsons: http://smashed.by/homer,
http://smashed.by/crazy-homer

Rwd slidedeck

Recommended

Recommended

More Related Content

What's hot

What's hot (16)

Similar to Rwd slidedeck

Similar to Rwd slidedeck (20)

More from Vera Kovaleva

More from Vera Kovaleva (20)

Recently uploaded

Recently uploaded (20)

Rwd slidedeck