The Web Is... Day Two

Took me a little while to prepare my notes for the second day of The Web Is… conference, mainly due to an ‘orrible cold that developed over the last week. I hope I haven’t given it to the lovely people I spoke to over the last few days!

Thank you once again to Craig and Amie Lockwood and all their helpers for a fantastic conference. I know they had a lot of trouble getting the conference organised, but the end result was very definitely worth it.

Craig — please keep organising more conferences! You have a rare skill in finding and curating talks that connect at many different levels —- and that challenge us to do better and improve the world.

Here are my notes for day two, complete with the additional Creative Morning session.

Creative Mornings: Crossover

• creative mornings: 99 cities around the world
• meeting once a month with a common theme across all
• this month, the theme is Crossover

David Hieatt, Hiut Denim @davidhieatt

• co-founded Howies
• runs the Do Lectures
• entrepreneurs fall in love with things so they don’t quit
• have to choose something that you’re interested in
  • it will get tough and test you
• vision: what have I seen that others haven’t
• intersection of skill, interest & vision
  • where you’re most alive
• fight a battle you can win
• denim factory in wales used to be biggest jeans factory in UK
• employed 400 people, made 35K pairs of jeans a week for decades
• tried to be cheapest — not the right battle
• in UK have to use our creativity
• dreams should not be logical or sensible
  • should scare you!
• currently employing 14 people — quite a way to go
• but everyone in the town has decades of experience making jeans
• there are people in the factory who have 50,000 hours of experience
• the elite makers club
• but quality isn’t enough
• need to find ideas to act as multipliers
• hiut denim: an ideas company that makes jeans
• Richard Seymour: the more you operate in the future, the less competition you will have
• lots of small experiments
• small company — move fast
• jeans have history tags on them
  • 6 photos of them being made
  • plus you can upload new photos for their history
  • when the jeans get handed down, you can see their history
• 80% of environmental impact is the washing, not the making
  • hence no wash club
  • people doing crazy things to not wash for 6 months or more
• people want to wear used jeans
  • so sent out jeans to people to break in
  • they would get their deposit back when returned
  • then receive 20% of resulting sale
• facetime store
  • will create a custom fit for you from a facetime call
• instagram is going to change stores
• your best project is the one that’s in front of you now

The Web Is… Like Water

Scott Jenson @scottjenson http://google.github.io/physical-web/

• standardising pull to refresh, just like the steering wheel…?
• but steering wheels started as tillers with rear wheel steering
• User Unfriendly, Joseph J Corn
  • people preferred the tiller at the time
  • needed irreversible steering to prevent too much feedback from potholes
• browsers have a DOS prompt on the top…
  • the browser needs a browser
• the web = Loki — proud, vs iPhone = the Hulk
  • “I am a God, you dull creature. I will not be bullied”
  • …body slam…
• the web is currently following native, not driving the future
• we have app myopia
• “thin crust of effort” around apps
  • people will only install them if they’re important
• apps are our technology tiller…
• Apple iBeacons are per-app at the moment
  • go into a mall — install one app for each store…
  • then delete them all afterwards as they’re all crap
• the web is good at the long tail
• break down the internet of things into several layers
  • coordination
    • devices talking to each other
    • toast automatically ready when you come down for breakfast
    • cool but will take a while
  • control
    • where we are right now
  • discovery
    • commonly ignored — usually “download our app”
• think small — just a bit of information for each thing
• Bluetooth Low Energy beacons just broadcasting a URL
  • like QR codes but without having to get so close

• URL with information
  • bus stop
• URL that sends info back to the device
  • vending machine
  • GSM modems are really cheap
  • Sigfox offers $1/year plans
• URL with javascript talking BLE direct to object
  • object can make use of all the capabilities of the phone
  • so much cheaper per device
  • Chrome already has Bluetooth library but behind Chrome apps
  • but creating a proposal with Mozilla to put into web sandbox

• two kinds of ideas:
  • truck ideas — products
  • road ideas — infrastructure
• Malcolm McLean — invented container shipping
  • created lots of patents then gave them away
  • realised he would make more by having a smaller percentage of larger market

• physical web beacon
  • currently no security etc — just for testing
  • configure it by pressing the button
• the Google Chrome team is staffed by boy scouts
  • just want more URLs in the world

The Web Is… Still Young

Benjamin Hollway @benjaminhollway

Slides available at http://nothingrandom.com/says/thewebis/young

• how can we support young coders under 18?
• cheap/free tickets for conferences
• opportunities to speak
  • unique perspective
• alternative after party venues
  • accessible to people who can’t drink or are too young
• help introduce kids to computing
  • join or set up a Code Club
• mentoring
  • work experience
  • paid internships — 2-3 weeks during summer holiday
  • deeper insight into how the industry works
• future
  • inclusivity
  • < 5% use IE, but at least that or more have disabilities

The Web Is… Turning Difficulties Into Opportunities

Robin Christopherson, @USA2DAY

• AbilityNet: leading experts in technology & disability
• also do assessments: one of first was Prof. Stephen Hawking
• technology can really help people with disabilities
• light detector
  • helps to see if lights/indicators are on or off
  • especially for enabling oven light (they don’t make speaking ovens)
• talking goggles
  • reads any text from camera
  • also recognises some images
• word lens
  • translates and can then read out using voiceover
• TABs — temporarily able bodied
  • it’s likely everyone will have some kind of some kind of disability eventually in their lives
• also mobile use cases are often very similar to accessibility cases
• a blind date with an iPhone
  • woman prepares all her responses before the date…
• google glass captioned audio
  • speak into Android phone, see captioned audio on glass screen
• FaceXpress
  • identifies emotions from faces
• live facial recognition
  • identify people coming to your door if you’re bed-bound
• directions in maps apps
  • audio directions are very powerful
• Moto Hint
  • Google Now as an earbud
• IBM Watson now has a developer kit
• self-driving cars
  • 30% of city driving is looking for a space
  • eliminating human error accidents
  • need to have speech output
  • otherwise can’t tell if arrived or just stopped at a traffic light!
• direct brain interface
  • completely paralysed woman able to move a robot arm
• technology4good lifetime award given to Prof. Hawking
  • acceptance speech worth listening to
• 73% of people with a vision impairment are out of work
  • there’s no longer any reason why they can’t work

The Web Is… Too Slow

Andy Davies @AndyDavies

• shopdirect (run littlewoods brand):
  • on average, each purchase is across 2.4 devices
• Tammy Everts: only 12% of top 100 US retail sites render feature content under 3 seconds
• we perceive delays around the 1s mark
  • 100ms appears instantaneous
  • 200-300ms fast enough
  • 1s start to feel it
  • > 1s we start to task switch
• the web is for everybody …but only if we make it that way
• Chris Zachariah: made youtube pages faster
  • but time to view video went down
  • turns out they were reaching new audiences
  • that hadn’t been able to use the site at all before
• Guardian’s new design:
  • speed was a feature in the press release
