Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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...
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
✓...
Ogólna optymalizacja
✓ Kompresja grafik
✓ Kompresja GZIP (dostępna w Joomla!)
✓ Unikamy przekierowań HTTP
✓ Odpowiednio sko...
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....
✓ 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 sza...
✓ 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
✓ p...
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">
	...
Stosowalność w Joomla!
✓ Możliwe do zastosowania w treści artykułów i
w szablonach od razu
✓ Rozszerzenia mogą wymagać dod...
<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" hei...
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ą...
Stosowalność w Joomla!
✓ Jednostki REM można śmiało stosować w
stylach CSS i trzeba jedynie pamiętać o
fallbacku dla IE8
✓...
Podejście mobile-first
✓ Bootstrap 3 opiera się na mobile-first
✓ pozwala uniknąć problemów z wydajnością
strony i jej niedo...
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ący...
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...
Alternatywa - Intention.js
http://intentionjs.com/
<body>
<header>
<img intent
in-standard-src="med.png"
in-mobile-src="sm...
<picture>
✓ Tworzenie responsywnych grafik zależnych
od rozdzielczości ekranu i jego DPI
<picture width="500" height="500">...
Element Queries
✓ Pozwolą na tworzenie responsywnych
komponentów stron i ich ponowne
wykorzystanie
✓ W niektórych wypadkac...
Pytania?
-50% zniżki na licencje
Developer i Business
Kod zniżkowy:
joomladay-2013pl
Waż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:...
✓ http://www.iconfinder.net
✓ SvenGraph.deviantart.com
✓ http://hadezign.com/
✓ http://www.aha-soft.com/
Wykorzystane ikony...
Responsive Web Design - co z tego wynikło?
Responsive Web Design - co z tego wynikło?
Responsive Web Design - co z tego wynikło?
Responsive Web Design - co z tego wynikło?
Responsive Web Design - co z tego wynikło?
Responsive Web Design - co z tego wynikło?
Responsive Web Design - co z tego wynikło?
Responsive Web Design - co z tego wynikło?
Responsive Web Design - co z tego wynikło?
Responsive Web Design - co z tego wynikło?
Responsive Web Design - co z tego wynikło?
Responsive Web Design - co z tego wynikło?
Responsive Web Design - co z tego wynikło?
Responsive Web Design - co z tego wynikło?
Upcoming SlideShare
Loading in …5
×

Responsive Web Design - co z tego wynikło?

