Your SlideShare is downloading. ×
#RWDREWIND TO THE FUTURE    Davorin Pavlica - Klika d.o.o.
PREDSTAVITEV• Klika    d.o.o.  • Ustanovljena            leta 2003  •~     60 razvijalcev, 4 oblikovalci, 2 fuzbal mizi in...
PLAN               • Kaj je RWD               • Mobile first, progressive enhancementPredavanje     • Adaptive vs. Responsi...
CITAT“It is not the strongest speciesthat survive, nor the mostintelligent, but the ones mostresponsive to change.”       ...
25. MAJ 2010
25. MAJ 2010  DANMLADOSTI?
25. MAJ 2010  DANBRISAČE?
25. MAJ 2010   GEEKPRIDE DAY?
25. MAJ 2010 DAN#RWD!?
25. MAJ 2010
Avtor in vir: Brad Frost - For a Future-Friendly Web - http://bradfrostweb.com/blog/web/for-a-future-friendly-web/
Avtor in vir: Brad Frost - For a Future-Friendly Web - http://bradfrostweb.com/blog/web/for-a-future-friendly-web/
THE RISE AND FALL OF PCAvtor in vir: Horace Dediu - The rise and fall of personal computing - http://www.asymco.com/2012/0...
KAJ JE #RWD?
#RWD?Foto: lyzadanger / Flickr
#RWD?Foto: lyzadanger / Flickr
#RWD!        Foto: Antoine Lefeuvre / Flickr
#RWD!Povezava: rsd.joshemerson.co.uk
#RWD!Povezava: mediaqueri.es
#RWD!Povezava: www.smashingmagazine.com
#RWD!Povezava: stuffandnonsense.co.uk
#RWD!Povezava: www.kiwibank.co.nz
#RWD OR MOBILE!?
OSNOVE
OSNOVE• Fluid   grid• Flexible      images• Media      queries     Avtor in vir: Ethan Marcotte - Responsive Web Design - ...
FLUID GIRDS• Termin, ki si ga je leto preden je “izumil” #RWD, izmislil takisti Ethan Marcotte!               Avtor in vir...
Flurid grid - http://kflorence.github.com/flurid/
FLEXIBLE / FLUID IMGS• Termin, ki si ga je leto preden je “izumil” #RWD, izmislil takisti Ethan Marcotte!           Avtor ...
Avtor in vir: Ethan Marcotte - Fluid images - http://unstoppablerobotninja.com/entry/fluid-images
FLEXIBLE / FLUID IMGS1.img,2.object {3.     max-width: 100%;4.}
MEDIA QUERIEShttp://css-tricks.com/snippets/css/media-queries-for-standard-devices/
MEDIA QUERIES• Breakpoints: at             320px, 768px, 1024px, 1440px, 1680px or not?• Device   != Context        Avtor ...
MEDIA QUERIES
TEHNIKE
TEHNIKE• Mobile   First• Progressive      Enhancement VS Graceful Degradation• Responsive VS Adaptive      layouts
MOBILE FIRST  Avtor in vir: Luke Wroblewski - Mobile first - http://www.lukew.com/ff/entry.asp?933
PROGRESSIVE ENHANCEMENT      VS  GRACEFULDEGRADATION
RESPONSIVE    VS ADAPTIVE
PASTI
PASTI• Navigacija                / meni Responsive Navigation Patterns (by Brad Frost) Complex Navigation Patterns for Res...
DELAVNICO   IMA
DELAVNICO IMA• Skupine    po 4-5 ljudi• Ena   tema, en fokus• Rezultat   je responsive / adaptive spletna stran
DELAVNICO IMA1.http://www.24ur.com/2.http://www.najdi.si/3.http://www.siol.net/4.http://www.bolha.com/5.http://www.rtvslo....
WHO IS  RESPONSIVE(TO CHANGE)?
HVALA   @davorinpavlicadavorin.pavlica@klika.si
Upcoming SlideShare
Loading in...5
×

#RWD To the future

791

Published on

#RWD To the future

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
791
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "#RWD To the future"

  1. 1. #RWDREWIND TO THE FUTURE Davorin Pavlica - Klika d.o.o.
  2. 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. 3. PLAN • Kaj je RWD • Mobile first, progressive enhancementPredavanje • Adaptive vs. Responsive 45min • Pasti • Tehnike • Skupine po 4-5 oseb Delavnica • Ena tema, en fokus 90min • Rezultat je responsive ali adaptive spletna stranPredstavitev • Vsaka skupina predstavi svojo rešitev 45min
  4. 4. CITAT“It is not the strongest speciesthat survive, nor the mostintelligent, but the ones mostresponsive to change.” Charles Darwin
  5. 5. 25. MAJ 2010
  6. 6. 25. MAJ 2010 DANMLADOSTI?
  7. 7. 25. MAJ 2010 DANBRISAČE?
  8. 8. 25. MAJ 2010 GEEKPRIDE DAY?
  9. 9. 25. MAJ 2010 DAN#RWD!?
  10. 10. 25. MAJ 2010
  11. 11. Avtor in vir: Brad Frost - For a Future-Friendly Web - http://bradfrostweb.com/blog/web/for-a-future-friendly-web/
  12. 12. Avtor in vir: Brad Frost - For a Future-Friendly Web - http://bradfrostweb.com/blog/web/for-a-future-friendly-web/
  13. 13. THE RISE AND FALL OF PCAvtor 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. 14. KAJ JE #RWD?
  15. 15. #RWD?Foto: lyzadanger / Flickr
  16. 16. #RWD?Foto: lyzadanger / Flickr
  17. 17. #RWD! Foto: Antoine Lefeuvre / Flickr
  18. 18. #RWD!Povezava: rsd.joshemerson.co.uk
  19. 19. #RWD!Povezava: mediaqueri.es
  20. 20. #RWD!Povezava: www.smashingmagazine.com
  21. 21. #RWD!Povezava: stuffandnonsense.co.uk
  22. 22. #RWD!Povezava: www.kiwibank.co.nz
  23. 23. #RWD OR MOBILE!?
  24. 24. OSNOVE
  25. 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. 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. 27. Flurid grid - http://kflorence.github.com/flurid/
  28. 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. 29. Avtor in vir: Ethan Marcotte - Fluid images - http://unstoppablerobotninja.com/entry/fluid-images
  30. 30. FLEXIBLE / FLUID IMGS1.img,2.object {3.     max-width: 100%;4.}
  31. 31. MEDIA QUERIEShttp://css-tricks.com/snippets/css/media-queries-for-standard-devices/
  32. 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. 33. MEDIA QUERIES
  34. 34. TEHNIKE
  35. 35. TEHNIKE• Mobile First• Progressive Enhancement VS Graceful Degradation• Responsive VS Adaptive layouts
  36. 36. MOBILE FIRST Avtor in vir: Luke Wroblewski - Mobile first - http://www.lukew.com/ff/entry.asp?933
  37. 37. PROGRESSIVE ENHANCEMENT VS GRACEFULDEGRADATION
  38. 38. RESPONSIVE VS ADAPTIVE
  39. 39. PASTI
  40. 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. 41. DELAVNICO IMA
  42. 42. DELAVNICO IMA• Skupine po 4-5 ljudi• Ena tema, en fokus• Rezultat je responsive / adaptive spletna stran
  43. 43. DELAVNICO IMA1.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. 44. WHO IS RESPONSIVE(TO CHANGE)?
  45. 45. HVALA @davorinpavlicadavorin.pavlica@klika.si

×