Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Wordup Gdańsk #2

Łukasz Farysej - 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...
Wordup Gdańsk #2

Łukasz Farysej - Responsive Web Design

Jakie przeglądarki obsługują RWD?
Przeglądarka

% użytkowników

...
Wordup Gdańsk #2

Łukasz Farysej - Responsive Web Design

Wszystko fajnie, pięknie
ale czy warto się w to bawić?
Obecnie w...
Wordup Gdańsk #2

Łukasz Farysej - Responsive Web Design

Podejście (większości) klientów do wersji mobilnych:
Na początku...
Wordup Gdańsk #2

Łukasz Farysej - Responsive Web Design

Responsive Web Design w trzech krokach:
1) stwórz normalną wersj...
Wordup Gdańsk #2

Łukasz Farysej - Responsive Web Design

Responsive Web Design w trzech krokach:
2) przygotuj <head> stro...
Wordup Gdańsk #2

Łukasz Farysej - Responsive Web Design

Responsive Web Design w trzech krokach:
3) a teraz ta łatwa częś...
Wordup Gdańsk #2

Łukasz Farysej - Responsive Web Design

Co można teraz poprawić?
Głównym zarzutem przeciwko RWD jest pob...
Wordup Gdańsk #2

Łukasz Farysej - Responsive Web Design

Przydatne skrypty / narzędzia
https://addons.mozilla.org/en-US/f...
Wordup Gdańsk #2

Łukasz Farysej - Responsive Web Design

No dobra, ale tu jest Word Up, tu się gada o Wordpressie!
Czy je...
Wordup Gdańsk #2

Łukasz Farysej - Responsive Web Design

... niestety nie, jeszcze nie.

...ale nie opuszczajcie sali, są...
Wordup Gdańsk #2

Łukasz Farysej - Responsive Web Design

Plugin w produkcji (od około 10 miesięcy, trzymam za to kciuki):...
Wordup Gdańsk #2

Łukasz Farysej - Responsive Web Design

Kilka przydatnych pluginów:
http://wordpress.org/extend/plugins/...
Wordup Gdańsk #2

Łukasz Farysej - Responsive Web Design

Podsumowanie:
- z wszystkich mobilnych rozwiązań, Responsive Web...
Wordup Gdańsk #2

Łukasz Farysej - Responsive Web Design

Prezentacja (z przykładem RWD) dostępna pod adresem:
http://fryl...
Upcoming SlideShare
Loading in …5
×

Responsive Web Design

  • Be the first to comment

Responsive Web Design

  1. 1. Wordup Gdańsk #2 Łukasz Farysej - Responsive Web Design Responsive Web Design (RWD)
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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

×