Saturday, February 19, 2011

WebStock 2011 - Conference day two

Yet another excellent day of thought provoking presentations.  Big thanks to the conference organisers, helpers and presenters for such an excellent event.

For my notes from yesterday check out “WebStock 2011 - Conference day one”.  The collaborative note taking effort was also in action again today at http://webstock.waveadept.com/ .


  • Co-founder of Tumblr, Founder of Instapaper
  • It’s never too late to edit for the good of your product
  • What to build
o   You don’t need to cater to geeks
§  We’re not loyal and will jump to new products
§  We’re unnecessary as an audience; we’re very small
o   Be useful to non-geeks

  • You don’t need to (and probably shouldn’t) rely on another service
o   Don’t give your power away.
§  E.g. using Facebook for login
o   You need them for everything and they use you for nothing
o   No service is universal
o   You can take advantage of services without requiring them
§  E.g. send to Flickr

  • Be useful to the first user
o   “A wonderful nonstick frying pan is useful even if you’re the only person who ever buys one” Bill Gates

  • Your product should be remarkable
  • Remarkable products don’t need to advertise
o   Word of mouth is important
o   If your product isn’t good it won’t work (with either advertising or word of mouth)
o   Bloggers need content for their blogs.  If you make something remarkable, there are people who will make positive remarks about it.
o   Your product can help by advertising itself

  • You should think about revenue from day one
  • You don’t need to publish ads
o   Ads should be your last priority (or a secondary stream).
o   Try to make money by other options first.

  • People will pay money if you let them
  • You don’t need (and won’t get) every customer
  • You don’t need to listen to every feature request
o   Let others guide you but not direct you.
o   Product design is not a democracy
o   E.g. nobody would ever have asked for a glass phone with no buttons, looking at predecessor phones

  • Managing feature requests
o   Everyone wants your product to do “one more thing”.  But it’s a different thing for everybody.
§   
o   “Pick the few features most….”

  • Features requests are one input of many
o   Stand up for your own vision

  • You are going to need a good technology foundation
o   There will never be a good time to change
o   Use technology conservatively
§  There’s always something new
Buggier, Lack Replication, Less ability for problem resolution etc.
§  Boring == stable
§  Don’t be the biggest deployment of anything.
Let the likes of Google, Yahoo!, Facebook fix the problems first
§  You don’t need “cloud” hosting
LAMMP,R,oP
Instapaper
o   Linux, Apache, MySQL
o   webservers: 60+ request/sec
o   MySQL with SSDs:
o   Memcache
o   HA Proxy

  • Be orthogonal where possible
o   Design things so they are isolated from other things as much as possible.
o   Language: Nearly impossible
o   Data store: Usually hard
o   Cache: Easy
o   Proxy: Easy
o   Large-file storage: Easy
o   Host: Easy
o   Cloud host: Hard
o   Amazon S3 is great for storage and easy to move off. Amazon EC2 is a lot harder to move off.  Google App Engine is almost impossible to move from.
o   Write wrappers around almost everything to allow things to be swapped (more) easily.

  • Minimise overhead
o   You can start in your spare time.
§  You do have free time

  • So: A great product + Revenue from the start + Low Overhead = You may not need funding
  • Everyone will tell you to do what they did
o   Do your own thing.


  • http://www.informationisbeautiful.net/
  • Designing information visually so we can see connections we didn’t see before or discover things that were not obvious initially
  • Visualising information is about bringing it into focus.
  • Video showing visualization: http://www.youtube.com/watch?v=US4_jFpwJPo
  • Numbers are hard to get; it is also hard to identify relationships in the data
  • Data is the new soil
  • Infotography
  • Infographics is the new photo journalism
  • Tools
o   Uses Adobe Illustrator for designs; lots of manual work.
o   Stores data publically in Google Docs

  • What goes wrong
o   When you visualize data without a story it doesn’t help the situation.
o   Circular isn’t good.  Looks complex.
o   Design should be about taking things out.  Optimise.
o   Ugly cartograms
o   Fear of whitespace
o   Info that isn’t interesting

  • Information design must also uncover a story
  • Data: You should be able to play with it, mix it up and have fun with it.

