Mobile First! Responsive webpages @ Przyszłość w IT, Łódź 2013
34
RESPONSYWNE STRONY INTERNETOWE MOBILE FIRST! RESPONSIVE WEBPAGES Marcin Zajkowski, @ PRZYSZŁOŚĆ W IT 2013 ŁÓDŹ SICC - Myśl Mobilnie
-
Upload
marcin-zajkowski -
Category
Technology
-
view
220 -
download
6
Transcript of Mobile First! Responsive webpages @ Przyszłość w IT, Łódź 2013
RESPONSYWNE STRONY INTERNETOWE
MOBILE FIRSTRESPONSIVE WEBPAGES
Marcin Zajkowski PRZYSZŁOŚĆ W IT 2013 ŁOacuteDŹSICC - Myśl Mobilnie
O MNIEAbsolwent Informatyki PB (Lipiec 2012)~3 lata doświadczenia jako programista NETMicrosoft Szkoła Nowych Technologii ndash ExTrener )
(BPN-T) ndash wspoacutełwłaściciel programista -
Wspoacutełlaureat głoacutewnej nagrody fundowanej przezBPN-T w konkursie bdquoMoacutej pomysł moacutej biznes 2012rdquo
SICCplMyślMobilniepl
CZYM TAK NAPRAWDĘ SĄ
RESPONSYWNE STRONYWWW
RESPOND Z ANG ODPOWIADAĆ REAGOWAĆ
Responsywne strony internetowe reagują zatem i stająsię odpowiednie dla środowiska narzędzia bądźurządzenia za pomocą ktoacuterego są przeglądane
ADAPTIVE VSRESPONSIVE
ADAPTACYJNE () CZY RESPONSYWNE
W JAKIM CELU PO CO
Ciekawostka httpphonecountcom
SEVENFUCNG
BILLION
WRACAJĄC DO B OBAMY
INNE PRZYKŁADYMicrosoft - The Boston Globe - SmashingMag - SONY - Food Sense -
SICC - )
httpwwwmicrosoftcomhttpbostonglobecom
httpwwwsmashingmagazinecomhttpwwwsonycom
httpfoodsenseis
httpwwwsiccpl
KIEDY TWORZYĆ RWDNależy rozpatrzyć szereg kwestii ktoacutere pozwalają podjąc
odpowiednią decyzję
1 Posiadany czas i pieniądze2 Wsparcie przegląderek brak wsparcia3 Wydajność strony4 Zawartość (Content)5 A może WebApp
W KOŃCU JAK
- Jeremy Keith
ldquo Stop Thinking in Pages Start Thinking inSystems rdquo
BEST PRACTICES1 Wyłącz Photoshopa odpal przeglądarkę2 Mobile first3 Dostrzegaj powtarzalność i twoacuterz z tego moduły4 Zaprzyjaźnij się z narzędziami developerskimi w
przeglądarkach )5 Optymalizuj wszystko co tylko możliwe
GOTOWE FRAMEWORKI (CZAS)Skeleton - 320 and Up -
Bootstrap - 1140 CSS GRID - Foundation - Golden Grid System -
httpwwwgetskeletoncom
httpstuffandnonsensecoukprojects320anduphttptwittergithubcombootstrap
httpcssgridnethttpfoundationzurbcom
httpgoldengridsystemcom
WŁASNY SZKIELET(KONTROLA)
META VIEWPORT
Specyfikacje - - -
ltmeta name=viewport content=width=device-width initial-scale=1 maxi
mum-scale=1gt
Microsoft Apple Google Mozilla
CZCIONKIems - wzoacuter targetcontext = wynik
MEDIA (ZDJĘCIA FILMY OBIEKTY)
Pomoce -
img video embed object
max-width 100
Fluid Width Videos Fit Videos
ANALOGICZNIETabele - Rotatory - Slidery - etc
CSS3 MEDIA QUERIES
Jeden plik czy kilka plikoacutew CSS To zależy ]
ltlink rel=stylesheet type=textcss href=stylecss media=screen h
andheld gt
ltlink rel=stylesheet type=textcss href=enhancedcss media=screen
and (min-width 405em) gt
media screen and (min-width 1024px)
section ul li width 20
PRZEDZIAŁY BREAKPOINTS
- Bryan Rieger Rethinking the Mobile Web
ldquo The absence of a media query is in factthe first media query rdquo
MOBILE FIRSTStyle dla telefonusmartfona poza media queriesmedia dla większych rozdzielczości
W efekcie - mniej styli większa płynność hierarchizacjacontentu
CZY CSS MEDIAQUERIES DZIAŁAJĄ WE
WSZYSTKICHPRZEGLĄDARKACH
NIE ALE
httpcaniusecom
min
CSS3-MEDIAQUERIESJS[ LINK ]
NARZĘDZIA DEVELOPERSKIEF12 - narzędzia developerskie przeglądarkiResizeWindow resizeMyBrowser etc
Testy testy płacz testy )
TESTY
DEMO
PRZEBIEG PRAC1 przygotowanie struktury strony (Tagi
semantyczne HTML5)2 Krok 2 Mobile First CSS3 Krok 3 Media Queries4 Krok 4 Relatywne miary (em ) + optymalizacja CSS5 Krok 5 Nawigacja + galeria + pluginy (tel geo itp)6 Efekt końcowy
Krok 1
Krok 6
CIEKAWE MATERIAŁY1 - Ethan Marcotte2 3 4 5
Responsive Web Designtuts+SmashingMagazinecomRedesign The WebMobile First
PODSUMOWANIELiczba gości na WWW z mobile rośnie wzastraszającym tempieFuture is in Your browserNic na siłę - RWD vs WebApp vs m-siteNie bawmy się w wynalazcoacutew - liczy się cel
KONTAKT FEEDBACK
SICC minds brilliant ideas
Prezentacja
mzajkowskisiccpl httpwwwsiccpl
httpwwwsiccplPWIT2013LDZ
DZIĘKUJĘ ZA UWAGĘ )PYTANIA
O MNIEAbsolwent Informatyki PB (Lipiec 2012)~3 lata doświadczenia jako programista NETMicrosoft Szkoła Nowych Technologii ndash ExTrener )
(BPN-T) ndash wspoacutełwłaściciel programista -
Wspoacutełlaureat głoacutewnej nagrody fundowanej przezBPN-T w konkursie bdquoMoacutej pomysł moacutej biznes 2012rdquo
SICCplMyślMobilniepl
CZYM TAK NAPRAWDĘ SĄ
RESPONSYWNE STRONYWWW
RESPOND Z ANG ODPOWIADAĆ REAGOWAĆ
Responsywne strony internetowe reagują zatem i stająsię odpowiednie dla środowiska narzędzia bądźurządzenia za pomocą ktoacuterego są przeglądane
ADAPTIVE VSRESPONSIVE
ADAPTACYJNE () CZY RESPONSYWNE
W JAKIM CELU PO CO
Ciekawostka httpphonecountcom
SEVENFUCNG
BILLION
WRACAJĄC DO B OBAMY
INNE PRZYKŁADYMicrosoft - The Boston Globe - SmashingMag - SONY - Food Sense -
SICC - )
httpwwwmicrosoftcomhttpbostonglobecom
httpwwwsmashingmagazinecomhttpwwwsonycom
httpfoodsenseis
httpwwwsiccpl
KIEDY TWORZYĆ RWDNależy rozpatrzyć szereg kwestii ktoacutere pozwalają podjąc
odpowiednią decyzję
1 Posiadany czas i pieniądze2 Wsparcie przegląderek brak wsparcia3 Wydajność strony4 Zawartość (Content)5 A może WebApp
W KOŃCU JAK
- Jeremy Keith
ldquo Stop Thinking in Pages Start Thinking inSystems rdquo
BEST PRACTICES1 Wyłącz Photoshopa odpal przeglądarkę2 Mobile first3 Dostrzegaj powtarzalność i twoacuterz z tego moduły4 Zaprzyjaźnij się z narzędziami developerskimi w
przeglądarkach )5 Optymalizuj wszystko co tylko możliwe
GOTOWE FRAMEWORKI (CZAS)Skeleton - 320 and Up -
Bootstrap - 1140 CSS GRID - Foundation - Golden Grid System -
httpwwwgetskeletoncom
httpstuffandnonsensecoukprojects320anduphttptwittergithubcombootstrap
httpcssgridnethttpfoundationzurbcom
httpgoldengridsystemcom
WŁASNY SZKIELET(KONTROLA)
META VIEWPORT
Specyfikacje - - -
ltmeta name=viewport content=width=device-width initial-scale=1 maxi
mum-scale=1gt
Microsoft Apple Google Mozilla
CZCIONKIems - wzoacuter targetcontext = wynik
MEDIA (ZDJĘCIA FILMY OBIEKTY)
Pomoce -
img video embed object
max-width 100
Fluid Width Videos Fit Videos
ANALOGICZNIETabele - Rotatory - Slidery - etc
CSS3 MEDIA QUERIES
Jeden plik czy kilka plikoacutew CSS To zależy ]
ltlink rel=stylesheet type=textcss href=stylecss media=screen h
andheld gt
ltlink rel=stylesheet type=textcss href=enhancedcss media=screen
and (min-width 405em) gt
media screen and (min-width 1024px)
section ul li width 20
PRZEDZIAŁY BREAKPOINTS
- Bryan Rieger Rethinking the Mobile Web
ldquo The absence of a media query is in factthe first media query rdquo
MOBILE FIRSTStyle dla telefonusmartfona poza media queriesmedia dla większych rozdzielczości
W efekcie - mniej styli większa płynność hierarchizacjacontentu
CZY CSS MEDIAQUERIES DZIAŁAJĄ WE
WSZYSTKICHPRZEGLĄDARKACH
NIE ALE
httpcaniusecom
min
CSS3-MEDIAQUERIESJS[ LINK ]
NARZĘDZIA DEVELOPERSKIEF12 - narzędzia developerskie przeglądarkiResizeWindow resizeMyBrowser etc
Testy testy płacz testy )
TESTY
DEMO
PRZEBIEG PRAC1 przygotowanie struktury strony (Tagi
semantyczne HTML5)2 Krok 2 Mobile First CSS3 Krok 3 Media Queries4 Krok 4 Relatywne miary (em ) + optymalizacja CSS5 Krok 5 Nawigacja + galeria + pluginy (tel geo itp)6 Efekt końcowy
Krok 1
Krok 6
CIEKAWE MATERIAŁY1 - Ethan Marcotte2 3 4 5
Responsive Web Designtuts+SmashingMagazinecomRedesign The WebMobile First
PODSUMOWANIELiczba gości na WWW z mobile rośnie wzastraszającym tempieFuture is in Your browserNic na siłę - RWD vs WebApp vs m-siteNie bawmy się w wynalazcoacutew - liczy się cel
KONTAKT FEEDBACK
SICC minds brilliant ideas
Prezentacja
mzajkowskisiccpl httpwwwsiccpl
httpwwwsiccplPWIT2013LDZ
DZIĘKUJĘ ZA UWAGĘ )PYTANIA
CZYM TAK NAPRAWDĘ SĄ
RESPONSYWNE STRONYWWW
RESPOND Z ANG ODPOWIADAĆ REAGOWAĆ
Responsywne strony internetowe reagują zatem i stająsię odpowiednie dla środowiska narzędzia bądźurządzenia za pomocą ktoacuterego są przeglądane
ADAPTIVE VSRESPONSIVE
ADAPTACYJNE () CZY RESPONSYWNE
W JAKIM CELU PO CO
Ciekawostka httpphonecountcom
SEVENFUCNG
BILLION
WRACAJĄC DO B OBAMY
INNE PRZYKŁADYMicrosoft - The Boston Globe - SmashingMag - SONY - Food Sense -
SICC - )
httpwwwmicrosoftcomhttpbostonglobecom
httpwwwsmashingmagazinecomhttpwwwsonycom
httpfoodsenseis
httpwwwsiccpl
KIEDY TWORZYĆ RWDNależy rozpatrzyć szereg kwestii ktoacutere pozwalają podjąc
odpowiednią decyzję
1 Posiadany czas i pieniądze2 Wsparcie przegląderek brak wsparcia3 Wydajność strony4 Zawartość (Content)5 A może WebApp
W KOŃCU JAK
- Jeremy Keith
ldquo Stop Thinking in Pages Start Thinking inSystems rdquo
BEST PRACTICES1 Wyłącz Photoshopa odpal przeglądarkę2 Mobile first3 Dostrzegaj powtarzalność i twoacuterz z tego moduły4 Zaprzyjaźnij się z narzędziami developerskimi w
przeglądarkach )5 Optymalizuj wszystko co tylko możliwe
GOTOWE FRAMEWORKI (CZAS)Skeleton - 320 and Up -
Bootstrap - 1140 CSS GRID - Foundation - Golden Grid System -
httpwwwgetskeletoncom
httpstuffandnonsensecoukprojects320anduphttptwittergithubcombootstrap
httpcssgridnethttpfoundationzurbcom
httpgoldengridsystemcom
WŁASNY SZKIELET(KONTROLA)
META VIEWPORT
Specyfikacje - - -
ltmeta name=viewport content=width=device-width initial-scale=1 maxi
mum-scale=1gt
Microsoft Apple Google Mozilla
CZCIONKIems - wzoacuter targetcontext = wynik
MEDIA (ZDJĘCIA FILMY OBIEKTY)
Pomoce -
img video embed object
max-width 100
Fluid Width Videos Fit Videos
ANALOGICZNIETabele - Rotatory - Slidery - etc
CSS3 MEDIA QUERIES
Jeden plik czy kilka plikoacutew CSS To zależy ]
ltlink rel=stylesheet type=textcss href=stylecss media=screen h
andheld gt
ltlink rel=stylesheet type=textcss href=enhancedcss media=screen
and (min-width 405em) gt
media screen and (min-width 1024px)
section ul li width 20
PRZEDZIAŁY BREAKPOINTS
- Bryan Rieger Rethinking the Mobile Web
ldquo The absence of a media query is in factthe first media query rdquo
MOBILE FIRSTStyle dla telefonusmartfona poza media queriesmedia dla większych rozdzielczości
W efekcie - mniej styli większa płynność hierarchizacjacontentu
CZY CSS MEDIAQUERIES DZIAŁAJĄ WE
WSZYSTKICHPRZEGLĄDARKACH
NIE ALE
httpcaniusecom
min
CSS3-MEDIAQUERIESJS[ LINK ]
NARZĘDZIA DEVELOPERSKIEF12 - narzędzia developerskie przeglądarkiResizeWindow resizeMyBrowser etc
Testy testy płacz testy )
TESTY
DEMO
PRZEBIEG PRAC1 przygotowanie struktury strony (Tagi
semantyczne HTML5)2 Krok 2 Mobile First CSS3 Krok 3 Media Queries4 Krok 4 Relatywne miary (em ) + optymalizacja CSS5 Krok 5 Nawigacja + galeria + pluginy (tel geo itp)6 Efekt końcowy
Krok 1
Krok 6
CIEKAWE MATERIAŁY1 - Ethan Marcotte2 3 4 5
Responsive Web Designtuts+SmashingMagazinecomRedesign The WebMobile First
PODSUMOWANIELiczba gości na WWW z mobile rośnie wzastraszającym tempieFuture is in Your browserNic na siłę - RWD vs WebApp vs m-siteNie bawmy się w wynalazcoacutew - liczy się cel
KONTAKT FEEDBACK
SICC minds brilliant ideas
Prezentacja
mzajkowskisiccpl httpwwwsiccpl
httpwwwsiccplPWIT2013LDZ
DZIĘKUJĘ ZA UWAGĘ )PYTANIA
RESPOND Z ANG ODPOWIADAĆ REAGOWAĆ
Responsywne strony internetowe reagują zatem i stająsię odpowiednie dla środowiska narzędzia bądźurządzenia za pomocą ktoacuterego są przeglądane
ADAPTIVE VSRESPONSIVE
ADAPTACYJNE () CZY RESPONSYWNE
W JAKIM CELU PO CO
Ciekawostka httpphonecountcom
SEVENFUCNG
BILLION
WRACAJĄC DO B OBAMY
INNE PRZYKŁADYMicrosoft - The Boston Globe - SmashingMag - SONY - Food Sense -
SICC - )
httpwwwmicrosoftcomhttpbostonglobecom
httpwwwsmashingmagazinecomhttpwwwsonycom
httpfoodsenseis
httpwwwsiccpl
KIEDY TWORZYĆ RWDNależy rozpatrzyć szereg kwestii ktoacutere pozwalają podjąc
odpowiednią decyzję
1 Posiadany czas i pieniądze2 Wsparcie przegląderek brak wsparcia3 Wydajność strony4 Zawartość (Content)5 A może WebApp
W KOŃCU JAK
- Jeremy Keith
ldquo Stop Thinking in Pages Start Thinking inSystems rdquo
BEST PRACTICES1 Wyłącz Photoshopa odpal przeglądarkę2 Mobile first3 Dostrzegaj powtarzalność i twoacuterz z tego moduły4 Zaprzyjaźnij się z narzędziami developerskimi w
przeglądarkach )5 Optymalizuj wszystko co tylko możliwe
GOTOWE FRAMEWORKI (CZAS)Skeleton - 320 and Up -
Bootstrap - 1140 CSS GRID - Foundation - Golden Grid System -
httpwwwgetskeletoncom
httpstuffandnonsensecoukprojects320anduphttptwittergithubcombootstrap
httpcssgridnethttpfoundationzurbcom
httpgoldengridsystemcom
WŁASNY SZKIELET(KONTROLA)
META VIEWPORT
Specyfikacje - - -
ltmeta name=viewport content=width=device-width initial-scale=1 maxi
mum-scale=1gt
Microsoft Apple Google Mozilla
CZCIONKIems - wzoacuter targetcontext = wynik
MEDIA (ZDJĘCIA FILMY OBIEKTY)
Pomoce -
img video embed object
max-width 100
Fluid Width Videos Fit Videos
ANALOGICZNIETabele - Rotatory - Slidery - etc
CSS3 MEDIA QUERIES
Jeden plik czy kilka plikoacutew CSS To zależy ]
ltlink rel=stylesheet type=textcss href=stylecss media=screen h
andheld gt
ltlink rel=stylesheet type=textcss href=enhancedcss media=screen
and (min-width 405em) gt
media screen and (min-width 1024px)
section ul li width 20
PRZEDZIAŁY BREAKPOINTS
- Bryan Rieger Rethinking the Mobile Web
ldquo The absence of a media query is in factthe first media query rdquo
MOBILE FIRSTStyle dla telefonusmartfona poza media queriesmedia dla większych rozdzielczości
W efekcie - mniej styli większa płynność hierarchizacjacontentu
CZY CSS MEDIAQUERIES DZIAŁAJĄ WE
WSZYSTKICHPRZEGLĄDARKACH
NIE ALE
httpcaniusecom
min
CSS3-MEDIAQUERIESJS[ LINK ]
NARZĘDZIA DEVELOPERSKIEF12 - narzędzia developerskie przeglądarkiResizeWindow resizeMyBrowser etc
Testy testy płacz testy )
TESTY
DEMO
PRZEBIEG PRAC1 przygotowanie struktury strony (Tagi
semantyczne HTML5)2 Krok 2 Mobile First CSS3 Krok 3 Media Queries4 Krok 4 Relatywne miary (em ) + optymalizacja CSS5 Krok 5 Nawigacja + galeria + pluginy (tel geo itp)6 Efekt końcowy
Krok 1
Krok 6
CIEKAWE MATERIAŁY1 - Ethan Marcotte2 3 4 5
Responsive Web Designtuts+SmashingMagazinecomRedesign The WebMobile First
PODSUMOWANIELiczba gości na WWW z mobile rośnie wzastraszającym tempieFuture is in Your browserNic na siłę - RWD vs WebApp vs m-siteNie bawmy się w wynalazcoacutew - liczy się cel
KONTAKT FEEDBACK
SICC minds brilliant ideas
Prezentacja
mzajkowskisiccpl httpwwwsiccpl
httpwwwsiccplPWIT2013LDZ
DZIĘKUJĘ ZA UWAGĘ )PYTANIA
ADAPTIVE VSRESPONSIVE
ADAPTACYJNE () CZY RESPONSYWNE
W JAKIM CELU PO CO
Ciekawostka httpphonecountcom
SEVENFUCNG
BILLION
WRACAJĄC DO B OBAMY
INNE PRZYKŁADYMicrosoft - The Boston Globe - SmashingMag - SONY - Food Sense -
SICC - )
httpwwwmicrosoftcomhttpbostonglobecom
httpwwwsmashingmagazinecomhttpwwwsonycom
httpfoodsenseis
httpwwwsiccpl
KIEDY TWORZYĆ RWDNależy rozpatrzyć szereg kwestii ktoacutere pozwalają podjąc
odpowiednią decyzję
1 Posiadany czas i pieniądze2 Wsparcie przegląderek brak wsparcia3 Wydajność strony4 Zawartość (Content)5 A może WebApp
W KOŃCU JAK
- Jeremy Keith
ldquo Stop Thinking in Pages Start Thinking inSystems rdquo
BEST PRACTICES1 Wyłącz Photoshopa odpal przeglądarkę2 Mobile first3 Dostrzegaj powtarzalność i twoacuterz z tego moduły4 Zaprzyjaźnij się z narzędziami developerskimi w
przeglądarkach )5 Optymalizuj wszystko co tylko możliwe
GOTOWE FRAMEWORKI (CZAS)Skeleton - 320 and Up -
Bootstrap - 1140 CSS GRID - Foundation - Golden Grid System -
httpwwwgetskeletoncom
httpstuffandnonsensecoukprojects320anduphttptwittergithubcombootstrap
httpcssgridnethttpfoundationzurbcom
httpgoldengridsystemcom
WŁASNY SZKIELET(KONTROLA)
META VIEWPORT
Specyfikacje - - -
ltmeta name=viewport content=width=device-width initial-scale=1 maxi
mum-scale=1gt
Microsoft Apple Google Mozilla
CZCIONKIems - wzoacuter targetcontext = wynik
MEDIA (ZDJĘCIA FILMY OBIEKTY)
Pomoce -
img video embed object
max-width 100
Fluid Width Videos Fit Videos
ANALOGICZNIETabele - Rotatory - Slidery - etc
CSS3 MEDIA QUERIES
Jeden plik czy kilka plikoacutew CSS To zależy ]
ltlink rel=stylesheet type=textcss href=stylecss media=screen h
andheld gt
ltlink rel=stylesheet type=textcss href=enhancedcss media=screen
and (min-width 405em) gt
media screen and (min-width 1024px)
section ul li width 20
PRZEDZIAŁY BREAKPOINTS
- Bryan Rieger Rethinking the Mobile Web
ldquo The absence of a media query is in factthe first media query rdquo
MOBILE FIRSTStyle dla telefonusmartfona poza media queriesmedia dla większych rozdzielczości
W efekcie - mniej styli większa płynność hierarchizacjacontentu
CZY CSS MEDIAQUERIES DZIAŁAJĄ WE
WSZYSTKICHPRZEGLĄDARKACH
NIE ALE
httpcaniusecom
min
CSS3-MEDIAQUERIESJS[ LINK ]
NARZĘDZIA DEVELOPERSKIEF12 - narzędzia developerskie przeglądarkiResizeWindow resizeMyBrowser etc
Testy testy płacz testy )
TESTY
DEMO
PRZEBIEG PRAC1 przygotowanie struktury strony (Tagi
semantyczne HTML5)2 Krok 2 Mobile First CSS3 Krok 3 Media Queries4 Krok 4 Relatywne miary (em ) + optymalizacja CSS5 Krok 5 Nawigacja + galeria + pluginy (tel geo itp)6 Efekt końcowy
Krok 1
Krok 6
CIEKAWE MATERIAŁY1 - Ethan Marcotte2 3 4 5
Responsive Web Designtuts+SmashingMagazinecomRedesign The WebMobile First
PODSUMOWANIELiczba gości na WWW z mobile rośnie wzastraszającym tempieFuture is in Your browserNic na siłę - RWD vs WebApp vs m-siteNie bawmy się w wynalazcoacutew - liczy się cel
KONTAKT FEEDBACK
SICC minds brilliant ideas
Prezentacja
mzajkowskisiccpl httpwwwsiccpl
httpwwwsiccplPWIT2013LDZ
DZIĘKUJĘ ZA UWAGĘ )PYTANIA
W JAKIM CELU PO CO
Ciekawostka httpphonecountcom
SEVENFUCNG
BILLION
WRACAJĄC DO B OBAMY
INNE PRZYKŁADYMicrosoft - The Boston Globe - SmashingMag - SONY - Food Sense -
SICC - )
httpwwwmicrosoftcomhttpbostonglobecom
httpwwwsmashingmagazinecomhttpwwwsonycom
httpfoodsenseis
httpwwwsiccpl
KIEDY TWORZYĆ RWDNależy rozpatrzyć szereg kwestii ktoacutere pozwalają podjąc
odpowiednią decyzję
1 Posiadany czas i pieniądze2 Wsparcie przegląderek brak wsparcia3 Wydajność strony4 Zawartość (Content)5 A może WebApp
W KOŃCU JAK
- Jeremy Keith
ldquo Stop Thinking in Pages Start Thinking inSystems rdquo
BEST PRACTICES1 Wyłącz Photoshopa odpal przeglądarkę2 Mobile first3 Dostrzegaj powtarzalność i twoacuterz z tego moduły4 Zaprzyjaźnij się z narzędziami developerskimi w
przeglądarkach )5 Optymalizuj wszystko co tylko możliwe
GOTOWE FRAMEWORKI (CZAS)Skeleton - 320 and Up -
Bootstrap - 1140 CSS GRID - Foundation - Golden Grid System -
httpwwwgetskeletoncom
httpstuffandnonsensecoukprojects320anduphttptwittergithubcombootstrap
httpcssgridnethttpfoundationzurbcom
httpgoldengridsystemcom
WŁASNY SZKIELET(KONTROLA)
META VIEWPORT
Specyfikacje - - -
ltmeta name=viewport content=width=device-width initial-scale=1 maxi
mum-scale=1gt
Microsoft Apple Google Mozilla
CZCIONKIems - wzoacuter targetcontext = wynik
MEDIA (ZDJĘCIA FILMY OBIEKTY)
Pomoce -
img video embed object
max-width 100
Fluid Width Videos Fit Videos
ANALOGICZNIETabele - Rotatory - Slidery - etc
CSS3 MEDIA QUERIES
Jeden plik czy kilka plikoacutew CSS To zależy ]
ltlink rel=stylesheet type=textcss href=stylecss media=screen h
andheld gt
ltlink rel=stylesheet type=textcss href=enhancedcss media=screen
and (min-width 405em) gt
media screen and (min-width 1024px)
section ul li width 20
PRZEDZIAŁY BREAKPOINTS
- Bryan Rieger Rethinking the Mobile Web
ldquo The absence of a media query is in factthe first media query rdquo
MOBILE FIRSTStyle dla telefonusmartfona poza media queriesmedia dla większych rozdzielczości
W efekcie - mniej styli większa płynność hierarchizacjacontentu
CZY CSS MEDIAQUERIES DZIAŁAJĄ WE
WSZYSTKICHPRZEGLĄDARKACH
NIE ALE
httpcaniusecom
min
CSS3-MEDIAQUERIESJS[ LINK ]
NARZĘDZIA DEVELOPERSKIEF12 - narzędzia developerskie przeglądarkiResizeWindow resizeMyBrowser etc
Testy testy płacz testy )
TESTY
DEMO
PRZEBIEG PRAC1 przygotowanie struktury strony (Tagi
semantyczne HTML5)2 Krok 2 Mobile First CSS3 Krok 3 Media Queries4 Krok 4 Relatywne miary (em ) + optymalizacja CSS5 Krok 5 Nawigacja + galeria + pluginy (tel geo itp)6 Efekt końcowy
Krok 1
Krok 6
CIEKAWE MATERIAŁY1 - Ethan Marcotte2 3 4 5
Responsive Web Designtuts+SmashingMagazinecomRedesign The WebMobile First
PODSUMOWANIELiczba gości na WWW z mobile rośnie wzastraszającym tempieFuture is in Your browserNic na siłę - RWD vs WebApp vs m-siteNie bawmy się w wynalazcoacutew - liczy się cel
KONTAKT FEEDBACK
SICC minds brilliant ideas
Prezentacja
mzajkowskisiccpl httpwwwsiccpl
httpwwwsiccplPWIT2013LDZ
DZIĘKUJĘ ZA UWAGĘ )PYTANIA
SEVENFUCNG
BILLION
WRACAJĄC DO B OBAMY
INNE PRZYKŁADYMicrosoft - The Boston Globe - SmashingMag - SONY - Food Sense -
SICC - )
httpwwwmicrosoftcomhttpbostonglobecom
httpwwwsmashingmagazinecomhttpwwwsonycom
httpfoodsenseis
httpwwwsiccpl
KIEDY TWORZYĆ RWDNależy rozpatrzyć szereg kwestii ktoacutere pozwalają podjąc
odpowiednią decyzję
1 Posiadany czas i pieniądze2 Wsparcie przegląderek brak wsparcia3 Wydajność strony4 Zawartość (Content)5 A może WebApp
W KOŃCU JAK
- Jeremy Keith
ldquo Stop Thinking in Pages Start Thinking inSystems rdquo
BEST PRACTICES1 Wyłącz Photoshopa odpal przeglądarkę2 Mobile first3 Dostrzegaj powtarzalność i twoacuterz z tego moduły4 Zaprzyjaźnij się z narzędziami developerskimi w
przeglądarkach )5 Optymalizuj wszystko co tylko możliwe
GOTOWE FRAMEWORKI (CZAS)Skeleton - 320 and Up -
Bootstrap - 1140 CSS GRID - Foundation - Golden Grid System -
httpwwwgetskeletoncom
httpstuffandnonsensecoukprojects320anduphttptwittergithubcombootstrap
httpcssgridnethttpfoundationzurbcom
httpgoldengridsystemcom
WŁASNY SZKIELET(KONTROLA)
META VIEWPORT
Specyfikacje - - -
ltmeta name=viewport content=width=device-width initial-scale=1 maxi
mum-scale=1gt
Microsoft Apple Google Mozilla
CZCIONKIems - wzoacuter targetcontext = wynik
MEDIA (ZDJĘCIA FILMY OBIEKTY)
Pomoce -
img video embed object
max-width 100
Fluid Width Videos Fit Videos
ANALOGICZNIETabele - Rotatory - Slidery - etc
CSS3 MEDIA QUERIES
Jeden plik czy kilka plikoacutew CSS To zależy ]
ltlink rel=stylesheet type=textcss href=stylecss media=screen h
andheld gt
ltlink rel=stylesheet type=textcss href=enhancedcss media=screen
and (min-width 405em) gt
media screen and (min-width 1024px)
section ul li width 20
PRZEDZIAŁY BREAKPOINTS
- Bryan Rieger Rethinking the Mobile Web
ldquo The absence of a media query is in factthe first media query rdquo
MOBILE FIRSTStyle dla telefonusmartfona poza media queriesmedia dla większych rozdzielczości
W efekcie - mniej styli większa płynność hierarchizacjacontentu
CZY CSS MEDIAQUERIES DZIAŁAJĄ WE
WSZYSTKICHPRZEGLĄDARKACH
NIE ALE
httpcaniusecom
min
CSS3-MEDIAQUERIESJS[ LINK ]
NARZĘDZIA DEVELOPERSKIEF12 - narzędzia developerskie przeglądarkiResizeWindow resizeMyBrowser etc
Testy testy płacz testy )
TESTY
DEMO
PRZEBIEG PRAC1 przygotowanie struktury strony (Tagi
semantyczne HTML5)2 Krok 2 Mobile First CSS3 Krok 3 Media Queries4 Krok 4 Relatywne miary (em ) + optymalizacja CSS5 Krok 5 Nawigacja + galeria + pluginy (tel geo itp)6 Efekt końcowy
Krok 1
Krok 6
CIEKAWE MATERIAŁY1 - Ethan Marcotte2 3 4 5
Responsive Web Designtuts+SmashingMagazinecomRedesign The WebMobile First
PODSUMOWANIELiczba gości na WWW z mobile rośnie wzastraszającym tempieFuture is in Your browserNic na siłę - RWD vs WebApp vs m-siteNie bawmy się w wynalazcoacutew - liczy się cel
KONTAKT FEEDBACK
SICC minds brilliant ideas
Prezentacja
mzajkowskisiccpl httpwwwsiccpl
httpwwwsiccplPWIT2013LDZ
DZIĘKUJĘ ZA UWAGĘ )PYTANIA
WRACAJĄC DO B OBAMY
INNE PRZYKŁADYMicrosoft - The Boston Globe - SmashingMag - SONY - Food Sense -
SICC - )
httpwwwmicrosoftcomhttpbostonglobecom
httpwwwsmashingmagazinecomhttpwwwsonycom
httpfoodsenseis
httpwwwsiccpl
KIEDY TWORZYĆ RWDNależy rozpatrzyć szereg kwestii ktoacutere pozwalają podjąc
odpowiednią decyzję
1 Posiadany czas i pieniądze2 Wsparcie przegląderek brak wsparcia3 Wydajność strony4 Zawartość (Content)5 A może WebApp
W KOŃCU JAK
- Jeremy Keith
ldquo Stop Thinking in Pages Start Thinking inSystems rdquo
BEST PRACTICES1 Wyłącz Photoshopa odpal przeglądarkę2 Mobile first3 Dostrzegaj powtarzalność i twoacuterz z tego moduły4 Zaprzyjaźnij się z narzędziami developerskimi w
przeglądarkach )5 Optymalizuj wszystko co tylko możliwe
GOTOWE FRAMEWORKI (CZAS)Skeleton - 320 and Up -
Bootstrap - 1140 CSS GRID - Foundation - Golden Grid System -
httpwwwgetskeletoncom
httpstuffandnonsensecoukprojects320anduphttptwittergithubcombootstrap
httpcssgridnethttpfoundationzurbcom
httpgoldengridsystemcom
WŁASNY SZKIELET(KONTROLA)
META VIEWPORT
Specyfikacje - - -
ltmeta name=viewport content=width=device-width initial-scale=1 maxi
mum-scale=1gt
Microsoft Apple Google Mozilla
CZCIONKIems - wzoacuter targetcontext = wynik
MEDIA (ZDJĘCIA FILMY OBIEKTY)
Pomoce -
img video embed object
max-width 100
Fluid Width Videos Fit Videos
ANALOGICZNIETabele - Rotatory - Slidery - etc
CSS3 MEDIA QUERIES
Jeden plik czy kilka plikoacutew CSS To zależy ]
ltlink rel=stylesheet type=textcss href=stylecss media=screen h
andheld gt
ltlink rel=stylesheet type=textcss href=enhancedcss media=screen
and (min-width 405em) gt
media screen and (min-width 1024px)
section ul li width 20
PRZEDZIAŁY BREAKPOINTS
- Bryan Rieger Rethinking the Mobile Web
ldquo The absence of a media query is in factthe first media query rdquo
MOBILE FIRSTStyle dla telefonusmartfona poza media queriesmedia dla większych rozdzielczości
W efekcie - mniej styli większa płynność hierarchizacjacontentu
CZY CSS MEDIAQUERIES DZIAŁAJĄ WE
WSZYSTKICHPRZEGLĄDARKACH
NIE ALE
httpcaniusecom
min
CSS3-MEDIAQUERIESJS[ LINK ]
NARZĘDZIA DEVELOPERSKIEF12 - narzędzia developerskie przeglądarkiResizeWindow resizeMyBrowser etc
Testy testy płacz testy )
TESTY
DEMO
PRZEBIEG PRAC1 przygotowanie struktury strony (Tagi
semantyczne HTML5)2 Krok 2 Mobile First CSS3 Krok 3 Media Queries4 Krok 4 Relatywne miary (em ) + optymalizacja CSS5 Krok 5 Nawigacja + galeria + pluginy (tel geo itp)6 Efekt końcowy
Krok 1
Krok 6
CIEKAWE MATERIAŁY1 - Ethan Marcotte2 3 4 5
Responsive Web Designtuts+SmashingMagazinecomRedesign The WebMobile First
PODSUMOWANIELiczba gości na WWW z mobile rośnie wzastraszającym tempieFuture is in Your browserNic na siłę - RWD vs WebApp vs m-siteNie bawmy się w wynalazcoacutew - liczy się cel
KONTAKT FEEDBACK
SICC minds brilliant ideas
Prezentacja
mzajkowskisiccpl httpwwwsiccpl
httpwwwsiccplPWIT2013LDZ
DZIĘKUJĘ ZA UWAGĘ )PYTANIA
INNE PRZYKŁADYMicrosoft - The Boston Globe - SmashingMag - SONY - Food Sense -
SICC - )
httpwwwmicrosoftcomhttpbostonglobecom
httpwwwsmashingmagazinecomhttpwwwsonycom
httpfoodsenseis
httpwwwsiccpl
KIEDY TWORZYĆ RWDNależy rozpatrzyć szereg kwestii ktoacutere pozwalają podjąc
odpowiednią decyzję
1 Posiadany czas i pieniądze2 Wsparcie przegląderek brak wsparcia3 Wydajność strony4 Zawartość (Content)5 A może WebApp
W KOŃCU JAK
- Jeremy Keith
ldquo Stop Thinking in Pages Start Thinking inSystems rdquo
BEST PRACTICES1 Wyłącz Photoshopa odpal przeglądarkę2 Mobile first3 Dostrzegaj powtarzalność i twoacuterz z tego moduły4 Zaprzyjaźnij się z narzędziami developerskimi w
przeglądarkach )5 Optymalizuj wszystko co tylko możliwe
GOTOWE FRAMEWORKI (CZAS)Skeleton - 320 and Up -
Bootstrap - 1140 CSS GRID - Foundation - Golden Grid System -
httpwwwgetskeletoncom
httpstuffandnonsensecoukprojects320anduphttptwittergithubcombootstrap
httpcssgridnethttpfoundationzurbcom
httpgoldengridsystemcom
WŁASNY SZKIELET(KONTROLA)
META VIEWPORT
Specyfikacje - - -
ltmeta name=viewport content=width=device-width initial-scale=1 maxi
mum-scale=1gt
Microsoft Apple Google Mozilla
CZCIONKIems - wzoacuter targetcontext = wynik
MEDIA (ZDJĘCIA FILMY OBIEKTY)
Pomoce -
img video embed object
max-width 100
Fluid Width Videos Fit Videos
ANALOGICZNIETabele - Rotatory - Slidery - etc
CSS3 MEDIA QUERIES
Jeden plik czy kilka plikoacutew CSS To zależy ]
ltlink rel=stylesheet type=textcss href=stylecss media=screen h
andheld gt
ltlink rel=stylesheet type=textcss href=enhancedcss media=screen
and (min-width 405em) gt
media screen and (min-width 1024px)
section ul li width 20
PRZEDZIAŁY BREAKPOINTS
- Bryan Rieger Rethinking the Mobile Web
ldquo The absence of a media query is in factthe first media query rdquo
MOBILE FIRSTStyle dla telefonusmartfona poza media queriesmedia dla większych rozdzielczości
W efekcie - mniej styli większa płynność hierarchizacjacontentu
CZY CSS MEDIAQUERIES DZIAŁAJĄ WE
WSZYSTKICHPRZEGLĄDARKACH
NIE ALE
httpcaniusecom
min
CSS3-MEDIAQUERIESJS[ LINK ]
NARZĘDZIA DEVELOPERSKIEF12 - narzędzia developerskie przeglądarkiResizeWindow resizeMyBrowser etc
Testy testy płacz testy )
TESTY
DEMO
PRZEBIEG PRAC1 przygotowanie struktury strony (Tagi
semantyczne HTML5)2 Krok 2 Mobile First CSS3 Krok 3 Media Queries4 Krok 4 Relatywne miary (em ) + optymalizacja CSS5 Krok 5 Nawigacja + galeria + pluginy (tel geo itp)6 Efekt końcowy
Krok 1
Krok 6
CIEKAWE MATERIAŁY1 - Ethan Marcotte2 3 4 5
Responsive Web Designtuts+SmashingMagazinecomRedesign The WebMobile First
PODSUMOWANIELiczba gości na WWW z mobile rośnie wzastraszającym tempieFuture is in Your browserNic na siłę - RWD vs WebApp vs m-siteNie bawmy się w wynalazcoacutew - liczy się cel
KONTAKT FEEDBACK
SICC minds brilliant ideas
Prezentacja
mzajkowskisiccpl httpwwwsiccpl
httpwwwsiccplPWIT2013LDZ
DZIĘKUJĘ ZA UWAGĘ )PYTANIA
KIEDY TWORZYĆ RWDNależy rozpatrzyć szereg kwestii ktoacutere pozwalają podjąc
odpowiednią decyzję
1 Posiadany czas i pieniądze2 Wsparcie przegląderek brak wsparcia3 Wydajność strony4 Zawartość (Content)5 A może WebApp
W KOŃCU JAK
- Jeremy Keith
ldquo Stop Thinking in Pages Start Thinking inSystems rdquo
BEST PRACTICES1 Wyłącz Photoshopa odpal przeglądarkę2 Mobile first3 Dostrzegaj powtarzalność i twoacuterz z tego moduły4 Zaprzyjaźnij się z narzędziami developerskimi w
przeglądarkach )5 Optymalizuj wszystko co tylko możliwe
GOTOWE FRAMEWORKI (CZAS)Skeleton - 320 and Up -
Bootstrap - 1140 CSS GRID - Foundation - Golden Grid System -
httpwwwgetskeletoncom
httpstuffandnonsensecoukprojects320anduphttptwittergithubcombootstrap
httpcssgridnethttpfoundationzurbcom
httpgoldengridsystemcom
WŁASNY SZKIELET(KONTROLA)
META VIEWPORT
Specyfikacje - - -
ltmeta name=viewport content=width=device-width initial-scale=1 maxi
mum-scale=1gt
Microsoft Apple Google Mozilla
CZCIONKIems - wzoacuter targetcontext = wynik
MEDIA (ZDJĘCIA FILMY OBIEKTY)
Pomoce -
img video embed object
max-width 100
Fluid Width Videos Fit Videos
ANALOGICZNIETabele - Rotatory - Slidery - etc
CSS3 MEDIA QUERIES
Jeden plik czy kilka plikoacutew CSS To zależy ]
ltlink rel=stylesheet type=textcss href=stylecss media=screen h
andheld gt
ltlink rel=stylesheet type=textcss href=enhancedcss media=screen
and (min-width 405em) gt
media screen and (min-width 1024px)
section ul li width 20
PRZEDZIAŁY BREAKPOINTS
- Bryan Rieger Rethinking the Mobile Web
ldquo The absence of a media query is in factthe first media query rdquo
MOBILE FIRSTStyle dla telefonusmartfona poza media queriesmedia dla większych rozdzielczości
W efekcie - mniej styli większa płynność hierarchizacjacontentu
CZY CSS MEDIAQUERIES DZIAŁAJĄ WE
WSZYSTKICHPRZEGLĄDARKACH
NIE ALE
httpcaniusecom
min
CSS3-MEDIAQUERIESJS[ LINK ]
NARZĘDZIA DEVELOPERSKIEF12 - narzędzia developerskie przeglądarkiResizeWindow resizeMyBrowser etc
Testy testy płacz testy )
TESTY
DEMO
PRZEBIEG PRAC1 przygotowanie struktury strony (Tagi
semantyczne HTML5)2 Krok 2 Mobile First CSS3 Krok 3 Media Queries4 Krok 4 Relatywne miary (em ) + optymalizacja CSS5 Krok 5 Nawigacja + galeria + pluginy (tel geo itp)6 Efekt końcowy
Krok 1
Krok 6
CIEKAWE MATERIAŁY1 - Ethan Marcotte2 3 4 5
Responsive Web Designtuts+SmashingMagazinecomRedesign The WebMobile First
PODSUMOWANIELiczba gości na WWW z mobile rośnie wzastraszającym tempieFuture is in Your browserNic na siłę - RWD vs WebApp vs m-siteNie bawmy się w wynalazcoacutew - liczy się cel
KONTAKT FEEDBACK
SICC minds brilliant ideas
Prezentacja
mzajkowskisiccpl httpwwwsiccpl
httpwwwsiccplPWIT2013LDZ
DZIĘKUJĘ ZA UWAGĘ )PYTANIA
W KOŃCU JAK
- Jeremy Keith
ldquo Stop Thinking in Pages Start Thinking inSystems rdquo
BEST PRACTICES1 Wyłącz Photoshopa odpal przeglądarkę2 Mobile first3 Dostrzegaj powtarzalność i twoacuterz z tego moduły4 Zaprzyjaźnij się z narzędziami developerskimi w
przeglądarkach )5 Optymalizuj wszystko co tylko możliwe
GOTOWE FRAMEWORKI (CZAS)Skeleton - 320 and Up -
Bootstrap - 1140 CSS GRID - Foundation - Golden Grid System -
httpwwwgetskeletoncom
httpstuffandnonsensecoukprojects320anduphttptwittergithubcombootstrap
httpcssgridnethttpfoundationzurbcom
httpgoldengridsystemcom
WŁASNY SZKIELET(KONTROLA)
META VIEWPORT
Specyfikacje - - -
ltmeta name=viewport content=width=device-width initial-scale=1 maxi
mum-scale=1gt
Microsoft Apple Google Mozilla
CZCIONKIems - wzoacuter targetcontext = wynik
MEDIA (ZDJĘCIA FILMY OBIEKTY)
Pomoce -
img video embed object
max-width 100
Fluid Width Videos Fit Videos
ANALOGICZNIETabele - Rotatory - Slidery - etc
CSS3 MEDIA QUERIES
Jeden plik czy kilka plikoacutew CSS To zależy ]
ltlink rel=stylesheet type=textcss href=stylecss media=screen h
andheld gt
ltlink rel=stylesheet type=textcss href=enhancedcss media=screen
and (min-width 405em) gt
media screen and (min-width 1024px)
section ul li width 20
PRZEDZIAŁY BREAKPOINTS
- Bryan Rieger Rethinking the Mobile Web
ldquo The absence of a media query is in factthe first media query rdquo
MOBILE FIRSTStyle dla telefonusmartfona poza media queriesmedia dla większych rozdzielczości
W efekcie - mniej styli większa płynność hierarchizacjacontentu
CZY CSS MEDIAQUERIES DZIAŁAJĄ WE
WSZYSTKICHPRZEGLĄDARKACH
NIE ALE
httpcaniusecom
min
CSS3-MEDIAQUERIESJS[ LINK ]
NARZĘDZIA DEVELOPERSKIEF12 - narzędzia developerskie przeglądarkiResizeWindow resizeMyBrowser etc
Testy testy płacz testy )
TESTY
DEMO
PRZEBIEG PRAC1 przygotowanie struktury strony (Tagi
semantyczne HTML5)2 Krok 2 Mobile First CSS3 Krok 3 Media Queries4 Krok 4 Relatywne miary (em ) + optymalizacja CSS5 Krok 5 Nawigacja + galeria + pluginy (tel geo itp)6 Efekt końcowy
Krok 1
Krok 6
CIEKAWE MATERIAŁY1 - Ethan Marcotte2 3 4 5
Responsive Web Designtuts+SmashingMagazinecomRedesign The WebMobile First
PODSUMOWANIELiczba gości na WWW z mobile rośnie wzastraszającym tempieFuture is in Your browserNic na siłę - RWD vs WebApp vs m-siteNie bawmy się w wynalazcoacutew - liczy się cel
KONTAKT FEEDBACK
SICC minds brilliant ideas
Prezentacja
mzajkowskisiccpl httpwwwsiccpl
httpwwwsiccplPWIT2013LDZ
DZIĘKUJĘ ZA UWAGĘ )PYTANIA
BEST PRACTICES1 Wyłącz Photoshopa odpal przeglądarkę2 Mobile first3 Dostrzegaj powtarzalność i twoacuterz z tego moduły4 Zaprzyjaźnij się z narzędziami developerskimi w
przeglądarkach )5 Optymalizuj wszystko co tylko możliwe
GOTOWE FRAMEWORKI (CZAS)Skeleton - 320 and Up -
Bootstrap - 1140 CSS GRID - Foundation - Golden Grid System -
httpwwwgetskeletoncom
httpstuffandnonsensecoukprojects320anduphttptwittergithubcombootstrap
httpcssgridnethttpfoundationzurbcom
httpgoldengridsystemcom
WŁASNY SZKIELET(KONTROLA)
META VIEWPORT
Specyfikacje - - -
ltmeta name=viewport content=width=device-width initial-scale=1 maxi
mum-scale=1gt
Microsoft Apple Google Mozilla
CZCIONKIems - wzoacuter targetcontext = wynik
MEDIA (ZDJĘCIA FILMY OBIEKTY)
Pomoce -
img video embed object
max-width 100
Fluid Width Videos Fit Videos
ANALOGICZNIETabele - Rotatory - Slidery - etc
CSS3 MEDIA QUERIES
Jeden plik czy kilka plikoacutew CSS To zależy ]
ltlink rel=stylesheet type=textcss href=stylecss media=screen h
andheld gt
ltlink rel=stylesheet type=textcss href=enhancedcss media=screen
and (min-width 405em) gt
media screen and (min-width 1024px)
section ul li width 20
PRZEDZIAŁY BREAKPOINTS
- Bryan Rieger Rethinking the Mobile Web
ldquo The absence of a media query is in factthe first media query rdquo
MOBILE FIRSTStyle dla telefonusmartfona poza media queriesmedia dla większych rozdzielczości
W efekcie - mniej styli większa płynność hierarchizacjacontentu
CZY CSS MEDIAQUERIES DZIAŁAJĄ WE
WSZYSTKICHPRZEGLĄDARKACH
NIE ALE
httpcaniusecom
min
CSS3-MEDIAQUERIESJS[ LINK ]
NARZĘDZIA DEVELOPERSKIEF12 - narzędzia developerskie przeglądarkiResizeWindow resizeMyBrowser etc
Testy testy płacz testy )
TESTY
DEMO
PRZEBIEG PRAC1 przygotowanie struktury strony (Tagi
semantyczne HTML5)2 Krok 2 Mobile First CSS3 Krok 3 Media Queries4 Krok 4 Relatywne miary (em ) + optymalizacja CSS5 Krok 5 Nawigacja + galeria + pluginy (tel geo itp)6 Efekt końcowy
Krok 1
Krok 6
CIEKAWE MATERIAŁY1 - Ethan Marcotte2 3 4 5
Responsive Web Designtuts+SmashingMagazinecomRedesign The WebMobile First
PODSUMOWANIELiczba gości na WWW z mobile rośnie wzastraszającym tempieFuture is in Your browserNic na siłę - RWD vs WebApp vs m-siteNie bawmy się w wynalazcoacutew - liczy się cel
KONTAKT FEEDBACK
SICC minds brilliant ideas
Prezentacja
mzajkowskisiccpl httpwwwsiccpl
httpwwwsiccplPWIT2013LDZ
DZIĘKUJĘ ZA UWAGĘ )PYTANIA
GOTOWE FRAMEWORKI (CZAS)Skeleton - 320 and Up -
Bootstrap - 1140 CSS GRID - Foundation - Golden Grid System -
httpwwwgetskeletoncom
httpstuffandnonsensecoukprojects320anduphttptwittergithubcombootstrap
httpcssgridnethttpfoundationzurbcom
httpgoldengridsystemcom
WŁASNY SZKIELET(KONTROLA)
META VIEWPORT
Specyfikacje - - -
ltmeta name=viewport content=width=device-width initial-scale=1 maxi
mum-scale=1gt
Microsoft Apple Google Mozilla
CZCIONKIems - wzoacuter targetcontext = wynik
MEDIA (ZDJĘCIA FILMY OBIEKTY)
Pomoce -
img video embed object
max-width 100
Fluid Width Videos Fit Videos
ANALOGICZNIETabele - Rotatory - Slidery - etc
CSS3 MEDIA QUERIES
Jeden plik czy kilka plikoacutew CSS To zależy ]
ltlink rel=stylesheet type=textcss href=stylecss media=screen h
andheld gt
ltlink rel=stylesheet type=textcss href=enhancedcss media=screen
and (min-width 405em) gt
media screen and (min-width 1024px)
section ul li width 20
PRZEDZIAŁY BREAKPOINTS
- Bryan Rieger Rethinking the Mobile Web
ldquo The absence of a media query is in factthe first media query rdquo
MOBILE FIRSTStyle dla telefonusmartfona poza media queriesmedia dla większych rozdzielczości
W efekcie - mniej styli większa płynność hierarchizacjacontentu
CZY CSS MEDIAQUERIES DZIAŁAJĄ WE
WSZYSTKICHPRZEGLĄDARKACH
NIE ALE
httpcaniusecom
min
CSS3-MEDIAQUERIESJS[ LINK ]
NARZĘDZIA DEVELOPERSKIEF12 - narzędzia developerskie przeglądarkiResizeWindow resizeMyBrowser etc
Testy testy płacz testy )
TESTY
DEMO
PRZEBIEG PRAC1 przygotowanie struktury strony (Tagi
semantyczne HTML5)2 Krok 2 Mobile First CSS3 Krok 3 Media Queries4 Krok 4 Relatywne miary (em ) + optymalizacja CSS5 Krok 5 Nawigacja + galeria + pluginy (tel geo itp)6 Efekt końcowy
Krok 1
Krok 6
CIEKAWE MATERIAŁY1 - Ethan Marcotte2 3 4 5
Responsive Web Designtuts+SmashingMagazinecomRedesign The WebMobile First
PODSUMOWANIELiczba gości na WWW z mobile rośnie wzastraszającym tempieFuture is in Your browserNic na siłę - RWD vs WebApp vs m-siteNie bawmy się w wynalazcoacutew - liczy się cel
KONTAKT FEEDBACK
SICC minds brilliant ideas
Prezentacja
mzajkowskisiccpl httpwwwsiccpl
httpwwwsiccplPWIT2013LDZ
DZIĘKUJĘ ZA UWAGĘ )PYTANIA
WŁASNY SZKIELET(KONTROLA)
META VIEWPORT
Specyfikacje - - -
ltmeta name=viewport content=width=device-width initial-scale=1 maxi
mum-scale=1gt
Microsoft Apple Google Mozilla
CZCIONKIems - wzoacuter targetcontext = wynik
MEDIA (ZDJĘCIA FILMY OBIEKTY)
Pomoce -
img video embed object
max-width 100
Fluid Width Videos Fit Videos
ANALOGICZNIETabele - Rotatory - Slidery - etc
CSS3 MEDIA QUERIES
Jeden plik czy kilka plikoacutew CSS To zależy ]
ltlink rel=stylesheet type=textcss href=stylecss media=screen h
andheld gt
ltlink rel=stylesheet type=textcss href=enhancedcss media=screen
and (min-width 405em) gt
media screen and (min-width 1024px)
section ul li width 20
PRZEDZIAŁY BREAKPOINTS
- Bryan Rieger Rethinking the Mobile Web
ldquo The absence of a media query is in factthe first media query rdquo
MOBILE FIRSTStyle dla telefonusmartfona poza media queriesmedia dla większych rozdzielczości
W efekcie - mniej styli większa płynność hierarchizacjacontentu
CZY CSS MEDIAQUERIES DZIAŁAJĄ WE
WSZYSTKICHPRZEGLĄDARKACH
NIE ALE
httpcaniusecom
min
CSS3-MEDIAQUERIESJS[ LINK ]
NARZĘDZIA DEVELOPERSKIEF12 - narzędzia developerskie przeglądarkiResizeWindow resizeMyBrowser etc
Testy testy płacz testy )
TESTY
DEMO
PRZEBIEG PRAC1 przygotowanie struktury strony (Tagi
semantyczne HTML5)2 Krok 2 Mobile First CSS3 Krok 3 Media Queries4 Krok 4 Relatywne miary (em ) + optymalizacja CSS5 Krok 5 Nawigacja + galeria + pluginy (tel geo itp)6 Efekt końcowy
Krok 1
Krok 6
CIEKAWE MATERIAŁY1 - Ethan Marcotte2 3 4 5
Responsive Web Designtuts+SmashingMagazinecomRedesign The WebMobile First
PODSUMOWANIELiczba gości na WWW z mobile rośnie wzastraszającym tempieFuture is in Your browserNic na siłę - RWD vs WebApp vs m-siteNie bawmy się w wynalazcoacutew - liczy się cel
KONTAKT FEEDBACK
SICC minds brilliant ideas
Prezentacja
mzajkowskisiccpl httpwwwsiccpl
httpwwwsiccplPWIT2013LDZ
DZIĘKUJĘ ZA UWAGĘ )PYTANIA
META VIEWPORT
Specyfikacje - - -
ltmeta name=viewport content=width=device-width initial-scale=1 maxi
mum-scale=1gt
Microsoft Apple Google Mozilla
CZCIONKIems - wzoacuter targetcontext = wynik
MEDIA (ZDJĘCIA FILMY OBIEKTY)
Pomoce -
img video embed object
max-width 100
Fluid Width Videos Fit Videos
ANALOGICZNIETabele - Rotatory - Slidery - etc
CSS3 MEDIA QUERIES
Jeden plik czy kilka plikoacutew CSS To zależy ]
ltlink rel=stylesheet type=textcss href=stylecss media=screen h
andheld gt
ltlink rel=stylesheet type=textcss href=enhancedcss media=screen
and (min-width 405em) gt
media screen and (min-width 1024px)
section ul li width 20
PRZEDZIAŁY BREAKPOINTS
- Bryan Rieger Rethinking the Mobile Web
ldquo The absence of a media query is in factthe first media query rdquo
MOBILE FIRSTStyle dla telefonusmartfona poza media queriesmedia dla większych rozdzielczości
W efekcie - mniej styli większa płynność hierarchizacjacontentu
CZY CSS MEDIAQUERIES DZIAŁAJĄ WE
WSZYSTKICHPRZEGLĄDARKACH
NIE ALE
httpcaniusecom
min
CSS3-MEDIAQUERIESJS[ LINK ]
NARZĘDZIA DEVELOPERSKIEF12 - narzędzia developerskie przeglądarkiResizeWindow resizeMyBrowser etc
Testy testy płacz testy )
TESTY
DEMO
PRZEBIEG PRAC1 przygotowanie struktury strony (Tagi
semantyczne HTML5)2 Krok 2 Mobile First CSS3 Krok 3 Media Queries4 Krok 4 Relatywne miary (em ) + optymalizacja CSS5 Krok 5 Nawigacja + galeria + pluginy (tel geo itp)6 Efekt końcowy
Krok 1
Krok 6
CIEKAWE MATERIAŁY1 - Ethan Marcotte2 3 4 5
Responsive Web Designtuts+SmashingMagazinecomRedesign The WebMobile First
PODSUMOWANIELiczba gości na WWW z mobile rośnie wzastraszającym tempieFuture is in Your browserNic na siłę - RWD vs WebApp vs m-siteNie bawmy się w wynalazcoacutew - liczy się cel
KONTAKT FEEDBACK
SICC minds brilliant ideas
Prezentacja
mzajkowskisiccpl httpwwwsiccpl
httpwwwsiccplPWIT2013LDZ
DZIĘKUJĘ ZA UWAGĘ )PYTANIA
CZCIONKIems - wzoacuter targetcontext = wynik
MEDIA (ZDJĘCIA FILMY OBIEKTY)
Pomoce -
img video embed object
max-width 100
Fluid Width Videos Fit Videos
ANALOGICZNIETabele - Rotatory - Slidery - etc
CSS3 MEDIA QUERIES
Jeden plik czy kilka plikoacutew CSS To zależy ]
ltlink rel=stylesheet type=textcss href=stylecss media=screen h
andheld gt
ltlink rel=stylesheet type=textcss href=enhancedcss media=screen
and (min-width 405em) gt
media screen and (min-width 1024px)
section ul li width 20
PRZEDZIAŁY BREAKPOINTS
- Bryan Rieger Rethinking the Mobile Web
ldquo The absence of a media query is in factthe first media query rdquo
MOBILE FIRSTStyle dla telefonusmartfona poza media queriesmedia dla większych rozdzielczości
W efekcie - mniej styli większa płynność hierarchizacjacontentu
CZY CSS MEDIAQUERIES DZIAŁAJĄ WE
WSZYSTKICHPRZEGLĄDARKACH
NIE ALE
httpcaniusecom
min
CSS3-MEDIAQUERIESJS[ LINK ]
NARZĘDZIA DEVELOPERSKIEF12 - narzędzia developerskie przeglądarkiResizeWindow resizeMyBrowser etc
Testy testy płacz testy )
TESTY
DEMO
PRZEBIEG PRAC1 przygotowanie struktury strony (Tagi
semantyczne HTML5)2 Krok 2 Mobile First CSS3 Krok 3 Media Queries4 Krok 4 Relatywne miary (em ) + optymalizacja CSS5 Krok 5 Nawigacja + galeria + pluginy (tel geo itp)6 Efekt końcowy
Krok 1
Krok 6
CIEKAWE MATERIAŁY1 - Ethan Marcotte2 3 4 5
Responsive Web Designtuts+SmashingMagazinecomRedesign The WebMobile First
PODSUMOWANIELiczba gości na WWW z mobile rośnie wzastraszającym tempieFuture is in Your browserNic na siłę - RWD vs WebApp vs m-siteNie bawmy się w wynalazcoacutew - liczy się cel
KONTAKT FEEDBACK
SICC minds brilliant ideas
Prezentacja
mzajkowskisiccpl httpwwwsiccpl
httpwwwsiccplPWIT2013LDZ
DZIĘKUJĘ ZA UWAGĘ )PYTANIA
MEDIA (ZDJĘCIA FILMY OBIEKTY)
Pomoce -
img video embed object
max-width 100
Fluid Width Videos Fit Videos
ANALOGICZNIETabele - Rotatory - Slidery - etc
CSS3 MEDIA QUERIES
Jeden plik czy kilka plikoacutew CSS To zależy ]
ltlink rel=stylesheet type=textcss href=stylecss media=screen h
andheld gt
ltlink rel=stylesheet type=textcss href=enhancedcss media=screen
and (min-width 405em) gt
media screen and (min-width 1024px)
section ul li width 20
PRZEDZIAŁY BREAKPOINTS
- Bryan Rieger Rethinking the Mobile Web
ldquo The absence of a media query is in factthe first media query rdquo
MOBILE FIRSTStyle dla telefonusmartfona poza media queriesmedia dla większych rozdzielczości
W efekcie - mniej styli większa płynność hierarchizacjacontentu
CZY CSS MEDIAQUERIES DZIAŁAJĄ WE
WSZYSTKICHPRZEGLĄDARKACH
NIE ALE
httpcaniusecom
min
CSS3-MEDIAQUERIESJS[ LINK ]
NARZĘDZIA DEVELOPERSKIEF12 - narzędzia developerskie przeglądarkiResizeWindow resizeMyBrowser etc
Testy testy płacz testy )
TESTY
DEMO
PRZEBIEG PRAC1 przygotowanie struktury strony (Tagi
semantyczne HTML5)2 Krok 2 Mobile First CSS3 Krok 3 Media Queries4 Krok 4 Relatywne miary (em ) + optymalizacja CSS5 Krok 5 Nawigacja + galeria + pluginy (tel geo itp)6 Efekt końcowy
Krok 1
Krok 6
CIEKAWE MATERIAŁY1 - Ethan Marcotte2 3 4 5
Responsive Web Designtuts+SmashingMagazinecomRedesign The WebMobile First
PODSUMOWANIELiczba gości na WWW z mobile rośnie wzastraszającym tempieFuture is in Your browserNic na siłę - RWD vs WebApp vs m-siteNie bawmy się w wynalazcoacutew - liczy się cel
KONTAKT FEEDBACK
SICC minds brilliant ideas
Prezentacja
mzajkowskisiccpl httpwwwsiccpl
httpwwwsiccplPWIT2013LDZ
DZIĘKUJĘ ZA UWAGĘ )PYTANIA
ANALOGICZNIETabele - Rotatory - Slidery - etc
CSS3 MEDIA QUERIES
Jeden plik czy kilka plikoacutew CSS To zależy ]
ltlink rel=stylesheet type=textcss href=stylecss media=screen h
andheld gt
ltlink rel=stylesheet type=textcss href=enhancedcss media=screen
and (min-width 405em) gt
media screen and (min-width 1024px)
section ul li width 20
PRZEDZIAŁY BREAKPOINTS
- Bryan Rieger Rethinking the Mobile Web
ldquo The absence of a media query is in factthe first media query rdquo
MOBILE FIRSTStyle dla telefonusmartfona poza media queriesmedia dla większych rozdzielczości
W efekcie - mniej styli większa płynność hierarchizacjacontentu
CZY CSS MEDIAQUERIES DZIAŁAJĄ WE
WSZYSTKICHPRZEGLĄDARKACH
NIE ALE
httpcaniusecom
min
CSS3-MEDIAQUERIESJS[ LINK ]
NARZĘDZIA DEVELOPERSKIEF12 - narzędzia developerskie przeglądarkiResizeWindow resizeMyBrowser etc
Testy testy płacz testy )
TESTY
DEMO
PRZEBIEG PRAC1 przygotowanie struktury strony (Tagi
semantyczne HTML5)2 Krok 2 Mobile First CSS3 Krok 3 Media Queries4 Krok 4 Relatywne miary (em ) + optymalizacja CSS5 Krok 5 Nawigacja + galeria + pluginy (tel geo itp)6 Efekt końcowy
Krok 1
Krok 6
CIEKAWE MATERIAŁY1 - Ethan Marcotte2 3 4 5
Responsive Web Designtuts+SmashingMagazinecomRedesign The WebMobile First
PODSUMOWANIELiczba gości na WWW z mobile rośnie wzastraszającym tempieFuture is in Your browserNic na siłę - RWD vs WebApp vs m-siteNie bawmy się w wynalazcoacutew - liczy się cel
KONTAKT FEEDBACK
SICC minds brilliant ideas
Prezentacja
mzajkowskisiccpl httpwwwsiccpl
httpwwwsiccplPWIT2013LDZ
DZIĘKUJĘ ZA UWAGĘ )PYTANIA
CSS3 MEDIA QUERIES
Jeden plik czy kilka plikoacutew CSS To zależy ]
ltlink rel=stylesheet type=textcss href=stylecss media=screen h
andheld gt
ltlink rel=stylesheet type=textcss href=enhancedcss media=screen
and (min-width 405em) gt
media screen and (min-width 1024px)
section ul li width 20
PRZEDZIAŁY BREAKPOINTS
- Bryan Rieger Rethinking the Mobile Web
ldquo The absence of a media query is in factthe first media query rdquo
MOBILE FIRSTStyle dla telefonusmartfona poza media queriesmedia dla większych rozdzielczości
W efekcie - mniej styli większa płynność hierarchizacjacontentu
CZY CSS MEDIAQUERIES DZIAŁAJĄ WE
WSZYSTKICHPRZEGLĄDARKACH
NIE ALE
httpcaniusecom
min
CSS3-MEDIAQUERIESJS[ LINK ]
NARZĘDZIA DEVELOPERSKIEF12 - narzędzia developerskie przeglądarkiResizeWindow resizeMyBrowser etc
Testy testy płacz testy )
TESTY
DEMO
PRZEBIEG PRAC1 przygotowanie struktury strony (Tagi
semantyczne HTML5)2 Krok 2 Mobile First CSS3 Krok 3 Media Queries4 Krok 4 Relatywne miary (em ) + optymalizacja CSS5 Krok 5 Nawigacja + galeria + pluginy (tel geo itp)6 Efekt końcowy
Krok 1
Krok 6
CIEKAWE MATERIAŁY1 - Ethan Marcotte2 3 4 5
Responsive Web Designtuts+SmashingMagazinecomRedesign The WebMobile First
PODSUMOWANIELiczba gości na WWW z mobile rośnie wzastraszającym tempieFuture is in Your browserNic na siłę - RWD vs WebApp vs m-siteNie bawmy się w wynalazcoacutew - liczy się cel
KONTAKT FEEDBACK
SICC minds brilliant ideas
Prezentacja
mzajkowskisiccpl httpwwwsiccpl
httpwwwsiccplPWIT2013LDZ
DZIĘKUJĘ ZA UWAGĘ )PYTANIA
PRZEDZIAŁY BREAKPOINTS
- Bryan Rieger Rethinking the Mobile Web
ldquo The absence of a media query is in factthe first media query rdquo
MOBILE FIRSTStyle dla telefonusmartfona poza media queriesmedia dla większych rozdzielczości
W efekcie - mniej styli większa płynność hierarchizacjacontentu
CZY CSS MEDIAQUERIES DZIAŁAJĄ WE
WSZYSTKICHPRZEGLĄDARKACH
NIE ALE
httpcaniusecom
min
CSS3-MEDIAQUERIESJS[ LINK ]
NARZĘDZIA DEVELOPERSKIEF12 - narzędzia developerskie przeglądarkiResizeWindow resizeMyBrowser etc
Testy testy płacz testy )
TESTY
DEMO
PRZEBIEG PRAC1 przygotowanie struktury strony (Tagi
semantyczne HTML5)2 Krok 2 Mobile First CSS3 Krok 3 Media Queries4 Krok 4 Relatywne miary (em ) + optymalizacja CSS5 Krok 5 Nawigacja + galeria + pluginy (tel geo itp)6 Efekt końcowy
Krok 1
Krok 6
CIEKAWE MATERIAŁY1 - Ethan Marcotte2 3 4 5
Responsive Web Designtuts+SmashingMagazinecomRedesign The WebMobile First
PODSUMOWANIELiczba gości na WWW z mobile rośnie wzastraszającym tempieFuture is in Your browserNic na siłę - RWD vs WebApp vs m-siteNie bawmy się w wynalazcoacutew - liczy się cel
KONTAKT FEEDBACK
SICC minds brilliant ideas
Prezentacja
mzajkowskisiccpl httpwwwsiccpl
httpwwwsiccplPWIT2013LDZ
DZIĘKUJĘ ZA UWAGĘ )PYTANIA
- Bryan Rieger Rethinking the Mobile Web
ldquo The absence of a media query is in factthe first media query rdquo
MOBILE FIRSTStyle dla telefonusmartfona poza media queriesmedia dla większych rozdzielczości
W efekcie - mniej styli większa płynność hierarchizacjacontentu
CZY CSS MEDIAQUERIES DZIAŁAJĄ WE
WSZYSTKICHPRZEGLĄDARKACH
NIE ALE
httpcaniusecom
min
CSS3-MEDIAQUERIESJS[ LINK ]
NARZĘDZIA DEVELOPERSKIEF12 - narzędzia developerskie przeglądarkiResizeWindow resizeMyBrowser etc
Testy testy płacz testy )
TESTY
DEMO
PRZEBIEG PRAC1 przygotowanie struktury strony (Tagi
semantyczne HTML5)2 Krok 2 Mobile First CSS3 Krok 3 Media Queries4 Krok 4 Relatywne miary (em ) + optymalizacja CSS5 Krok 5 Nawigacja + galeria + pluginy (tel geo itp)6 Efekt końcowy
Krok 1
Krok 6
CIEKAWE MATERIAŁY1 - Ethan Marcotte2 3 4 5
Responsive Web Designtuts+SmashingMagazinecomRedesign The WebMobile First
PODSUMOWANIELiczba gości na WWW z mobile rośnie wzastraszającym tempieFuture is in Your browserNic na siłę - RWD vs WebApp vs m-siteNie bawmy się w wynalazcoacutew - liczy się cel
KONTAKT FEEDBACK
SICC minds brilliant ideas
Prezentacja
mzajkowskisiccpl httpwwwsiccpl
httpwwwsiccplPWIT2013LDZ
DZIĘKUJĘ ZA UWAGĘ )PYTANIA
MOBILE FIRSTStyle dla telefonusmartfona poza media queriesmedia dla większych rozdzielczości
W efekcie - mniej styli większa płynność hierarchizacjacontentu
CZY CSS MEDIAQUERIES DZIAŁAJĄ WE
WSZYSTKICHPRZEGLĄDARKACH
NIE ALE
httpcaniusecom
min
CSS3-MEDIAQUERIESJS[ LINK ]
NARZĘDZIA DEVELOPERSKIEF12 - narzędzia developerskie przeglądarkiResizeWindow resizeMyBrowser etc
Testy testy płacz testy )
TESTY
DEMO
PRZEBIEG PRAC1 przygotowanie struktury strony (Tagi
semantyczne HTML5)2 Krok 2 Mobile First CSS3 Krok 3 Media Queries4 Krok 4 Relatywne miary (em ) + optymalizacja CSS5 Krok 5 Nawigacja + galeria + pluginy (tel geo itp)6 Efekt końcowy
Krok 1
Krok 6
CIEKAWE MATERIAŁY1 - Ethan Marcotte2 3 4 5
Responsive Web Designtuts+SmashingMagazinecomRedesign The WebMobile First
PODSUMOWANIELiczba gości na WWW z mobile rośnie wzastraszającym tempieFuture is in Your browserNic na siłę - RWD vs WebApp vs m-siteNie bawmy się w wynalazcoacutew - liczy się cel
KONTAKT FEEDBACK
SICC minds brilliant ideas
Prezentacja
mzajkowskisiccpl httpwwwsiccpl
httpwwwsiccplPWIT2013LDZ
DZIĘKUJĘ ZA UWAGĘ )PYTANIA
CZY CSS MEDIAQUERIES DZIAŁAJĄ WE
WSZYSTKICHPRZEGLĄDARKACH
NIE ALE
httpcaniusecom
min
CSS3-MEDIAQUERIESJS[ LINK ]
NARZĘDZIA DEVELOPERSKIEF12 - narzędzia developerskie przeglądarkiResizeWindow resizeMyBrowser etc
Testy testy płacz testy )
TESTY
DEMO
PRZEBIEG PRAC1 przygotowanie struktury strony (Tagi
semantyczne HTML5)2 Krok 2 Mobile First CSS3 Krok 3 Media Queries4 Krok 4 Relatywne miary (em ) + optymalizacja CSS5 Krok 5 Nawigacja + galeria + pluginy (tel geo itp)6 Efekt końcowy
Krok 1
Krok 6
CIEKAWE MATERIAŁY1 - Ethan Marcotte2 3 4 5
Responsive Web Designtuts+SmashingMagazinecomRedesign The WebMobile First
PODSUMOWANIELiczba gości na WWW z mobile rośnie wzastraszającym tempieFuture is in Your browserNic na siłę - RWD vs WebApp vs m-siteNie bawmy się w wynalazcoacutew - liczy się cel
KONTAKT FEEDBACK
SICC minds brilliant ideas
Prezentacja
mzajkowskisiccpl httpwwwsiccpl
httpwwwsiccplPWIT2013LDZ
DZIĘKUJĘ ZA UWAGĘ )PYTANIA
NIE ALE
httpcaniusecom
min
CSS3-MEDIAQUERIESJS[ LINK ]
NARZĘDZIA DEVELOPERSKIEF12 - narzędzia developerskie przeglądarkiResizeWindow resizeMyBrowser etc
Testy testy płacz testy )
TESTY
DEMO
PRZEBIEG PRAC1 przygotowanie struktury strony (Tagi
semantyczne HTML5)2 Krok 2 Mobile First CSS3 Krok 3 Media Queries4 Krok 4 Relatywne miary (em ) + optymalizacja CSS5 Krok 5 Nawigacja + galeria + pluginy (tel geo itp)6 Efekt końcowy
Krok 1
Krok 6
CIEKAWE MATERIAŁY1 - Ethan Marcotte2 3 4 5
Responsive Web Designtuts+SmashingMagazinecomRedesign The WebMobile First
PODSUMOWANIELiczba gości na WWW z mobile rośnie wzastraszającym tempieFuture is in Your browserNic na siłę - RWD vs WebApp vs m-siteNie bawmy się w wynalazcoacutew - liczy się cel
KONTAKT FEEDBACK
SICC minds brilliant ideas
Prezentacja
mzajkowskisiccpl httpwwwsiccpl
httpwwwsiccplPWIT2013LDZ
DZIĘKUJĘ ZA UWAGĘ )PYTANIA
min
CSS3-MEDIAQUERIESJS[ LINK ]
NARZĘDZIA DEVELOPERSKIEF12 - narzędzia developerskie przeglądarkiResizeWindow resizeMyBrowser etc
Testy testy płacz testy )
TESTY
DEMO
PRZEBIEG PRAC1 przygotowanie struktury strony (Tagi
semantyczne HTML5)2 Krok 2 Mobile First CSS3 Krok 3 Media Queries4 Krok 4 Relatywne miary (em ) + optymalizacja CSS5 Krok 5 Nawigacja + galeria + pluginy (tel geo itp)6 Efekt końcowy
Krok 1
Krok 6
CIEKAWE MATERIAŁY1 - Ethan Marcotte2 3 4 5
Responsive Web Designtuts+SmashingMagazinecomRedesign The WebMobile First
PODSUMOWANIELiczba gości na WWW z mobile rośnie wzastraszającym tempieFuture is in Your browserNic na siłę - RWD vs WebApp vs m-siteNie bawmy się w wynalazcoacutew - liczy się cel
KONTAKT FEEDBACK
SICC minds brilliant ideas
Prezentacja
mzajkowskisiccpl httpwwwsiccpl
httpwwwsiccplPWIT2013LDZ
DZIĘKUJĘ ZA UWAGĘ )PYTANIA
NARZĘDZIA DEVELOPERSKIEF12 - narzędzia developerskie przeglądarkiResizeWindow resizeMyBrowser etc
Testy testy płacz testy )
TESTY
DEMO
PRZEBIEG PRAC1 przygotowanie struktury strony (Tagi
semantyczne HTML5)2 Krok 2 Mobile First CSS3 Krok 3 Media Queries4 Krok 4 Relatywne miary (em ) + optymalizacja CSS5 Krok 5 Nawigacja + galeria + pluginy (tel geo itp)6 Efekt końcowy
Krok 1
Krok 6
CIEKAWE MATERIAŁY1 - Ethan Marcotte2 3 4 5
Responsive Web Designtuts+SmashingMagazinecomRedesign The WebMobile First
PODSUMOWANIELiczba gości na WWW z mobile rośnie wzastraszającym tempieFuture is in Your browserNic na siłę - RWD vs WebApp vs m-siteNie bawmy się w wynalazcoacutew - liczy się cel
KONTAKT FEEDBACK
SICC minds brilliant ideas
Prezentacja
mzajkowskisiccpl httpwwwsiccpl
httpwwwsiccplPWIT2013LDZ
DZIĘKUJĘ ZA UWAGĘ )PYTANIA
TESTY
DEMO
PRZEBIEG PRAC1 przygotowanie struktury strony (Tagi
semantyczne HTML5)2 Krok 2 Mobile First CSS3 Krok 3 Media Queries4 Krok 4 Relatywne miary (em ) + optymalizacja CSS5 Krok 5 Nawigacja + galeria + pluginy (tel geo itp)6 Efekt końcowy
Krok 1
Krok 6
CIEKAWE MATERIAŁY1 - Ethan Marcotte2 3 4 5
Responsive Web Designtuts+SmashingMagazinecomRedesign The WebMobile First
PODSUMOWANIELiczba gości na WWW z mobile rośnie wzastraszającym tempieFuture is in Your browserNic na siłę - RWD vs WebApp vs m-siteNie bawmy się w wynalazcoacutew - liczy się cel
KONTAKT FEEDBACK
SICC minds brilliant ideas
Prezentacja
mzajkowskisiccpl httpwwwsiccpl
httpwwwsiccplPWIT2013LDZ
DZIĘKUJĘ ZA UWAGĘ )PYTANIA
DEMO
PRZEBIEG PRAC1 przygotowanie struktury strony (Tagi
semantyczne HTML5)2 Krok 2 Mobile First CSS3 Krok 3 Media Queries4 Krok 4 Relatywne miary (em ) + optymalizacja CSS5 Krok 5 Nawigacja + galeria + pluginy (tel geo itp)6 Efekt końcowy
Krok 1
Krok 6
CIEKAWE MATERIAŁY1 - Ethan Marcotte2 3 4 5
Responsive Web Designtuts+SmashingMagazinecomRedesign The WebMobile First
PODSUMOWANIELiczba gości na WWW z mobile rośnie wzastraszającym tempieFuture is in Your browserNic na siłę - RWD vs WebApp vs m-siteNie bawmy się w wynalazcoacutew - liczy się cel
KONTAKT FEEDBACK
SICC minds brilliant ideas
Prezentacja
mzajkowskisiccpl httpwwwsiccpl
httpwwwsiccplPWIT2013LDZ
DZIĘKUJĘ ZA UWAGĘ )PYTANIA
PRZEBIEG PRAC1 przygotowanie struktury strony (Tagi
semantyczne HTML5)2 Krok 2 Mobile First CSS3 Krok 3 Media Queries4 Krok 4 Relatywne miary (em ) + optymalizacja CSS5 Krok 5 Nawigacja + galeria + pluginy (tel geo itp)6 Efekt końcowy
Krok 1
Krok 6
CIEKAWE MATERIAŁY1 - Ethan Marcotte2 3 4 5
Responsive Web Designtuts+SmashingMagazinecomRedesign The WebMobile First
PODSUMOWANIELiczba gości na WWW z mobile rośnie wzastraszającym tempieFuture is in Your browserNic na siłę - RWD vs WebApp vs m-siteNie bawmy się w wynalazcoacutew - liczy się cel
KONTAKT FEEDBACK
SICC minds brilliant ideas
Prezentacja
mzajkowskisiccpl httpwwwsiccpl
httpwwwsiccplPWIT2013LDZ
DZIĘKUJĘ ZA UWAGĘ )PYTANIA
CIEKAWE MATERIAŁY1 - Ethan Marcotte2 3 4 5
Responsive Web Designtuts+SmashingMagazinecomRedesign The WebMobile First
PODSUMOWANIELiczba gości na WWW z mobile rośnie wzastraszającym tempieFuture is in Your browserNic na siłę - RWD vs WebApp vs m-siteNie bawmy się w wynalazcoacutew - liczy się cel
KONTAKT FEEDBACK
SICC minds brilliant ideas
Prezentacja
mzajkowskisiccpl httpwwwsiccpl
httpwwwsiccplPWIT2013LDZ
DZIĘKUJĘ ZA UWAGĘ )PYTANIA
PODSUMOWANIELiczba gości na WWW z mobile rośnie wzastraszającym tempieFuture is in Your browserNic na siłę - RWD vs WebApp vs m-siteNie bawmy się w wynalazcoacutew - liczy się cel
KONTAKT FEEDBACK
SICC minds brilliant ideas
Prezentacja
mzajkowskisiccpl httpwwwsiccpl
httpwwwsiccplPWIT2013LDZ
DZIĘKUJĘ ZA UWAGĘ )PYTANIA
KONTAKT FEEDBACK
SICC minds brilliant ideas
Prezentacja
mzajkowskisiccpl httpwwwsiccpl
httpwwwsiccplPWIT2013LDZ
DZIĘKUJĘ ZA UWAGĘ )PYTANIA
DZIĘKUJĘ ZA UWAGĘ )PYTANIA
