Your SlideShare is downloading. ×
  • Like
  • Save
Responsive Web Design - Michał Rachowski Squiz
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Responsive Web Design - Michał Rachowski Squiz

  • 965 views
Published

Michał Rachowski, Squiz …

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

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
965
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. RWDczyliResponsiveWebDesign15.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 DesignPlan>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 DesignPodstawy>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 wont 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 DesignPodstawy>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 DesignPodstawy>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 DesignPC www - źródło: http://www.powerwater.com.au
  • 8. RWD czyli Responsive Web DesignTablet www - źródło: http://www.powerwater.com.au
  • 9. RWD czyli Responsive Web DesignMobile www - źródło: http://www.powerwater.com.au
  • 10. RWD czyli Responsive Web DesignPC www - źródło: http://www.westminster-abbey.org
  • 11. RWD czyli Responsive Web DesignTablet www - źródło: http://www.westminster-abbey.org
  • 12. RWD czyli Responsive Web DesignMobile www - źródło: http://www.westminster-abbey.org
  • 13. RWD czyli Responsive Web DesignTwitter 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 DesignProjektowanie 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 DesignKtó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 DesignKtó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 DesignKtó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 DesignPlusy 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 DesignPlusy 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 DesignPlusy 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 DesignPlusy 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 DesignModel 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 Roweryfacebook.com/InformatycyNaRowery
  • 28. Dziękuję za uwagę!Michał Rachowski http://www.linkedin.com/in/michalrachowski @snihir email: mrachowski@squiz.pl