Main auditorium

  • Touch screen interactions feel more personal, intimate, natural, intuitive
  • Content should define the app, not the machinery.
  • Graphics need to direct the interaction with content.
  • Don’t underestimate the power of “hum-drum”; they have been tries and tested.
  • “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
o   Animation provides feedback to your design metaphor.

  • Familiarity & intimacy invite touch
  • Don’t have metaphor clutter. 
o   Choose one and stick to it.

  • If it looks like a physical object people will attempt to interact with it like that object.
  • Think about the purpose of the app and whether buttons are needed
  • Gestures are the keyboard shortcuts of touch interfaces (instead of clicking or buttons)
o   Big screens invite big gestures.

  • Twitter app for iPad encourages exploration, thereby removing the need for a back button.
  • The more features you have the more controls you need
o   Clarity should trump density.  Just enough is more.

  • Touch can help create fluid applications that manage complexity
  • Use content as the controls
o   Was “The medium is the message”, now “The message is the medium”

  • Explore multi-touch gestures
o   It does however require two hands (in most cases)

  • Treat the entire screen as the control
  • We can learn a lot from Game developers, they show us new rules
  • You won’t get things right the first time, don’t give up,


  • There are rules and they are made to be broken
  • How to decide what advice to follow, choose your own path
  • Tech support is sales
  • Blogging can consume your life if you follow the rules
o   None of the rules matter; do what works for you.

  • Lesson
o   1. You set the rules
o   2. Advice has context
o   3. “I’m not a _______ person” is twaddle
o   4. Trust your inexperienced gut
o   5. “That’s how it’s done” is bull5h1t

  • Features are like sex: one mistake and you have to support it forever
  • Dimensions of advice:
o   Rich/King
o   B2B/B2C
o   Bootstrapped/Funded
o   Lifestyle/Growth
o   Pleasure/Pain
o   Confident/Introspective


  • I copy therefore I am
  • Pirate Bay
o   >100k tracker connections/second
o   Responses to US legal threats:
§  1. Photo of a polar bear; We’re being eaten by polar bears
§  2. Circled Sweden on map of world “we’re not part of the US yet”
§  3. Reply to cease and desist font distribution with letter reformatted with fonts they were told to stop using.
o   See http://thepiratebay.org/legal.php for Legal threats against The Pirate Bay
o   No one dares to censor in Sweden anymore after an ISP CEO was sacked for blocking Pirate Bay and other sites
o   A private investigator following Peter registered his car to a company called “private investigators”
o   Social Micropayments
§  Many small streams will form a large river
o   Pay a monthly rate (set by you) and each month it is divided among the people you’ve “Flattr-ed”


  • Formally from Apple
  • Why are you at Webstock?
o   Webstock is about the message
o   “You are awesome” on a pencil
o   Build & ship for human beings
o   Your job has an expiration date

  • You are (at most) three years away from building something new.
  • At the (metaphoric) table are:
o   Engineer
§  Needed so that you don’t end up with chaos
§  Engineers believe in a perfect system
§  Strives to reduce chaos because its inefficient
§  There is a right and a wrong answer
§  Willing to take the time to go deep and understand
§  Predisposed problem solvers
§  They are paranoid, prepare for the unexpected, architect to protect their work
§  Love signal, hate noise
§  An urge to build a thing
o   Designer
§  Without a designer you end up with Gmail (wildly successful but could do with a designer’s input)
§  Needed because the engineer can’t make things look good
§  Understand what the user wants
§  Prioritising, focusing and expertly describing the want.
§  Using the knowledge to surprise and delight users.
§  Responsible for the user experience.
§  Describe the “want” perfectly
o   Dictator
§  You don’t get anything without a dictator.
§  “I’m the one telling you how it is”
§  They know what they want
§  This is the enforcer; the person you can go to for confirmation.
§  Steve Jobs & Bill Gates are dictators; Bill is nerd dictator.  Steve Balmer is not (he’s part of the MBA crowd).
§  Consistency
Team members have the fear of deviating from the awesome
§  Death to Ambiguity
§  Velocity
Getting things moving
Makes decisions
Says no

  • Quora, Facebook and Google are examples of companies run by Engineers.
  • The challenge with engineers is that we think if we can build it we can also design it.
  • Apple stores are designed after museums, because it’s a good way to look at art…. Lickable hardware.
  • There is no evident file system on iPad
o   Would an engineer or a designer have made that decision? No, only a dictator would say “All I want is for people to be able to email a picture of their cat!”


  • Helps make people’s lives more interesting, productive and fun.
  • 1.62GB presentation, 162 transitions on one slide in 32 seconds
  • Networks of the web - changing, evolving, breaking free from the browser
  • The Persian Royal Road wa so effective that armies 30 days march away could get their orders from the heart of the empire the same day.
o   Moved materials, trade and armies.
o   World’s first great communication network

  • Transformative Infrastructures
o   A new infrastructure like this can be totally transformative.
o   An infrastructure like this is not an end unto itself, each upgrade massively increases the possibilities of what we can do.

  • The world has changed dramatically; road, sea, rail, air
  • The history of any object the room around us  is a long chain made possible by the connected network of trade.
  • But what about the web?
o   In the last 10-15years there has been huge progress.
o   We have collectively transformed the world.
o   We started off with silos
o   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

o   Built totally on other products

  • Upgrades to the web of data
o   Social Software
o   Social Networks
o   Geolocation
o   Real-time data
o   Data Visualisation

  • As cost drops we will see more and more connectivity in all objects.
  • Objects as Services
o   Why bother owning something at all?
§  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.

  • MUJI (http://www.muji.eu/index.asp ) is a Japanese company that specialises in ultra simple, clean design products for the home.
  • Consider how to integrate the network into objects to makes them more useful.
o   E.g. Electronic scales (http://withings.com) that post info to website where it can be analysed.
§  Costly now, but will reduce over time

  • Could link weight data to Nike, Health sites, and other places.
  • Towards the networked city
o   Layer our network over existing infrastructure
o   IBM Smarter City initiative
o   London cycle hire
o   San Francisco Parking Meters
§  People can use phone app to see parks that are free
§  Pricing changes based on time of day etc.
o   Reactive buildings that change
o   Our environment is being network aware and reacting …

  • Where do we go from here?
o   Sites talking to each other
o   Instrumented planet, connected planet, responsive planet.
o   A new network of sites and services built on top of the world that lets data flow through the world like an animated spark making everything more efficient.

  • What happens when Ideas, Building, Objects, Media, Environments, Appliances, Vehicles and Information have Sex?
o   Bloody amazing things happen.
o   This environment of conceptual sex is what is so inspiring.

  • “We want a web of data by any means necessary”
  • Problems
o   Different languages and cultures
§  We need standards for open data
o   Privacy
§  It is not dead, but we need to decide what is reasonable for people to know about us and have that encoded in law. We could be entering a golden age of privacy, because we are having meaningful debate over what is important.
o   Inequality
§  Not everyone has benefited equally.
§  We want to try to stop companies/ people dominating the web of data.

  • Connecting things transforms the world and we are building more and more things every day
  • The planet and everything on it are our canvas and our brush.
  • Everything the network touches is our playground.


  • In any 8” box of air in front of you there is information; until it is decoded it is just an empty box
  • We are animals and it is in our nature to see ourselves in everything.
  • http://picmoticon.com is a great place to go for things and places that look like faces
  • Visual communication is a two way street; it takes collaboration between the artist and the audience.
  • Powerpoint can be a powerful presentation tool
  • Simple imagery can be combined in a modular way to make complex data more understandable
  • Visualisation + Synchronisation males it easier to remember
  • “If I don’t need to THINK it, I don’t need to SEE it.”
  • Static pictures are brilliant as memory anchors
  • Comics have a special syntax.
o   There is a column response; something within the panels and then something to imagine between the columns
§  It comes down to the imagination of the audience

  • Everybody has a need to find meaning; even if there is nothing there.
o   Any two images together will suggest some sort of narrative or story

  • Single panel stuff is not comics because it is not a sequence.
o   Anything tells a story with a sequence

  • Strips and Books are different
o   Strips are very friendly for the web
§  they work within a node of short attention spans (e.g. http://www.xkcd.com/ )
o   A comic book is harder - the overriding goal is that the reader loses themselves in the story

  • Comics are not just cartoons, but even hieroglyphics can be seen as comics due to the space time relationship
  • For graphic novels, print is still where the best stuff is currently happening.
  • It is a terrible mistake to take content designed for one medium and then just use it on another medium without transforming it.
o   Repurposing is evil

  • Why have suitcases only recently been built with wheels?
o   We’ve had suitcases for ages
o   Wheels have been around even longer
o   Why?
o   Lack of imagination

  • Escape is a powerful instinct.
  • Comics are a legitimate window back into the world.
  • They need to play to their unique strengths


  • You’re never going to be ready
  • Even heroes are scared shitless
  • Everybody is scared.
  • What’s the worst that can happen?
  • 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.

Thursday, February 17, 2011

WebStock 2011 - Conference day one

The Webstock 2011 conference kicked off today at the Wellington Town Hall.  This is the second time I have attended this superbly designed and organised conference.  The description on the Webstock site sums up nicely what Webstock is all about:
“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.”
Here is my synopsis of Day One.  There was also an excellent collaborative note taking effort that can be found at http://webstock.waveadept.com/ .

Mike Brown
Opening and welcome

  • It’s the small things that make us connect and share.
  • Having somebody on stage signing for the deaf is nice to see.

The Digital Campfire

  • We’re going from less robotic to more human.
  • Universal theory of stuff:
o   The Message
o   The Tone
o   The Format

  • All these work together and without one, it doesn’t work
  • “How do we make things that people want to love?”
  •  Cold/Warm
o   Cold = inhuman
o   Warm = takes human person into consideration

  • The issue with word Content is that it captures what it is, but not the relationship we have with it.
  • “The Person you love is 72.8% water” – Cold
  • How can we warm up content?
o   Using stories
o   Story = change over time

  • Stories help you make sense of reality
  • Stories teach us to empathise
  • Camp fire conversations are at the “really happy” end of the spectrum.
  • At Campfire conversations, one is removed from one’s normal environment. Perhaps that changes the way in which we converse.
  • How you get people to tell stories of the web?
o   You ask

  • Every form is a question
  • Worst web form question in the world: “About me:”
  • “About Me:” drives shallowness vs asking questions such as “What’s happening?”.
  • Robot + story = person, person - story = robot; this is why a story is important
  • Ask questions to get good stories back.
  • Every hashtag is a framework for improv.  Most are about stories.
  • Great questions
o   What did you care about when you were nine?
o   What’s the last thing you changed your mind about?

  • Curation
o   One or two curators can really make a story

  • Making a person happy is a desirable interaction
  • Sympathy is medicine
  • We tell stories to understand and be understood


  • It’s not just the technology that people work on.  It’s where they work.
  • Google = cool, funky; Apple, Facebook similar etc. This is different to “the normal world” (office pods, bland, “soul destroying”)
  • Planet Webstock
o   Small teams
§  “The 15-person team working on the new system was the largest engineering team Facebook has ever had for a single product or feature”
o   Hire the top talent
§  Google would rather leave a job unfilled than hire a sub-optimal candidate.
o   Iterate
§  Ship something small, something simple, then make it better.

Illot theatre

  • What is HTML5?
  • 1. Shipping stuff today
o   See “Using HTML5 today” blog post
o   History API
§  Enables state info to be abstracted from a page fragment.
§  Stack based model
o   Web Video
§  Still not resolved in HTML5 (H.264 vs WebM)
Not clear yet what developers should use.
Safari is clearly in H.264,
Chrome, Firefox, Opera  are WebM
IE is somewhere inbetween
§  Mainly using Flash currently
§  Digital Right Management (DRM) is clearly needed.
§  Opensource Lib video.js (http://videojs.com/) takes pain out of codec loading.
§  Storage for double (or even triple) encoding can become quite costly.

  • 2. High Performance games
o   10fps limited interaction
o   20fps min for building games
o   30fps you’re cooking with gas
o   jsgamebench (https://github.com/facebook/jsgamebench) exercise browsers under game-like conditions to measure how many sprites can moved around on the screen at once

  • 3. Developing for mobile
o   Focus of HTML5 has been largely around desktop browsers (so far), not mobiles.
o   Looking at how to make the whole mobile experience social.
o   Most people don’t typically support more than 1 device, less for more than 2 and so on.
o   Wurfl (http://wurfl.sourceforge.net/) is opensource project adding user agents to features on mobile devices.
§  Could build site to adapt to different device features.
o   Phonegap  (http://phonegap.com/) supports 6 platforms on an HTML5 app platform.

  • Standards
o   Mobile is likely to be driving a lot of the web standards over the next 10 years.

  • Facebook is built of Pagelets that are loaded independently


  • Author of “Dive into HTML5” book (http://diveintohtml5.org/)
  • “If you want to be a guy that does a thing, you just go out and do the thing.  You can’t just do any thing; it has to be the right thing. HTML5 is now a thing.”
  • Feature detection is really easy in HTML5; use moderinzr (http://www.modernizr.com/ )
  • Not just humans look at web pages.  Bots and other tools can get more structure out of your site if your use proper semantic elements.
  • Html5 boilerplate (http://html5boilerplate.com/ ) provides a base HTML/CSS/JS template for a fast, robust and future-proof site.
  • ARIA accessibility (http://www.w3.org/WAI/intro/aria.php ) defines a way to make Web content and Web applications more accessible to people with disabilities.
  • font squirrel generator (http://www.fontsquirrel.com/fontface/generator ) enables is an excellent source for getting custom fonts onto the web, it's already supported by all major browsers
  • CSS3 Please! (http://css3please.com/ ) generates CSS3 rules.
  • Many of the best Canvas examples today are at Chrome Experiments (http://www.chromeexperiments.com/ ) ; it works in more than just Chrome.
  • Local Storage
o   Survives shutdown of web browser. c.f. uber cookies
o   Works pretty much everywhere

  • Offline
o   Easy via cache manifest file
o   Already used wth http://mail.google.com

  • HTML5 Games

Illot theatre

  • Facebook Blue 261
  • Should have only about 7 font sizes on a site
  • Best Practice Myths
o   Don’t add any extra element
o   Don’t add classes
o   Use descendent sectors exclusively

  • Specificity
o   Determining whether a particular rule will win or not
o   Developers end up coding by Firebug

  • 3 problems
o   duplication of property value pairs
o   duplicating elements
o   growing specificity

  • Best practices
o   Add non-semantic elements judiciously
o   Keep specificity as low as possible
o   Abstract repeating visual patterns
o   Use specifity to define your architecture

  • Separate structure from chrome
  • Can reuse flexible object in many classes (c.f. Media Block on Facebook page with image on left, text on right)
  • “Due to these efforts, we cut our average CSS bytes per page by 19%(after gzip) and HTML bytes per page by 44% before gzip).” Jason Sobel : http://facebook.com/note_id=307069903919
  • Pre-processors
o   E.g. Sass (http://sass-lang.com/ ), Less (http://lesscss.org/ )
o   don’t solve everything but are a really good tool to start thinking about the architecture of the site.

Illot theatre


  • Improving performance: Gzip
  • Quick Win: Caching
  • WPO
o   Drives traffic
o   Improves UZ
o   Increases revenue
o   Reduces costs

  • What makes sites feel slow?
o   (lack of) Progressive Rendering
o   http://webpagetest.org  is good performance tool

  • Speed matters.  Google is the fastest search engine, a lot due to how fast it is.
  • Progressive downloads
o   Deliver HTML
o   Defer Javascript downloading
o   Parallel downloading and rendering
o   Use non-blocking approaches
§  Loading via dom using Javascript.

  • ControlJS (http://stevesouders.com/controljs/ ) is a JavaScript module for making scripts load faster.
  • Blaze (http://www.blaze.io ) does mobile performance results, in addition to wed
  • Pcapperf (http://pcapperf.appspot.com/ ) - Pcap Web Perforamance analyzer
  • Jdrop (http://jdrop.org/ ) provides a place to store JSON data in the cloud. The initial application is for storing performance data gathered from mobile devices. It's hard to analyze large amounts of information (HTTP waterfall charts, HTTP headers, document source, etc.) on a mobile device. Jdrop lets you gather this data on the mobile device but analyze it remotely on a larger screen.


  • There is so much crap on the web. We’ve piled trashy content on trashy content to make a WALL-E world of junk on the web.
  • Content is the last thing the web team talks about when planning a site.
  • “Content Strategy”
o   “Content strategy helps figure out how content will meet your business objectives”
o   Content strategy plans for the creation, delivery, and governance of content.
§  Strategy is a plan for attaining a specific goal or result.

  • Ask: What? Why? For whom? How? For whom? With what? By whom? When? How often? What next?
  • Core Strategy:
o   Substance
o   Workflow
o   Governance
o   Structure

  • Content is like a fragile plant and once you plant it you need to take care of it (feed it, water it, ecosystem etc.)


  • GUI was about the interface, not a interface
  • G now dropped
  • GUI: for real people, API: for programmers
  • 13 years of mac and the buttons stayed the same.  Driven by a concern for the user, drive this conservative approach.
  • Uniformity
o   Every app needed to be like it was wearing the uniform or “Team Mac”
o   This is now dead.

  • Good book
o   “No country for old men” Cormac McCarthy

  • TV Shows vs Movies
o   Increased flexibility with movies
o   With tv shows, consistency is more expected

  • You have to be aware of the rules in order to know how to break them for artistic effect
  • Design: How it works. Style: How it looks
  • User Interfaces are clothing for the mind
o   If you’re a designer and don’t want to conform, you’re in luck
o   Fashion designers don’t take your old clothes out and replace them with an update
o   Fashion never ends.  Brace your users “things will change”.


  • We need to delight our users.  We’re not doing it enough.
  • We should be building design into our products or services.
  • Delightful experiences are memorable experiences.
  • Deliver delight:
o   Capture attention
o   Increase engagement
o   Create desire for more

  • People have a strong desire to return to a delightful place
  • The tipping point between positive and negative experiences depends of expectations and other variables.
  • 6 tips to deliver delight:
o   Exceed expectations
§  Under promise, over deliver
§  Don’t create hype too early
o   Deliver value early
§  Reduce steps a user has to go through
o   Sweat the small details
o   Embrace serendipity
§  Don’t force all users down the same path
§  Taking an unexpected path delights users
§  e.g. keyboard shortcuts on twitter, who to follow
o   Package it nicely
§  Be it physical or digital products
§  There is no faster way to cheapen an experience
o   Listen, respond & act
§  Identify when you’re not delighting
§  Monitor 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 thinking
§  Showing people that you are listening and responding, even if you can’t fix it, helps to delight users.

  • Dribble (http://dribbble.com/ ) is a place where designers can share shots of what they’re working on, without sharing everything.
  • “Good design isn’t about making decisions for your users, it’s about making those decisions irrelevant” @rands


  • There is an intersection happening between creatives and technical people.  There is however not a lot of direct interaction between artists and technical people.
  • Being open on web (blog, twitter, …) helps interconnect her personal and professional life.  Making connections with fans builds loyalty.
  • Amanda does ninja gigs: advertises gig on twitter and sees who turns up.  e.g. at Byron Bay beach.
  • 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.
  • “Good will and free content on the behalf of an artist breeds success that may not be immediately visible or measurable”