![Page 1: Web 2 - EdShare Sotonedshare.soton.ac.uk/6060/2/web2.pdf · “Browser support does not mean that everybody gets the same thing. Expecting two users using different browser software](https://reader035.vdocument.in/reader035/viewer/2022063006/5fb6b39dfb8a0519d668ad32/html5/thumbnails/1.jpg)
Web 2.0
Adam ProcterFriday, 21 October 11
![Page 2: Web 2 - EdShare Sotonedshare.soton.ac.uk/6060/2/web2.pdf · “Browser support does not mean that everybody gets the same thing. Expecting two users using different browser software](https://reader035.vdocument.in/reader035/viewer/2022063006/5fb6b39dfb8a0519d668ad32/html5/thumbnails/2.jpg)
User eXperience
Friday, 21 October 11
buzzword - but
![Page 3: Web 2 - EdShare Sotonedshare.soton.ac.uk/6060/2/web2.pdf · “Browser support does not mean that everybody gets the same thing. Expecting two users using different browser software](https://reader035.vdocument.in/reader035/viewer/2022063006/5fb6b39dfb8a0519d668ad32/html5/thumbnails/3.jpg)
http://www.montparnas.com/articles/what-is-user-experience-design/
Friday, 21 October 11
more diagramshttp://www.kickerstudio.com/blog/2008/12/the-disciplines-of-user-experience/
![Page 4: Web 2 - EdShare Sotonedshare.soton.ac.uk/6060/2/web2.pdf · “Browser support does not mean that everybody gets the same thing. Expecting two users using different browser software](https://reader035.vdocument.in/reader035/viewer/2022063006/5fb6b39dfb8a0519d668ad32/html5/thumbnails/4.jpg)
Don-NormanFriday, 21 October 11
http://www.amazon.co.uk/Design-Everyday-Things-Don-Norman/dp/0465067107
loads in the library
![Page 5: Web 2 - EdShare Sotonedshare.soton.ac.uk/6060/2/web2.pdf · “Browser support does not mean that everybody gets the same thing. Expecting two users using different browser software](https://reader035.vdocument.in/reader035/viewer/2022063006/5fb6b39dfb8a0519d668ad32/html5/thumbnails/5.jpg)
Friday, 21 October 11
http://www.amazon.co.uk/Design-Everyday-Things-Don-Norman/dp/0465067107
loads in the library
![Page 6: Web 2 - EdShare Sotonedshare.soton.ac.uk/6060/2/web2.pdf · “Browser support does not mean that everybody gets the same thing. Expecting two users using different browser software](https://reader035.vdocument.in/reader035/viewer/2022063006/5fb6b39dfb8a0519d668ad32/html5/thumbnails/6.jpg)
Friday, 21 October 11
http://www.amazon.co.uk/Design-Everyday-Things-Don-Norman/dp/0465067107
loads in the library
![Page 7: Web 2 - EdShare Sotonedshare.soton.ac.uk/6060/2/web2.pdf · “Browser support does not mean that everybody gets the same thing. Expecting two users using different browser software](https://reader035.vdocument.in/reader035/viewer/2022063006/5fb6b39dfb8a0519d668ad32/html5/thumbnails/7.jpg)
Friday, 21 October 11
![Page 8: Web 2 - EdShare Sotonedshare.soton.ac.uk/6060/2/web2.pdf · “Browser support does not mean that everybody gets the same thing. Expecting two users using different browser software](https://reader035.vdocument.in/reader035/viewer/2022063006/5fb6b39dfb8a0519d668ad32/html5/thumbnails/8.jpg)
http://www.slideshare.net/elliotjaystocks/stop-worrying-get-on-with-it-wdc-bristol-2009
“Usability/accessibility/functionality = very important
But don’t underestimate the importance of beauty”
- Elliot Jay Stocks
Friday, 21 October 11
![Page 9: Web 2 - EdShare Sotonedshare.soton.ac.uk/6060/2/web2.pdf · “Browser support does not mean that everybody gets the same thing. Expecting two users using different browser software](https://reader035.vdocument.in/reader035/viewer/2022063006/5fb6b39dfb8a0519d668ad32/html5/thumbnails/9.jpg)
Responsive web design*
http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/
* not just media queries mind
Friday, 21 October 11
http://uxmatters.com/
![Page 10: Web 2 - EdShare Sotonedshare.soton.ac.uk/6060/2/web2.pdf · “Browser support does not mean that everybody gets the same thing. Expecting two users using different browser software](https://reader035.vdocument.in/reader035/viewer/2022063006/5fb6b39dfb8a0519d668ad32/html5/thumbnails/10.jpg)
Friday, 21 October 11
![Page 11: Web 2 - EdShare Sotonedshare.soton.ac.uk/6060/2/web2.pdf · “Browser support does not mean that everybody gets the same thing. Expecting two users using different browser software](https://reader035.vdocument.in/reader035/viewer/2022063006/5fb6b39dfb8a0519d668ad32/html5/thumbnails/11.jpg)
“We need to accept that what makes the web so unique — so special — is this constant flux. We are working in by far the most pioneering creative medium at this point in time”
- Simon Collison
http://colly.com/Friday, 21 October 11
![Page 12: Web 2 - EdShare Sotonedshare.soton.ac.uk/6060/2/web2.pdf · “Browser support does not mean that everybody gets the same thing. Expecting two users using different browser software](https://reader035.vdocument.in/reader035/viewer/2022063006/5fb6b39dfb8a0519d668ad32/html5/thumbnails/12.jpg)
Content first
http://www.transcendingcss.com/Friday, 21 October 11
transcending css (book)
![Page 13: Web 2 - EdShare Sotonedshare.soton.ac.uk/6060/2/web2.pdf · “Browser support does not mean that everybody gets the same thing. Expecting two users using different browser software](https://reader035.vdocument.in/reader035/viewer/2022063006/5fb6b39dfb8a0519d668ad32/html5/thumbnails/13.jpg)
Semantic Markup
Friday, 21 October 11
html is all about meaning// means the meaning of word, phrase sentence etc that means your html should be self describing
![Page 14: Web 2 - EdShare Sotonedshare.soton.ac.uk/6060/2/web2.pdf · “Browser support does not mean that everybody gets the same thing. Expecting two users using different browser software](https://reader035.vdocument.in/reader035/viewer/2022063006/5fb6b39dfb8a0519d668ad32/html5/thumbnails/14.jpg)
Meaningful Markup
Friday, 21 October 11
html is all about structure in meaning
![Page 15: Web 2 - EdShare Sotonedshare.soton.ac.uk/6060/2/web2.pdf · “Browser support does not mean that everybody gets the same thing. Expecting two users using different browser software](https://reader035.vdocument.in/reader035/viewer/2022063006/5fb6b39dfb8a0519d668ad32/html5/thumbnails/15.jpg)
http://forabeautifulweb.com/Friday, 21 October 11
transcending css bookhttp://forabeautifulweb.com - designing with css (DVD)
![Page 16: Web 2 - EdShare Sotonedshare.soton.ac.uk/6060/2/web2.pdf · “Browser support does not mean that everybody gets the same thing. Expecting two users using different browser software](https://reader035.vdocument.in/reader035/viewer/2022063006/5fb6b39dfb8a0519d668ad32/html5/thumbnails/16.jpg)
http://www.themaninblue.com/Friday, 21 October 11
http://www.themaninblue.com/
basic content and functionality should be accessible to all browsers lean, clean, semantic HTML should describe content CSS should accomplish all aspects of visual design behaviour should be enabled using unobtrusive scripting
![Page 17: Web 2 - EdShare Sotonedshare.soton.ac.uk/6060/2/web2.pdf · “Browser support does not mean that everybody gets the same thing. Expecting two users using different browser software](https://reader035.vdocument.in/reader035/viewer/2022063006/5fb6b39dfb8a0519d668ad32/html5/thumbnails/17.jpg)
Browser stats
Friday, 21 October 11
look at future !! not backwards !!
![Page 18: Web 2 - EdShare Sotonedshare.soton.ac.uk/6060/2/web2.pdf · “Browser support does not mean that everybody gets the same thing. Expecting two users using different browser software](https://reader035.vdocument.in/reader035/viewer/2022063006/5fb6b39dfb8a0519d668ad32/html5/thumbnails/18.jpg)
Myths
Friday, 21 October 11
![Page 19: Web 2 - EdShare Sotonedshare.soton.ac.uk/6060/2/web2.pdf · “Browser support does not mean that everybody gets the same thing. Expecting two users using different browser software](https://reader035.vdocument.in/reader035/viewer/2022063006/5fb6b39dfb8a0519d668ad32/html5/thumbnails/19.jpg)
should websites look the same in every browser ?
Friday, 21 October 11
wireframe then into code
![Page 20: Web 2 - EdShare Sotonedshare.soton.ac.uk/6060/2/web2.pdf · “Browser support does not mean that everybody gets the same thing. Expecting two users using different browser software](https://reader035.vdocument.in/reader035/viewer/2022063006/5fb6b39dfb8a0519d668ad32/html5/thumbnails/20.jpg)
http://dowebsitesneedtolookexactlythesameineverybrowser.com/Friday, 21 October 11
”[W]e need to step back from our endless battle to make it look the same across all platforms. We can’t make our site look the same on a PDA as a 21" monitor, we can’t make our site ‘the same’ for someone on a speaking browser, and although things are improving there are still differences in support and implementation of various W3C standards. Let go, it[’]s not going to look the same.” 3Rachel Andrew wrote that in 2002.
http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com/
![Page 21: Web 2 - EdShare Sotonedshare.soton.ac.uk/6060/2/web2.pdf · “Browser support does not mean that everybody gets the same thing. Expecting two users using different browser software](https://reader035.vdocument.in/reader035/viewer/2022063006/5fb6b39dfb8a0519d668ad32/html5/thumbnails/21.jpg)
10,000 browser brands !
Friday, 21 October 11“There are over 10,000 browser brands, versions, and configurations and that number is growing. [...] No two browsers have an identical implementation.” 1
![Page 22: Web 2 - EdShare Sotonedshare.soton.ac.uk/6060/2/web2.pdf · “Browser support does not mean that everybody gets the same thing. Expecting two users using different browser software](https://reader035.vdocument.in/reader035/viewer/2022063006/5fb6b39dfb8a0519d668ad32/html5/thumbnails/22.jpg)
“Browser support does not mean that everybody gets the same thing. Expecting two users using different browser software to have an identical experience fails to embrace or acknowledge the heterogeneous essence of the Web. In fact, requiring the same experience for all users creates an artificial barrier to participation.”
http://developer.yahoo.com/yui/articles/gbs/Friday, 21 October 11'diverse in character or content'
![Page 23: Web 2 - EdShare Sotonedshare.soton.ac.uk/6060/2/web2.pdf · “Browser support does not mean that everybody gets the same thing. Expecting two users using different browser software](https://reader035.vdocument.in/reader035/viewer/2022063006/5fb6b39dfb8a0519d668ad32/html5/thumbnails/23.jpg)
also - below the fold is ok
Friday, 21 October 11
![Page 24: Web 2 - EdShare Sotonedshare.soton.ac.uk/6060/2/web2.pdf · “Browser support does not mean that everybody gets the same thing. Expecting two users using different browser software](https://reader035.vdocument.in/reader035/viewer/2022063006/5fb6b39dfb8a0519d668ad32/html5/thumbnails/24.jpg)
content first - different output
Friday, 21 October 11
![Page 25: Web 2 - EdShare Sotonedshare.soton.ac.uk/6060/2/web2.pdf · “Browser support does not mean that everybody gets the same thing. Expecting two users using different browser software](https://reader035.vdocument.in/reader035/viewer/2022063006/5fb6b39dfb8a0519d668ad32/html5/thumbnails/25.jpg)
Friday, 21 October 11
![Page 26: Web 2 - EdShare Sotonedshare.soton.ac.uk/6060/2/web2.pdf · “Browser support does not mean that everybody gets the same thing. Expecting two users using different browser software](https://reader035.vdocument.in/reader035/viewer/2022063006/5fb6b39dfb8a0519d668ad32/html5/thumbnails/26.jpg)
Friday, 21 October 11
![Page 27: Web 2 - EdShare Sotonedshare.soton.ac.uk/6060/2/web2.pdf · “Browser support does not mean that everybody gets the same thing. Expecting two users using different browser software](https://reader035.vdocument.in/reader035/viewer/2022063006/5fb6b39dfb8a0519d668ad32/html5/thumbnails/27.jpg)
Friday, 21 October 11
![Page 28: Web 2 - EdShare Sotonedshare.soton.ac.uk/6060/2/web2.pdf · “Browser support does not mean that everybody gets the same thing. Expecting two users using different browser software](https://reader035.vdocument.in/reader035/viewer/2022063006/5fb6b39dfb8a0519d668ad32/html5/thumbnails/28.jpg)
Friday, 21 October 11
![Page 29: Web 2 - EdShare Sotonedshare.soton.ac.uk/6060/2/web2.pdf · “Browser support does not mean that everybody gets the same thing. Expecting two users using different browser software](https://reader035.vdocument.in/reader035/viewer/2022063006/5fb6b39dfb8a0519d668ad32/html5/thumbnails/29.jpg)
Friday, 21 October 11twitter
![Page 30: Web 2 - EdShare Sotonedshare.soton.ac.uk/6060/2/web2.pdf · “Browser support does not mean that everybody gets the same thing. Expecting two users using different browser software](https://reader035.vdocument.in/reader035/viewer/2022063006/5fb6b39dfb8a0519d668ad32/html5/thumbnails/30.jpg)
Friday, 21 October 11gowalla
![Page 31: Web 2 - EdShare Sotonedshare.soton.ac.uk/6060/2/web2.pdf · “Browser support does not mean that everybody gets the same thing. Expecting two users using different browser software](https://reader035.vdocument.in/reader035/viewer/2022063006/5fb6b39dfb8a0519d668ad32/html5/thumbnails/31.jpg)
Never broken
Friday, 21 October 11
or ugly
https://browserlab.adobe.com
![Page 32: Web 2 - EdShare Sotonedshare.soton.ac.uk/6060/2/web2.pdf · “Browser support does not mean that everybody gets the same thing. Expecting two users using different browser software](https://reader035.vdocument.in/reader035/viewer/2022063006/5fb6b39dfb8a0519d668ad32/html5/thumbnails/32.jpg)
Friday, 21 October 11
or ugly
https://browserlab.adobe.com
![Page 33: Web 2 - EdShare Sotonedshare.soton.ac.uk/6060/2/web2.pdf · “Browser support does not mean that everybody gets the same thing. Expecting two users using different browser software](https://reader035.vdocument.in/reader035/viewer/2022063006/5fb6b39dfb8a0519d668ad32/html5/thumbnails/33.jpg)
'take full advantage of new technologies, and craft every user's experience so that it's appropriate to the capabilities of the browser they're using. That will likely mean that designs will look different — sometimes very different — across browsers.'
- Andy Clarke
Friday, 21 October 11'diverse in character or content'
![Page 34: Web 2 - EdShare Sotonedshare.soton.ac.uk/6060/2/web2.pdf · “Browser support does not mean that everybody gets the same thing. Expecting two users using different browser software](https://reader035.vdocument.in/reader035/viewer/2022063006/5fb6b39dfb8a0519d668ad32/html5/thumbnails/34.jpg)
*You will not be able to show this in static designs or storyboarding
Friday, 21 October 11
ok one more thing before some demo sites
![Page 35: Web 2 - EdShare Sotonedshare.soton.ac.uk/6060/2/web2.pdf · “Browser support does not mean that everybody gets the same thing. Expecting two users using different browser software](https://reader035.vdocument.in/reader035/viewer/2022063006/5fb6b39dfb8a0519d668ad32/html5/thumbnails/35.jpg)
Friday, 21 October 11
designing for the web (not too technical more the why - which is very very good)
Books
![Page 36: Web 2 - EdShare Sotonedshare.soton.ac.uk/6060/2/web2.pdf · “Browser support does not mean that everybody gets the same thing. Expecting two users using different browser software](https://reader035.vdocument.in/reader035/viewer/2022063006/5fb6b39dfb8a0519d668ad32/html5/thumbnails/36.jpg)
http://silverbackapp.com/
Friday, 21 October 11
what the user does....
![Page 37: Web 2 - EdShare Sotonedshare.soton.ac.uk/6060/2/web2.pdf · “Browser support does not mean that everybody gets the same thing. Expecting two users using different browser software](https://reader035.vdocument.in/reader035/viewer/2022063006/5fb6b39dfb8a0519d668ad32/html5/thumbnails/37.jpg)
Friday, 21 October 11
what the user does....
![Page 38: Web 2 - EdShare Sotonedshare.soton.ac.uk/6060/2/web2.pdf · “Browser support does not mean that everybody gets the same thing. Expecting two users using different browser software](https://reader035.vdocument.in/reader035/viewer/2022063006/5fb6b39dfb8a0519d668ad32/html5/thumbnails/38.jpg)
Demo
Friday, 21 October 11
flexible design
www.hardboileddesign.comwww.colly.commediaqueri.es
Siri demo
http://www.alistapart.com/articles/responsive-web-designhttp://unstoppablerobotninja.com/entry/with-good-references/
http://www.alistapart.com/d/responsive-web-design/ex/ex-site-flexible.htmlhttp://2010.dconstruct.org/http://saltercane.com/http://2011.uxlondon.com/http://simplebits.com/http://www.informationarchitects.jp/en/http://www.stpaulsschool.org.uk/http://huffduffer.com/
![Page 39: Web 2 - EdShare Sotonedshare.soton.ac.uk/6060/2/web2.pdf · “Browser support does not mean that everybody gets the same thing. Expecting two users using different browser software](https://reader035.vdocument.in/reader035/viewer/2022063006/5fb6b39dfb8a0519d668ad32/html5/thumbnails/39.jpg)
Friday, 21 October 11change size according to device (as per demo using iPad/iPhone)
![Page 40: Web 2 - EdShare Sotonedshare.soton.ac.uk/6060/2/web2.pdf · “Browser support does not mean that everybody gets the same thing. Expecting two users using different browser software](https://reader035.vdocument.in/reader035/viewer/2022063006/5fb6b39dfb8a0519d668ad32/html5/thumbnails/40.jpg)
Friday, 21 October 11
or ugly
no support for css3 columns rather than add meaningless divs - design for the differences
https://browserlab.adobe.com
![Page 41: Web 2 - EdShare Sotonedshare.soton.ac.uk/6060/2/web2.pdf · “Browser support does not mean that everybody gets the same thing. Expecting two users using different browser software](https://reader035.vdocument.in/reader035/viewer/2022063006/5fb6b39dfb8a0519d668ad32/html5/thumbnails/41.jpg)
Chrome Experiments - Arcade Fire
http://www.chromeexperiments.com/arcadefire/
Friday, 21 October 11
push it !
![Page 42: Web 2 - EdShare Sotonedshare.soton.ac.uk/6060/2/web2.pdf · “Browser support does not mean that everybody gets the same thing. Expecting two users using different browser software](https://reader035.vdocument.in/reader035/viewer/2022063006/5fb6b39dfb8a0519d668ad32/html5/thumbnails/42.jpg)
Craft experiences for users, yes it’s more work but its worth it
Friday, 21 October 11
push it !
![Page 43: Web 2 - EdShare Sotonedshare.soton.ac.uk/6060/2/web2.pdf · “Browser support does not mean that everybody gets the same thing. Expecting two users using different browser software](https://reader035.vdocument.in/reader035/viewer/2022063006/5fb6b39dfb8a0519d668ad32/html5/thumbnails/43.jpg)
Friday, 21 October 11
aral balkan FOWD london 2011 talk - a lot about applying Don Norman to UI design
Wacth it here http://ndc2011.macsimum.no/mp4/Day2%20Thursday/Track4%200900-1000.mp4
Lift interfaceticket machine
![Page 44: Web 2 - EdShare Sotonedshare.soton.ac.uk/6060/2/web2.pdf · “Browser support does not mean that everybody gets the same thing. Expecting two users using different browser software](https://reader035.vdocument.in/reader035/viewer/2022063006/5fb6b39dfb8a0519d668ad32/html5/thumbnails/44.jpg)
Friday, 21 October 11
aral balkan FOWD london 2011 talk - a lot about applying Don Norman to UI design
Wacth it here http://ndc2011.macsimum.no/mp4/Day2%20Thursday/Track4%200900-1000.mp4
Lift interfaceticket machine