Michał Rachowski, Squiz Prezentacja z inspirującego spotkania Netcamp Więcej na http://www.netcamp.pl

1. RWD
czyli
Responsive
Web
Design
15.02.2013, Szczecin Michał Rachowski, SQUIZ

2. Kto?
Michał Rachowski
>Business Manager w SQUIZ
>Pasja wykorzystywania nowych trendów i
technologii do prowadzenia biznesu.
>Czas wolny: game.. -ing -ification -oholic
http://www.linkedin.com/in/michalrachowski
@snihir
email: mrachowski@squiz.pl

3. RWD czyli Responsive Web Design
Plan
>RWD - podstawy
>Twitter Bootstrap
>Projektowanie serwisów mobilnych
>Którędy droga?
>Plusy i minusy.. czyli praktyka
>Model Simona Sineka
>Q&A
>Facebook.com/InformatycyNaRowery

4. RWD czyli Responsive Web Design
Podstawy
>Gartner Inc. - trendy technologiczne na 2013
Mobile Applications and HTML5
The market for tools to create consumer and enterprise facing apps is complex with well
over 100 potential tools vendors. Currently, Gartner separates mobile development tools
into several categories. For the next few years, no single tool will be optimal for all
types of mobile application so expect to employ several. Six mobile architectures –
native, special, hybrid, HTML 5, Message and No Client will remain popular. However, there
will be a long term shift away from native apps to Web apps as HTML5 becomes more
capable. Nevertheless, native apps won't disappear, and will always offer the best user
experiences and most sophisticated features. Developers will also need to develop new
design skills to deliver touch-optimized mobile applications that operate across a range of
devices in a coordinated fashion.
źródło: http://www.gartner.com/newsroom/id/2209615

5. RWD czyli Responsive Web Design
Podstawy
>Elastyczne projektowanie
>Responsywność
>Internetowe trendy
>“Mobile First”?
>Framework
wykres - źródło: Morgan Stanley Research
>HTML 5
>CSS 3
grafiki - źródło: materiały promocyjne Squiz

6. RWD czyli Responsive Web Design
Podstawy
>RWD:
rozdzielczość wyświetlacza
1 serwis na wszystkie urządzenia
1 URL
kadr z filmu ‘RWD’ - źródło: materiały promocyjne Squiz
http://www.youtube.com/watch?
v=uNMw34Z63Ck&list=UUucgtCgItSbZvkMIHAgkzBA&index=8 grafika - źródło: http://www.squiz.net

7. RWD czyli Responsive Web Design
PC
www - źródło: http://www.powerwater.com.au

8. RWD czyli Responsive Web Design
Tablet
www - źródło: http://www.powerwater.com.au

9. RWD czyli Responsive Web Design
Mobile
www - źródło: http://www.powerwater.com.au

10. RWD czyli Responsive Web Design
PC
www - źródło: http://www.westminster-abbey.org

11. RWD czyli Responsive Web Design
Tablet
www - źródło: http://www.westminster-abbey.org

12. RWD czyli Responsive Web Design
Mobile
www - źródło: http://www.westminster-abbey.org

13. RWD czyli Responsive Web Design
Twitter Bootstrap
>http://twitter.github.com/bootstrap
= framework, HTML5, CSS3, JS (jQuery)
>Co oferuje:
1) Scaffolding - czyli szkielet + fluid.. grid, layout, nesting..
2) Base CSS - trochę? gotowych styli, grafik itp.
3) Components - gotowe navi, okienka, karty.. i inne
4) JavaScript (jQ) - czeka gotowa ‘karuzela’ lecz nie tylko..
>Dlaczego warto?
@media ... grafiki - źródło: http://
twitter.github.com/bootstrap

14. RWD czyli Responsive Web Design
Projektowanie serwisów mobilnych
>Serwis, Klient, grupa docelowa, redaktor..
>Zgodność, walidacja, SEO, regulacje prawne..
>Dostępność, użyteczność = “User Mobile First” !!!
>Wspierane przęglądarki.. a ich możliwości
dane - źródło: http://yuilibrary.com/yui/environments
grafika - źródło: http://www.
456bereastreet.com/archive/200612/
dane - źródło: http://www.ranking.pl internet_explorer_and_the_css_box_model

