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.”

Ź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.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

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 pochodzą z: