Successfully reported this slideshow.

Mobile First! Responsive webpages @ Przyszłość w IT, Łódź 2013

0

Share

Loading in …3
×
1 of 34
1 of 34

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

Mobile First! Responsive webpages @ Przyszłość w IT, Łódź 2013

  1. 1. RESPONSYWNE STRONY INTERNETOWE MOBILE FIRST! RESPONSIVE WEBPAGES Marcin Zajkowski, SICC - Myśl Mobilnie @ PRZYSZŁOŚĆ W IT 2013 ŁÓDŹ
  2. 2. O MNIE... Absolwent Informatyki PB (Lipiec 2012) ~3 lata doświadczenia jako programista .NET Microsoft Szkoła Nowych Technologii – ExTrener :) SICC.pl (BPN-T) – współwłaściciel, programista MyślMobilnie.pl - ??? Współlaureat głównej nagrody fundowanej przez BPN-T w konkursie „Mój pomysł mój biznes 2012”
  3. 3. CZYM TAK NAPRAWDĘ SĄ RESPONSYWNE STRONY WWW?
  4. 4. "RESPOND" Z ANG. ODPOWIADAĆ, REAGOWAĆ Responsywne strony internetowe reagują zatem i stają się odpowiednie dla środowiska, narzędzia bądź urządzenia, za pomocą którego są przeglądane.
  5. 5. ADAPTIVE VS RESPONSIVE ADAPTACYJNE (?) CZY RESPONSYWNE
  6. 6. W JAKIM CELU? PO CO? Ciekawostka: http://phonecount.com
  7. 7. "SEVEN BILLION" FUC**NG
  8. 8. WRACAJĄC DO B. OBAMY...
  9. 9. INNE PRZYKŁADY Microsoft - http://www.microsoft.com The Boston Globe - http://bostonglobe.com SmashingMag - http://www.smashingmagazine.com SONY - http://www.sony.com Food Sense - http://foodsense.is SICC - http://www.sicc.pl :)
  10. 10. KIEDY TWORZYĆ RWD? Należy rozpatrzyć szereg kwestii, które pozwalają podjąc odpowiednią decyzję. 1. 2. 3. 4. 5. Posiadany czas i pieniądze Wsparcie przegląderek / brak wsparcia Wydajność strony Zawartość (Content) A może WebApp?
  11. 11. .. W KOŃCU, JAK? “ Stop Thinking in Pages. Start Thinking in Systems. ” - Jeremy Keith
  12. 12. "BEST PRACTICES" 1. 2. 3. 4. Wyłącz Photoshop'a, odpal przeglądarkę Mobile first! Dostrzegaj powtarzalność i twórz z tego moduły Zaprzyjaźnij się z narzędziami developerskimi w przeglądarkach :) 5. Optymalizuj wszystko co tylko możliwe
  13. 13. GOTOWE FRAMEWORKI (CZAS) Skeleton - http://www.getskeleton.com/ 320 and Up http://stuffandnonsense.co.uk/projects/320andup/ Bootstrap - http://twitter.github.com/bootstrap/ 1140 CSS GRID - http://cssgrid.net/ Foundation - http://foundation.zurb.com/ Golden Grid System - http://goldengridsystem.com/ ...
  14. 14. WŁASNY SZKIELET (KONTROLA)
  15. 15. META VIEWPORT <eanm=vepr"cnet"it=eiewdh iiilsae1 mx mt ae"iwot otn=wdhdvc-it, nta-cl=, ai mmsae1> u-cl=" Specyfikacje: Microsoft - Apple - Google - Mozilla
  16. 16. CZCIONKI "ems" - wzór: t r e / o t x = w n k agtcnet yi
  17. 17. MEDIA (ZDJĘCIA, FILMY, OBIEKTY) ig vdo ebd ojc { m, ie, me, bet mxwdh 10; a-it: 0% } Pomoce: Fluid Width Videos - Fit Videos
  18. 18. ANALOGICZNIE Tabele - Rotatory - Slidery - etc.
  19. 19. CSS3 MEDIA QUERIES <ikrl"tlset tp=tx/s"he=syecs mda"cen h ln e=syehe" ye"etcs rf"tl.s" ei=sre, aded / nhl" > <ikrl"tlset tp=tx/s"he=ehne.s"mda"cen ln e=syehe" ye"etcs rf"nacdcs ei=sre ad(i-it:4.e) / n mnwdh 05m" > @ei sre ad(i-it:12p){ mda cen n mnwdh 04x scinu l {wdh 2% } eto l i it: 0; } Jeden plik czy kilka plików CSS? To zależy :]
  20. 20. PRZEDZIAŁY / BREAKPOINTS
  21. 21. “ The absence of a media query is in fact, the first media query. ” - Bryan Rieger, Rethinking the Mobile Web
  22. 22. MOBILE FIRST! Style dla telefonu/smartfona poza media queries @ e i dla większych rozdzielczości mda W efekcie - mniej styli, większa płynność, hierarchizacja contentu.
  23. 23. CZY CSS MEDIA QUERIES DZIAŁAJĄ WE WSZYSTKICH PRZEGLĄDARKACH?
  24. 24. * http://caniuse.com NIE! ALE ...
  25. 25. m.in.: CSS3-MEDIAQUERIES.JS [ LINK ]
  26. 26. NARZĘDZIA DEVELOPERSKIE F12 - narzędzia developerskie przeglądarki *R s z W n o , r s z M B o s retc. eieidw eieyrwe, Testy, testy, płacz, testy.. :)
  27. 27. TESTY...
  28. 28. DEMO
  29. 29. PRZEBIEG PRAC 1. Krok 1 : przygotowanie struktury strony (Tagi semantyczne HTML5) 2. Krok 2: Mobile First CSS 3. Krok 3: Media Queries 4. Krok 4: Relatywne miary (em, %) + optymalizacja CSS 5. Krok 5: Nawigacja + galeria + pluginy (tel, geo itp.) 6. Krok 6 : Efekt końcowy
  30. 30. CIEKAWE MATERIAŁY 1. 2. 3. 4. 5. Responsive Web Design - Ethan Marcotte tuts+ SmashingMagazine.com Redesign The Web Mobile First
  31. 31. PODSUMOWANIE Liczba gości na WWW z mobile rośnie w zastraszającym tempie "Future is in Your browser!" Nic na siłę - RWD vs. WebApp vs. m-site Nie bawmy się w wynalazców - liczy się cel
  32. 32. KONTAKT / FEEDBACK m.zajkowski@sicc.pl // http://www.sicc.pl SC mns bilaties IC id, rlin da. Prezentacja: http://www.sicc.pl/PWIT2013LDZ
  33. 33. DZIĘKUJĘ ZA UWAGĘ! :) PYTANIA?

×