Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
RESPONSYWNE STRONY INTERNETOWE

MOBILE FIRST!
RESPONSIVE WEBPAGES
Marcin Zajkowski, SICC - Myśl Mobilnie @ PRZYSZŁOŚĆ W IT...
O MNIE...
Absolwent Informatyki PB (Lipiec 2012)
~3 lata doświadczenia jako programista .NET
Microsoft Szkoła Nowych Techn...
CZYM TAK NAPRAWDĘ SĄ

RESPONSYWNE STRONY
WWW?
"RESPOND" Z ANG. ODPOWIADAĆ, REAGOWAĆ
Responsywne strony internetowe reagują zatem i stają
się odpowiednie dla środowiska,...
ADAPTIVE VS
RESPONSIVE
ADAPTACYJNE (?) CZY RESPONSYWNE
W JAKIM CELU? PO CO?

Ciekawostka: http://phonecount.com
"SEVEN
BILLION"
FUC**NG
WRACAJĄC DO B. OBAMY...
INNE PRZYKŁADY
Microsoft - http://www.microsoft.com
The Boston Globe - http://bostonglobe.com
SmashingMag - http://www.sma...
KIEDY TWORZYĆ RWD?
Należy rozpatrzyć szereg kwestii, które pozwalają podjąc
odpowiednią decyzję.
1.
2.
3.
4.
5.

Posiadany...
.. W KOŃCU, JAK?
“ Stop Thinking in Pages. Start Thinking in
Systems. ”
- Jeremy Keith
"BEST PRACTICES"
1.
2.
3.
4.

Wyłącz Photoshop'a, odpal przeglądarkę
Mobile first!
Dostrzegaj powtarzalność i twórz z tego...
GOTOWE FRAMEWORKI (CZAS)
Skeleton - http://www.getskeleton.com/
320 and Up http://stuffandnonsense.co.uk/projects/320andup...
WŁASNY SZKIELET
(KONTROLA)
META VIEWPORT
<eanm=vepr"cnet"it=eiewdh iiilsae1 mx
mt ae"iwot otn=wdhdvc-it, nta-cl=, ai
mmsae1>
u-cl="

Specyfikacje:
Mi...
CZCIONKI
"ems" - wzór: t r e / o t x = w n k
agtcnet
yi
MEDIA (ZDJĘCIA, FILMY, OBIEKTY)
ig vdo ebd ojc {
m, ie, me, bet
mxwdh 10;
a-it: 0%
}

Pomoce:
Fluid Width Videos - Fit Vid...
ANALOGICZNIE
Tabele - Rotatory - Slidery - etc.
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 t...
PRZEDZIAŁY / BREAKPOINTS
“ The absence of a media query is in fact,
the first media query. ”
- Bryan Rieger, Rethinking the Mobile Web
MOBILE FIRST!
Style dla telefonu/smartfona poza media queries
@ e i dla większych rozdzielczości
mda
W efekcie - mniej sty...
CZY CSS MEDIA
QUERIES DZIAŁAJĄ WE
WSZYSTKICH
PRZEGLĄDARKACH?
* http://caniuse.com

NIE! ALE ...
m.in.:

CSS3-MEDIAQUERIES.JS
[ LINK ]
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,
Test...
TESTY...
DEMO
PRZEBIEG PRAC
1. Krok 1 : przygotowanie struktury strony (Tagi
semantyczne HTML5)
2. Krok 2: Mobile First CSS
3. Krok 3: M...
CIEKAWE MATERIAŁY
1.
2.
3.
4.
5.

Responsive Web Design - Ethan Marcotte
tuts+
SmashingMagazine.com
Redesign The Web
Mobil...
PODSUMOWANIE
Liczba gości na WWW z mobile rośnie w
zastraszającym tempie
"Future is in Your browser!"
Nic na siłę - RWD vs...
KONTAKT / FEEDBACK

m.zajkowski@sicc.pl // http://www.sicc.pl
SC mns bilaties
IC id, rlin da.
Prezentacja:
http://www.sicc...
DZIĘKUJĘ ZA UWAGĘ! :)
PYTANIA?
Mobile First! Responsive webpages @ Przyszłość w IT, Łódź 2013
Upcoming SlideShare
Loading in …5
×

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

432 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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?

×