1. RESPONSYWNE STRONY INTERNETOWE
MOBILE FIRST!
RESPONSIVE WEBPAGES
Marcin Zajkowski, SICC - Myśl Mobilnie @ PRZYSZŁOŚĆ W IT 2013 ŁÓDŹ

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. CZYM TAK NAPRAWDĘ SĄ
RESPONSYWNE STRONY
WWW?

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. ADAPTIVE VS
RESPONSIVE
ADAPTACYJNE (?) CZY RESPONSYWNE

6. W JAKIM CELU? PO CO?
Ciekawostka: http://phonecount.com

7. "SEVEN
BILLION"
FUC**NG

9. WRACAJĄC DO B. OBAMY...

10. 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 :)

11. 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?

12. .. W KOŃCU, JAK?
“ Stop Thinking in Pages. Start Thinking in
Systems. ”
- Jeremy Keith

13. "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

14. 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/
...

15. WŁASNY SZKIELET
(KONTROLA)

16. 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

17. CZCIONKI
"ems" - wzór: t r e / o t x = w n k
agtcnet
yi

18. MEDIA (ZDJĘCIA, FILMY, OBIEKTY)
ig vdo ebd ojc {
m, ie, me, bet
mxwdh 10;
a-it: 0%
}
Pomoce:
Fluid Width Videos - Fit Videos

19. ANALOGICZNIE
Tabele - Rotatory - Slidery - etc.

20. 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 :]

21. PRZEDZIAŁY / BREAKPOINTS

22. “ The absence of a media query is in fact,
the first media query. ”
- Bryan Rieger, Rethinking the Mobile Web

23. 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.

24. CZY CSS MEDIA
QUERIES DZIAŁAJĄ WE
WSZYSTKICH
PRZEGLĄDARKACH?

25. * http://caniuse.com
NIE! ALE ...

26. m.in.:
CSS3-MEDIAQUERIES.JS
[ LINK ]

27. 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.. :)

28. TESTY...

29. DEMO

30. 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

31. CIEKAWE MATERIAŁY
1.
2.
3.
4.
5.
Responsive Web Design - Ethan Marcotte
tuts+
SmashingMagazine.com
Redesign The Web
Mobile First

32. 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

33. KONTAKT / FEEDBACK
m.zajkowski@sicc.pl // http://www.sicc.pl
SC mns bilaties
IC id, rlin da.
Prezentacja:
http://www.sicc.pl/PWIT2013LDZ

34. DZIĘKUJĘ ZA UWAGĘ! :)
PYTANIA?