• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
#RWD To the future
 

#RWD To the future

on

  • 905 views

#RWD To the future

#RWD To the future

Statistics

Views

Total Views
905
Views on SlideShare
905
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