• Save
#RWD To the future
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

#RWD To the future

on

  • 1,085 views

#RWD To the future

#RWD To the future

Statistics

Views

Total Views
1,085
Views on SlideShare
1,085
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

#RWD To the future Presentation 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