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.

Transcript

1. WEB NATIVE Andy Hume Paul Lloyd DESIGNER University of Greenwich: MA Web Design Content Planning 11 January 2012 THE
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();">
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
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?
31. Web typography
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’
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