Post on 17-Dec-2014
description
Responsive Web Design co z tego wynikło?
✓ Główny programista w GavickPro
✓ @dziudek
✓ zebymniezapomnial.tumblr.com
Tomasz Dziuda
Responsywność?
Natywne aplikacje?
Fragmentacja
Źródło: http://opensignal.com/reports/fragmentation-2013/
Co na to Joomla?
Joomla! dzięki wykorzystaniu Bootstrapa od wersji 3.0 stała
się pierwszym w pełni responsywnym CMS-em.
Co na to twórcy szablonó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.”
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
Obecne trendy
Grafika wektorowa
1x 1.5x 2x
Font Awesome
Warte uwagi techniki
✓ clowncar dla obrazków
✓ trick z <svg> i <image>
✓ jednostki rem, vh, vw
✓ podejście mobile-first
✓ progressive enhancement
clowncar dla obrazków
✓ Sprytna technika ukrywająca media-queries wewnątrz grafiki SVG
✓ https://github.com/estelle/clowncar
<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>
Stosowalność w Joomla!
✓ Możliwe do zastosowania w treści artykułów i w szablonach od razu
✓ Rozszerzenia mogą wymagać dodatkowych modyfikacji
<svg> i <image>
✓ Sprytna technika do zastosowania dla niektórych elementów strony
✓ http://lynn.ru/examples/svg/en.html
<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"/>
Stosowalność w Joomla!
✓ Podobnie jak w wypadku techniki clowncar
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
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
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ń
Stosowalność w Joomla!
✓ Ograniczona - najlepiej poczekać na wprowadzenie Bootstrap 3 do JUI
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
Stosowalność w Joomla!
✓ Ograniczona - podobnie jak w wypadku mobile-first
Co niesie przyszłość?
W przyszłości
✓ CSS Regions
✓ <picture>
✓ Element queries
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/
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>
<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>
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;}
Pytania?
-50% zniżki na licencje Developer i Business
Kod zniżkowy:
joomladay-2013plWażny od 5 do 12 października 2013
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/
✓ http://www.iconfinder.net
✓ SvenGraph.deviantart.com
✓ http://hadezign.com/
✓ http://www.aha-soft.com/
Wykorzystane ikony pochodzą z: