Responsive Web Design

Responsive Web Design (RWD)

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/


Jakie przeglądarki obsługują RWD?

Przeglądarka

Firefox

Chrome

Opera

IE7, IE8

IE9

26,61%

7,77%*

6,79%

8,64%

41,17% Tak

Tak

Tak

Nope*

Niby tak, ale wiesz jak jest... *

Wsparcie?% użytkowników wg ranking.pl

* 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

* jak nie zadeklarujesz <doctype> to dzieją się czary...


Wszystko fajnie, pięknie ale czy warto się w to bawić?

Obecnie w Polsce odwiedzin

stanowią wejścia z urządzeńmobilnych

ok 4,5 %



Podejście (większości) klientów do wersji mobilnych:

Na początku: Gdy usłyszą że to nie jest za darmo:


Responsive Web Design w trzech krokach:

1) stwórz normalną wersję, tak jak lubiszJedna 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

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>


@media screen and (max-width: 560px) {#content { width: auto; float: none; }#sidebar { width: 100%; float: none; }

.}

etc..


3) a teraz ta łatwa część!

W załączniku plik testowy - check this shit!


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.

Biblioteka adaptive images wysyła odpowiednią wersję obrazka w zależności od początkowej rozdzielczości. http://adaptive-images.com/

But not anymore!


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/MediaTableSzerokie tabele dostosowane do RWD

http://www.netmagazine.com/features/50-fantastic-tools-responsive-web-designWiele innych rozwiązań dla RWD - od projektowania po skrypty i emulatory


No dobra, ale tu jest Word Up, tu się gada o Wordpressie!

Czy jest plugin, który zrobi to za mnie?


... niestety nie, jeszcze nie.

...ale nie opuszczajcie sali, są inne przydatne pluginy...

Naprawdę... Zostańcie...


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órniemobilną wersję, nie obsługują Custom Post Types, templates (wyświetlająjedynie the_content() )


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


Podsumowanie:

- z wszystkich mobilnych rozwiązań, Responsive Web Design jest najtańszy i najmniejpracochł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


Prezentacja (z przykładem RWD) dostępna pod adresem:http://fryli.nazwa.pl/responsive_presentation.zip

Responsive Web Design

Documents

Transcript of Responsive Web Design