922 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Responsive Web Design - co z tego wynikło?

  1. 1. Responsive Web Design co z tego wynikło?
  2. 2. ✓ Główny programista w GavickPro ✓ @dziudek ✓ zebymniezapomnial.tumblr.com Tomasz Dziuda
  3. 3. Responsywność?
  4. 4. Natywne aplikacje?
  5. 5. Fragmentacja Źródło: http://opensignal.com/reports/fragmentation-2013/
  6. 6. Co na to Joomla?
  7. 7. Joomla! dzięki wykorzystaniu Bootstrapa od wersji 3.0 stała się pierwszym w pełni responsywnym CMS-em.
  8. 8. Co na to twórcy szablonów?
  9. 9. Optymalizacja witryny ✓ CSS Sprites ✓ Kompresja plików CSS i JS ✓ Optymalizacja selektorów CSS ✓ Optymalizacja skryptów JS
  10. 10. Proste układy stron
  11. 11. Minimalistyczny design
  12. 12. “Gdy w końcu przeglądarki nauczyły się obsługiwać zaokrąglone rogi i gradienty, przyszła moda na flat design.”
  13. 13. Źródło: http://appstronauts.com/
  14. 14. Źródło: http://www.getflow.com/
  15. 15. Źródło: http://getbootstrap.com/
  16. 16. Rozmiar strony
  17. 17. Problem z grafikami ✓ Dostosowanie rozmiaru grafik zależnie od rozmiaru ekranu i jego rozdzielczości http://scottjehl.github.io/picturefill/
  18. 18. Rozmiary grafik - ciekawostka Źródło: http://www.netvlies.nl/blog/design-interactie/retina-revolution
  19. 19. Problem ilości zapytań do serwera ✓ Optymalizacja kodu CSS ✓ Użycie rozszerzeń kompresujących (np. JCH Optimize) ✓ CDN?
  20. 20. Ogólna optymalizacja ✓ Zminimalizowanie ilości rozszerzeń ✓ Wykrycie zasobożernych rozszerzeń i optymalizacja ich użycia ✓ Wykorzystanie mechanizmu Cache
  21. 21. Ogólna optymalizacja ✓ Kompresja grafik ✓ Kompresja GZIP (dostępna w Joomla!) ✓ Unikamy przekierowań HTTP ✓ Odpowiednio skonfigurowany .htaccess
  22. 22. Architektura informacji
  23. 23. ✓ Należy zastanowić się, które treści są przydatne dla użytkownika mobilnego a które dla użytkownika desktopowego
  24. 24. Suffiksy klas CSS ✓ Joomla! posiada wbudowany mechanizm suffiksów klas CSS. Źródło: http://getbootstrap.com/2.3.2/scaffolding.html#responsive
  25. 25. ✓ Ograniczenie ilości treści na stronie zależnie od sytuacji ✓ Joomla! pozwala publikować moduły na wybranych podstronach
  26. 26. Wydajność witryny
  27. 27. ✓ Unikamy zasobożernych skryptów, animacji ✓ Unikamy rozbudowanych animacji z użyciem <canvas> i Flasha Przy tworzeniu szablonów
  28. 28. ✓ Unikamy dużej ilości grafik (zapełniają RAM) ✓ Unikamy za dużych grafik (j.w.) Przy tworzeniu szablonów
  29. 29. ✓ Unikamy position: fixed; ✓ Unikamy złożonych animacji CSS3 Przy tworzeniu szablonów
  30. 30. Obecne trendy
  31. 31. Grafika wektorowa 1x 1.5x 2x
  32. 32. Font Awesome
  33. 33. Warte uwagi techniki ✓ clowncar dla obrazków ✓ trick z <svg> i <image> ✓ jednostki rem, vh, vw ✓ podejście mobile-first ✓ progressive enhancement
  34. 34. clowncar dla obrazków ✓ Sprytna technika ukrywająca media-queries wewnątrz grafiki SVG ✓ https://github.com/estelle/clowncar
  35. 35. <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>
  36. 36. Stosowalność w Joomla! ✓ Możliwe do zastosowania w treści artykułów i w szablonach od razu ✓ Rozszerzenia mogą wymagać dodatkowych modyfikacji
  37. 37. <svg> i <image> ✓ Sprytna technika do zastosowania dla niektórych elementów strony ✓ http://lynn.ru/examples/svg/en.html
  38. 38. <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"/>
  39. 39. Stosowalność w Joomla! ✓ Podobnie jak w wypadku techniki clowncar
  40. 40. 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
  41. 41. 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
  42. 42. 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ń
  43. 43. Stosowalność w Joomla! ✓ Ograniczona - najlepiej poczekać na wprowadzenie Bootstrap 3 do JUI
  44. 44. 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
  45. 45. Stosowalność w Joomla! ✓ Ograniczona - podobnie jak w wypadku mobile-first
  46. 46. Co niesie przyszłość?
  47. 47. W przyszłości ✓ CSS Regions ✓ <picture> ✓ Element queries
  48. 48. 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/
  49. 49. 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>
  50. 50. <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>
  51. 51. 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; }
  52. 52. Pytania?
  53. 53. -50% zniżki na licencje Developer i Business Kod zniżkowy: joomladay-2013pl Ważny od 5 do 12 października 2013
  54. 54. 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/
  55. 55. ✓ http://www.iconfinder.net ✓ SvenGraph.deviantart.com ✓ http://hadezign.com/ ✓ http://www.aha-soft.com/ Wykorzystane ikony pochodzą z:

×