Beruflich Dokumente
Kultur Dokumente
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.
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
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)
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)
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; }
<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; }
</style>
</defs>
<g>
<image id="small" height="329" width="300" xlink:href="small.png" />
Clown Car Technique (With SVG)
Enhancement
(JS, Geolocation, touch, enhanced CSS, Web fonts, widgets);
Leftovers
(analytics, advertising, third-party content).
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
}
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>
Steven C. Seow, Designing and Engineering Time: The Psychology of Time Perception
Optimistic Interfaces
Brad Frost
Performance Budget
Allan Grinshtein
Progressive Reduction
You-know-who
Conclusion
www.smashingbook.com
www.the-mobile-book.com
Thank you.
Image credits