#RWD To the future

  • 702 views
Uploaded on

#RWD To the future

#RWD To the future

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
702
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. #RWDREWIND 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 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. CITAT“It is not the strongest speciesthat survive, nor the mostintelligent, but the ones mostresponsive to change.” Charles Darwin
  • 5. 25. MAJ 2010
  • 6. 25. MAJ 2010 DANMLADOSTI?
  • 7. 25. MAJ 2010 DANBRISAČE?
  • 8. 25. MAJ 2010 GEEKPRIDE 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 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. 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 IMGS1.img,2.object {3.     max-width: 100%;4.}
  • 31. MEDIA QUERIEShttp://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 GRACEFULDEGRADATION
  • 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 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. WHO IS RESPONSIVE(TO CHANGE)?
  • 45. HVALA @davorinpavlicadavorin.pavlica@klika.si