Omówienie ostatnich trendów w tworzeniu stron WWW, powiązanych z rosnącą popularnością responsywności.

1. Responsive Web Design
co z tego wynikło?

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

4. Responsywność?

11. Natywne aplikacje?

13. Fragmentacja
Źródło: http://opensignal.com/reports/fragmentation-2013/

14. Co na to Joomla?

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

21. Co na to twórcy
szablonów?

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

23. Proste układy stron

24. Minimalistyczny design

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

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

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

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

29. Rozmiar strony

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

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

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

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

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

35. Architektura informacji

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

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

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

39. Wydajność witryny

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

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

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

43. Obecne trendy

44. Grafika wektorowa
1x 1.5x 2x

46. Font Awesome

47. Warte uwagi techniki
✓ clowncar dla obrazków
✓ trick z <svg> i <image>
✓ jednostki rem, vh, vw
✓ podejście mobile-first
✓ progressive enhancement

48. clowncar dla obrazków
✓ Sprytna technika ukrywająca media-queries
wewnątrz grafiki SVG
✓ https://github.com/estelle/clowncar

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

50. Stosowalność w Joomla!
✓ Możliwe do zastosowania w treści artykułów i
w szablonach od razu
✓ Rozszerzenia mogą wymagać dodatkowych
modyfikacji

51. <svg> i <image>
✓ Sprytna technika do zastosowania dla
niektórych elementów strony
✓ http://lynn.ru/examples/svg/en.html

52. <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"/>

53. Stosowalność w Joomla!
✓ Podobnie jak w wypadku techniki clowncar

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

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

56. 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ń

57. Stosowalność w Joomla!
✓ Ograniczona - najlepiej poczekać na
wprowadzenie Bootstrap 3 do JUI

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

59. Stosowalność w Joomla!
✓ Ograniczona - podobnie jak w wypadku
mobile-first

60. Co niesie przyszłość?

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

62. 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/

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

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

65. 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;
}

66. Pytania?

67. -50% zniżki na licencje
Developer i Business
Kod zniżkowy:
joomladay-2013pl
Ważny od 5 do 12 października 2013

68. 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/

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