Slide 1
Slide 1 text
Responsive Design:
Clever Tips and Tricks
Vitaly Friedman
28/11/2012 @ FOWD, Prague
Slide 2
Slide 2 text
Vitaly Friedman, editor-in-chief
and co-founder of SmashingMag
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
This talk is about RWD techniques.
Slide 5
Slide 5 text
And simple, clever tricks and ideas.
This talk is about RWD techniques.
Slide 6
Slide 6 text
And simple, clever tricks and ideas.
This talk is about RWD techniques.
And (a bit) about our 2012 redesign.
Slide 7
Slide 7 text
Responsive Web
Design (Extended)
Slide 8
Slide 8 text
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
Slide 9
Slide 9 text
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.
Slide 10
Slide 10 text
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.
Slide 11
Slide 11 text
A fluid, 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.
Slide 12
Slide 12 text
Responsive Web Design is an
appropriate tool for this “fluid” Web.
Slide 13
Slide 13 text
It’s a new mindset that requires us to
rethink and extend our practices.
Slide 14
Slide 14 text
Content
Choreography
Slide 15
Slide 15 text
“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
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
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; }
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
We can manipulate
experiences to make
them genuine across
different viewports —
be it desktop, mobile or
anything else.
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
Resolution
Independence
Slide 29
Slide 29 text
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.
Slide 31
Slide 31 text
• HTML:
• 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
Slide 32
Slide 32 text
Resolution Independence (SVG)
• SVG files 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.
Slide 33
Slide 33 text
• HTML:
Share
• 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
Slide 35
Slide 35 text
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).
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
Compressive
Images
Slide 38
Slide 38 text
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.
Slide 39
Slide 39 text
“...Given two identical images that
are displayed at the same size on a
website, one can be dramatically
smaller than the other in file size
if it’s highly compressed and
dramatically larger in dimensions
than it is displayed.
— Daan Jobsis
Slide 40
Slide 40 text
600×400px file, 0% JPEG compression,
displayed in 600×400 (file size 7 Kb)
Slide 41
Slide 41 text
600×400px file, 0% JPEG compression,
displayed in 300×200 (file size 7 Kb)
Slide 42
Slide 42 text
600×400px file (7 Kb)
________________________________
0% JPEG compression
displayed in 300×200
300×200px file (21 Kb)
_________________________________
80% JPEG compression
displayed in 300×200
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
Conditional
Loading
Slide 46
Slide 46 text
“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
Slide 47
Slide 47 text
Conditional CSS
• We ask browsers to load assets progressively —
and only when they can be displayed.
• Idea: if a CSS media query was fired, catch it
with JavaScript and load additional assets.
• CSS:
@media all and (min-width: 45em) {
body:after {
content: 'desktop';
display: none;
}
}
Slide 48
Slide 48 text
Conditional CSS
• JS:
var size =
window.getComputedStyle(document.body,':after').get
PropertyValue('content');
if (size == 'desktop') {
// Load some more content.
}
• CSS:
@media all and (min-width: 45em) {
body:after {
content: 'desktop';
display: none;
}
}
Slide 49
Slide 49 text
Conditional CSS (Example)
• CSS:
@media all and (min-width: 45em) {
body:after {
content: 'desktop';
display: none;
}
}
• HTML:
Slide 50
Slide 50 text
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') {...
Slide 51
Slide 51 text
No content
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
No content
Slide 54
Slide 54 text
Lazy Loading
JS, Social Buttons
Slide 55
Slide 55 text
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.
Slide 56
Slide 56 text
Gmail’s Lazy Loading
• 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
Slide 57
Slide 57 text
Gmail’s Lazy Loading
•
// Make sure you strip out (or replace) comment
blocks in your JavaScript first.
/* JavaScript of lazy module */
function lazyLoad() {
var lazyElement = document.getElementById('lazy');
var lazyElementBody = lazyElement.innerHTML;
var jsCode = stripOutCommentBlock(lazyElementBody);
eval(jsCode); }
Lazy Load
Slide 58
Slide 58 text
No content
Slide 59
Slide 59 text
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).
Slide 60
Slide 60 text
No content
Slide 61
Slide 61 text
No content
Slide 62
Slide 62 text
Protecting image/
video aspect ratios
Slide 63
Slide 63 text
Protecting Image Aspect Ratios
• When max-width: 100%; is applied to an
image with width and height attributes
defined 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; }
Slide 64
Slide 64 text
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 fit the
dimensions of the box.
• HTML:
Slide 65
Slide 65 text
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; }
Slide 66
Slide 66 text
No content
Slide 67
Slide 67 text
No content
Slide 68
Slide 68 text
No content
Slide 69
Slide 69 text
Responsive Videos
• We can serve different video files to different
devices by using media attribute on the
video attribute.
• Supported in the latest versions of Chrome,
Opera, Safari, FF 15+, IE9+, mobile browsers.
Slide 70
Slide 70 text
Responsive Videos
• HTML:
Slide 71
Slide 71 text
Vertical media
queries & splitting
Slide 72
Slide 72 text
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.
Slide 73
Slide 73 text
No content
Slide 74
Slide 74 text
No content
Slide 75
Slide 75 text
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.
Slide 76
Slide 76 text
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.
Slide 77
Slide 77 text
No content
Slide 78
Slide 78 text
No content
Slide 79
Slide 79 text
Debugging
Media Queries
Slide 80
Slide 80 text
“Designing for the Web is like
visualizing a tesseract. We build
experiences by manipulating their
shadows.
— Tim Brown
Slide 81
Slide 81 text
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 different colors for
each breakpoint. Also box-sizing: border-box.
• The * technique for testing for optimal
measure in the browser.
Slide 82
Slide 82 text
No content
Slide 83
Slide 83 text
No content
Slide 84
Slide 84 text
No content
Slide 85
Slide 85 text
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...
*
*
Slide 86
Slide 86 text
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...
*
*
Slide 87
Slide 87 text
No content
Slide 88
Slide 88 text
No content
Slide 89
Slide 89 text
Typography-Out Approach is an option
for building responsive websites.
Slide 90
Slide 90 text
Typography-Out
Approach
Slide 91
Slide 91 text
No content
Slide 92
Slide 92 text
We prepared a series of
moodboards to further
explore the idea we had,
especially to find
elements that a new,
content-heavy layout
could use.
Slide 93
Slide 93 text
We focused
specifically on
macro- and
microtypography as
Slide 94
Slide 94 text
No content
Slide 95
Slide 95 text
No content
Slide 96
Slide 96 text
No content
Slide 97
Slide 97 text
No content
Slide 98
Slide 98 text
No content
Slide 99
Slide 99 text
Our design process was defined by one
major constraint: perfect measure.
Slide 100
Slide 100 text
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”
“
Slide 101
Slide 101 text
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 different 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.
Slide 102
Slide 102 text
No content
Slide 103
Slide 103 text
Typefaces should be optimized for
long reading on (many) screens and
fit various contexts.
Slide 104
Slide 104 text
No content
Slide 105
Slide 105 text
No content
Slide 106
Slide 106 text
No content
Slide 107
Slide 107 text
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 fine 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 difficult to imagine a serif typeface being used for
code-heavy articles in the coding section.
Slide 108
Slide 108 text
Sorry, Proxima Nova rendering is
incorrect on this screenshot, but we
lost the original files. :-)
Slide 109
Slide 109 text
No content
Slide 110
Slide 110 text
No content
Slide 111
Slide 111 text
No content
Slide 112
Slide 112 text
No content
Slide 113
Slide 113 text
No content
Slide 114
Slide 114 text
No content
Slide 115
Slide 115 text
No content
Slide 116
Slide 116 text
No content
Slide 117
Slide 117 text
We started from mobile, and worked
our way upwards to desktop views.
Slide 118
Slide 118 text
No content
Slide 119
Slide 119 text
No content
Slide 120
Slide 120 text
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...
Slide 121
Slide 121 text
No content
Slide 122
Slide 122 text
No content
Slide 123
Slide 123 text
No content
Slide 124
Slide 124 text
No content
Slide 125
Slide 125 text
We never targeted specific devices—
and introduced media queries
whenever it felt natural to do so.
Slide 126
Slide 126 text
Responsive design affects viewports
and media, including print.
Slide 127
Slide 127 text
No content
Slide 128
Slide 128 text
No content
Slide 129
Slide 129 text
No content
Slide 130
Slide 130 text
Responsive
Design Patterns
Slide 131
Slide 131 text
Responsive Design Patterns
• Responsive design affects all design assets:
layout, images, type, navigation, tables,
calendars, galleries, forms, maps, ads...
• Offline access and mobile UX enhancements
complement RWD very well (e.g. HTML5
localStorage, GeoLocation, Telephone links).
Slide 132
Slide 132 text
No content
Slide 133
Slide 133 text
No content
Slide 134
Slide 134 text
No content
Slide 135
Slide 135 text
No content
Slide 136
Slide 136 text
No content
Slide 137
Slide 137 text
No content
Slide 138
Slide 138 text
No content
Slide 139
Slide 139 text
No content
Slide 140
Slide 140 text
No content
Slide 141
Slide 141 text
No content
Slide 142
Slide 142 text
No content
Slide 143
Slide 143 text
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.
Slide 144
Slide 144 text
No content
Slide 145
Slide 145 text
http://bradfrostweb.com/blog/mobile/anatomy-of-a-mobile-first-responsive-web-design/
Slide 146
Slide 146 text
No content
Slide 147
Slide 147 text
There are still many
unsolved problems.
Slide 148
Slide 148 text
There are still many
unsolved problems.
Web forms
Images
Performance
Consistency
Maintenance
Debugging
Slide 149
Slide 149 text
The Very Final
Conclusion
Slide 150
Slide 150 text
No content
Slide 151
Slide 151 text
No content
Slide 152
Slide 152 text
No content
Slide 153
Slide 153 text
www.smashingbook.com
Slide 154
Slide 154 text
www.the-mobile-book.com
Slide 155
Slide 155 text
No content
Slide 156
Slide 156 text
Thank You
For Your Attention!
@smashingmag
Slide 157
Slide 157 text
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