• Walmart have released conversion rate vs load time
  • all conversions concentrated in first 4 secs of load time
• Staples increased conversions by 10%
  • cut 1s from median home page
  • 6s from 98th percentile
• we’re more tolerant of slow experiences in some cases
  • when we’re more committed, e.g. further into conversion funnel
  • when we’re used to it
• kayak study: we don’t trust comparison sites that are too quick…
• Matias Duarte: “design is finding solutions within constraints .. if no constraints, it’s not design but art”
• need to set a performance design constraint
  • e.g. an event that matters to the user happens within a certain time under certain network conditions
• doesn’t mean anything to measure page sizes or number of objects
• Etsy: have lots of feature flags
  • all staff see a performance bar at the top of the page
  • indicates if the page has met requirements
• PerfBar
  • plugins for different browsers and sites
• WebPageTest
  • can run tests & set a budget based on competitor sites
• speedcurve
  • used by the guardian
  • have a performance chart outside the financial director’s office
  • performance budget lines coming in November
• headline network speed doesn’t include latency
  • often matters more than bandwidth
• network connection closer to a bucket brigade than a pipe
• TCP has a slow start algorithm that directly affects initial page latency
  • more modern operating systems increase the initial congestion window
  • this increases the number of segments that can be sent without an acknowledgement
• rendering:
  • CSS Object Model blocks Javascript execution
  • Javascript blocks DOM construction
  • complex CSS can really slow the initial rendering
• dealing with fonts
  • Ilya Gregorik suggested new font-timeout & font-desirability properties
  • would allow us to choose to render the page without the font
• HTTP/2 has server push
  • server can push additional files that it knows the browser will want
  • if the browser has a cached version, it can reject the push

Slides will be available at http://www.slideshare.net/andydavies (eventually)

The Web Is… Our Responsibility

Sally Jenkinson @sjenkinson http://recordssoundthesame.com

The Web Is Our Responsibility from Sally Jenkinson

• concept keyboards provided touch-based input to BBC Micros back in 1984
• symbiotic relationship between technology and experiences
• remember it’s as much about people as it is about development
• all the roles need to work together
  • e.g. performance cuts through all layers
• responsive design mostly seen to be to do with screen widths
• but there’s much more (especially in CSS level 4 draft)
  • whether the device supports hover affordances
  • the current ambient light level
• invisible requirements
  • the technical choices that we make underpinning everthing
  • e.g http://offlinefirst.org/
• Open Data Institute guest book
  • iPad with keyboard
  • can sign in with touch or typing
  • or can add an existing RFID card (e.g. Oyster or bank card) to check-in in future
• GE Healthcare adventure series
  • MRI scanner dressed up as spaceship
  • children can imagine the spaceship rumbling through space
  • much less scary
• be aware of the choices we make
• try to think beyond ourselves
• you are responsible for things you build
• if someone presents you with something that you don’t agree with, then question it
  • even if it’s not officially your responsibility
• try and educate people as to why things should be done differently
• if you are in a big project that you disagree with, try and make little changes

The Web Is… Read/Write

Owen Gregory, editor @FullCreamMilk

• acts as a conduit between writer and reader
• the web has a closer relationship between writers and readers
• publishers & editors need to be advocates in their community
• jason santamaria: where is the cultural and aesthetic discourse on web design
  • writing is mostly about the new techniques and looking forward
  • where does a common language for web design discourse start?
• jakob nielsen: we should accept that the web is too fast moving for big picture description
• book: nicely said: writing for the web with style and purpose
  • nicole fenton & kate kiefer lee
• Sir Thomas Browne: The Garden of Cyrus
  • drawing parallels between lots of different fields
• W G Sebald: The Rings of Saturn
  • new style of writing, referring to the author
  • tracking Thomas Browne’s work
• deploying a text can be a continuous process — Mandy Brown
  • comments, talks, reframing, etc.

The Web Is… Progress

Mr Bingo, @mr_bingo

instagram: mr_bingstagram

• apparently the web is blue…
• D&AD brief: put the fun back in to the web
• hand-drawn aesthetic — much easier in flash…
• 2010 selling prints of drawings for £5 each for Haiti earthquake
• internet commenting is like toilet graffiti
• worried that if I die, when my life flashes before my eyes, all I will see is square pictures of food
• weird stock photography… (just watch the talk!)
• opened a service for sending people insults on postcards
  • HATE Mail — and now a book

The Web Is… Progress

Brad Frost @brad_frost

• web enabled linking to anything we want (was a radical change…)
• open by default
• the most sharing community in the world
  • e.g. css-tricks license
  • “I want the web to get better and being all Johnny Protective over everything doesn’t get us there”
• pittsburgh food bank
  • designed and built a new web site for them
  • did the entire process in the open
  • http://foodbank.bradfrostweb.com/timeline/
• why share?
  • because we can — it’s cheap
  • but it can be really uncomfortable
  • other people can contribute
• trying to solve everyone’s problem is in some cases easier to solve just your own
  • an idea can snowball into a plugin just a few hours later
• our first drafts can have their own value
  • in some cases they can have more value than the finished work
• the web is for everyone — but that means all the violence, hate and anger as well…
• guardian, bbc and gov.uk designing in the open
• other companies and even other countries can use this as a blueprint for their own work
• each of us is individual and has unique different experiences
• knowledge is an iterative and cumulative process
• depending on sharing and combining our different perspectives
• designopen.org
• even if lots of people contribute similar things, they still contribute
  • e.g. 162,000 youtube videos on how to re-wire a plug
• your post might not be the most original, but it might be the one that tips over the scales
• it has never been easier in the history of the world to contribute to the knowledge of the world

Handheld Conference 2013

An amazing conference, in a beautiful venue, with fantastic speakers and extra entertainment as bonus! Craig Lockwood created something magnificent today — and then told us there won’t be another Handheld next year! Let’s hope he’s just changing focus rather than stopping organising conferences.

Handheld this year was two conferences in one — the previous night's mini event and the much larger full day event. The main conference was focused mainly on responsive web design — and the implications that brings to the design process and to the implementation of the sites. Last year was a mix of both native and web experiences, and though we lost the native side, the web side was very strong — with speakers being the authorities in their areas (the people who wrote the books that everyone should read).

Some highlights before you dive in to my notes below:

• Hearing icon design tips from Jon Hicks, the designer of the Firefox logo, Skype emoticons and many other big name logos
• Learning about improving business participation in the design process from Andy Clarke & Mark Boulton: mobile and responsive design has big impacts on the design process that extend not just to the artifacts (comps, wireframes, etc) but also on the communication and interaction between the business, the designers and the developers.
• "measure your success in decades" — Jeremy Keith on web design
• "XML is like violence: if it doesn't get you what you want, you’re not using enough of it" — Graham Lee
• and, of course, Ling Valentine of Ling's Cars (if you haven't seen her website before, you must look now!), appearing on stage as a Dalek!

If you like your information visual, Luke Murphy from Ubelly wrote up some beautiful sketchnotes of the main conference.

