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

Marcin Zajkowski
Marcin ZajkowskiWspółwłaściciel w SICC, Specjalista Umbraco & .NET, PedagoGEEK w WOW School, Konsultant i Prelegent IT at SICC
RESPONSYWNE STRONY INTERNETOWE

MOBILE FIRST!
RESPONSIVE WEBPAGES
Marcin Zajkowski, SICC - Myśl Mobilnie @ PRZYSZŁOŚĆ W IT 2013 ŁÓDŹ
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”
CZYM TAK NAPRAWDĘ SĄ

RESPONSYWNE STRONY
WWW?
"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.
ADAPTIVE VS
RESPONSIVE
ADAPTACYJNE (?) CZY RESPONSYWNE
W JAKIM CELU? PO CO?

Ciekawostka: http://phonecount.com
"SEVEN
BILLION"
FUC**NG
Mobile First! Responsive webpages @ Przyszłość w IT, Łódź 2013
WRACAJĄC DO B. OBAMY...
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 :)
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?
.. 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 moduły
Zaprzyjaźnij się z narzędziami developerskimi w
przeglądarkach :)
5. Optymalizuj wszystko co tylko możliwe
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/
...
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:
Microsoft - Apple - Google - Mozilla
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 Videos
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 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 :]
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 styli, większa płynność, hierarchizacja
contentu.
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,
Testy, testy, płacz, testy.. :)
TESTY...
DEMO
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
CIEKAWE MATERIAŁY
1.
2.
3.
4.
5.

Responsive Web Design - Ethan Marcotte
tuts+
SmashingMagazine.com
Redesign The Web
Mobile First
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
KONTAKT / FEEDBACK

m.zajkowski@sicc.pl // http://www.sicc.pl
SC mns bilaties
IC id, rlin da.
Prezentacja:
http://www.sicc.pl/PWIT2013LDZ
DZIĘKUJĘ ZA UWAGĘ! :)
PYTANIA?
1 of 34

Recommended

Kongres Mobilny: Patryk Bukowiecki, Grupa Allegro by
Kongres Mobilny: Patryk Bukowiecki, Grupa AllegroKongres Mobilny: Patryk Bukowiecki, Grupa Allegro
Kongres Mobilny: Patryk Bukowiecki, Grupa Allegroecommerce poland expo
979 views20 slides
Design Thinking 101 by
Design Thinking 101Design Thinking 101
Design Thinking 101Marcin Chłodnicki
423 views49 slides
Olsztyński Dzień Informatyki - Chmura Azure dla specjalistów IT. Mamy się jej... by
Olsztyński Dzień Informatyki - Chmura Azure dla specjalistów IT. Mamy się jej...Olsztyński Dzień Informatyki - Chmura Azure dla specjalistów IT. Mamy się jej...
Olsztyński Dzień Informatyki - Chmura Azure dla specjalistów IT. Mamy się jej...cieszak
617 views42 slides
Business gets social akademia lotus software 2012 zaproszenie by
Business gets social akademia lotus software 2012 zaproszenieBusiness gets social akademia lotus software 2012 zaproszenie
Business gets social akademia lotus software 2012 zaproszenieWojciech Kroczak
309 views2 slides
Usability i UX - podstawy by
Usability i UX - podstawyUsability i UX - podstawy
Usability i UX - podstawyrtaraszka
2.6K views117 slides
Jak znaleźć dobrego pracownika i zrobić karierę w branży IT – Marzena Zasińsk... by
Jak znaleźć dobrego pracownika i zrobić karierę w branży IT – Marzena Zasińsk...Jak znaleźć dobrego pracownika i zrobić karierę w branży IT – Marzena Zasińsk...
Jak znaleźć dobrego pracownika i zrobić karierę w branży IT – Marzena Zasińsk...Fundacja Rozwoju Branży Internetowej Netcamp
716 views17 slides

More Related Content

More from Marcin Zajkowski

