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 don’t solve everything but are a really good tool to start thinking about the architecture of the site.
Illot theatre
- http://stevesouders.com/docs/webstock-20110217.pptx
- Speed: “First and foremost, we believe that speed is more than a feature. Speed is the most important feature” Fred Wilson (VC)
- 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”
Nice overview!!
ReplyDeleteI know many places that could learn from this one comment "The 15-person team working on the new system was the largest engineering team Facebook has ever had for a single product or feature".
What does "separate structure from chrome" mean? What is chrome?
ReplyDeleteFrom recollection chrome here refers to the theme of a page in terms of the font and themes used, such as rounded corners etc. By separating the structure from the chrome, this is essentially saying that page layout should be separate from how the page is being presented, and that you should not couple the two together.
ReplyDelete