Responsive Web Design - co z tego wynikło?

862 views
715 views

Published on

Omówienie ostatnich trendów w tworzeniu stron WWW, powiązanych z rosnącą popularnością responsywności.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
862
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Responsive Web Design - co z tego wynikło?

  1. 1. Responsive Web Design co z tego wynikło?
  2. 2. ✓ Główny programista w GavickPro ✓ @dziudek ✓ zebymniezapomnial.tumblr.com Tomasz Dziuda
  3. 3. Responsywność?
  4. 4. Natywne aplikacje?
  5. 5. Fragmentacja Źródło: http://opensignal.com/reports/fragmentation-2013/
  6. 6. Co na to Joomla?
  7. 7. Joomla! dzięki wykorzystaniu Bootstrapa od wersji 3.0 stała się pierwszym w pełni responsywnym CMS-em.
  8. 8. Co na to twórcy szablonów?
  9. 9. Optymalizacja witryny ✓ CSS Sprites ✓ Kompresja plików CSS i JS ✓ Optymalizacja selektorów CSS ✓ Optymalizacja skryptów JS
  10. 10. Proste układy stron
  11. 11. Minimalistyczny design
  12. 12. “Gdy w końcu przeglądarki nauczyły się obsługiwać zaokrąglone rogi i gradienty, przyszła moda na flat design.”
  13. 13. Źródło: http://appstronauts.com/
  14. 14. Źródło: http://www.getflow.com/
  15. 15. Źródło: http://getbootstrap.com/
  16. 16. Rozmiar strony
  17. 17. Problem z grafikami ✓ Dostosowanie rozmiaru grafik zależnie od rozmiaru ekranu i jego rozdzielczości http://scottjehl.github.io/picturefill/
  18. 18. Rozmiary grafik - ciekawostka Źródło: http://www.netvlies.nl/blog/design-interactie/retina-revolution
  19. 19. Problem ilości zapytań do serwera ✓ Optymalizacja kodu CSS ✓ Użycie rozszerzeń kompresujących (np. JCH Optimize) ✓ CDN?
  20. 20. Ogólna optymalizacja ✓ Zminimalizowanie ilości rozszerzeń ✓ Wykrycie zasobożernych rozszerzeń i optymalizacja ich użycia ✓ Wykorzystanie mechanizmu Cache
  21. 21. Ogólna optymalizacja ✓ Kompresja grafik ✓ Kompresja GZIP (dostępna w Joomla!) ✓ Unikamy przekierowań HTTP ✓ Odpowiednio skonfigurowany .htaccess
  22. 22. Architektura informacji
  23. 23. ✓ Należy zastanowić się, które treści są przydatne dla użytkownika mobilnego a które dla użytkownika desktopowego
  24. 24. Suffiksy klas CSS ✓ Joomla! posiada wbudowany mechanizm suffiksów klas CSS. Źródło: http://getbootstrap.com/2.3.2/scaffolding.html#responsive
  25. 25. ✓ Ograniczenie ilości treści na stronie zależnie od sytuacji ✓ Joomla! pozwala publikować moduły na wybranych podstronach
  26. 26. Wydajność witryny
  27. 27. ✓ Unikamy zasobożernych skryptów, animacji ✓ Unikamy rozbudowanych animacji z użyciem <canvas> i Flasha Przy tworzeniu szablonów
  28. 28. ✓ Unikamy dużej ilości grafik (zapełniają RAM) ✓ Unikamy za dużych grafik (j.w.) Przy tworzeniu szablonów
  29. 29. ✓ Unikamy position: fixed; ✓ Unikamy złożonych animacji CSS3 Przy tworzeniu szablonów
  30. 30. Obecne trendy
  31. 31. Grafika wektorowa 1x 1.5x 2x
  32. 32. Font Awesome
  33. 33. Warte uwagi techniki ✓ clowncar dla obrazków ✓ trick z <svg> i <image> ✓ jednostki rem, vh, vw ✓ podejście mobile-first ✓ progressive enhancement
  34. 34. clowncar dla obrazków ✓ Sprytna technika ukrywająca media-queries wewnątrz grafiki SVG ✓ https://github.com/estelle/clowncar
  35. 35. <svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"  width="300"  height="329">    <title>The  Clown  Car  Technique</title>        <defs>        <style>        image  {display:  none;}        #small  {display:  block}        @media  screen  and  (min-­‐width:  401px)  and  (max-­‐width:  700px)  {                #medium  {display:  block}                #small  {display:  none}        }        @media  screen  and  (min-­‐width:  701px)  {                #big  {display:  block}                #small  {display:  none}        }        </style>    </defs>    <g>        <image  id="small"    height="329"  width="300"  xlink:href="images/small.png"  />        <image  id="medium"  height="329"  width="300"  xlink:href="images/medium.png"  />        <image  id="big"        height="329"  width="300"  xlink:href="images/big.png"  />    </g> </svg> <object  data="awesomefile.svg"  ></object>
  36. 36. Stosowalność w Joomla! ✓ Możliwe do zastosowania w treści artykułów i w szablonach od razu ✓ Rozszerzenia mogą wymagać dodatkowych modyfikacji
  37. 37. <svg> i <image> ✓ Sprytna technika do zastosowania dla niektórych elementów strony ✓ http://lynn.ru/examples/svg/en.html
  38. 38. <svg width="96" height="96"> <image xlink:href="svg.svg" src="svg.png" width="96" height="96"/> </svg> <svg width="96" height="96"> <image xlink:href="svg.svg" width="96" height="96"/> </svg> <img src="svg.png" width="96" height="96"/>
  39. 39. Stosowalność w Joomla! ✓ Podobnie jak w wypadku techniki clowncar
  40. 40. jednostki rem, vh, vw ✓ Jednostki te pozwalają łatwiej zarządzać rozmiarem tekstu ✓ i dopasować go do wymiarów ekranu urządzenia ✓ W wypadku VH i VW możemy też dostosowywać layout do ekranu urządzenia
  41. 41. Stosowalność w Joomla! ✓ Jednostki REM można śmiało stosować w stylach CSS i trzeba jedynie pamiętać o fallbacku dla IE8 ✓ REM można też zastąpić w Joomla! 3.x kodem pisanym w LESS ✓ VH i VW to jednostki o ciągle słabym wsparciu szczególne w przeglądarkach mobilnych
  42. 42. Podejście mobile-first ✓ Bootstrap 3 opiera się na mobile-first ✓ pozwala uniknąć problemów z wydajnością strony i jej niedostosowaniem do małych ekranów urządzeń
  43. 43. Stosowalność w Joomla! ✓ Ograniczona - najlepiej poczekać na wprowadzenie Bootstrap 3 do JUI
  44. 44. Progressive enhancement ✓ Według wielu lepsze niż tzw. “Graceful degradation” ✓ Funkcjonalności dodawane są wraz z rosnącym ich wsparciem w danych urządzeniach - wydajniejsze urządzenie = więcej funkcjonalności
  45. 45. Stosowalność w Joomla! ✓ Ograniczona - podobnie jak w wypadku mobile-first
  46. 46. Co niesie przyszłość?
  47. 47. W przyszłości ✓ CSS Regions ✓ <picture> ✓ Element queries
  48. 48. CSS Regions ✓ Umożliwią reorganizację układu w zależnie od rozdzielczości ✓ Pozwalają na swobodny “przepływ” treści strony http://html.adobe.com/webplatform/layout/regions/
  49. 49. Alternatywa - Intention.js http://intentionjs.com/ <body> <header> <img intent in-standard-src="med.png" in-mobile-src="small.png" /> </header> </body> <body> <header> <img src="med.png" /> </header> </body> <body> <header> <img src="small.png" /> </header> </body>
  50. 50. <picture> ✓ Tworzenie responsywnych grafik zależnych od rozdzielczości ekranu i jego DPI <picture width="500" height="500"> <source media="(min-width: 45em)" src="large.jpg"> <source media="(min-width: 18em)" src="med.jpg"> <source src="small.jpg"> <img src="small.jpg" alt=""> <p>Accessible text</p> </picture>
  51. 51. Element Queries ✓ Pozwolą na tworzenie responsywnych komponentów stron i ich ponowne wykorzystanie ✓ W niektórych wypadkach mogą wręcz całkowicie wyprzeć media-queries .element (min-width: 500px) { width: 200px; }
  52. 52. Pytania?
  53. 53. -50% zniżki na licencje Developer i Business Kod zniżkowy: joomladay-2013pl Ważny od 5 do 12 października 2013
  54. 54. Warto przejrzeć ✓ http://bradfrost.github.io/this-is-responsive/ ✓ http://responsive.rga.com/ ✓ http://caniuse.com ✓ http://zebymniezapomnial.tumblr.com/ tagged/responsive ✓ http://intentionjs.com/
  55. 55. ✓ http://www.iconfinder.net ✓ SvenGraph.deviantart.com ✓ http://hadezign.com/ ✓ http://www.aha-soft.com/ Wykorzystane ikony pochodzą z:

×