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

8.
WRACAJĄC DO B. OBAMY...

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.
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.
.. W KOŃCU, JAK?
“ Stop Thinking in Pages. Start Thinking in
Systems. ”
- Jeremy Keith

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.
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.
WŁASNY SZKIELET
(KONTROLA)

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.
CZCIONKI
"ems" - wzór: t r e / o t x = w n k
agtcnet
yi

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.
ANALOGICZNIE
Tabele - Rotatory - Slidery - etc.

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.
PRZEDZIAŁY / BREAKPOINTS

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

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.
CZY CSS MEDIA
QUERIES DZIAŁAJĄ WE
WSZYSTKICH
PRZEGLĄDARKACH?

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

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

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

28.
DEMO

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.
CIEKAWE MATERIAŁY
1.
2.
3.
4.
5.
Responsive Web Design - Ethan Marcotte
tuts+
SmashingMagazine.com
Redesign The Web
Mobile First

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.
KONTAKT / FEEDBACK
m.zajkowski@sicc.pl // http://www.sicc.pl
SC mns bilaties
IC id, rlin da.
Prezentacja:
http://www.sicc.pl/PWIT2013LDZ

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