joomla a responsywność
DESCRIPTION
Warsztaty Samorządowe - Joomla! w administracjiTRANSCRIPT
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 telefonów */
}
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.”
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.io/picturefill/
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
✓ Wykorzystanie mechanizmu Cache
Ogólna optymalizacja
✓ Kompresja grafik
✓ Kompresja GZIP (dostępna w Joomla!)
✓ Unikamy przekierowań HTTP
✓ Odpowiednio skonfigurowany .htaccess
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.html#responsive
✓ 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 szablonów
✓ 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
bip.lodzkie.pl
Pytania?
✓ http://www.iconfinder.net
✓ SvenGraph.deviantart.com
✓ http://hadezign.com/
✓ http://www.aha-soft.com/
Wykorzystane ikony pochodzą z: