Category Archives: Interactive

Yahoo! Style Guide for web content

Posted on by
Reply

Yahoo! has provided another invaluable resource for people who make websites. The Yahoo! Style Guide is crammed full of information and tips about writing for the web.

It’s a fantastic resource for writers, editors, designers, developers, in fact anyone involved in commissioning and producing websites. The guide includes advice about often overlooked areas such as user-interface text and also ventures into the technical realm covering coding basics and structural HTML amongst other things which all web publishers should know.

Nice one Yahoo!

Notes from @media 2010

Posted on by
Reply

So I attended @media 2010 down on London’s South Bank this year. As always it was inspirational, interesting and informative. An ideal way to start a new blog. What follows are my random thoughts and notes from the 2 days.

Speakers

Brendan Eich – Grown-up JavaScript

@BrendanEich

Predictions

  • Webkit will fork (more so than currently) – Apple and Google to go down different paths
  • Native code will be used more but won’t overtake JavaScript

Christian Crumlish – Designing for Play

@mediajunkie, http://www.mediajunk.ie/

http://www.slideshare.net/xian/designing-for-play-at-web-directions-media

Play

  • Childsplay
  • Play acting
  • Identity
  • Masks
    • Computer screen
    • Online identity / profile
    • Avatar
    • Be someone else
  • Make believe
  • Behave differently

Gameplay

  • Start game
    • Invite someone to play
  • Rules
    • Community guidelines
    • Norms / standards
  • Goals
    • Collecting behaviour
    • Primitive
    • Adds delight / fun
  • Competition
    • Points system
      • Be careful about what points are scored for
    • Leaderboard
      • Establishes winners + losers
      • Highly competitive environments

Playing music

  • Can be challenging
  • Tuning
  • Fine tuning
  • Varying degrees of complexity
    • Enable users to make mistakes but still have a good experience
  • Mechanical engineering
    • ‘Play’ in movement – room to maneuver

“Signs of life”

  • Establish that you’re in company

“Open” design

  • Create framework where users can make choices and co-create their experience

Curation

  • Currently hard for users to take a number of objects from the web and assemble them as another creative object
  • Easy to gather stuff and push back out

Flow state

  • Stop thinking about what you’re doing
  • Play
  • Alpha state of mind

John Resig – Testing Mobile Web Apps

@jeresig

“Golden age of mobile development – 3 years from now”

  • Symbian (Nokia handsets) – 3x as many phones sold than iPhone or Blackberry

Mobile browsers

  1. Opera – Opera Mini most prevalent not Opera Mobile
  2. iPhone
  3. Nokia
  • Working on mobile graded browser support matrix
  • Yahoo to release mobile browser usage info soon
  • “TestSwarm” – automated testing
  • “TouchScroll” – Fixed position in Safari mobile
  • Windows Mobile 6.5 – IE6 rendering engine
  • Windows Mobile 7.0 – IE7 rendering engine
  • Web OS – HP (formerly Palm) – Webkit
  • MeeGo – Linux based – Gecko – Tablet / Netbook
  • Fennec – Firefox mobile

Test devices

Device OS
iPhone 4 iOS 4
iPhone 3GS iPhone OS 2, iPhone OS 3.1, iOS 4
iPad iPhone OS 3.2, iOS 4
Nokia E71 S60v3
Nokia N96 S60v3
Nokia N97 S60v5
Palm Pre 1.4
HTC Magic Android 1.5, Android 1.6
HTC Dream / T-Mobile G1 Android 1.6
HTC Incredible Android 2.1
HTC HD2 Windows Mobile 6.5
Blackberry Curve 8900 Blackberry OS 4.6
Blackberry Storm 2 9500 Blackberry OS 5.0

Simon Willison – Building Crowdsourcing Applications

@simonw

Crowdsourcing

  • Has to have some benefit for the user
  • Or make them curious
  • Or be fun

