Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Responsive Design is Hard/Easy! Be Afraid/Don't...

Dan Mall
September 09, 2013

Responsive Design is Hard/Easy! Be Afraid/Don't Worry!

Dan Mall

September 09, 2013
Tweet

More Decks by Dan Mall

Other Decks in Design

Transcript

  1. A brief history lesson A website th t looks ood

    no m tter where or how I ccess it. bounceb r inrent ls.com
  2. A brief history lesson A website th t looks ood

    no m tter where or how I ccess it. list p rt.com/ rticle/responsive-web-desi n
  3. 88% o people h ve mobile phone. The number o

    people th t use their phone to ccess the Internet went rom 31% (2009) to 55% (2012). 35% o people in the US don’t h ve Internet ccess t home. 59% o Americ ns who m ke less th n $30,000 h ve no Internet ccess t home. 88% o Americ ns without hi h school diplom don’t h ve Internet ccess t home. —K ren McGr ne, vi Luke Wroblewski. http://www.lukew.com/ /entr . sp?1602
  4. “I’m not m kin c se or ditchin Photoshop lto

    ether nd desi nin solel in the browser but r ther better underst ndin how we use Photoshop in modern web desi n.” —Br d Frost, Front-End Desi ner
  5. “I don’t think we’re in post-P S D er ,

    but I do think we’re movin tow rds post-‘ ull-comp’ er .” —Me
  6. “[St le tiles re] c t l st or discussions

    round the pre erences nd o ls o the client.” —S m nth W rren: Desi ner, Twitter
  7. There is c bin on the side o mount in.

    Three people re inside nd the re de d. How did the die?
  8. The were killed in pl ne cr sh. * irpl

    ne c bin Im e: dm ll.me/11 siFO
  9. There is n ncient invention still used in some p

    rts o the world tod th t llows people to see throu h w lls. Wh t is it?
  10. Windows. Im e: Hope or Tod , b Sh ne

    Mielke—dm ll.me/13dXv1h
  11. A wom n le ves home nd m kes three

    le t turns. She returns home in. On the w , she p ssed two women with m sks. Who were the two women?
  12. Too much bstr ction nd l ck o context le

    d to misdirection. The point
  13. Turn power ul phr ses into visu l hooks. ri

    .super riend.l /desi ns/round2
  14. “Obviousl this is not website. But I see how it

    could be one.” —The per ect client’s re ction to n element coll e
  15. Turn power ul phr ses into visu l hooks. br

    d rostweb.com/blo /post/ tomic-web-desi n
  16. “Obviousl this is not website. But I see how it

    could be one.” —The per ect client’s re ction to n element coll e cle rle t.com/thinks/visu ldesi nexplor tions
  17. “It’s like ivin our client peek t those hidden l

    ers.” —P ul Llo d: Senior Visu l Desi ner, Cle rle t
  18. “It’s like ivin our client peek t those hidden l

    ers.” —P ul Llo d: Senior Visu l Desi ner, Cle rle t
  19. “We must move w rom the pl ce where the

    client sits with rms crossed in the role o jud e, nd we t ke to the st e with son nd d nce in the role o uditionin t lent. While both p rties ind the showm nship o our cr t titill tin , the pr ctitioner’s is stron er pl ce th n th t o the per ormer. It is this pr ctitioner’s position rom which we must strive to oper te. Pr ctitioners do not present. St rs do not udition.” —Bl ir Enns, dm ll.me/13eVrWD
  20. 4 design process tips for responsive web design From Vox

    Medi Director o Desi n Ted Irvine (@ted_irvine)
  21. “Thin s c n look be uti ul in Photoshop,

    but h vin them work responsivel in code ives ou more honest sense o the desi n. As desi ners, we're o ten bit dishonest bout content. We re lized th t the more quickl we ot into code, the more quickl thin s broke, nd the more quickl we could ix them.” be honest j 1
  22. “We still do lot o work in Photoshop when we

    needed to ocus. Sometimes when ou work onl in code, ou work too st. We needed to slow down.” Slow down j 3
  23. “We lw s st rt with 2-week t po r

    ph stud in browser. For responsive projects, desi n elements o w when the viewport ets sm ller, so t po r ph pl s n import nt p rt in c rr in the br nd.” Start with type j 4
  24. Photoshop will h ve pl ce in m work low

    or lon time to come. It llows me to be expressive in w th t I c n’t be with code.
  25. “How would I ever h ve discovered th t [

    nim tion ide ] i I h d to compile ever time I m de ch n e? So much o cre tion is bout discover , nd ou c n’t discover n thin i ou c n’t see wh t ou’re doin .” —Bret Victor
  26. For some, “desi nin in the browser” ctu ll me

    ns skippin desi n to st rtin buildin inste d.
  27. “Let’s ch n e the phr se ‘desi nin in

    the browser’ to ‘decidin in the browser.’” —Me, http://the-p str -box-project.net/d n-m ll/2012-september-12/
  28. “At the time, people didn’t underst nd wh CSS w

    s import nt. I w nted to show them.” —D ve She
  29. IA/UX Desi n HTML/CSS J v Script Week 1 Week

    2 Week 3 Week 4 Week 5 Week 6 Week 7 Week 8 Week 9 Week 10 proposed schedule
  30. IA/UX Desi n HTML/CSS J v Script Week 1 Week

    2 Week 3 Week 4 Week 5 Week 6 Week 7 Week 8 Week 9 Week 10 Week 11 Week 12 Actual schedule