Responsive web design challenges web designers to apply a new mindset to their design processes, as well as to techniques they are using in design and coding. This talk provides an overview of various practical techniques, tips and tricks that you might want to be aware of when working on a new responsive design project.

1. New Perspectives in
Web Design
Vitaly Friedman
02/10/2013 • YAC, Moscow

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

4. This talk is about new techniques.

5. And about clever UX patterns.
This talk is about new techniques.

6. And about clever UX patterns.
This talk is about new techniques.
And what works in real-life projects.

7. 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. And we do it
because we had to find some

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

12. Responsive Design is an appropriate
tool for “multi-dimensional” designs.

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

14. Designing Systems

17. “
If you’re used to designing fixed-
width layouts, it’s going to be really,
really hard to get your head around
designing and building in a fluid
way… at first.
— Elliot Jay Stocks
http://elliotjaystocks.com/blog/responsive-web-design-the-war-has-not-yet-been-won/

18. “
...Once you overcome that initial
struggle of adapting to a new
process, designing and building
responsive sites needn’t take any
longer, or cost any more money.
— Elliot Jay Stocks
http://elliotjaystocks.com/blog/responsive-web-design-the-war-has-not-yet-been-won/

23. “
...The homepage is comprised of
Lego-like building blocks designed to
be combined together...
— Dave Rupert

24. “
...Today, the deliverables could look
a lot like fully-functioning Twitter
Bootstrap-style systems which are
custom tailored for your clients’
needs. Think of it as tiny bootstraps,
for every client.
— Dave Rupert

26. Responsive Deliverables
•Components
Flexible grid
Typography
Navigation
Accessible form controls
Carousels
Tabbed navigation
Responsive tables
Accordions
Media lists
Drop-downs
Pagination
Data tables
Buttons
Icon fonts
•Strategy
Responsive images
Responsive typography
Accessibility architecture
Legacy browser support
i18n/l10n tolerance
Performance budget
Interaction/Animations
Responsive advertising

27. •Strategy
Responsive images
Responsive typography
Accessibility architecture
Legacy browser support
i18n/l10n tolerance
Performance budget
Interaction/Animations
Responsive advertising
•Layouts
Homepage layout
Subpage layout
Article index layout
Article layout
Product index layout
Product detail layout
Sign up flow
Checkout flow
•Components
Flexible grid
Typography
Navigation
Accessible form controls
Carousels
Tabbed navigation
Responsive tables
Accordions
Media lists
Drop-downs
Pagination
Data tables
Buttons
Icon fonts

35. “
Atomic design gives us the ability to
traverse from abstract to concrete.
We can create systems that promote
consistency and scalability. We
assemble rather than deconstruct.
— Brad Frost

36. Atomic Design
• Obvious relationships between modules
• Abstract → Concrete: atoms are used for
references, pages for review, rest for build.
• Pattern library serves as a final deliverable,
and as such scalable and future-proof.

40. Resolution Independence

41. 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.

42. • 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

43. • 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

47. Resolution Independence (SVG)
• 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 Cond.
Comments (IE<9) or Modernizr or SVG
polyfills (Canvg).

50. • 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: 1.5em; }
.share:before { content: "s"; }
Icon Fonts

51. • 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

52. • Furthermore, we can combine icon font
glyphs to create complex multi-layered icons.
• Idea: Split apart the components of your multi-
color vector, add each element to the icon font,
then stack them to create a new icon.
Resolution Independence
(Web Fonts)

55. 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).

60. Compressive Images

61. 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.

62. “
...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

63. 600×400px file, 0% JPEG quality,
displayed in 600×400 (file size 7 Kb)

64. 600×400px file, 0% JPEG quality,
displayed in 300×200 (file size 7 Kb)

65. 600×400px file (7 Kb)
________________________________
0% JPEG quality
displayed in 300×200
300×200px file (21 Kb)
_________________________________
80% JPEG quality
displayed in 300×200

74. Responsive Images
• For photos, consider using Scott Jehl’s
Picturefill or Tyson Matanich’s branch of it.
• Allows images to load before the entire DOM
is ready or after the rest of the page loads.
• Allows you to wait for the new image to
complete downloading before updating <img>.
Also, allows you to disable swapping of images.

76. Clown Car Technique (With SVG)
• We can use media queries within SVG to serve
right raster images without double markup.
• HTML:
<img src="image.svg" alt="Responsive image" />

77. •SVG:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="329">
<title>The Clown Car Technique</title>
<g>
<image id="small" height="329" width="300" xlink:href="small.png" />
<image id="medium" height="329" width="300" xlink:href="medium.png" />
<image id="big" height="329" width="300" xlink:href="big.png" />
<image id="huge" height="329" width="300" xlink:href="huge.png" />
</g>
</svg>