15. RWD czyli Responsive Web Design
Którędy droga?
>Dwa wyjścia?
a) Dedykowana aplikacja
b) Klasyczny seriws internetowy
>b.1) Responsive Web Design (1 URL, 1 HTML)
>b.2) wykrywanie User Agent (1 URL, różne HTML’e)
>b.3) osobne wersje mobilne serwisu (różne URL’e)
Google - źródło: https://
>Google indeksuje zarówno b.1), b.2) jak i b.3) developers.google.com/
webmasters/
smartphone-sites/details
>Czy RWD ma szanse? Na 20 top sprzedawców online w
UK 14 ma wersje mobilne, a tylko 1 RWD
dane - źródło: http://econsultancy.com/pl/
blog/61949-which-of-the-top-20-uk-online-
retailers-use-responsive-design

16. RWD czyli Responsive Web Design
Którędy droga?
>b.1) Responsive Web Design (1 URL, 1 HTML)
HTML 5, CSS 3, m.in. Twitter Bootstrap i nie tylko
PC:
@media (min-width: 1024px) {...}
Tablet:
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {…}
@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : portrait) {…}
Smartfon:
@media only screen and (min-width : 320px) and (max-width : 569px) {…}
@media only screen and (max-width : 320px) and (orientation : portrait) {...}
http://ipn.gov.pl/_designs/css/media.css
@media only screen and (min-width : 10px) and (max-width : 764px) /*and (orientation : portrait)*/
{html {width: 100%; margin: 0px auto;} body {width: 100%; font-family: Arial;}body #text_size
{display: none;} #main_container1,#main_container2,#main_container3 {background: none;}
...
źródło: http://www.ipn.gov.pl

17. RWD czyli Responsive Web Design
Którędy droga?
>b.2) wykrywanie User Agent (1 URL, różne HTML’e)
<script type="text/javascript">
! ! var vd="o2.pl";if(document.domain.indexOf("."+vd)==-1 && document.domain.indexOf(vd)!=0)
{top.location.href="http://www.o2.pl"};
! ! var userAgent = navigator.userAgent.toLowerCase(), mobileiOS = (/iphone|ipod/i.test(userAgent)), mobileAndroid =
(/android/i.test(userAgent)), mobileOperaMini = (/opera mini/i.test(userAgent)), mobileOther = (/blackberry|mini|windowssce|
windowssphone|palm/i.test(userAgent));
! ! if ( mobileiOS || mobileAndroid || mobileOperaMini || mobileOther ) {
! ! ! document.write('<link rel="stylesheet" href="/css/mobile.css" />');
! ! ! document.write('<meta name="viewport" content="width=640" />');
! ! ! if ( mobileOperaMini ) {
! ! ! ! document.write('<link rel="stylesheet" href="/css/mobile_3.css" />');
! ! ! ! document.write('<meta name="viewport" content="width=device-width" />');
! ! ! ! document.write('<style type="text/css">h1 {display:inline; width:120px; height:60px;
float:left;} .mail-header {display: inline-block;padding: 30px 0 0 40px;vertical-align: top;width: 180px; float: left;}.mail-
link {background: url('/img/m.png') -447px -180px no-repeat;display: none;height: 59px;margin: 17px 0 0 20px;width:
192px;float:right;}.mobile-bottom-header {display:none;} .header-mobile {height:100px !important} .section li a {width:
100%};</style>');
! ! ! }
! ! }
! </script>
http://www.o2.pl/css/mobile.css
body{-webkit-text-size-adjust:100%}.sidebar,#stream,#cu-right-
adv,.advertisement,#footer,.alert,.super-hotspot,.hotspots,#header,.content .alert
{display:none !important}.content .alert{width:630px}#page{padding:3px;width:634px}#main
{width:100%}.footer-mobile,.footer-mobile a{color:#a9a9a9}.footer-mobile{display:block !
important;font-size:12px;padding:10px 8px 20px;text-align:center;width:618px}.footer-mobile
...
źródło: http://www.o2.pl

