O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Responsive Web Design

  • Seja o primeiro a comentar

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

    Seja o primeiro a comentar

    Entre para ver os comentários

  • studiohauerpower

    Dec. 15, 2013

Vistos

Vistos totais

868

No Slideshare

0

De incorporações

0

Número de incorporações

66

Ações

Baixados

12

Compartilhados

0

Comentários

0

Curtir

1

×