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

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

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

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

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: