SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
Mobile First! Responsive webpages @ Przyszłość w IT, Łódź 2013
Mobile First! Responsive webpages @ Przyszłość w IT, Łódź 2013
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”
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
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/
...
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 :]
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?
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.. :)
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