78. •SVG:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="329">
<title>The Clown Car Technique</title>
<g>
<image id="small" height="329" width="300" xlink:href="small.png" />
<defs>
<style>
image { display: none; }
#small { display: block; }
@media screen and (max-width: 25em) {
#medium { display: block; }
#small { display: none; } }
@media screen and (max-width: 45em) {
#big { display: block; }
#small { display: none; } }
</style>
</defs>

79. •SVG:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="329">
<title>The Clown Car Technique</title>
<g>
<image id="small" height="329" width="300" xlink:href="small.png" />
<defs>
<style>
svg { background-size: 100% 100%;
background-repeat: no-repeat; }
@media screen and (max-width: 25em) {
svg { background-image: url(small.png"); } }
@media screen and (max-width: 45em) {
svg { background-image: url(medium.png"); } }
@media screen and (max-width: 60em) {
svg { background-image: url(large.png"); } }
</style>
</defs>

80. Clown Car Technique (With SVG)
• Due to cross-browser issues, we have to use the
<object> tag instead of <img>:
<object data="image.svg" type="image/svg+xml"></object>
• Two main benefits:
• MQs within SVG are based on the parent element in
which the SVG is contained, not the viewport width.
• All image options are encapsulated in an SVG file.

82. Conditional Loading

83. Conditional Loading
• We ask browsers to load assets progressively—
ensuring a fast and functional core experience.
• Essentially, the state-of-the-art progressive
enhancement with a focus on performance.

84. The Guardian’s Modular Load
• Consider at least three types of page content:
• Core content
(essential HTML+CSS, usable non-JS enhanced experience);
• Enhancement
(JS, Geolocation, touch, enhanced CSS, Web fonts, widgets);
• Leftovers
(analytics, advertising, third-party content).
• Idea: load Core content first, then Enhancement on
DOMContentReady, then Leftovers on Load.

88. The Guardian’s Modular Load
• Load JS into a browser asynchronously.
While JS is being downloaded, browser still
can parse the document and show content.
• HTML/JS (for modern browsers):
@if(isModernBrowser) {
<script src="enhanced.js" async defer></script>
}

90. The Guardian’s Modular Load
• Load JS into a browser asynchronously.
While JS is being downloaded, browser still
can parse the document and show content.
• HTML/JS (for modern browsers):
@if(isModernBrowser) {
<script src="enhanced.js" async defer></script>
}

91. BBC’s isModernBrowser( )
• We can use server-side device detection using
UA strings with DeviceAtlas, WURFL etc.
• We can use client-side feature detection to split
browsers into groups “HTML4” / “HTML5”.
• JS:
if (
'querySelector' in document &&
'localStorage' in window &&
'addEventListener' in window ) {
// HTML5 browser detected; load the JS app
}

92. • JS:
if (
'querySelector' in document &&
'localStorage' in window &&
'addEventListener' in window ) {
// HTML5 browser detected; load the JS app
}
• HTML5 Browsers:
IE9+, FF 3.5+, Opera 9+,
Safari 4+, Chrome 1+, iOS1+,
Android phone and tablets 2.1+,
Blackberry OS6+, Win 7.5+,
Mobile Firefox, Opera Mobile
• HTML4 Browsers:
IE8-, Blackberry OS5-,
Nokia S60 v6-, Nokia S40,
Symbian, Windows 7 Phone (pre-Mango), a
plethora of legacy devices.
BBC’s isModernBrowser( )

95. 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

96. Gmail’s Lazy Loading
• <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>

99. 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).

103. Optimistic Interfaces

104. Optimistic Interfaces
• Performance is not only about technology;
it’s about how users perceive it, too.
• To create a noticeable performance
improvement, it has to improve by 20%.
• Idea: fake performance by being optimistic
about user’s next steps.
Steven C. Seow, “Designing and Engineering Time: The Psychology of Time Perception”

105. • Perform actions optimistically
Pretend that an action succeeded right away.
• Adaptively prefetch content
Reprioritize loading based on user’s actions.
• Move bits when no one is watching
Keep users busy while boring stuff happens.
Mike Krieger, co-founder of Instagram, “Secrets to Lightning-Fast Mobile Design”
Optimistic Interfaces

112. “
The optimal style is a backwards
moving and decelerating ribbed
progress bar, which made the load
time appear 11% faster than a solid
colored bar.

117. “
Performance isn’t solely a technical
concern for developers. It’s time to
treat performance as an essential
design feature.
— Brad Frost

118. Performance Budget
• Idea: always include performance in project
documents—e.g. proposals and design briefs.
• Set a “budget” on your site and don’t allow the
site to exceed it (number of requests, page size).
• Helps make every decision through the design/
build process, as something that has consequence.

121. Progressive Reduction

122. “
Your proficiency in a product will
decay over time without usage. As
such, this proficiency is reflected in
experience decays over time. These
decays should be avoided at all costs.
— Allan Grinshtein

123. Progressive Reduction
• Usability is a moving target; users get
smarter at a product as they keep using it.
• An interface should adapt and enable users
to become more efficient at using it.
• Idea: change the UI as the user moves through
different stages of proficiency.

125. Progressive Reduction
• Every UI regresses without usage. For major
features, track and observe their usage.
• Create a proficiency profile for every user;
as a feature is used more, start reducing the
“hand-holding” in a series of levels.

126. • Assign a proficiency level to each feature and
design its variations for each level.
• If a user doesn’t use a feature for a long time, UI
regresses back to level 1.
• If a user uses a feature more, UI keeps increasing
levels to the “advanced” mode.
Progressive Reduction

129. Responsive Design Patterns

130. “
If a design problem can be solved
responsively, eventually it will be
solved responsively.
— You-know-who

141. Conclusion

144. www.smashingbook.com

145. www.the-mobile-book.com

146. Thank you.

148. 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
• Sections illustrations: “bisous les copains”, by
Guillaume Kurkdjian (http://
bisouslescopains.tumblr.com/)
• Hypercube: http://en.academic.ru, Wikipedia