#RWD To the future

1. #RWD
REWIND TO THE FUTURE
Davorin Pavlica - Klika d.o.o.

2. PREDSTAVITEV
• Klika d.o.o.
• Ustanovljena leta 2003
•~ 60 razvijalcev, 4 oblikovalci, 2 fuzbal mizi in 2 psa čuvaja
• Davorin Pavlica / davorin.pavlica@klika.si / @DavorinPavlica
• Spletni oblikovalec

3. PLAN
• Kaj je RWD
• Mobile first, progressive enhancement
Predavanje • Adaptive vs. Responsive
45min
• Pasti
• Tehnike
• Skupine po 4-5 oseb
Delavnica • Ena tema, en fokus
90min
• Rezultat je responsive ali adaptive spletna stran
Predstavitev • Vsaka skupina predstavi svojo rešitev
45min

4. CITAT
“It is not the strongest species
that survive, nor the most
intelligent, but the ones most
responsive to change.”
Charles Darwin

5. 25. MAJ 2010

6. 25. MAJ 2010
DAN
MLADOSTI?

7. 25. MAJ 2010
DAN
BRISAČE?

8. 25. MAJ 2010
GEEK
PRIDE DAY?

9. 25. MAJ 2010
DAN
#RWD!?

10. 25. MAJ 2010

11. Avtor in vir: Brad Frost - For a Future-Friendly Web - http://bradfrostweb.com/blog/web/for-a-future-friendly-web/

12. Avtor in vir: Brad Frost - For a Future-Friendly Web - http://bradfrostweb.com/blog/web/for-a-future-friendly-web/

13. THE RISE AND FALL OF PC
Avtor in vir: Horace Dediu - The rise and fall of personal computing - http://www.asymco.com/2012/01/17/the-rise-and-fall-of-personal-computing/

14. KAJ JE #RWD?

15. #RWD?
Foto: lyzadanger / Flickr

16. #RWD?
Foto: lyzadanger / Flickr

17. #RWD!
Foto: Antoine Lefeuvre / Flickr

18. #RWD!
Povezava: rsd.joshemerson.co.uk

19. #RWD!
Povezava: mediaqueri.es

20. #RWD!
Povezava: www.smashingmagazine.com

21. #RWD!
Povezava: stuffandnonsense.co.uk

22. #RWD!
Povezava: www.kiwibank.co.nz

23. #RWD OR MOBILE!?

24. OSNOVE

25. OSNOVE
• Fluid grid
• Flexible images
• Media queries
Avtor in vir: Ethan Marcotte - Responsive Web Design - http://www.alistapart.com/articles/responsive-web-design/

26. FLUID GIRDS
• Termin, ki si ga je leto preden je “izumil” #RWD, izmislil
takisti Ethan Marcotte!
Avtor in vir: Ethan Marcotte - Fluid Grids - http://www.alistapart.com/articles/fluidgrids/

27. Flurid grid - http://kflorence.github.com/flurid/

28. FLEXIBLE / FLUID IMGS
• Termin, ki si ga je leto preden je “izumil” #RWD, izmislil
takisti Ethan Marcotte!
Avtor in vir: Ethan Marcotte - Fluid images - http://unstoppablerobotninja.com/entry/fluid-images

29. Avtor in vir: Ethan Marcotte - Fluid images - http://unstoppablerobotninja.com/entry/fluid-images

30. FLEXIBLE / FLUID IMGS
1.img,
2.object {
3. max-width: 100%;
4.}

31. MEDIA QUERIES
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

32. MEDIA QUERIES
• Breakpoints: at 320px, 768px, 1024px, 1440px, 1680px
or not?
• Device != Context
Avtor in vir: Marko Mrdjenović - Defining Breakpoints https://speakerdeck.com/friedcell/defining-breakpoints

33. MEDIA QUERIES

34. TEHNIKE

35. TEHNIKE
• Mobile First
• Progressive Enhancement VS Graceful Degradation
• Responsive VS Adaptive layouts

36. MOBILE FIRST
Avtor in vir: Luke Wroblewski - Mobile first - http://www.lukew.com/ff/entry.asp?933

37. PROGRESSIVE
ENHANCEMENT
VS
GRACEFUL
DEGRADATION

38. RESPONSIVE
VS
ADAPTIVE

39. PASTI

40. PASTI
• Navigacija / meni
Responsive Navigation Patterns (by Brad Frost)
Complex Navigation Patterns for Responsive Design (by Brad Frost)
Multi-Device Layout Patterns (by Luke Wroblewski)
• Page loading
Performance Implications of Responsive Web Design (by Jason Grigsby)
• Images
Responsive Images: How they Almost Worked and What We Need (by Mat Marqis)
The road to responsive images (by Anselm Hannemann)
adaptive-images.com | filamentgroup.com/examples/responsive-images | codevisually.com/responsive-img/
• IE :)
modernizr.com | more ...

41. DELAVNICO
IMA

42. DELAVNICO IMA
• Skupine po 4-5 ljudi
• Ena tema, en fokus
• Rezultat je responsive / adaptive spletna stran

43. DELAVNICO IMA
1.http://www.24ur.com/
2.http://www.najdi.si/
3.http://www.siol.net/
4.http://www.bolha.com/
5.http://www.rtvslo.si/
6.http://www.avto.net/
7.http://www.itis.si/

44. WHO IS
RESPONSIVE
(TO CHANGE)?

45. HVALA
@davorinpavlica
davorin.pavlica@klika.si