Umbraco - .NET-owy scyzoryk w świecie CMS-ów by
Umbraco - .NET-owy scyzoryk w świecie CMS-ówUmbraco - .NET-owy scyzoryk w świecie CMS-ów
Umbraco - .NET-owy scyzoryk w świecie CMS-ówMarcin Zajkowski
356 views24 slides
[PL] Umbraco - „scyzoryk” w rękach .net developera @ WG.NET, Warszawa 2016 by
[PL] Umbraco - „scyzoryk” w rękach .net developera @ WG.NET, Warszawa 2016[PL] Umbraco - „scyzoryk” w rękach .net developera @ WG.NET, Warszawa 2016
[PL] Umbraco - „scyzoryk” w rękach .net developera @ WG.NET, Warszawa 2016Marcin Zajkowski
363 views20 slides
4th Poland Umbraco Meetup @ państwomiasto, Warsaw 2016 by
4th Poland Umbraco Meetup @ państwomiasto, Warsaw 20164th Poland Umbraco Meetup @ państwomiasto, Warsaw 2016
4th Poland Umbraco Meetup @ państwomiasto, Warsaw 2016Marcin Zajkowski
282 views19 slides
How to Build a strong Remote Team @ Centroom, Białystok 2015 by
How to Build a strong Remote Team @ Centroom, Białystok 2015How to Build a strong Remote Team @ Centroom, Białystok 2015
How to Build a strong Remote Team @ Centroom, Białystok 2015Marcin Zajkowski
1.5K views42 slides
Z[mobi]lizuj się! O tym czego chcieć i jak to zrobić w kontekście dobrej i u... by
Z[mobi]lizuj się! O tym czego chcieć i jak to zrobić w kontekście dobrej i u...Z[mobi]lizuj się! O tym czego chcieć i jak to zrobić w kontekście dobrej i u...
Z[mobi]lizuj się! O tym czego chcieć i jak to zrobić w kontekście dobrej i u...Marcin Zajkowski
573 views22 slides
Osutd by
OsutdOsutd
OsutdMarcin Zajkowski
270 views1 slide

More from Marcin Zajkowski(10)

Umbraco - .NET-owy scyzoryk w świecie CMS-ów by Marcin Zajkowski
Umbraco - .NET-owy scyzoryk w świecie CMS-ówUmbraco - .NET-owy scyzoryk w świecie CMS-ów
Umbraco - .NET-owy scyzoryk w świecie CMS-ów
Marcin Zajkowski356 views
[PL] Umbraco - „scyzoryk” w rękach .net developera @ WG.NET, Warszawa 2016 by Marcin Zajkowski
[PL] Umbraco - „scyzoryk” w rękach .net developera @ WG.NET, Warszawa 2016[PL] Umbraco - „scyzoryk” w rękach .net developera @ WG.NET, Warszawa 2016
[PL] Umbraco - „scyzoryk” w rękach .net developera @ WG.NET, Warszawa 2016
Marcin Zajkowski363 views
4th Poland Umbraco Meetup @ państwomiasto, Warsaw 2016 by Marcin Zajkowski
4th Poland Umbraco Meetup @ państwomiasto, Warsaw 20164th Poland Umbraco Meetup @ państwomiasto, Warsaw 2016
4th Poland Umbraco Meetup @ państwomiasto, Warsaw 2016
Marcin Zajkowski282 views
How to Build a strong Remote Team @ Centroom, Białystok 2015 by Marcin Zajkowski
How to Build a strong Remote Team @ Centroom, Białystok 2015How to Build a strong Remote Team @ Centroom, Białystok 2015
How to Build a strong Remote Team @ Centroom, Białystok 2015
Marcin Zajkowski1.5K views
Z[mobi]lizuj się! O tym czego chcieć i jak to zrobić w kontekście dobrej i u... by Marcin Zajkowski
Z[mobi]lizuj się! O tym czego chcieć i jak to zrobić w kontekście dobrej i u...Z[mobi]lizuj się! O tym czego chcieć i jak to zrobić w kontekście dobrej i u...
Z[mobi]lizuj się! O tym czego chcieć i jak to zrobić w kontekście dobrej i u...
Marcin Zajkowski573 views
Grywalizacja na festiwalu Original Source Up To Date w Białymstoku @ 2013 by Marcin Zajkowski
Grywalizacja na festiwalu Original Source Up To Date w Białymstoku @ 2013Grywalizacja na festiwalu Original Source Up To Date w Białymstoku @ 2013
Grywalizacja na festiwalu Original Source Up To Date w Białymstoku @ 2013
Marcin Zajkowski217 views
We are SICC @ Wizyta studyjnych dziennikarzy, BPN-T, Białystok by Marcin Zajkowski
We are SICC @ Wizyta studyjnych dziennikarzy, BPN-T, BiałystokWe are SICC @ Wizyta studyjnych dziennikarzy, BPN-T, Białystok
We are SICC @ Wizyta studyjnych dziennikarzy, BPN-T, Białystok
Marcin Zajkowski253 views
Cross-platformowe aplikacje mobilne tworzone w oparciu o framework Sencha Tou... by Marcin Zajkowski
Cross-platformowe aplikacje mobilne tworzone w oparciu o framework Sencha Tou...Cross-platformowe aplikacje mobilne tworzone w oparciu o framework Sencha Tou...
Cross-platformowe aplikacje mobilne tworzone w oparciu o framework Sencha Tou...
Marcin Zajkowski1.2K views
Dive into HTML5 - Marcin Zajkowski @ SNT, Microsoft by Marcin Zajkowski
Dive into HTML5 - Marcin Zajkowski @ SNT, MicrosoftDive into HTML5 - Marcin Zajkowski @ SNT, Microsoft
Dive into HTML5 - Marcin Zajkowski @ SNT, Microsoft
Marcin Zajkowski756 views

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