Responsive Web Design - kto mało pyta, nie błądzi

Responsive Web Design
kto mało pyta, nie błądzi
Jakub Wiśniewski, Kraków 24.5.2013

Agenda
● O znaczeniu słowa „responsive”
● Kilka słów o konsumpcji treści
● Wnioski, przykłady oraz jedna dygresja
● Wskazówki i porady praktyczne

Wstęp
● Poznań – Lublin – Kraków - ...
● UAM / UMCS / Zend PHP5 Certificate
● Freelancer od 2003
● Od 2011 IT Project Leader w

„responsive” wg Oxford Dictionary
reacting quickly and positively
quickly - at a fast speed; rapidly
http://oxforddictionaries.com/definition/english/responsive

WNIOSEK #1
responsive to nie tylko:
@media screen and (max-width: 600px) {
.class {
background: #ccc;
}
}

Trochę o konsumpcji
Różne treści i narzędzia do ich konsumpcji

Tekst pisany i gazeta / książka

Strony WWW i przeglądarki web

Analogia
Strona www i przeglądarka
są jak
tekst pisany i książka

Czy aby na pewno?
Czy strona www i przeglądarka
naprawdę są jak
tekst pisany i książka?

Analogia – podejście drugie
są jak
tekst pisany i książka
audycja TV i telewizor?

WNIOSEK #2
są jak
audycja TV i telewizor

Wielkie Pytanie o Internet,
RWD i Całą Resztę

http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com

POKAZ
● IE
● FF
● Chrome

Techniki i narzędzia
dla większej
prędkości działania
responsive – quickly – at a fast speed; rapidly

Ograniczenia przeglądarek
limit równoległych połączeń na host = 6
http://www.browserscope.org/?category=network

kto mało pyta (serwer o zasoby),
nie błądzi
● mniej plików graficznych
● mniej plików .css
● mniej plików .js

mniej obrazków
● kod CSS3 zamiast <img>
http://css3generator.com/
http://www.cssmatic.com/
● data URIs zamiast <img>
{background: url(data:image/gif;base64,R0lGODlh...)}
https://github.com/nzakas/cssembed
http://dataurl.net/
● image sprites
{background-position: -450px -300px}

XI. optymalizuj
● jpegtran
http://jpegclub.org/
● jpegoptim
http://freshmeat.net/projects/jpegoptim/
● OptiPNG
http://optipng.sourceforge.net/
● PNGOUT
http://www.advsys.net/ken/util/pngout.htm
● TinyPNG
http://tinypng.org/

mniej plików o mniejszym rozmiarze
● cssmin
http://code.google.com/p/cssmin/
● jsmin
http://www.crockford.com/javascript/jsmin.html
● YUIcompressor
http://developer.yahoo.com/yui/compressor/

mniej kodu CSS
div {
display: block;
margin: 0;
}

Mniej HTML
● mniej obiektów DOM
<div><ul><li>... </li></ul></div>
● preg_replace
return preg_replace('/[ ]{2,}/', ' ', preg_replace('/[nrt]{1,}/', '', $html));
● <a href=”http://www.domain.com”>foo<a/>

Mniej transferu
● cache-controll
ExpiresByType image/gif "access plus 1 month"
● kompresja zlib
php_flag zlib.output_compression on
● statyczna treść na subdomeny, najlepiej kilka
● SSL
● lazyloading
● header 301

DNS prefetch
<html>
<head>
<link rel="dns-prefetch" href="//www.domain1.com">
<link rel="prefetch" href="//www.domain2.com"> 
</head>
<body>
...
<img src="www.domain1.com/image1.jpeg">
<script src="www.domain2.com/script1.js">
</body>
</html>

Mniej bajerów*
animacja w JS
=
większe obciążenie CPU
=
większy pobór mocy
=
krótsze życie baterii
*animacje w CSS są OK
{-webkit-transition: background-color .4s linear;}

Minimalizacja zmian układu strony
Deklarowanie wymiaru obrazków
http://dev.w3.org/html5/markup/img.html#img.attrs.height

Czego dziś się dowiedzieliśmy?
● responsive == quick
● Strona www i przeglądarka ~ Audycja i TV
● Nope.
● Mniej jpg, css, js, html
● XI. optymalizuj, kompresuj i cache'uj

Pytania?
Żródła:
http://www.slideshare.net/nzakas/progressive-enhancement-20-conference-agnostic
http://www.slideshare.net/nzakas/mobile-web-speed-bumps
http://wallbase.cc / Google Image

Dziękuję za uwagę
kto mało pyta, nie błądzi
Jakub Wiśniewski - j.w.wisniewski@gmail.com
Responsive Web Design

Responsive Web Design - kto mało pyta, nie błądzi

More Related Content

What's hot

Viewers also liked

Similar to Responsive Web Design - kto mało pyta, nie błądzi

Responsive Web Design - kto mało pyta, nie błądzi

Editor's Notes