The Web Native Designer (January 2012)

The Web Native Designer (January 2012)

What does it mean to be designing for the web? The web can't be pinned down to a specific device, to a specific screen-size, or to a specific anything. How do we embrace this reality to deliver the best possible experiences to the widest possible audience.

0bce06bd06ee7a2c4f5500f25dcf7f18?s=128

Paul Robert Lloyd

January 11, 2012
Tweet

Transcript

  1. WEB NATIVE Andy Hume Paul Lloyd DESIGNER University of Greenwich:

    MA Web Design Content Planning 11 January 2012 THE
  2. None
  3. e power of the Web is in its universality. Access

    by everyone regardless of disabili is an essential aspect. Tim Berners-Lee http://www.w3.org/People/Berners-Lee/UU.html
  4. flickr.com/photos/lukeredmond/1795084139/ Design?

  5. e power of the Web is in its universality. Access

    by everyone regardless of disabili is an essential aspect. Tim Berners-Lee http://www.w3.org/People/Berners-Lee/UU.html
  6. <a href="javascript:doAjax();">

  7. <img src="G.gif">reenwich

  8. .container { width: 960px; }

  9. From now on, ins ad of lking about making a

    si accessible, I’m going to lk about keeping it accessible. Jeremy Keith adactio.com/journal/1224
  10. <a href="/link/to/our/content"> <a href="javascript:doAjax();">

  11. None
  12. None
  13. flickr.com/photos/jglitten/3167874991 Progressive Enhancement

  14. flickr.com/photos/auntiep/51207712/ A maturing web e power of the Web is

    in its universality. Access by everyone regardless of disabili is an essential aspect. Tim Berners-Lee w3.org/People/Berners-Lee/UU.html
  15. flickr.com/photos/jurvetson/167197691/ Network Effects

  16. flickr.com/photos/24444656@N05/6618115427/ REST (Representational State Transfer)

  17. How can we design for the web as a medium

    in it’s own right?
  18. flickr.com/photos/22416200@N05/5055993048 Radio with pictures

  19. flickr.com/photos/paulwatson/308973659 Print with interactivity?

  20. Wanting control needing constraints

  21. 640×480

  22. 800×600

  23. 1024×768

  24. None
  25. Ag Ag Ag Ag Ag Ag ARIAL VERDANA TREBUCHET MS

    GEORGIA TIMES NEW ROMAN COURIER NEW
  26. The ‘Mobile Web’

  27. flickr.com/photos/adactio/6153481666 Everything is web enabled

  28. Collective hallucination

  29. What does web design mean today?

  30. None
  31. Web typography

  32. None
  33. Keeping it DRY with media queries .product .title { font-size:

    1em; } @media screen and (max-width: 320px) { .product .title { font-size: 0.75em; } }
  34. Adaptive layouts

  35. Responsive Design

  36. ethanmarcotte.com

  37. paulrobertlloyd.com

  38. pt px PRINT SCREEN WEB % em Proportions not fixed

    values
  39. Beyond responsive design

  40. Where are our constraints?

  41. In order to embrace designing na ve layouts for the

    web—wha ver the device—we need to shed the no on that we crea layouts om a canvas in. We need to flip it on its head, and create layouts from the content out. Mark Boulton markboulton.co.uk/journal/comments/a-richer-canvas
  42. ‘Content is king’

  43. None
  44. Microcopy flickr.com/photos/fstorr/6512990915 flickr.com/groups/microcopy/

  45. Letting go

  46. Patterns not pages

  47. Collaborative design development

  48. USER EXPERIENCE DESIGNER GRAPHIC/INTERACTION DESIGNER FRONT-END DEVELOPER ENTIRE TEAM

  49. USER EXPERIENCE DESIGNER GRAPHIC/INTERACTION DESIGNER FRONT-END DEVELOPER ENTIRE TEAM

  50. Design for all

  51. Thank-you! paulrobertlloyd.com @paulrobertlloyd andyhume.net @andyhume Creative Commons Licensed Attribution, Non-Commercial,

    Share Alike cc