Joomla! a responsywność
Łódzkie Warsztaty Samorządowe: Joomla w administracji
✓ Główny programista w GavickPro
✓ @dziudek
✓ zebymniezapomnial.tumblr.com
Tomasz Dziuda
Responsywność?
Natywne aplikacje?
Elementy
Responsive Web Design
media-queries
@media (max-width: 720px) {
/* Kod CSS dla małych tabletów */
}
@media (max-width: 480px) {
/* Kod CSS dla t...
Optymalizacja witryny
✓ CSS Sprites
✓ Kompresja plików CSS i JS
✓ Optymalizacja selektorów CSS
✓ Optymalizacja skryptów JS
Proste układy stron
Minimalistyczny design
“Gdy w końcu przeglądarki
nauczyły się obsługiwać
zaokrąglone rogi i gradienty,
przyszła moda na flat design.”
Źródło: http://appstronauts.com/
Źródło: http://www.getflow.com/
Źródło: http://getbootstrap.com/
Grafika wektorowa
1x 1.5x 2x
Font Awesome
Stopniowe ulepszanie
✓ Uwzględnia wsparcie technologii
✓ Uwzględnia wydajność
W przyszłości
✓ CSS Regions
✓ <picture>
✓ Element queries
Co na to Joomla?
Joomla! dzięki wykorzystaniu
Bootstrapa od wersji 3.0 stała
się pierwszym w pełni
responsywnym CMS-em.
Na co zwracać uwagę?
Rozmiar strony
Problem z grafikami
✓ Dostosowanie rozmiaru grafik zależnie od
rozmiaru ekranu i jego rozdzielczości
http://scottjehl.github...
Rozmiary grafik - ciekawostka
Źródło: http://www.netvlies.nl/blog/design-interactie/retina-revolution
Problem ilości zapytań do serwera
✓ Optymalizacja kodu CSS
✓ Użycie rozszerzeń kompresujących
(np. JCH Optimize)
✓ CDN?
Ogólna optymalizacja
✓ Zminimalizowanie ilości rozszerzeń
✓ Wykrycie zasobożernych rozszerzeń i
optymalizacja ich użycia
✓...
Ogólna optymalizacja
✓ Kompresja grafik
✓ Kompresja GZIP (dostępna w Joomla!)
✓ Unikamy przekierowań HTTP
✓ Odpowiednio sko...
Architektura informacji
✓ Należy zastanowić się, które treści są
przydatne dla użytkownika mobilnego a które
dla użytkownika desktopowego
Suffiksy klas CSS
✓ Joomla! posiada wbudowany mechanizm
suffiksów klas CSS.
Źródło: http://getbootstrap.com/2.3.2/scaffolding....
✓ Ograniczenie ilości treści na stronie zależnie
od sytuacji
✓ Joomla! pozwala publikować moduły na
wybranych podstronach
Wydajność witryny
✓ Unikamy zasobożernych skryptów, animacji
✓ Unikamy rozbudowanych animacji z użyciem
<canvas> i Flasha
Przy tworzeniu sza...
✓ Unikamy dużej ilości grafik (zapełniają RAM)
✓ Unikamy za dużych grafik (j.w.)
Przy tworzeniu szablonów
✓ Unikamy position: fixed;
✓ Unikamy złożonych animacji CSS3
Przy tworzeniu szablonów
Przykłady
responsywnych stron
joomla.org/3/en
Źródło: http://joomla.org/3/en
joomla.org/3/enŹródło: http://joomla.org/3/en
bip.lodzkie.pl
Źródło: http://bip.lodzkie.pl
Źródło: http://bip.lodzkie.pl
Źródło: http://bip.lodzkie.pl
Pytania?
✓ http://www.iconfinder.net
✓ SvenGraph.deviantart.com
✓ http://hadezign.com/
✓ http://www.aha-soft.com/
Wykorzystane ikony...
Joomla a responsywność
Joomla a responsywność
Joomla a responsywność
Joomla a responsywność
Joomla a responsywność
Joomla a responsywność
Joomla a responsywność
Joomla a responsywność
Joomla a responsywność
Joomla a responsywność
Joomla a responsywność
Joomla a responsywność
Joomla a responsywność
Joomla a responsywność
Upcoming SlideShare
Loading in …5
×

Joomla a responsywność

1,262 views

Published on

Warsztaty Samorządowe - Joomla! w administracji

Published in: Technology
1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total views
1,262
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
8
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

Joomla a responsywność

  1. 1. Joomla! a responsywność Łódzkie Warsztaty Samorządowe: Joomla w administracji
  2. 2. ✓ Główny programista w GavickPro ✓ @dziudek ✓ zebymniezapomnial.tumblr.com Tomasz Dziuda
  3. 3. Responsywność?
  4. 4. Natywne aplikacje?
  5. 5. Elementy Responsive Web Design
  6. 6. media-queries @media (max-width: 720px) { /* Kod CSS dla małych tabletów */ } @media (max-width: 480px) { /* Kod CSS dla telefonów */ }
  7. 7. Optymalizacja witryny ✓ CSS Sprites ✓ Kompresja plików CSS i JS ✓ Optymalizacja selektorów CSS ✓ Optymalizacja skryptów JS
  8. 8. Proste układy stron
  9. 9. Minimalistyczny design
  10. 10. “Gdy w końcu przeglądarki nauczyły się obsługiwać zaokrąglone rogi i gradienty, przyszła moda na flat design.”
  11. 11. Źródło: http://appstronauts.com/
  12. 12. Źródło: http://www.getflow.com/
  13. 13. Źródło: http://getbootstrap.com/
  14. 14. Grafika wektorowa 1x 1.5x 2x
  15. 15. Font Awesome
  16. 16. Stopniowe ulepszanie ✓ Uwzględnia wsparcie technologii ✓ Uwzględnia wydajność
  17. 17. W przyszłości ✓ CSS Regions ✓ <picture> ✓ Element queries
  18. 18. Co na to Joomla?
  19. 19. Joomla! dzięki wykorzystaniu Bootstrapa od wersji 3.0 stała się pierwszym w pełni responsywnym CMS-em.
  20. 20. Na co zwracać uwagę?
  21. 21. Rozmiar strony
  22. 22. Problem z grafikami ✓ Dostosowanie rozmiaru grafik zależnie od rozmiaru ekranu i jego rozdzielczości http://scottjehl.github.io/picturefill/
  23. 23. Rozmiary grafik - ciekawostka Źródło: http://www.netvlies.nl/blog/design-interactie/retina-revolution
  24. 24. Problem ilości zapytań do serwera ✓ Optymalizacja kodu CSS ✓ Użycie rozszerzeń kompresujących (np. JCH Optimize) ✓ CDN?
  25. 25. Ogólna optymalizacja ✓ Zminimalizowanie ilości rozszerzeń ✓ Wykrycie zasobożernych rozszerzeń i optymalizacja ich użycia ✓ Wykorzystanie mechanizmu Cache
  26. 26. Ogólna optymalizacja ✓ Kompresja grafik ✓ Kompresja GZIP (dostępna w Joomla!) ✓ Unikamy przekierowań HTTP ✓ Odpowiednio skonfigurowany .htaccess
  27. 27. Architektura informacji
  28. 28. ✓ Należy zastanowić się, które treści są przydatne dla użytkownika mobilnego a które dla użytkownika desktopowego
  29. 29. Suffiksy klas CSS ✓ Joomla! posiada wbudowany mechanizm suffiksów klas CSS. Źródło: http://getbootstrap.com/2.3.2/scaffolding.html#responsive
  30. 30. ✓ Ograniczenie ilości treści na stronie zależnie od sytuacji ✓ Joomla! pozwala publikować moduły na wybranych podstronach
  31. 31. Wydajność witryny
  32. 32. ✓ Unikamy zasobożernych skryptów, animacji ✓ Unikamy rozbudowanych animacji z użyciem <canvas> i Flasha Przy tworzeniu szablonów
  33. 33. ✓ Unikamy dużej ilości grafik (zapełniają RAM) ✓ Unikamy za dużych grafik (j.w.) Przy tworzeniu szablonów
  34. 34. ✓ Unikamy position: fixed; ✓ Unikamy złożonych animacji CSS3 Przy tworzeniu szablonów
  35. 35. Przykłady responsywnych stron
  36. 36. joomla.org/3/en
  37. 37. Źródło: http://joomla.org/3/en
  38. 38. joomla.org/3/enŹródło: http://joomla.org/3/en
  39. 39. bip.lodzkie.pl
  40. 40. Źródło: http://bip.lodzkie.pl
  41. 41. Źródło: http://bip.lodzkie.pl
  42. 42. Źródło: http://bip.lodzkie.pl
  43. 43. Pytania?
  44. 44. ✓ http://www.iconfinder.net ✓ SvenGraph.deviantart.com ✓ http://hadezign.com/ ✓ http://www.aha-soft.com/ Wykorzystane ikony pochodzą z:

×