Webstock 2011


Published on

Key points from each session I attended at the awesome Webstock 2011 conference in Wellington.

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Attribution-NonCommercial-ShareAlike 2.0 Generic (CC BY-NC-SA 2.0)A superbly designed, organised and executed conference.
  • Lots of people (750?), Millions of $ of Apple merchandise, Free Coffee, Free Ice cream, …http://farm6.static.flickr.com/5092/5455373339_ec39cd500d.jpg
  • “About Me:” drives shallowness vs asking questions such as “What’s happening?”.Great questionso   What did you care about when you were nine?o   What’s the last thing you changed your mind about?http://www.flickr.com/photos/webstock06/5452776280/in/photostream/
  • http://www.flickr.com/photos/webstock06/5452189653/
  • http://www.flickr.com/photos/webstock06/5452904226/
  • http://www.flickr.com/photos/webstock06/5452992696/
  • http://www.flickr.com/photos/webstock06/5452433349/
  • http://www.flickr.com/photos/webstock06/5454478346/Speed matters.  Google is the fastest search engine, a lot due to how fast it is.
  • http://www.flickr.com/photos/webstock06/5454487238/Content strategy plans for the creation, delivery, and governance of content.
  • http://www.flickr.com/photos/webstock06/5453894265/6 tips to deliver delight:Exceed expectationsUnder promise, over deliverDon’t create hype too earlyDeliver value earlyReduce steps a user has to go throughSweat the small detailsEmbrace serendipityDon’t force all users down the same pathTaking an unexpected path delights userse.g. keyboard shortcuts on twitter, who to followPackage it nicelyBe it physical or digital productsThere is no faster way to cheapen an experienceListen, respond & actIdentify when you’re not delightingMonitor what your customers are saying by doing a search and adding ‘hate’ to it.Search for sentences like “wish twitter would”, “wish twitter had” to get the pulse of what people are thinkingShowing people that you are listening and responding, even if you can’t fix it, helps to delight users.
  • http://www.flickr.com/photos/webstock06/5480710485/Being open on web (blog, twitter, …) helps interconnect her personal and professional life.Twitter is like living in a room above a fantastic bar; you can at any time go downstairs and connect with all these different people.
  • http://www.flickr.com/photos/webstock06/5454625433/Co-founder of Tumblr, Founder of Instapaper
  • http://www.flickr.com/photos/webstock06/5455979714/http://www.youtube.com/watch?v=K7Pahd2X-eE
  • http://www.flickr.com/photos/webstock06/5476027794/
  • http://www.flickr.com/photos/webstock06/5476027794/
  • http://www.flickr.com/photos/webstock06/5480116392/
  • http://www.flickr.com/photos/webstock06/5480924362/San Francisco Parking Meters§  People can use phone app to see parks that are free§  Pricing changes based on time of day etc.Electronic scales (http://withings.com) that post info to website where it can be analysed.
  • http://www.flickr.com/photos/webstock06/5480355895/
  • http://www.flickr.com/photos/webstock06/5480958468/
  • http://www.flickr.com/photos/webstock06/5481307828/Mike Brown, Tash Lampard, Support team, Interpreter
  • Webstock 2011

    1. 1. http://www.flickr.com/photos/webstock06/5452548587/<br />Prepared By Simon Gianoutsos<br />All photos Creative Commons from http://www.flickr.com/photos/webstock06/<br />
    2. 2. “Webstock is a range of web-related events with the aim of improving how websites are built through inspiration, education, insightful analysis and practical application. It features industry leaders and kick-ass speakers talking on topics such as accessibility, web standards, usability and other best practices.”<br />Source: http://www.webstock.org.nz/about/<br />
    3. 3.
    4. 4. Frank Chimero<br /><ul><li>We tell stories to understand and be understood
    5. 5. Ask questions to get good stories back.</li></li></ul><li><ul><li>“The 15-person team working on the new system was the largest engineering team Facebook has ever had for a single product or feature”</li></ul>Michael Koziarski<br /><ul><li>Google would rather leave a job unfilled than hire a sub-optimal candidate.
    6. 6. Ship something small, something simple, then make it better.</li></li></ul><li>David Recordon<br />Still not resolved in HTML5 (H.264 vs WebM)<br /><ul><li>Focus of HTML5 has been largely around desktop browsers (so far), not mobiles.
    7. 7. Mobile is likely to be driving a lot of the web standards over the next 10 years.</li></li></ul><li>Mark Pilgrim<br /><ul><li>Not just humans look at web pages.  Bots and other tools can get more structure out of your site if you use proper semantic elements.
    8. 8. HTML5
    9. 9. Local Storage
    10. 10. Offline
    11. 11. Feature detection is really easy in HTML5; use modernizr</li></li></ul><li><ul><li>CSS Best Practices:
    12. 12. Keep specificity as low as possible
    13. 13. Abstract repeating visual patterns</li></ul>Nicole Sullivan<br /><ul><li>Can reuse flexible object in many classes (c.f. Media Block on Facebook page with image on left, text on right)
    14. 14. Should have only about 7 font sizes on a site</li></li></ul><li>Steve Souders<br /><ul><li>Speed: “First and foremost, we believe that speed is more than a feature.  Speed is the most important feature” Fred Wilson (VC)</li></ul>What makes sites feel slow?<br /><ul><li>(lack of) Progressive Rendering
    15. 15. Loading via dom using Javascript.
    16. 16. Deliver HTML
    17. 17. Defer Javascript downloading
    18. 18. Parallel downloading and rendering
    19. 19. Use non-blocking approaches</li></ul>Improving performance:<br /><ul><li>Gzip
    20. 20. Quick Win: Caching</li></li></ul><li>Kristina Halvorson<br /><ul><li>  “Content strategy helps figure out how content will meet your business objectives”
    21. 21. Content is like a fragile plant and once you plant it you need to take care of it (feed it, water it, ecosystem etc.)
    22. 22. Ask: What? Why? For whom? How? For whom? With what? By whom? When? How often? What next?</li></li></ul><li>John Gruber<br /><ul><li>GUI was about the interface, nota interface
    23. 23. GUI: for real people, API: for programmers
    24. 24. User Interfaces are clothing for the mind</li></li></ul><li>Doug Bowman<br /><ul><li>Delightful experiences are memorable experiences.</li></ul>6 tips to deliver delight:<br /><ul><li>Exceed expectations
    25. 25. Deliver value early
    26. 26. Sweat the small details
    27. 27. Embrace serendipity
    28. 28. Package it nicely
    29. 29. Listen, respond & act
    30. 30. People have a strong desire to return to a delightful place
    31. 31. “Good design isn’t about making decisions for your users, it’s about making those decisions irrelevant” @rands</li></li></ul><li>Amanda F Palmer<br /><ul><li>Making connections with fans builds loyalty
    32. 32. “Good will and free content on the behalf of an artist breeds success that may not be immediately visible or measurable”</li></li></ul><li>Marco Arment<br /><ul><li>Your product should be remarkable
    33. 33. Features requests are one input of many;  Stand up for your own vision
    34. 34. E.g. nobody would ever have asked for a glass phone with no buttons, looking at predecessor phones
    35. 35. Use technology conservatively
    36. 36. There’s always something new
    37. 37. Buggier, Less ability for problem resolution …
    38. 38. Boring == Stable
    39. 39. Design things so they are isolated from other things as much as possible.</li></li></ul><li>David McCandless<br /><ul><li>Visualising information is about bringing it into focus.
    40. 40. .</li></ul>Diagrams Creative Commons from http://www.flickr.com/photos/25541021@N00/<br />
    41. 41. Josh Clark<br /><ul><li>“Why does an e-book reader need a page-turn effect? Like having a fake needle on a CD player. Or horse-shit coming from the back of a car.” @blprnt
    42. 42. If it looks like a physical object people will attempt to interact with it like that object.
    43. 43. Animation provides feedback to your design metaphor.
    44. 44. The more features you have the more controls you need
    45. 45. Clarity should trump density.  Just enough is more.
    46. 46. Gestures are the keyboard shortcuts of touch interfaces (instead of clicking or buttons)
    47. 47. Buttons are a Hack
    48. 48. Touch screen interactions feel more personal, intimate, natural, intuitive</li></li></ul><li>Jason Cohen<br /><ul><li>How to decide what advice to follow, choose your own path
    49. 49. Lesson</li></ul>You set the rules<br />Advice has context<br />“I’m not a _______ person” is twaddle<br />Trust your inexperienced gut<br />“That’s how it’s done” is bull5h1t<br />
    50. 50. Peter Sunde (Pirate Bay)<br /><ul><li>A private investigator following Peter registered his car to a company called “private investigators”</li></ul>Responses to US legal threats:<br />Photo of a polar bear; We’re being eaten by polar bears<br />Circled Sweden on map of world “we’re not part of the US yet”<br />Reply to cease and desist font distribution with letter reformatted with fonts they were told to stop using.<br />
    51. 51. Engineer<br /><ul><li>Needed so that you don’t end up with chaos
    52. 52. Willing to take the time to go deep and understand</li></ul>Michael Lopp<br />Dictator<br /><ul><li>They know what they want
    53. 53. This is the enforcer; the person you can go to for confirmation.</li></ul>Designer<br /><ul><li>Prioritising, focusing and expertly describing the want.
    54. 54. Responsible for the user experience.</li></li></ul><li><ul><li>APIs are the roads between services along which data can travel to be assembled and reassembled.  This means every open site or service is another component we can build on and extend</li></ul>Tom Coates<br /><ul><li>As cost drops we will see more and more connectivity in all objects.
    55. 55. “What happens when Ideas, Buildings, Objects, Media, Environments, Appliances, Vehicles and Information have Sex?”
    56. 56. Bloody amazing things happen
    57. 57. Objects as Services
    58. 58. Why bother owning something at all?
    59. 59. e.g. a washing machine. Why bother buying one, just rent one and pay per usage.  It could report back via a network that it needs servicing etc.</li></li></ul><li>Scott McCloud<br /><ul><li>Simple imagery can be combined in a modular way to make complex data more understandable
    60. 60. Visualisation + Synchronisation makes it easier to remember.</li></ul>Repurposing is evil<br /><ul><li>It is a terrible mistake to take content designed for one medium and then just use it on another medium without transforming it.
    61. 61. Static pictures are brilliant as memory anchors
    62. 62. Visual communication is a two way street; it takes collaboration between the artist and the audience.
    63. 63. Why have suitcases only recently been built with wheels? Lack of Imagination</li></li></ul><li>Merlin Mann<br /><ul><li>You’re never going to be ready
    64. 64. Even heroes are scared shitless
    65. 65. What’s the worst that can happen?
    66. 66. If you're going to run through the shit storm, let yourself get covered in shit, but KEEP RUNNING.  Keep moving, keep making cool stuff.</li></li></ul><li>Jason Webley<br />
    67. 67. <ul><li>If you have an idea, get out there and make it happen!</li></ul>For further Info check out:<br /><ul><li>http://webstock.waveadept.com/
    68. 68. http://gianouts.blogspot.com/2011/02/webstock-2011-conference-day-one.html
    69. 69. http://gianouts.blogspot.com/2011/02/webstock-2011-conference-day-two.html</li>