intro + guess who

Syd Lawrence @sydlawrence, We Make Awesome Sh

• over 1,000 people in audience
• rickrolled the audience using twilio, node & pusher!
• everybody sent SMSs in with their seat column number
• then made calls back to 8 people in each quarter of the audience — playing 4-channel audio across the auditorium
• (unfortunately all our lanyards had been mixed up and only one person received the rickrolling call… but it was a nice idea)

The Long Web

Jeremy Keith @adactio

• 1907: Francis O’Neill, chief of police in chicago, noted down 1001 Irish tunes - The Dance Music of Ireland (“the book”)
• 1991: ABC musical format invented
  • text file, metadata at top, notes at the bottom
• mid-90s: Jeremy launched http://thesession.org
  • started by self-publishing a song a week
  • but soon needed other people to contribute tunes
  • 2001: allowed other people to submit tunes in ABC — Jeremy would then convert to sheet music & sound files
• site then languished for 10 years — still being used but Jeremy had no time to improve it
• finally got around to rebuilding the site in 2012
• interesting to see what had changed in web development in a decade
• biggest change: environment is no longer a desktop/laptop computer
• open device labs
  • Jason Grigsby tried to set one up properly in Portland with lawyers, insurance, etc. but got slowed by red tape
  • Jeremy just started with a tweet inviting people in to the Clearleft offices to test - then people started donating devices
• mobile first: mobile forces you to prioritise
• can also think about content first (or task first)
• Jeremy likes to start URL first
  • forget screens completely
  • think about structure of URLs
  • almost like doing an API design
• don’t think about the layout first — instead think about the individual pieces of content (pattern primer)
  • forces you to be very modular in your CSS
  • all the pieces must be able to work in any bit of your page
• if you’re thinking content first: then navigation comes second
• thesession.org does navigation by having navigation at bottom of the page — revealed with a simple hyperlink to the bottom (with a hyperlink back to top under the nav)
  • (capable browsers with more space have CSS to move it to the top)
• the logo is progressively enhanced too
  • full CSS support shows stitching, shadows, etc
  • less support means that the text & colour is still there but the details go away
  • error handling model — browser will just ignore stuff it doesn’t understand
• other progressive enhancements
  • escalators (enhanced stairs)
  • moving walkways (enhanced floor)
  • electric toothbrush (enhanced toothbrush…)
  • these rely on electricity to enhance but would still work without (kind of…)
• use javascript but don’t rely on it
• Jake Archibald (@jaffathecake): every user is a non-javascript user while the page is loading
• Andy Hume: progressive enhancement more about dealing with things failing rather than things not available
• don’t merge the stack levels — use javascript to enhance the HTML, not replace it
• on thesession.org have an ABC to sheet music form
  • by default submits a form that returns a GIF
  • with javascript, uses a JS lib to turn ABC into inline SVG
• similarly sparklines: previously used Google static charts
  • but google have deprecated the service and will be shutting it down in 2015
• instead generating sparklines using SVG with contained javascript
  • same SVG file, with different query parameters for data
  • could also put CSS (including media queries) in the SVG
• but SVG sparklines were slowing down the page load
  • so used conditional loading
• watch out for script loading in middle of page
  • especially third parties
  • the loading of your page stops until that script has finished loading
  • if it’s a third party script, you’re now dependent on a third party server to finish loading your page
  • e.g. if it’s twitter and the page is loaded from China, then your page will never finish loading… (twitter is blocked)
• “measure your success in decades”
  • the inventor of CSS put a bet on to say that HTML would be around for 50 years
  • he’s recently upped his bet to 500 years
• http://futurefriend.ly — the best way to work on future devices is to be backwards-compatible

Bruce Lawson on guitar

Bruce Lawson (@brucel) usually has a speaking role as Opera’s developer advocate, but today he taught us about HTML through song! The first, “like a rounded corner”, bemoaned the life of a CSS developer struggling with making his site lovely for iPhones:

Rounded Corner - Handheld 2013 from Besquare on Vimeo.

…the second was an ode to HTML5 to the tune of Living Doll (let's hope the video goes up for this soon too!):

• it’s so much better than five…
• never completing, flash defeating, living standard :-)

Living Standard - Handheld 2013 from Besquare on Vimeo.

Icon Design Process

Jon Hicks @hicksdesign

Jon was co-designer of the Firefox logo

• single icon files -> sprite sheets -> icon fonts
• less http requests, small size, scalable for different resolutions & sizes
• accessibility issues
  • can use unicode private use area to prevent reading out
  • but might also need to add an invisible span if no other indication on the page
• can use opentype ligatures to replace whole words with icons
• colour?
  • Apple have created an emoji font with 128px square PNGs — works but not scalable
  • BBC Weather use different glyphs that they colour individually — when combined they make a colour image
  • can do the same with a company logo
  • Microsoft Windows 8 emoji set uses layered characters with colour information built-in — means they are completely scalable — and translates automatically from Apple emoji font
• fonts available online, e.g. pictos: 324 interface icons
• discovery phase: usually start with 16px grid but consider an odd-numbered grid for some cases (e.g. arrows)
• two kinds of icons: models (iconic, real-world) & symbolic (learnt)
• follow conventions — use what people know already
  • use google image search
  • or the noun project: with a tag search
• don’t forget local knowledge
  • owl in East is stupidity
  • bowing in Japan needs hands clasped in front — otherwise it means “I want to die”!
• boxes and arrows survey of filled vs outlined
  • found that iconic, realworld icons were recognised faster than symbolic, but outline/filled made not much difference
• differentiation: padlock, handbag, 20kg weight
  • think about adding subtle differences
• tools & styles:
  • decide size, output format
  • see all icons in context together
  • balance can change depending on context — you might want to move the icon up or down to align with the rest of the icons or text
• outputting a font
  • need to convert any rounded corners, expanded strokes etc
  • reduce anchor points as much as possible — reduces file size
  • easier to do this in Illustrator rather than Sketch
  • end up with a folder of SVG icons
  • then use font custom command line
  • glyphs app (expensive but worth it)
  • github did a blog post on settings
• access icon on page:
  • data-icon attribute
  • class=”icon-blah”
  • use aria-hidden="true" to help with screen readers
• alternatives to icon fonts:
  • all icons in an SVG file — with LESS or SASS to calculate the resulting CSS
  • makes it easy to adjust
• webcode app
  • lets you code in CSS or SVG or canvas (JS)
  • but canvas is larger file size
• further reading:
  • Brian Suda: Creating Symbol Fonts
  • Jon Hicks: Icon Handbook

an open letter to the industry from an 8 & 11 year old

Again, a brilliant intervention — video and transcript available on Vimeo (or listen below):

An Open Letter - Handheld 2013 from Besquare on Vimeo.

The Business of Responsive Web Design

Mark Boulton @markboulton

