Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Webstock 2011


Published on

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

Published in: Technology
  • Be the first to comment

Webstock 2011

  1. 1.<br />Prepared By Simon Gianoutsos<br />All photos Creative Commons from<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:<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<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>
  68. 68.
  69. 69.</li>