#RWD To the future

953 views
862 views

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
953
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

#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

×