18. RWD czyli Responsive Web Design
Którędy droga?
>b.3) osobne wersje mobilne serwisu (różne URL’e)
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} "iPhone" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "Windows CE" [NC,OR]
np. RewriteCond %{HTTP_USER_AGENT} "BlackBerry" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "NetFront" [NC,OR]
skrypt na RewriteCond %{HTTP_USER_AGENT} "Opera Mini" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "Opera Mobi" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "Palm OS" [NC,OR]
serwerze RewriteCond %{HTTP_USER_AGENT} "Blazer" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "Elaine" [NC,OR]
web
RewriteCond %{HTTP_USER_AGENT} ^WAP.*$ [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "Plucker" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "AvantGo" [NC,OR]
Apache: RewriteCond %{HTTP_USER_AGENT} "Maemo" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "WebKit 3.1" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "Nokia" [NC]
RewriteCond %{QUERY_STRING} !SQ_DESIGN_NAME [NC]
RewriteRule (.+) http://m.%{HTTP_HOST}/?SQ_DESIGN_NAME=mobile [R=301,L]
dane - źródło: http://dystrybucja.tvp.pl
oraz http://m.dystrybucja.tvp.pl/

19. RWD czyli Responsive Web Design
Plusy i minusy.. czyli praktyka
>Powrót do widoku strony ‘PeCetowej’
w zasadzie i z reguły brak http://www.justice.gov.uk/__data/assets/js_file/
<script>
nadzieja w JS i plikach cookie 0003/31656/cookies.js
var expDays = 30;
//loadCss: loads a CSS file into document head var exp = new Date();
function loadCss(url){ exp.setTime(exp.getTime() +
var fileref=document.createElement("link"); (expDays*24*60*60*1000));
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css"); function SetCookie (name, value) {
fileref.setAttribute("href", url); var argv = SetCookie.arguments;
if (typeof fileref!="undefined") var argc = SetCookie.arguments.length;
document.getElementsByTagName("head")[0].appendChild var expires = (argc > 2) ? argv[2] : null;
(fileref); var path = (argc > 3) ? argv[3] : null;
} var domain = (argc > 4) ? argv[4] : null;
if('' == 'full') SetCookie("moj-mqueries- var secure = (argc > 5) ? argv[5] : false;
val","true");
else if('' == 'mobile') DeleteCookie("moj- document.cookie = name + "=" + escape (value) +
mqueries-val"); ((expires == null) ? "" : ("; expires=" +
if(GetCookie("moj-mqueries-val") != "true") expires.toGMTString())) +
loadCss("http://www.justice.gov.uk/_designs/moj/css/ ((path == null) ? "" : ("; path=" + path)) +
media_queries.css"); ((domain == null) ? "" : ("; domain=" + domai
</script> +
http://www.justice.gov.uk/_designs/moj/css/media_queries.css ((secure == true) ? "; secure" : "");
}
@media only screen and (min-device-width : 768px) and (max-
device-width : 1024px) {.container-wrapper{padding:0 7px;} function DeleteCookie (name) {
#highlight-wrapper,#popular,#popular li a:hover,#footer- ...
bar,#footer-bar .social-media{background-size:29px 29px;}}
... www - źródło: http://www.justice.gov.uk

20. RWD czyli Responsive Web Design
Plusy i minusy.. czyli praktyka
>Skalowanie obraków, fancybox, jakość a wielkość
ładowanie dużych grafik
pluginy a padding, margin
www - źródło: http://www.baszta.szczecin.pl

21. RWD czyli Responsive Web Design
Plusy i minusy.. czyli praktyka
>Video, playery, odtwarzanie na wielu urządzeniach
HTML 5 playery a nowe możliwości
videojs.com - 3 formaty są wskazane? (najlepsza jakość,
precyzja, walidacja) albo mały trik?
>trik:
zawsze MP4
a reszta lekki FP
<video vs. <object
dane - źródło: http://www.videojs.com

22. RWD czyli Responsive Web Design
Plusy i minusy.. czyli praktyka
>HTML 5 a przeglądarki
i tu zaczynają się schody..
...
dane - źródło: http://www.ranking.pl
dane - źródło: http://
www.html5test.com

23. RWD czyli Responsive Web Design
Plusy i minusy.. czyli praktyka
>Java Runtime Environment (JRE)
dla np. urządzeń mobilnhch Apple - nieosiągalne
często częściowa i niepełna funkcjonalność
alternatywa - dedykowana aplikacja
źródło: Squiz Matrix
źródło: App Store (Apple)

24. RWD czyli Responsive Web Design
Plusy i minusy.. czyli praktyka
>Rynek? potrzeba? oczekiwania? możliwości?
źródło: aplikacja YouTube na iOS (App Store), http://m.youtube.com oraz http://www.youtube.com

25. RWD czyli Responsive Web Design
Model Simona Sineka
>1. Why czyli Dlaczego?
Pragnienia, oczekiwania, odbiorcy, wymagania, zasoby..
PC, laptop, tablet, telefon, smartfon, rzutnik, wyświetlacz..
>2. How czyli Jak?
Twitter Bootstrap, User Agent, m.###
>3. What czyli Co?
RWD ?
Why/How/What oraz rysunek - źródło:
S.Sinek, http://www.startwithwhy.com

26. RWD czyli Responsive Web Design
Q&A ?
?
? ?
? ?
?
?
?
? ? ?
? ?
?
? ?
?

27. Informatycy Na Rowery
facebook.com/InformatycyNaRowery

28. Dziękuję za uwagę!
Michał Rachowski
http://www.linkedin.com/in/michalrachowski
@snihir
email: mrachowski@squiz.pl