Examples

  • 90-9-1 rule crops up again
  • Incentives don’t have to be big to get people to participate

Jonathan Stark – Building Mobile Apps

@jonathanstark, http://jonathanstark.com/wdx

jQTouch

  • Eases creation of iPhone web apps using iPhone OS UE patterns
  • iPhone browser can be instructed to display in full screen mode without the address bar
  • Use offline storage to speed up app
  • Don’t lock users into the mobile version of your app/site
    • E.G. GMail sends you to their optimised mobile site automatically but gives you the option of using their regular site – preference should be remembered for next visit.

Andy Clarke – Hardboiled Web Design

@Malarkey, @itshardboiled, http://forabeautifulweb.com/blog/about/walls_come_tumbling_down_presentation_slides_and_transcript/

Design top down

  • Best browsers first – provide the best possible experience and adapt for less capable browsers

“Get excited”

“Make things”

  • Not about browser age – about browser capabilities

Useful stuff

Matt Biddulph – Mobile Social Location

@mattb

  • Devices are connected – a node on a network
  • Personal – interface with you and the internet
    • “Bridge between the internet and the real world”
  • Devices are aware of where they are

“Checking in”

  • Contributing small bits of data – E.G. “I’m here”
  • Micro-updates

“Place”

  • Not lat/long
  • Place is human + meaningful
  • Combine location api’s to build rich information about the persons location

“Direction”

  • Growing number of devices can determine the direction you’re facing
  • Walkman – first mobile augmented reality device

“The Visual Miscellaneum” – David McCandless

  • Context

Realtime

“Your app isn’t the centre of everyone’s world”

  • Mobile device usage tends to be short bursts – dip in and out
  • Eyes typically not on the device for lengthy periods (exceptions are commuting/travel)
  • Possiblity of interruptions – need to be able to immediately stop what you’re doing, deal with whatever’s going on in the real world and come back to your device later

Hannah Donovan – Telling Stories Through Design

@Han

Storytelling

  • Draw
  • HTML
  • Anything – Use simplest tool
  • Conversation – dialogue
  • Boeing 747 – “Design Decision Memorandum” – Note of design changs sent to all involved to keep everyone updated of changes

“Think like a film crew”

  • Define the plot
  • Write a script
  • Script must serve the plot – if it doesn’t then something’s wrong

Hannah Donovan’s storytelling bookmarks

Remy Sharp – Browsers With Wings: HTML5 and API’s

@rem, http://www.slideshare.net/remy.sharp/browsers-with-wings

Media API

  • Simple functions

Canvas

  • Bitmaps

SVG

  • Vectors
  • Can mix SVG + Canvas
  • Add support in IE
    • Silverlight bridge or excanvas.js (slow performance with these solutions)

Storage – key/value pair api

  • Values are strings
    • Need to use JSON to encode/decode

IndexedDB – future

  • To be supported by Firefox/IE

Sockets

Aral Balkan – The Art of Emotional Design

@aral, http://aralbalkan.com/

“The differentiating factor is the user experience”

“Bad user experience is easier to define”

“Don’t infuriate the user”

  • Worry about the users needs, not yours

“Does it give me joy to use?”

  • Empathy
  • oAuth not secure
  • xAuth – best of Basic Auth + oAuth

“The experience is only as good as the weakest link”

Scott Berkun – The Myths of Innovation

@berkun, http://www.scottberkun.com/

Creation

“Ideas are made from other ideas”

  • Combination + re-combination of other smaller ideas
  • Remove inhibitions – don’t apply self-imposed constraints
  • Fears – prevent you from trying stuff out
  • Persistence

Creative thinking hacks

  • Keep a journal – write ideas down whenever and wherever they occur
  • Escape – subconscious mind needs to be allowed to surface stuff
  • Inversion – Solve the opposite problem from the one you are trying to solve
  • Partner – work with another person
  • Fail – take enough risks so that you are bound to fail sometimes

“First draft of anything is shit” – Ernest Hemingway