New Perspectives in

Web Design
Vitaly Friedman
02/10/2013 YAC, Moscow
Vitaly Friedman, editor-in-chief
and co-founder of SmashingMag
This talk is about new techniques.
This talk is about new techniques.
And about clever UX patterns.
This talk is about new techniques.
And about clever UX patterns.
And what works in real-life projects.
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

Designing for the Web is like
visualizing a tesseract. We build
experiences by manipulating
their shadows.
Tim Brown
Responsive Design is an appropriate
tool for multi-dimensional designs.
Its a new mindset that requires us
to rethink and extend our practices.
Designing Systems

If youre used to designing fixed-
width layouts, its 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/

...Once you overcome that initial
struggle of adapting to a new
process, designing and building
responsive sites neednt 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/

...The homepage is comprised of
Lego-like building blocks designed to
be combined together...

Dave Rupert

...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
 Responsive Deliverables

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

High pixel density displays prompt us to

create future-proof solutions for graphics.

Creating multiple assets for the same

graphics (not photos) isnt future-proof.

Two options: SVG and Icon Fonts.

 HTML: PNG sprites
<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; }
 HTML: SVG sprites
<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; }
 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).
 HTML: Icon Fonts
<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"; }
 HTML: Icon Fonts
<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 */
}
 Resolution Independence
(Web Fonts)

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)

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
 Compressive Images

To display photos properly on high pixel

density displays, we dont need hi-res images.

If a JPG image has relatively small

dimensions, we can use a workaround to
keep its size small.

...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
its highly compressed and
dramatically larger in dimensions
than it is displayed.
Daan Jobsis
600400px file, 0% JPEG quality,
displayed in 600400 (file size 7 Kb)
600400px file, 0% JPEG quality,
displayed in 300200 (file size 7 Kb)
300200px file (21 Kb) 600400px file (7 Kb)
_________________________________ ________________________________
80% JPEG quality 0% JPEG quality
displayed in 300200 displayed in 300200
 Responsive Images

For photos, consider using Scott Jehls

Picturefill or Tyson Matanichs 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.
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" />
 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>
 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>

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

<g>
<image id="small" height="329" width="300" xlink:href="small.png" />
 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>

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

<g>
<image id="small" height="329" width="300" xlink:href="small.png" />
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.

Conditional Loading
 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.
 The Guardians 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.
 The Guardians 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>
}
 The Guardians 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>
}
 BBCs 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
}
 BBCs isModernBrowser( )

JS:
if (
'querySelector' in document &&
'localStorage' in window &&
'addEventListener' in window ) {
// HTML5 browser detected; load the JS app
}

HTML5 Browsers: HTML4 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
IE8-, Blackberry OS5-,
Nokia S60 v6-, Nokia S40,
Symbian, Windows 7 Phone (pre-Mango), a
plethora of legacy devices.
 Gmails 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.

Gmails case:
200 Kb of JS -> 2600 ms page load
200 Kb of JS (lazy loaded) -> 240 ms page load
 Gmails 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>

 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).
Optimistic Interfaces
 Optimistic Interfaces

Performance is not only about technology;

its 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 users next steps.

Steven C. Seow, Designing and Engineering Time: The Psychology of Time Perception
 Optimistic Interfaces

Perform actions optimistically

Pretend that an action succeeded right away.

Adaptively prefetch content

Reprioritize loading based on users actions.

Move bits when no one is watching

Keep users busy while boring stu happens.

Mike Krieger, co-founder of Instagram, Secrets to Lightning-Fast Mobile Design


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.

Performance isnt solely a technical
concern for developers. Its time to
treat performance as an essential
design feature.

Brad Frost
 Performance Budget

Idea: always include performance in project

documentse.g. proposals and design briefs.

Set a budget on your site and dont 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.
Progressive Reduction

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
 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 ecient at using it.

Idea: change the UI as the user moves through

dierent stages of proficiency.
 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.
 Progressive Reduction

Assign a proficiency level to each feature and

design its variations for each level.

If a user doesnt 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.
Responsive Design Patterns

If a design problem can be solved
responsively, eventually it will be
solved responsively.

You-know-who
Conclusion
www.smashingbook.com
www.the-mobile-book.com
Thank you.
 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