2. Wordup Gdańsk #2
Łukasz Farysej - Responsive Web Design
Czym jest RWD?
- Witryna adaptuje się on do wielkości ekranu/urządzenia czy okna przeglądarki
- ukrywa i pokazuje odpowiednie elementy w zależności od medium
- dopasowuje style css
źródło: http://designmodo.com/responsive-design-examples/
3. Wordup Gdańsk #2
Łukasz Farysej - Responsive Web Design
Jakie przeglądarki obsługują RWD?
Przeglądarka
% użytkowników
Wsparcie?
Firefox
41,17%
Tak
Chrome
26,61%
Tak
IE9
IE7, IE8
Opera
8,64%
7,77%*
Niby tak, ale wiesz jak jest... *
Nope*
Tak
wg ranking.pl
6,79%
* jak nie zadeklarujesz <doctype> to dzieją się czary...
* oh, why won't you just die, already? Nobody wants you
* na szczęście są odpowiednie biblioteki js, np:
http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js
4. Wordup Gdańsk #2
Łukasz Farysej - Responsive Web Design
Wszystko fajnie, pięknie
ale czy warto się w to bawić?
Obecnie w Polsce
ok 4,5 % odwiedzin
stanowią wejścia z urządzeń
mobilnych
5. Wordup Gdańsk #2
Łukasz Farysej - Responsive Web Design
Podejście (większości) klientów do wersji mobilnych:
Na początku:
Gdy usłyszą że to nie jest za darmo:
6. Wordup Gdańsk #2
Łukasz Farysej - Responsive Web Design
Responsive Web Design w trzech krokach:
1) stwórz normalną wersję, tak jak lubisz
Jedna zmiana: jeśli chodzi o wielkość fontu, staraj używać się jednostek em zamiast px
(1em to 16px)
Tabela konwersji z px do em: http://pxtoem.com/
Można skorzystać z tricku, który powoduje że 1em to10px, co ułatwia obliczenia (dzielisz wszystko przez 10)
http://www.dtelepathy.com/blog/graveyard/css-font-size-pixel-em-conversion-trick
7. Wordup Gdańsk #2
Łukasz Farysej - Responsive Web Design
Responsive Web Design w trzech krokach:
2) przygotuj <head> strony
<meta name="viewport" content="width=device-width; initial-scale=1.0">
zapobiegnij domyślnemu skalowaniu przez komórki
oraz dodaj skrypty dla naszego kochanego IE :* <3 <buziaczek>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
8. Wordup Gdańsk #2
Łukasz Farysej - Responsive Web Design
Responsive Web Design w trzech krokach:
3) a teraz ta łatwa część!
@media screen and (max-width: 560px) {
#content { width: auto; float: none; }
#sidebar { width: 100%; float: none; }
etc...
}
W załączniku plik testowy - check this shit!
9. Wordup Gdańsk #2
Łukasz Farysej - Responsive Web Design
Co można teraz poprawić?
Głównym zarzutem przeciwko RWD jest pobieranie nadmiernej ilości
danych na urządzeniach mobilnych.
Np. mimo że layout ma 480px szerokości, pobiera się obrazek o szerokości 1920 i skaluje do wielkości 480.
But not anymore!
Biblioteka adaptive images wysyła odpowiednią wersję obrazka w
zależności od początkowej rozdzielczości.
http://adaptive-images.com/
10. Wordup Gdańsk #2
Łukasz Farysej - Responsive Web Design
Przydatne skrypty / narzędzia
https://addons.mozilla.org/en-US/firefox/addon/firebreak/
Obok paska wyszukiwnia w Firefoxie, pokazuje aktualnąszerokość ekranu
http://screenqueri.es/
Narzędzie do emulowania różnych urządzeń i rozdzielczości
https://github.com/thepeg/MediaTable
Szerokie tabele dostosowane do RWD
http://www.netmagazine.com/features/50-fantastic-tools-responsive-web-design
Wiele innych rozwiązań dla RWD - od projektowania po skrypty i emulatory
11. Wordup Gdańsk #2
Łukasz Farysej - Responsive Web Design
No dobra, ale tu jest Word Up, tu się gada o Wordpressie!
Czy jest plugin, który zrobi to za mnie?
12. Wordup Gdańsk #2
Łukasz Farysej - Responsive Web Design
... niestety nie, jeszcze nie.
...ale nie opuszczajcie sali, są inne
przydatne pluginy...
Naprawdę... Zostańcie...
13. Wordup Gdańsk #2
Łukasz Farysej - Responsive Web Design
Plugin w produkcji (od około 10 miesięcy, trzymam za to kciuki):
http://www.responsiveplugin.com/
Pluginy generujące wersje mobilną serwisu (to nie jest RWD, to tylko
generowanie dodatkowych styli z automatu)
http://wordpress.org/extend/plugins/wptouch/
http://wordpress.org/extend/plugins/wp-mobile-edition/
http://wordpress.org/extend/plugins/mobilepress/
Pluginy te tworzą na podstawie bazy danych zaprojektowaną odgórnie
mobilną wersję, nie obsługują Custom Post Types, templates (wyświetlają
jedynie the_content() )
14. Wordup Gdańsk #2
Łukasz Farysej - Responsive Web Design
Kilka przydatnych pluginów:
http://wordpress.org/extend/plugins/wp-fluid-images/
Każdy obrazek dodany w Wordpress ma ustalony width i height - ten plugin pozbywa się tej niedogodności.
http://wordpress.org/extend/plugins/dropdown-menus/
Generuje Drop-down menu zamiast standardowego przy wybranych rozdzielczościach
http://wordpress.org/extend/plugins/fitvids-for-wordpress/
Sprawia że video dostosowywuje się do rozdzielczości
http://wordpress.org/extend/plugins/wp-orbit-slider/
Slider responsywny
15. Wordup Gdańsk #2
Łukasz Farysej - Responsive Web Design
Podsumowanie:
- z wszystkich mobilnych rozwiązań, Responsive Web Design jest najtańszy i najmniej
pracochłonny
- nie musi działać na IE (ważne żeby działało na komórkach)
- wg magazynu Mashable, rok 2013 będzie rokiem Responsive Web Design
(http://mashable.com/2012/12/11/responsive-web-design/)
- liczba pluginów będzie z czasem coraz większa
16. Wordup Gdańsk #2
Łukasz Farysej - Responsive Web Design
Prezentacja (z przykładem RWD) dostępna pod adresem:
http://fryli.nazwa.pl/responsive_presentation.zip