• redesigning the CERN web site
  • “next year we’re likely to make an announcement which will fundamentally change our understanding of the universe — and we want your help to make it”…
  • people wanted to know updates
  • from different perspectives — from particle physicists to random public
    • scientists want words and specifics
    • general public still want updates but need gentler explanations & pretty pictures — the pictures don’t need to mean anything or even be related to the content
    • teachers & students want updates with things to do, lesson plans etc
  • same updates need three different perspectives
  • but then you need structured content and a whole new CMS & editorial process…
• in news, story is no longer headline, subhead, image & caption
• now it’s a seed with lots of links together
• “meta data is the new art direction” @studip101
• in old-style advertising, agencies would win an account, not a project
  • take time to understand our issues, to get to know us
  • accounts involve more risk, but greater rewards and closer communication
• house of cards & netflix:
  • kevin spacey said we don’t want a pilot
  • want a longer view on development of the series, without the restriction of cramming everything in to the first episode
  • only netflix said yes…
• sometimes useful to let the client beat you up a bit for a while until they wear themselves out
  • an aspect of working on an account not a project
  • painful in the short term, but leads to better relationship & understanding
• if your process is to gradually improve fidelity over time, where is “the design”?
  • it’s not really there any more…
  • no big reveal, no final document
• marginal gains — fix small percentages all over the place
  • but you need to look across the whole system
  • e.g. cycling teams take their bedding with them to ensure a good night’s sleep
  • if you’re struggling with a particular CSS you may want to look elsewhere in the system for a small gain
• we’re breaking new ground at the moment — so it’s all hard
• but we’re leaving a legacy for the future

carefully everywhere

Brendan Dawes @brendandawes

• title comes from an e.e.cummings poem:

  as when the heart of this flower imagines
  the snow carefully everywhere descending

• film posters are data viz

  • the story of the film —> an iconic image
• symbolize and summarize
  • e.g. Ridley Scott selling Alien: “jaws in space”
• photoshop like elvis
  • originally leather jacket, streamlined, designed for compositing large images
  • now it’s like fat elvis on the toilet…
• making tools for playing with graphics
• making dynamic logos
  • flocking points with trails avoiding words (almost)
  • word made of springs with collision avoidance from several circles
• you can represent everything with numbers
• and then you can transpose those numbers into other systems
• flash was great as it was self-contained (and didn’t need to check it ran in lots of browsers…)
  • ed: we’re still waiting for good tools for interactive web design
• building an app called Kennedy
  • captures the now: weather, current headline, etc
  • you own your data — can export to visualize yourself
• happiness machine:
  • finds people saying they’re happy on twitter
  • prints out their tweet on a receipt
  • receipts are much more personal than larger piece of paper
• french new wave cinema came about ‘cos there was a 16mm camera that you could hold in your hand
  • new camera angles, new scenarios
• using sound to animate & extrude a 3D object
  • can then print it out
• data waffles: 3D printed 3D graphs

When responsive sites work as well as a chocolate iPhone

Ling Valentine @lingscars, Ling’s Cars

Pushed onto stage in a Dalek costume by Andy Clarke & Jon Hicks!

Ling then proceeded to tell us that responsive design just doesn’t cut it.

• it’s a mobile phone not a TARDIS
• Ling's Cars website makes it enjoyable to read lots of information!
• buying a car is one of the biggest decisions you can make — a car lease is a 1-3 year commitment
• good quality video, pictures, etc requires lots of bandwidth
• most car dealers have even given up on the web — they just say call us now or visit us in the flashy showroom
  • Ling relies just on her web site
• but it’s really important to satisfy all the people who start on their smartphones
• start by building up trust with them — let them see the enjoyable information and encourage them to visit the main website with more time
• mobile site is attention grabbing — different from main web site
• first link is a free car!
  • send me a PDF via email
  • and a link to remind them to check the full website later
• various games to get people to interact — then get them to start reading car deals

Crafting your Toolset

Eddie Machado @eddiemachado

• created bones (a starter theme for wordpress)
• Craig asked Eddie to build the Handheld 2013 site and use it as a case study for building a response site
• start with a design persona
  • http://aarronwalter.com/design-personas
  • visual lexicon
  • don’t forget personality traits & voice
• sketch everything and share it as much as possible
  • don’t hold out for a great reveal
  • things move much faster if you communicate
• mock up little elements
  • Sketch app is good for this
• establishing a colour theme
  • work out complementary colours: http://sassme.arc90.com
• sass structure
  • partials — grid, mixins, etc
  • modules — components
  • breakpoints — different sizes & non-media queries
• icons
  • icon fonts from http://icomoon.io
  • picking up icon using class on a span
  • SASS lets you create an array of subclasses with a for loop
  • let’s you create named classes with their unicode references easily
• using grids from gridset
• autoplay videos don’t work on touch devices
  • so used plain images for mobile
  • included video sources but in a div not a video element
  • on non-touch (desktop) devices, swapped out the div for a video element using javascript
• checking page size using http://mobitest.akamai.com/
  • also use http://tools.pingdom.com/fpt
• use a similar technique for background images on mobile
  • leave them out by default
  • add them in using javascript

Codename Prometheus

Aral Balkan @aralbalkan

http://indiephone.eu

• top 50 web properties are closed silos other than wikipedia
• indie OS + indie Cloud + indie Phone
• will be crowdfunding in 2014
• planning to ship in 2016

How to call your client an idiot without getting fired

Andy Clarke @malarkey

• client participation is currently broken — how can we fix it?
• the challenges of responsive design are not in design & implementation
• many problems stem from the workflow
  • not something you can easily control
• pre-planning stage
  • content audit, information architecture, etc
  • user stories, personas, scenarios
  • screen blueprints, storyboards
• but the tools can limit creative experimentation
  • e.g. wireframes shown to & signed off by client even before they get anywhere near design studio
  • want to avoid setting expectations in the minds of the client
  • but the wireframe layout gets ingrained in the client’s mind — so difficult to move away from them
  • big problem if you need to cater for different screens
  • e.g. start a new claim / edit an existing claim works side by side, but doesn’t fit on mobile — lose the second item below the bottom of the screen
• try to move from documentation to better communication
  • a written description can leave the door option
• visual design:
  • static visual assets (comps) being used as currency
  • exchanged as specs, blueprints, QA tools
• but these should not be used in place of communication…
• it’s impossible to write a functional specification that reflects responsive design
  • especially when technology moves so quickly
• need to do open-ended planning
  • admit that things can change
• but combine graphics tools with code
  • design for the medium, using the medium
  • use tools like http://hammerformac.com/ and http://vanamco.com/ghostlab/
• go from testing to prototyping, all with the client in the room
• but having the client sitting over your shoulder can make a lot of people uncomfortable
• many customers still expect to receive static comps as design deliverables
  • are pleasantly surprised when told they’ll receive code
• designers & developers need to work much more closely together — and understand each other’s constraints and aesthetics
• static comps can’t demonstrate:
  • liquid layouts
  • flexible font styling
  • native forms
• can do atmosphere
  • typography
  • colour
  • texture — decorative elements, etc
  • ed.: this is kind of the same as Jeremy’s pattern primer
• Andy might start with photoshop for atmosphere, then go to pencil sketches and code examples
  • results can be a little soulless
  • but nothing stopping going back to photoshop to add detail
• clients love to be involved; to be part of the process
  • sometimes suggestions can add real value
  • other times they might not… it’s ok to tell them!
• rules
  • never ever share a picture of a web site and just ask for thoughts
  • don’t do a big reveal after weeks & weeks of waiting — keep client involved all the way through
• try to work physically alongside
  • if not, have daily Skype calls and a shared DropBox
  • even then, the client gets scared sometimes: “it’s not going to look like that is it?”
• have banned unstructured feedback!
  • don’t accept any feedback via email or phone unless it’s part of a structured feedback session
  • ask for specific feedback — typography, colours, styles, layout, etc
• don’t underestimate the value of the design input
  • not about ego, but respect for the work
  • just because the client is paying, doesn’t mean they get to have everything they want
• can set rules about how to receive constructive feedback
• take the time to explain the design thinking behind the outputs — clients are then far less likely to want to make changes just to make a mark
• host feedback workshops — and use them to get to know the client better
• another rule: only people who turn up to design workshops can comment or criticise the designs
  • this includes the CEO :-)
• it’s ok to say that client’s ideas are stupid…

Ten Commandments of Modern Web Design

Jeffrey Zeldman @zeldman

1. thou shalt entertain
   • Panic’s web site — they’re just apps in dull categories but they have a personality — and therefore a following
   • a list apart: geeky articles — but have an in-house illustrator
   • you don’t have to be an “illustrator” to draw — just try it yourself
   • old flickr used to welcome you in different languages — light touch, but subtly reinforces global reach of photography
2. test everything (including assumptions)
   • use Adobe Edge, Remote Preview or Ghostlab
   • can’t choose breakpoints based on specific screen sizes
   • recommendation: choose types of devices
3. thou shalt iterate
   • milton glaser: what is graphic design? “I move things around until they look right”
   • the web is always iterating
   • positioning sharing links on A List Apart:
     • tried to guide people to read down to the bottom before sharing — people stopped sharing
     • put teeny sharing labels at the top — lots of sharing
4. thou shalt ship
   • if you can’t delegate at the pixel level, you’ll never ship
   • even if it’s not perfect — you must ship
5. engage thy community
   • instagram stumbled when they upset their community by changing their licensing
   • monotype featuring independent designers on fonts.com — humanising the big company
   • a list apart: letting people opt-in to showing tweets on blog — until twitter changed their API and it stopped working
6. love thy user as thyself
   • think about use case compassionately
   • don’t make assumptions about amount of content
   • but do make assumptions about priority
7. thou shalt experiment (I think)
   • can play on your own personal site
   • zeldman.com: trying out content first with big type and no extraneous distractions
   • followed by 37signals, Medium, USA Today, New York Times, etc
   • ask how you can take things away from the page?
8. thou shalt make magic
   • instagram uploaded pictures in the background while you were still typing the comments
   • it worked magically fast
9. thou shalt prioritise
   • how to prioritise
   • kick ass kickoff meetings
10. to thine own self be true
    • hay net — used to be need hay / have hay
    • but then added lots of extra guff and completely lost the simplicity of the main form

…and this is not religion — it’s only design!

Finale

…singing We’ll Keep A Welcome in the Vales — When You Come Home Again to Wales

Welsh Veterans Male Choir - Handheld 2013 from Besquare on Vimeo.

MomoLondon: Demo Night 2013

Another fun demo night from Mobile Monday London. Some new ideas and some old — you never know which ones are going to stick!

My bets are on Vyclone and Critical Arc…

Blue Badge Style

Fiona Jarvis & Kishan Gupta @bluebadgestyle

• a guide for the discerning less able
• app available for iOS: Blue Badge Style
• graduated from the Mobile Monday & UCL Mobile Academy
  • (it’s really great! sign up now! :-))
• social media advisor suggested:
  • video of app to attract people to download
  • RSS feed in app
• added TTS (but not voiceover?)
• got 1000 downloads in Nov (PR & press) + 300/month afterwards

Boss Level - Scavengers

Nick Brown @boss_level

http://playscavengers.com

• game based solely in HTML5
• aimed at PC, mobiles, tablets & smart TVs
• want same control system across everything
  • up down left right & select - lowest common denominator
  • fixed 720x720 resolution at the moment (will need to change for different devices)
• closed alpha at the moment
• aiming for Kickstarter to raise profile
• cross between xcom & worms
• freemium business model with in-game purchases
• also thinking about a store for game assets
  • there’s a game editor that allows you to completely customise levels and characters
• would rather not have in-game adverts, but depends on the eyeballs
• currently two developers

Connecthings

http://www.connecthings.com/

• NFC tags for street furniture
• 1500 tags displayed in Strasbourg
• real-time transport info
• integrated with cycle info too
• also has event & POI database
• POI tags show POI info first, transport tags show transport info first
• tags have QR codes too
• license the platform to municipalities
  • though not sure how well it would go down with councils that already have their own portals….

Critical Arc

http://www.criticalarc.com/

• previous company led security & surveillance for Olympics
• security & safety in large open spaces
  • e.g. universities
• define SafeZones where there is a response team available
• security team have an app to see a situational view of the campus
• free app to call for help & get notified
• have created a platform for sharing location and situational information
• universities are first market
• no tracking in the background for general public
• security officers are tracked in the background
• Wi-Fi positioning covers off GPS issues
• can report on security staff location — heatmaps etc, can be used to actively plan response

Decibel Analytics

http://www.decibeltechnology.com/analytics/ @decibelanalytic

• actionable analytics
• object maps, which integrate with elements on page, to show which are actually being clicked
• attention maps — shows which areas of page are actually viewed
  • i.e. where is the fold for all your customers…?
• which content is contributing most to goals & revenue generation
• can filter by device and by incoming source
• adding A/B testing soon

Men’s Fitness UK iPad app

Paul Cooper, Design Director, Dennis Publishing @dmfcoops

iPad app: Men’s Fitness UK

• COPE — create once, publish everywhere
  • started by NPR in the US
• Drupal CMS with responsive design & native elements
• started with The Week (iPhone & iPad)
  • takes one person one day to lay out
  • less than 100Mb an issue
• now done a monthly magazine — more content
• Drupal 7 & responsive is a complex thing
• Adobe DPS takes over a week to lay out an issue of EVO
• content producers (photogs etc) struggled a little with responsive design, but get training
• can preview the issue before generating the app
• looking at licensing the system to other parties
• developing a system like InDesign that outputs responsive HTML

GO!Enterprise

Globo plc - Enterprise Mobility in a BYOD world

http://goenterpriseserver.com

• deploy access to back office systems in a secure manner
• no need for mobile device managment
• client app available from standard app stores
  • GO!Enterprise for iOS
  • GO!Enterprise for Android
• three products:
  • office — point and go
  • mobilizer — development for custom enterprise apps (cross-platform)
  • reach — make apps for customers

Trademob - mobile click fraud protection

Adrienne Gauldie @adriennegauldie (ag@trademob.com)

http://www.trademob.com/

• did a study in june (6m clicks)
  • 22% accidental (< 0.1%)
  • 10% botnet & hijacked clients
  • 8% server-side fraud
• can see it from data…
  • e.g. in-app clicks from non-mobile user agents
• don’t get fraudulent clicks from publishers with real customers
• building a blacklist of dodgy publishers
• 100 people in company

Vyclone

http://vyclone.com/ @vyclone

Download the app for iPhone

• wouldn’t it be amazing if we could make a single video from all the angles at a rock concert…?
• combine multiple vids in one
  • had 200 people filming a Jason Mraz concert
  • 150 people at Ed Sheeran in Hammersmith Apollo
• business model:
  • lots of interest from music industry
  • want to get footage and release it to fans for behind the scenes
• copyright: music industry recognise that this is already happening
  • now they get access to video, so a win-win
  • customers can choose to keep video private, or share with everyone
• app is winning lots of awards!

AudioSnaps

Marc Sallent, We Choose Fun

http://audiosnaps.com

• record 5 secs of ambient sound while taking a picture
• JPEG + MP3 = JPEG! (plus extensions)
  • all devices can still show it
  • web site can play audio with just one line of javascript
• why not just take a short video?
  • want to capture a moment, not tell a story

Chirp

Geraint, Animal Systems

http://chirp.io

Download the app for iPhone

• send small amounts of data using sound
• want to release an API for third parties
• have an arduino that can chirp
• teach the machines to sing!

Catch-up with last year’s demos

Two of last year’s Demo Night presenters returned to give us an update. See my notes from last year.

Ko-Su

http://ko-su.com @kosumobile

mobile learning for everyone

• demoed last year, one month pre-release
• been accepted into BBC Worldwide Labs
• material created in lots of countries around the world
• now “officially out of pre-revenue” (?)

Six-Three

https://six3.tv/

Simon Frost, CTO @spli

• started out as a private closed network — a messaging thing
• sports stars started using it to keep in touch with their public, but also to communicate with their private street marketing teams
• made it onto WAYRA Telefonica business incubator

Droidcon London 2012, Day Two

The second day of Droidcon London — and they kept us going from 9am until 7pm with a full programme! As with the previous day, the keynotes were focussed on how Android is being used in non-phone devices — extending the rule of configurable software over fixed hardware.

I’d really like to add the slides to these notes — the Flurry presentation especially has loads of useful information that I didn’t catch. If any of the authors read this — please get in touch via twitter or leave a comment and I’ll add a link!

Future of Android - Vendscreen

Paresh Patel

http://www.vendscreen.com/

• touchscreen device that fits as an extension on any vending machine
• accepts credit cards via swipe + tap to pay
  
  • chip & pin coming later
• network connected — makes the machine smarter
• can cluster machines
  
  • e.g. lots of machines in a hotel
  • customers can get inventory from their phone
  • energy management — can turn off some
• example: sold small artwork pieces in a vending machine
  
  • people weren’t surprised
  • prices didn’t have to be low
  • people paid up to $99 by swiping their card
• right now running Android 2.3.4
• minor modifications:
  
  • got rid of desktop
  • added a recovery screen

Future of Android - Parrot Asteroid

Frederic Albinet

http://www.parrot.com/uk/products/hands-free-car-kits/parrot-asteroid

• parrot asteroid Android car radio
• classic & mini using Android 1.5(!!?!)
• tablet and smart devices using Android 2.3 (still old…)
• does voice recognition search for contacts and music
  
  • music searches across connected device and also the internet radio stations and other sources
• parrot app market
  
  • will be live from november
  • can browse from PC or from device
• looking to extend to dynamic network between vehicles
  
  • though this would depend on other cars having devices with the same protocol…

ADzero phone launch

http://www.justadzero.com/

• world’s first bamboo smartphone
• quad core device
• full HD screen
• bamboo feels really good to hold
• flash innovation: circle around the camera — works much better for macro

building songkick

Akshay Dashrath and Jamie McDonald, Novoda

• took 2 devs 3 months to build initial version
• agile process, two week iterations
• tools used:
  
  • pivotal tracker
  • github
  • maven
• third party libs:
  
  • ActionBarSherlock
  • ViewPagerIndicator
  • Novoda ImageLoader & Novocation
  • NovodaTime — dealing with Joda Time problems

user experience design

• spent a lot of time finding pain points in initial install process using paper prototypes
• found out that putting buttons in the action bar were not found by users
  
  • mocked up on an actual device to see how it felt
• can set a custom notification light colour (works well with branding!)
• styled login web view to look like rest of app
• first launch experience:
  
  • had a scan screen with an OpenGL animation to keep the user entertained while the initial artist information is found
• used external apps that expose content providers
  
  • google music — got artist names using a projection and flexjson to push it to songkick server
  • last.fm

caching & location

• used novoda’s novocation location library
• used Jackson mixture of streaming & tree model to avoid memory issues
• data from web calls loaded into database, then database loaded into views with cursor loaders
• detachable result receiver — google IO 2011 app
  
  • lets you deal with rotating views and re-attaching the new activity to the old cursor loader
• all visited content cached using Reto Meier’s Big Cookie approach (see Making Good Apps Great)
  
  • “Just Added” concerts sync in the background
• if offline, then shows a transparent banner at the bottom of the page
  
  • send out a sticky broadcast if an online query fails
  • broadcast cleared if the app gets a good response
• Big Cookie caching can build up too much data
  
  • data removed on a daily basis by removing old data — e.g. past concerts, etc

testing

• manual QA for most stuff
• automated tests were more for stress testing
• also did observational user testing (one-way mirror room)
• put UI options in a debug menu so could easily do A/B testing
• build machine runs instrumentation tests on however many devices are plugged into it
• used Eclipse Memory Analysis Tool to check memory allocation
  
  • used to fix large back stack activity
  • enabled StrictMode to deal with issues with Google Analytics & Joda Time
  • Joda Time used the UI thread for DST settings (can be fixed — see Stack Overflow)

featured!

• got featured in Play
  
  • installs went 400 / day -> 20,000 / day!

soundcloud audio in Android

Jan Berkel and Jon Schmidt, SoundCloud

playback

• Java MediaPlayer talks to C layer MediaPlayerService
  
  • check out the C source code to see what’s going on
• underneath this uses PacketVideo OpenCore up to 2.2, then Google Stagefright
  
  • shouldn’t have to care about underlying implementation but if you’re doing something complicated you do…
  • OpenCore
    
    • mature, stable but limited
    • seekTo doesn’t work in streams
  • Stagefright (default from 2.2 and beyond)
    
    • fixes seeking
    • but not available in all devices…
• when launched shortly after 2.3 released decided to support 2.1+ so that could cover 75-80% of devices
• to find out which mediaplayer, tried to read /system/build.prop
• however, some phones had both frameworks!
  
  • one for streaming and one for encoding…
  • playing locally would behave differently than streaming from a server
• so to actually find out, connect the MediaPlayer to a local socket and read the user agent on the other end…
• built a StreamProxy local server
  
  • could cache and fetch chunks from CDN
  • MediaPlayer then talks to proxy
  • inspired by NPR android app
  • but still no control over buffering (may want to alter it depending on network conditions)
  • different versions of Android behave differently
    
    • ICS has a huge buffer so takes ages before it starts playing…
• bundled Android HttpClient is broken (it’s an old snapshot, not a proper release)
  
  • have to catch NPE from execute!
  • recommended to use standard Java URLConnection
  • bundled HttpClient has now been deprecated

recording

• live encoding options on earlier Android versions — just AMR AB
  
  • only good for voice
  • narrow range, low quality — sounds like a phone call
• instead recorded in PCM and used 3rd party lib to encode it before uploading
• chose ogg vorbis
  
  • good for licenses
  • java port is slow (and incomplete)
  • would take 4x length of audio to encode!!
• from 2.3.3 Android introduced AAC encoding
• new requirements involved getting at the actual audio data — simple editing, resuming record
• had to write own native layer for codecs and audio processing (Java too slow)
  
  • used C-based Vorbis Encoder & Decoder with a thin wrapper
  • also added a native amplitude analyzer
• tried to avoid sending data back and forth too often
• but… now had to deal with CPU flavours
  
  • armv5 on older devices has no floating point support
  • have to build native pieces for various architectures (armv7, mips, x86)
  • older devices fall back to old-style encode later style
• Jelly Bean has new media encoding APIs
  
  • will be useful in the future…
• some sony devices have a patched media framework that behaves differently…

bug detection

• robolectric
• bugsense crash reports
• get a load of devices and get people to use them

The fly-in app menu for designer and developer

Cyril Mottier @cyrilmottier

• watch out for activity back stack
  
  • recommended to only use fly-in menu at root level
  • but still want the back button to exit the app without going via the fly-in menu
• libraries (all on github)
  
  • android-undergarment
  • slidingmenu
  • android-menudrawer
• don’t slide the actionbar
  
  • you’d need a custom actionbar…
• or create your own: need a custom view group & view
• see “making of prixing”
  
  • #1 — start
  • #2 — adding swiping gestures
  • #3 — polishing the UI
• make the slid out activity inactive
  
  • click on it to make it visible again
• may need to think about right-to-left languages having right-sliding menus

Who needs thumbs? Android Instrumentation and Reverse Engineering

David Teitelbaum http://blog.apkudo.com/

I only caught the very end of this, but it looked like it could be a really useful talk — worth chasing down the slides

Android and Arduino

Fei Manheche, Robobo

• 3 steps:
  
  1. build basic circuit & test it from PC (use serial monitor via direct connection or Bluetooth)
  2. build basic arduino software to set it up to be controlled from Android
  3. build Android app to talk to Arduino
• bluetooth modules available for £6-10
• use amarino library to simplify bluetooth between android and arduino
  
  • can also use amarino app to test basic bluetooth connection
• don’t send too much data to the arduino at once (unless you write buffering serial code on the arduino…)

Memory Analyzer: avoiding memory leaks

Felipe Ferraz, CESAR

• each process on Android has its own Dalvik VM
• the Zygote process is forked for each app
  
  • it already has common libraries mapped into it, so they’re shared as read-only between all apps
• use adb to make a heap dump (kill -10 <pid>)
  
  • or use Eclipse…
• useful to create multiple heap snapshots to tell story of memory leak
• http://www.eclipse.org/mat/
• make sure to null Callables inside Images

Using Ubuntu to develop cloud-connected android apps

Victor Palau, Ubuntu

• juju: https://juju.ubuntu.com/
• orchestrates groups of servers deployed to cloud systems
• can deploy a local instance or to Amazon ECS (or any other OpenStack compatible service)
• local deployment uses zookeeper to set up containers on a single machine

Mobile Analytics - taking your Android app to the next level

Simon Podd, Director of Sales, Flurry EMEA

• according to EMF there are 2Bn “affluent adults” in the world
• 17% of time spent in Android apps is in Europe
• time spent in apps is increasing month by month (94mins/day in Dec 2011)
• social networking category is growing fast (equal to games in Q1 2012)
• Flurry tracking 220K apps across 660m devices
• iPad makes up 88% of top 3 tablet sessions
• of the top 20 Android devices by worldwide sessions (May 2012), the top 3 are:
  
  1. Galaxy SII
  2. Galaxy Ace
  3. Moto Defy
• worldwide 2011 app revenue (iOS & Android):
  
  • 52% in-app purchases
  • 24% mobile advertising
  • 25% app sales
• advertising revenue (from Flurry’s ad slots):
  
  • iOS $6-10 eCPM
  • Android $20-30 eCPM

gaming category stats

• ages 13-34 spend most time in apps
  
  • 18-24 & 25-34 about even
  • fairly even gender split
• more money spent by 25-34yo men (29%)
• average transaction sizes fairly constant across ages, and higher than you might think:
  
  • M: $15.60
  • F: $11.90
• customers download on average 50-85 apps during a device lifetime
• but they only use 5-10 apps a day
• there’s an app discovery issue on the device

flurry tracking

• can use ranges for event parameters…

Applying lean principles to enterprise mobile development

Dave Slocombe @daveslocombe — Head of Mobile Channel, lastminute.com

• product scorecards
  
  • 5 or 6 key goals for the year
  • see Marty Cagan, SVG
• keep time to release short
  
  • don’t miss the opportunity to innovate
• avoid big bang releases
• essentials: co-location & cross-functional

generating and managing ideas

• ideas should come from all sides of the business
• need to have a massive bucket of ideas
• make them visible so you can choose amongst them
  
  • great for managing HiPPos (highest paid persons)
  • they can see that their idea is on the board
• doesn’t mean that you have to work on them!
• prioritise ideas
  
  • use the product scorecard

selecting ideas for development

• UX team does customer insights
  
  • qualitative: what problems are we solving? is there a market?
  • quantitative: talking to data analysts
  • looking for strong signals
• product owner reviews customer insights
• UX team create designs in iterations, increasing fidelity as they go
  
  • want to be able to ditch bad ideas before spending too much time on them
  • try guerilla testing: take it to someone in a coffee shop and ask them what they think
  • get marketing and devs involved as well
• get UX ideas out without using developer time
  
  • use axure or similar
• have an internal site of proposed designs
  
  • available to exec team
• play back early stage designs to other teams, like finance and supply
  
  • surface problems and feedback early
• if ideas are generated, they can go back onto the ideas board (don’t deal with them right now)

development processes

• retrospectives
  
  • done every two weeks
  • if you leave it longer, the issues get bigger and harder to solve
  • more frequent = smaller, easier to fix issues
  • e.g. found that they needed a “design issues” wall
    
    • edge cases found missing by the designer, not captured
    • introduced “creative coding” — designer + developer pairing, making a first pass of the UI
    • brings designers into what’s possible on mobile
    • helps devs understand value of brand & aims of user experience
• Dave was originally a skeptic of pairing, but converted:
  
  • sharing knowledge
  • repeatability, consistency
  • drives out “hero developer” mentality

testing & releasing

• “release process is the metronome that drives progress”
• continuous deployment
  
  • every check-in should be deployable
  • repeatable consistent environments
  • currently 12mins to deploy to production
• devices are tiered for testing:
  
  1. automated tests, max experience, manual test
  2. automated tests, optimum, limited manual
  3. observe trending, monthly testing, graceful fallback
• just pushed iOS 3 down a level
• looking at webdriver to generate PDFs for visual check

tying it together

• showcase every two weeks
  
  • include other departments
  • no roadmap items, just value added in the last two weeks
• focus on what your customers say, not what the industry says is cool
  
  • apps vs web — choose from your own analytics
  • e.g. for travel, 3x more likely to book on web
• stats:
  
  • seen 10% month on month growth in Android, compared to iOS
• ensure product always gives tech team 20% tech debt time

Replacing the Android emulator

Daniel Fages, Genymobile

http://androvm.org/

• built on top of android-x86
• has an emulated WiredSSID wi-fi connection
• can use OpenGL 2.0 using hardware
  
  • works really well - can emulate Angry Birds
• just added injecting sensors from attached Android device (accelerometer, etc)
• currently working on management tool and other features
• looking for feedback on next features
  
  • network
• also can install VM on other people’s machines without having to worry about SDK
• will be working to integrate with Jenkins
  
  • could be great for creating a snapshot when something goes wrong
• not working:
  
  • multitouch
  • NFC, Bluetooth
  • GSM pieces: SMS & voice

Developing accessible apps for Android

Gary Readfern-Grey, RNIB

• many people are relying on apps as the only way to do crucial things in life
• talkback comes with Jelly Bean
• problem:
  
  • icon-based buttons don’t have proper audio labels (“icon 39”, “icon 19”) so can’t find what is on the screen
  • watch out for “jump back button button”
• accessibility came in on Donut 1.6
  
  • relied on physical keyboard and trackball
  • touching the screen behaved as normal and gave no feedback
• Talkback and Eyes-free-keyboard added more recently
  
  • eyes-free added in Gingerbread
• ICS brought in explore-by-touch
• Jelly Bean brings in gestures:
  
  • moving focus
  • back, home, recent apps
  • notification shade
• WebView is harder
  
  • Jelly Bean & ICS have an additional “allow web accessibility” checkbox

testing your app

• download talkback from google play
  
  • Jelly Bean has it installed (at least on Nexus 7)
  • settings / accessibility / turn on Talkback
• check that views are focusable and have content descriptions
• custom views need hover events

documentation

• Google I/O 2012 making android apps accessible on youtube
• developer.android.com: making applications accessible
• android 4.1 accessibility APIs

top things to do:

• add content descriptions to your widget
  
  • can do in XML layout using android:contentDescription attribute
  • or use setContentDescription
  • latest linter should check for this
• make sure you can get to all elements of the app through a keyboard
  
  • will also help for Google TV
• don’t depend on colour alone…
  
  • e.g. “correct the field that’s coloured red”
• test it! try out Talkback
• RNIB Innovation can help you
  
  • RNIB offer paid consultancy
  • if they’re doing something that RNIB really want and aren’t in a position to pay, then they could offer free help too
  • innovation@rnib.org.uk

iOS Dev UK: Your App Sounds Great

Dave Addey, Agant Ltd, @daveaddey

This was one of the barcamp slots in the evening. Dave went through the presentation he gave previously at NSConference on VoiceOver, Apple's device support for blind and partially sighted users.

• RNIB have an accessible app of the month
  • they’re really interested in helping people
• 2m blind or partially sighted people in the UK
  • equivalent to population of Birmingham, or lefties, or gingers!
• How it works:
  • label - description
  • hint - results of interaction
  • traits - only need if making a custom control
• triple tap with voiceover enabled to turn screen curtain on — blacks out the screen so you can test it without cheating
• use UIAccessibilityPostNotification(UIAccessibilityNotification, ...) to post sounds on events rather than touches
• iOS knows quite a lot of UK place names, but not all (and especially not Welsh names)
• can set your own usability tags, but uses normal spelling, not phonetic characters
  • can use say "word" on a Mac to test
• can define accessibility containers to group stuff
• it’s not just about making it accessible for a blind user or a partially sighted user, it’s also about making it usable for a sighted and non-sighted person using the app at the same time
• At the bottom of accessibility options there’s a triple click home option — you can make this toggle VoiceOver
• Maps do not have accessibility other than the pins
• If stuff is still being selected by VoiceOver, then you might need to set them to be disabled

BarCamp London 8: British Sign Language

@lallyd http://www.learningbsl.com

More details may be available on lanyrd

• learning level 2 at the moment
• Deaf with big D is about how you would like to communicate, not about hearing
• some words look similar but mean very different things…
  • facial expression / shitty
  • black / prostitute
• dialects also differ across the UK
  • you can have a northern accent in BSL…
  • “live” (asin “I live in…”) in London is stroking shoulder
  • in Blackpool, the same sign means “toilet”…
• vowels are RH pointing at fingers on LH
  • i.e. A is RH pointing at thumb; U is pointing at pinkie
• computer: screen LH, RH typing
• engineer: two hands together as cogs
• please and thank you use the same sign, but different lips
• resources:
  • learn how to flirt in BSL: http://videojug.com/tag/british-sign-language
  • BSL music videos: http://youtube.com/user/lovesbth

BarCamp London 8: wheelmap.org

Holger Dieterich — @holgerd

More details on lanyrd

• http://wheelmap.org — find wheelchair accessible places to eat & drink
• Made by http://sozialhelden.de — Social Heroes
  • one of the founders is in a wheelchair
  • problem is not how to get somewhere, but how to find somewhere suitable
  • is there a step? is the toilet accessible?
• databases in Germany have 30,000 places, but they’re not so easy to use (mostly commercial)
• had a wheelchair tag in OpenStreetMap before they started, but only about 5,000 places were tagged
• now have about 18,000 places in germany
  • 300-400 places edited a day!
• website finds your location by IP and offers you places to edit/add
• also an iPhone app
  • using OpenLayers to display
• CloudMade is good, but is read-only and not updated regularly (once a month!)
  • want to have immediate update
  • don’t yet have immediate, but 3 minutes is close
  • OpenStreetMap itself is sometimes down (for three days at one point), so had to implement caching and their own intermediate API
• also approaching companies to share their data…
  • they’re really scared… so talking with Berlin government to convince them
• having slight issues with OSM community as wheelmap data is added anonymously by a pseudonymous user
  • but it’s better that data gets added
  • and there’s no real chance of spam since the data is added automatically