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

#RWD To the future

on

  • 1,043 views

#RWD To the future

#RWD To the future

Statistics

Views

Total Views
1,043
Views on SlideShare
1,043
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 #RWD To the future Presentation Transcript

  • #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 2 psa čuvaja• Davorin Pavlica / davorin.pavlica@klika.si / @DavorinPavlica • Spletni oblikovalec
  • 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
  • CITAT“It is not the strongest speciesthat survive, nor the mostintelligent, but the ones mostresponsive to change.” Charles Darwin
  • 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/01/17/the-rise-and-fall-of-personal-computing/
  • 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 - http://www.alistapart.com/articles/responsive-web-design/
  • 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/
  • 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 in vir: Ethan Marcotte - Fluid images - http://unstoppablerobotninja.com/entry/fluid-images
  • 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 in vir: Marko Mrdjenović - Defining Breakpoints https://speakerdeck.com/friedcell/defining-breakpoints
  • 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 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 ...
  • 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.si/6.http://www.avto.net/7.http://www.itis.si/
  • WHO IS RESPONSIVE(TO CHANGE)?
  • HVALA @davorinpavlicadavorin.pavlica@klika.si