Warsztaty Samorządowe - Joomla! w administracji

1. Joomla! a responsywność
Łódzkie Warsztaty Samorządowe: Joomla w administracji

2. ✓ Główny programista w GavickPro
✓ @dziudek
✓ zebymniezapomnial.tumblr.com
Tomasz Dziuda

4. Responsywność?

11. Natywne aplikacje?

13. Elementy
Responsive Web Design

14. media-queries
@media (max-width: 720px) {
/* Kod CSS dla małych tabletów */
}
@media (max-width: 480px) {
/* Kod CSS dla telefonów */
}

15. Optymalizacja witryny
✓ CSS Sprites
✓ Kompresja plików CSS i JS
✓ Optymalizacja selektorów CSS
✓ Optymalizacja skryptów JS

16. Proste układy stron

17. Minimalistyczny design

18. “Gdy w końcu przeglądarki
nauczyły się obsługiwać
zaokrąglone rogi i gradienty,
przyszła moda na flat design.”

19. Źródło: http://appstronauts.com/

20. Źródło: http://www.getflow.com/

21. Źródło: http://getbootstrap.com/

22. Grafika wektorowa
1x 1.5x 2x

24. Font Awesome

25. Stopniowe ulepszanie
✓ Uwzględnia wsparcie technologii
✓ Uwzględnia wydajność

26. W przyszłości
✓ CSS Regions
✓ <picture>
✓ Element queries

27. Co na to Joomla?

28. Joomla! dzięki wykorzystaniu
Bootstrapa od wersji 3.0 stała
się pierwszym w pełni
responsywnym CMS-em.

34. Na co zwracać uwagę?

35. Rozmiar strony

36. Problem z grafikami
✓ Dostosowanie rozmiaru grafik zależnie od
rozmiaru ekranu i jego rozdzielczości
http://scottjehl.github.io/picturefill/

37. Rozmiary grafik - ciekawostka
Źródło: http://www.netvlies.nl/blog/design-interactie/retina-revolution

38. Problem ilości zapytań do serwera
✓ Optymalizacja kodu CSS
✓ Użycie rozszerzeń kompresujących
(np. JCH Optimize)
✓ CDN?

39. Ogólna optymalizacja
✓ Zminimalizowanie ilości rozszerzeń
✓ Wykrycie zasobożernych rozszerzeń i
optymalizacja ich użycia
✓ Wykorzystanie mechanizmu Cache

40. Ogólna optymalizacja
✓ Kompresja grafik
✓ Kompresja GZIP (dostępna w Joomla!)
✓ Unikamy przekierowań HTTP
✓ Odpowiednio skonfigurowany .htaccess

41. Architektura informacji

42. ✓ Należy zastanowić się, które treści są
przydatne dla użytkownika mobilnego a które
dla użytkownika desktopowego

43. Suffiksy klas CSS
✓ Joomla! posiada wbudowany mechanizm
suffiksów klas CSS.
Źródło: http://getbootstrap.com/2.3.2/scaffolding.html#responsive

44. ✓ Ograniczenie ilości treści na stronie zależnie
od sytuacji
✓ Joomla! pozwala publikować moduły na
wybranych podstronach

45. Wydajność witryny

46. ✓ Unikamy zasobożernych skryptów, animacji
✓ Unikamy rozbudowanych animacji z użyciem
<canvas> i Flasha
Przy tworzeniu szablonów

47. ✓ Unikamy dużej ilości grafik (zapełniają RAM)
✓ Unikamy za dużych grafik (j.w.)
Przy tworzeniu szablonów

48. ✓ Unikamy position: fixed;
✓ Unikamy złożonych animacji CSS3
Przy tworzeniu szablonów

49. Przykłady
responsywnych stron

50. joomla.org/3/en

51. Źródło: http://joomla.org/3/en

52. joomla.org/3/enŹródło: http://joomla.org/3/en

53. bip.lodzkie.pl

54. Źródło: http://bip.lodzkie.pl

55. Źródło: http://bip.lodzkie.pl

56. Źródło: http://bip.lodzkie.pl

57. Pytania?

58. ✓ http://www.iconfinder.net
✓ SvenGraph.deviantart.com
✓ http://hadezign.com/
✓ http://www.aha-soft.com/
Wykorzystane ikony pochodzą z: