NSConference 5: Day One

This was my first NSConference and I was impressed. Three days of full-on sessions covering everything from deep technical gotchas, through brutally honest experience reports and even across to basic economics lessons. And the people… I’ve never met so many iOS and Mac developers in one room. Everywhere I turned, there was a developer of an app that I’ve used or know about and admire.

Thank you so much to Scotty and the team. Everything (apart from the wi-fi!) went swimmingly!

iOS performance testing

Bill Dudney @bdudney bdudney@me.com

• Double check performance even when you think you’re doing it right
• Watchdog gives you lots of time but user expectation is instantaneous
• You can use more time on suspend… but don’t go outside watchdog times otherwise app will have to start from scratch
• Use Time Profiler to check CPU usage on startup
• VM tracker tells you how much memory is dirty - most crashes come from here
  • Allocations can be low but dirty memory still high
  • e.g. Image allocations
  • Memory gets dirty as soon as you write to it
• ARC deals with most of issues for you but won’t deal with cycles
  • Can see in leaks
  • Deal with by using weak references
• Graphics
  • Quartz all happens on CPU
  • OpenGL happens on GPU
  • Separate processor - more power
  • CoreAnimation gives you access without writing raw OpenGL
  • It’s a compositing engine
• Offscreen rendering can take up lots of time
  • Check offscreen rendering highlight in instruments

searching for speedy searching

Simon Wolf @sgaw or @sw on ADN

• WWDC 2010 mastering CoreData suggests title contains[dc] $content
• Can use beginswith to improve speed
• Even faster use >= 'frog' and < 'froh'
• But doesn’t work for in-word searching
• SQLite with full text search FTS (or FTS3, older)
• Have to build own version of SQLite and include in your app
• And then can’t use with CoreData
• Use FMDatabase & FMDatabaseQueue to behave better with threads
• Use SQLite with FTS to create an index that refers to the Managed Object ID
• otsNormalizeString string category to remove diacritics (in blog post)
• FTS search is word based, * is wildcard
• Can also define “nearness” of terms
• Need to keep index in sync with CoreData

The ultimate developer toolchain

Richard Morton @richardmorton

• “if you have a machine and don’t buy it, you will ultimately find you have paid for a machine and don’t have it” — Henry Ford
  • buy a decent developer machine!
• iOS Support Matrix gives you a good way to find which test devices you need
  • see @isupportmatrix
  • written by Richard Stelling @rjstelling
• Injection for Xcode: restores “Fix & Continue”
  • uses bundles & method swizzling
• Xcoverage
  • LLVM provides build coverage
  • instrument program flow & generate test coverage files
• Mogenerator
• AppCode by JetBrains
  • would still do bulk of dev in Xcode but boot up AppCode to use refactoring & other unique features
• Jenkins
• PaintCode
• xScope
• ResourceHelper
  • extra QA for assets

Why making 12 Games in 12 months is a good idea

Matthijs Hollemans @mhollemans

• lots of game jams around
  • including #OneGameAMonth
  • http://compohub.net lists them all
• why?
• experimentation & innovation
• learning how to finish
  • often there’s a long hard grind to finish
• learn to limit your scope
  • one single thing
  • take idea and strip it to the core
• putting constraints on what you’re doing enhances your creativity
• also get experience in failing to finish games
  • good to find a way to fail faster!

UISS - UIAppearance on Steroids

Robert Wijas @robertwijas

• UISS available on github & CocoaPods
• UIAppearance & UIAppearanceContainer lets you set appearance defaults application-wide
• but need lots of code to do anything…
• UISS uses JSON syntax, similar to CSS
• lets you set styles for inner elements
• and also styles per device type (iPhone/iPad)
• lets you define variables
• easily disable bits by prefixing selector with “-“
• setup:
  • [UISSS configureWithDefaultJSONFile];
  • add uiss.json file
• debug: UISS status bar
  • tapping status bar shows errors in uiss.json
• works with live updates in uiss :-)
  • just make uiss.json available via HTTP
  • [UISS configureWithURL:url]
  • let’s you build the app and give it to your designer to adjust, even without Xcode
  • debug option lets you adjust URL
• generates UIAppearance code for you
  • you’ll want to do that before you create production code
• can use UIProxy to control your own custom views with UIAppearance
  • also allows you to adjust them with UISS
• other systems doing same thing:
  • NUI
  • pixate
  • both use traditional CSS - so heavier dependencies

Becoming a product company

Daniel Pasco @dlpasco daniel@blackpixel.com

• started in 2007 as contracting but aimed from the beginning to be a product company
• 6 people for 3 years, then doubled in size for 3 years
• operate as a remote company, HQ in Seattle, but spread over US, with a couple in France
• have shipped hundreds of apps, but all for other people
  • have a reputation for confidentiality
  • so can’t tell anyone about them…
• there’s an opportunity cost to do product development
  • in the presence of lucrative contracts, you take a risk and turn away money
• however, you get stability
  • find that contract work is busy Feb to July
  • occasional spike in November preparing apps for Xmas
• did client work until they had enough money
  • then did some product work until money ran out
  • then swapped back to contract
  • big gaps between product dev
  • when went back to code, there were lots of changes to make with all the new knowledge…
• initial product was Bistromath
  • massively over-engineered…
  • developed in a vacuum
• need to share app with people who know nothing about how the app works
  • tester should not share any of your assumptions
• life after being featured…
  • intense — but treat it as a bonus
  • people need to be aware of the app outside of the app store
• painful first product experience made them very gunshy
• learnings:
  • vet your ideas early on
  • get feedback on betas
  • no excitement? that’s an issue
  • if someone wants to extrapolate — that’s great! but leave those additional features for later
  • have a sustainable dev plan — through to the product release
  • check out marketing
• changed business model:
  • grew contracting team so could subsidise continuous product team
  • could keep momentum going
• got the chance to acquire three products from other developers (NetNewsWire, Kaleidoscope, Versions)
  • existing userbase
  • well-known brands
• products acquired through revenue-share
  • no money up front
  • revenue share decreases as time goes on
• wanted to share info & blog monthly, but…
  • have competitors: don’t want to reveal feature roadmap
  • no one knows if you miss a deadline: would have announced and missed three times!
  • no one knows if you drop a feature you promised
• Apple will not let you transfer an app between accounts
  • unless you get the keys to the old account, customers will have to buy the app over again…
  • trying out introductory pricing on upgrades to help people recover their losses
• iCloud sync issues with NetNewsWire
  • iCloud/Core Data: still unusable…
    • opening the iCloud container can take up to 25 minutes
  • iCloud/Key Value Store: works fine
  • iCloud/Ubiquitous Documents: has issues
• got creative tensions from people caring so much about their own products
• changed aim to be frequent, shorter, release cycles
• got lost with features — endless ticket list
  • @jury drew a line in the sand: ship by this date
  • focus accordingly
  • the plan:
    • 4 weeks for feature complete
    • then 4 weeks for no P3 bugs (fix or defer)
    • then 2 weeks for no P2s
    • then 1 week for no P1 bugs
  • there will always be another release
    • if that isn’t built into your plan — change your plan!
  • it’s ok to ship with bugs, as long as they’re not blockers

Software Architecture: what questions to ask?

Jacob Gorban @apparentsoft

A short list of questions to ask when adding a new feature to your project:

• good ideas are insidious: they increase scope
  • must definitely be worth adding…
  • here are some questions to think about before adding a new one to your project
• is it really a good idea?
  • is it good for your business?
  • it it good for your app in the long run
• is it DRY?
• is it orthogonal?
  • good to have smaller pieces joined than one big piece
• is it testable?
• is there another way?
  • when you see a good move, look for a better one — Emanuel Lasker
• what is the cost of changing this later?
• what would the architecture look like if I didn’t have this problem?
  • is this problem framed properly for my app?
  • perhaps we can change the problem…
• document the rationale
  • not just for later — helps you understand the problem
  • could also discuss with others
• what are the facts and assumptions?

Download from http://bit.ly/software_architecture_tips_pdf

WebKit UI Inspector Tips and Tricks

Daniel Jalkut, Red Sweater Software @danielpunkass

• use webkit inspector to fix a page for printing
• prototype app store previews
• can set inspector on in your own (Mac) app:
  • just add -WebkitDeveloperExtras YES argument
  • can add same preference on other apps
  • defaults write <bundle-id> WebkitDeveloperExtras -bool YES
  • or globally: defaults write -g WebkitDeveloperExtras -bool YES
• Dictionary app uses a WebView… so you can inspect it!
• preference key doesn’t guarantee that the “Inspect Element” menu item will be available
• Mail.app is a very good robust HTML editor using a WebView but it overrides the contextual menu
• for any process (even one that has custom contextual menu):
  • attach to target
  • break on [NSView menuForEvent:]
    • lldb: break set -r menuForEvent
  • ctrl-click in the suspected WebView
  • run code: [[[$rdi _webView] inspector] show:0];
    • event target is in $rdi
• iOS webkit inspector can inspect Safari or any UIWebView in an app that you own

The Invisible Interface — Adding offline speech UI to your app

Halle Winkler @politepix http://politepix.com

• large vocabulary tasks
  • use server-based speech recognition
  • UITextView, Nuance, AT&T, iSpeech
• command and control
  • can use offline speech recognition
  • e.g. OpenEars
• speech API dimension is time
  • make time, rather than just take time
• small steps through decision tree, means small steps backwards
  • trust & quickly verify
  • switch between small vocabularies
• watch out for “out of vocabulary”
  • what happens when people walk past talking loudly…?
  • it’s a solved problem in speech recognition, but deciding what to do is a design issue

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

Handheld Conference 2012

This is a new conference, organised by Craig Lockwood around lots of intersecting areas of mobile design and development.

This year it was held in the beautiful St David’s Hotel, overlooking Cardiff Bay. The conference centre was a bit cramped, but the hotel itself was lovely.

There was a single track of sessions, but they covered a wide range of areas from getting a business started to futurology via several variations of design. As with many mobile events there was a fair mention of the web vs native debate, but there was a reasonable balance between the two here — with the only loser being the whole app hybrids like PhoneGap (which took a large amount of flak).

As with most of my posts, here’s my quick notes, typed during the sessions so that you can get a rough overview of what happened. Craig has published videos of several of the sessions on Besquare (I'll link to them next to my notes).

Handheld 2012: Book stories — How to turn a sideline into a business

Keir Whitaker, Viewport Industries

http://keirwhitaker.com

• co-owner of Viewport Industries with Elliot Jay Stocks
• using the web to do side-projects / passion projects
• published Insites book — interviews with web developers & founders
  • also available as ebook (via http://woop.ie)
• wanted to create something that makes money while they slept
• there’s still a passion for physical media (especially amongst designers…)
• had 65 people involved in making book
  • 21 interviewees, but a lot of others
  • copy editors, etc
• picking a new collaborator is hard
• did a precursor project (insites tour) to find out if they could work together
• discuss the money up front
  • horrible conversation to have
  • but really important to sort out before starting
• raising money
  • bootstrapping (your own money)
  • kickstarter (watch out for scaling issues)
  • funding
  • sponsorship / partnership
  • chose partnership (published in association with Mailchimp)
• need banking for a business account
  • they need address, phone number, etc
  • chose HSBC for Xero integration
• company needs a physical address
  • don’t use your home address
  • can use an accountant’s address
• need a telephone number
  • again, don’t use a personal number (especially mobile)
  • used a company called dial9 to have a virtual Bath number
• need terms & conditions
  • banks pay people to read them when you apply for stuff
  • most people borrow other people’s terms…
  • ask first!
• get an accountant
  • will save you money
  • HSBC business account feeds directly into Xero online accounting system
  • accountant can then work directly from Xero
  • costs about £19/month
• need a storefront for the website
  • shopify costs £19/month
• payment gateway
  • middle man between storefront and merchant account
  • need it if you don’t go for paypal
  • alternatives:
    • braintree
    • paymill
    • stripe (US only)
    • gocardless (going Europe-wide, direct debit only)
• merchant accounts
  • money comes through into real business account after about 2 weeks
• ensure that the gateway supports issuing refunds
• digital goods
  • use fetch app
  • works by web hooks
  • benefit with fetch app is that you can resend orders (sometimes they don’t go through)
• need to do support…
  • try to take dissatisfied customers off twitter and into email
  • think about what you can offer unhappy customers (e.g. digital goods in lieu)
  • helpscout.net can suck in email
  • can outsource support
• costs:
  • accountant: £70
  • xero: £19
  • telephone: £10
  • shopify: £19
  • payment gateway: £19
  • merchant account: £25
  • fetch app: £6
  • support: £100
  • based on 4 hours of accounting & support / month
• projects will always take longer than you think
  • impacts the finances

Start small, think big

Lee Armstrong, @lesmond, lee@pinkfroot.com

Video available on besquare.me

• shipfinder - first app
• planefinder - most successful
• inspired by Google, facebook, twitter
  • started thinking big from the start
• planefinder started with coverage of the south of the UK
  • sold app across world and started getting a few emails back saying “don’t you know Poland exists?”
  • started planning for bigger
• now cover most of world apart from China & Africa
  • have 400-500 radio receivers across the world and splice that data with other databases
  • all receivers are land-based: ships have range of about 50 miles
• when initial small hosting plan started creaking had to decide to self-host or cloud?
  • ran a comparison recently, found that it would cost $2000/mth more using AWS than using at the moment
  • but have internal skills to do server management
• currently have 32 servers but are flexible
• need to be able to scale up (and down)
  • pinkfroot turn machines off when scaling down
  • doesn’t save capex of rack space, but saves power
• user reviews…
  • bonkers reviews — ignore them
  • but pay attention to common themes
  • take time to spend time on customer support
  • takes around 30 minutes to turn around an angry customer
• built in social sharing into app
  • pick a flight and share it - shares web link + image
• built up community of app users
  • really valuable when lost photos of individual planes
  • managed to get users build up their own photos in the app (credited to users)
• product releases - little and often really helps
  • big release with loads of new features will miss out most features in reviews
  • what’s new notes in store are the one chance to communicate with users
  • make it chatty, make it friendly
• building up a good brand
  • working with Eddie Stobart to make an Eddie spotter app
• have apps for iOS, Android, Windows Phone
  • spend a lot of time writing native apps
  • make savings on back-end — they all talk JSON
  • Android is 10% of iOS sales
  • Windows Mobile is 1% of iOS sales
  • doing it for brand exercise
  • going through improving other platform apps

So you have an app idea?

Dave Addey, Agant, @daveaddey

Video available on besquare.me

• 2008 Dave was an web developer in a spare bedroom office
• now runs a company with 7 employees
• a good idea for an app
  • is it a good idea?
  • is it a good idea for an app?
  • how do you go about making it?
• example: late night bars in London
  • cost low four figures to make
  • 3 months of preparation time for database
  • sold 2000 copies @ £3.99 (or £2.40 after Apple & VAT) — didn’t even break even…

is it a good idea?

• measuring good app market:
  • universal - niche
  • international - local
  • lasting - ephemeral
• UK Train Times launched in 2009 when the app store was smaller
  • local - UK not worldwide
  • lasting
  • fairly universal
• Malcolm Tucker app
  • when you open the app there’s one new voicemail waiting for you
  • when you listen to the voicemail it starts a 4 day process with incoming emails & voicemails as Malcolm Tucker tries to find his phone
  • timely
  • fairly niche
  • fairly local
  • so covered costs but not much more
  • but led to a lot of other interesting projects
• does the app have a long tail?
  • lasting appeal
• does it scratch your own itch?
• should have some kind of hook
  • something that’s not been done before
  • something to show off to user’s friends

… for an app?

• when potential clients say “I want an app”, it’s not always true — Dave talks 50% of clients out of
• dead time (5-10 mins)
  • e.g. supermarket line
  • used for QI app
  • book-style interface had larger books with longer content
• we know where you live
  • trip advisor offline city guides
  • nosey parker
  • rightmove app
  • e.g. next train home in UK Train Times
    • one button to home station from around here
• the app that’s always there
  • guitar toolkit
  • imdb: “what was she in?”
  • british red cross first aid app — everyone should download this now!
• ongoing (everyday) use
  • opposite of throwaway app
  • people rely on them
  • UK Train Times
    • get more sales through word of mouth than any other means
    • can still charge £4.99
    • has sold 300,000 copies throughout the UK
    • but losing National Rail icon caused a massive drop in sales
  • twitter clients
  • TuneIn Radio
  • clipboard management apps

how to go about making it?

• lots of platforms to cover
• one approach is PhoneGap, hybrid app builder
• but problem: e.g. featured app Wikipedia
  • doesn’t work in the same way as native apps
  • form controls are different
  • search is not the same for either platform
• @daveaddey’s maxim: “develop once for every device: you get a rubbish app for every device”
• have seen big brands develop PhoneGap apps and then pull them after a month
• if you spend ages fine-tuning your HTML to behave like a native app, then you might as well spend that time writing native
• … but the rule is different for games
  • you can build using cross-platform games engines, e.g. Unity, Marmalade
  • the interface is not specific to the device but specific to the game
• it’s all about the implementation
  • sharing profits based on an initial idea doesn’t make sense…
  • it’s all the little ideas throughout development
• Derek Sivers - cdbaby
  • ideas are worth nothing unless executed
  • they are multipliers
  • http://j.mp/ideaMultiplier
• Sergey Brin: “coming up with an idea is the least important part of creating something great… the execution and the delivery are what’s key” (via The Guardian)
• PhoneGap can be useful for a quick prototype to guage response
• apps can and should make use of HTML5 where appropriate
  • e.g. Malcolm Tucker emails, credits pages
  • QI app content — but displayed using CoreText not a web view
• hybrid approach
  • suggest creating a native app for one platform
  • a mobile web app for the rest
  • choice of one native platform is up to target market
  • use experience of first native to decide next native platform
• don’t muck with user expectations
  • native apps are expected to have native performance & behaviour
  • web sites have different expectations
  • but don’t try and make your mobile web site appear like a native app!
• pricing:
  • getting high value apps going
  • e.g. launching £10 app at £5.99
  • 69p for a UK only app is not going to break even
  • Agant don’t do 69p apps…
• bandwidth, speed, etc
  • saw more of a change between capped & unlimited than for improvements in speed
• biggest failing in App Store is lack of paid upgrades
  • adding new functionality is about finding additional users by re-promotion
  • Agant avoiding freemium because eeurgh :-)
  • but freemium seems to be a side effect of the lack of a paid upgrade option

10 top tips

1. project the risk of everything you do: best and worse case predictions
   • app should have a business plan
2. keep project budget realistic
   • don’t be tempted to spend a fortune
3. it’s important that all partners have a vested financial involvement
   • don’t take on apps for a content provider where they have no risk
4. talk about your idea - it will lead to better ideas
5. value Apple promotions
   • Malcolm Tucker was not promoted due to sweary language
   • QI app did get promoted - massive difference
6. best way to get Apple promotion is to make Apple devices look good
7. create a video that tells people what your app does
   • gives an equivalent to your app that people can share
8. keep updating your app - and give Apple reasons to promote it in each case
   • if you add big content, Apple will treat it as a new app
9. keep it simple and focussed
10. sweat the details
    • “the best way to market your app, is just to build a great app”

Content & tone

Robert Mills, Studio Manager at Bluegg, @RobertMills

Video available on besquare.me

• creating, managing & using content
• need an individual responsible for content
• content first otherwise design won’t fit…
  • see @rellyab, @halvorson
• used slickplan to plan site
  • signed off site map first
  • then got client to provide all content
  • client had to really think about what she was saying
  • she had to think about the whole site up front
• having all content ready means that organising translations is easier
• using content
  • what are you saying and who to?
• managing content
  • can use Google Docs, Dropbox, etc
  • or GatherContent
• doesn’t end after launch
  • need to review & refine
  • audit & strategy
  • ensure consistent & authentic
• auditing content for mobile
  • prioritise content over navigation
  • can prioritise content using traffic lights
  • need to check end use: ask why content is important

Working with Muppets

Ollie Wells, Sequence, @olliewells

• Sequence focus mainly on mobile web sites
• research — use analytics
• stakeholders (esp HIPPOs) can cause problems
  • Blackberry v5 is a pain in the butt
  • can use analytics to persuade them that their use case is not common
• useful functional spec wording (plain English, without version numbers):
  • The website will be built to perform at its best in the most common of modern browsers
  • Bugs that stop the side being usable will be fixed in the latest versions of the above browsers, as well as in 1 older version
  • Any bugs that we find in browsers more than 1 older version of the most common browsers will be looked at on an individual basis. This includes bugs that affect functionality as well as design.
• don’t oversimplify the mobile web site
  • ensure the functionality is still there
  • don’t remove functionality just cos your on mobile
• doing information architecture using sketches on paper
  • good example {picture}
• do prototypes on device
  • click from screen to screen
• frameworks
  • jquery mobile useful for quick prototypes
  • for prototypes, use sass, haml, coffescript and middleman
  • for production, use Mixture, gridset, twitter bootstrap
• Muppets web site for movie
  • all about characters
  • desktop is animation based
  • mobile is much simplified - same content, but static images
  • tablet is same layout as desktop but no animation
• device testing…
  • bluegg looking to open a device lab
  • choose your devices carefully - you can’t support everything
• do double res images for iconography, but not for photography
  • most users wouldn’t see the difference for photos
  • also CSS3 web fonts are useful for iconography

Taking content abroad

Rob Lo Bue, applingua, @roblobue

Video available on besquare.me

• imagine that you’re a french speaking user and you download an app, but it’s in english
  • bad initial impression…
• get your English right
  • get someone else to read it and answer questions
  • check it’s easy to comprehend
• avoid idioms - they don’t translate
• make your units use worldwide standards
  • e.g. include dollars as well as sterling, km as well as miles
  • always include timezone for event times!
• use a clear font for writing
• icons save translation costs!
• support international sharing
  • e.g. qzone (QQ), badoo
• if you have the budget and time, then look at translations
  • get users to translate!
  • but get another user to check
  • can use Google Translate for checking translation (don’t use Google Translate for actual translation!)
• choose languages carefully
  • e.g. most iPhone users in India are English speakers and use their iPhone in English… less ROI on a Hindi translation
• international compatibility

What’s holding the mobile web back, and what are Facebook doing about it?

Simon Cross, @sicross, si@fb.com

Video available on besquare.me

• worked at facebook for about 2.5 years now - makes him one of the old-timers
• digging in to Zuck’s quote from techcrunch disrupt in Sept 2012
  • faceweb v4 built from 2010: webview with extensions
  • at that time, facebook was a web company
  • update at will, one m-web codebase
• reach a point where people hated it because:
  • it was slow — slow*er* than their other apps
  • it pretended to be a native app
• took 6 months to fix it
  • because had to retool the whole company
  • had to slow down the release cycle, which felt wrong
  • had to get used to submitting binaries to Apple & Google
• v5 app (more native UI) went from 1.5 stars to 4 stars in 3 weeks
• …and Zuck’s quote continues to say that there are more people using facebook on mobile web than there are on Android and iOS combined
  • 7000 device types accessing every day
  • mobile users growing twice as fast as desktop
  • 126m mobile-only users
• so how to help developers grow mobile web apps?

distribution

• asked developers at PhoneGapDayEU why they were using PhoneGap: response — to be in the App Store (80%)
• in the app store to get distribution, but also because boss said so…
• mobile usage is different from desktop
  • general browsing is less used
  • instead people solve a problem, or fill some time
• facebook integration is no longer click to share
  • now it’s about publishing structured data
  • where, when, who
• e.g. soundcloud defined 5 actions
  • if you do any of these actions on any of their apps, it publishes that to facebook (if opted in)
  • then comes back as news feed either in app or in facebook app
  • news feed in facebook launches app directly — or else takes you directly to the app store to install it
• e.g. SongPop grew 9.7m users mainly through facebook sharing
• last 30 days, facebook sent users to native app stores 180m times
• also facebook has App Center for mobile web app
  • 170m monthly users
  • social recommendations
• last 30 days facebook sent users to mobile websites ~7m times

performance

• no visual difference from v4 to v5 except speed
  • but got 2x engagement
• Moore’s law still applies to mobile
  • at least to newly released devices
  • due to upgrades & contracts, the actual speed of increase is slightly slower…
• facebook is a founding partner of the W3C coremob community group
  • one of the first priorities is fixing appcache
• also developed ringmark: http://rng.io
  • Ring 0: what we have now
  • Ring 1: what we need to run 8 of the top 10 native Android & iOS apps
  • Ring 2: what we need to build all of the native apps on the mobile web
• 4 months ago, Dolphin Browser Beta for Android succeeded on Ring 1
• browserscope is now tracking ringmark over time

monetisation

• display ads?
  • on mobile? really?
  • they suck - both for size and for intrusion
  • BBC have long narrow columns because they need the right column for ads in the US
• credit cards?
  • too hard
  • cannot compete with native
• carrier billing?
  • can integrate via middlemen (bango, boku, zong)
  • facebook mobile payments layer on top of that
  • Ed: but doesn’t work on Wi-Fi

It started with a browser

Matt Gaunt, Developer Advocate, Google TV, @gauntface

• @AliDriver (Future Platforms designer, now freelance) able to do amazing things with HTML5
• latest devices could do it, but performance always an issue
• now looking at Google TV Spotlight
  • app store for TV optimized web apps
  • apps look really great
  • but developer spent two weeks adding a specific animation…
• just think about screens of different sizes
  • see Jason Grigsby’s article {link here}
• users don’t care if it’s a responsive design or separate mobile & desktop sites
• though probably want to have a catch-all site that will be ok for all situations
  • then add native apps or customized web sites as needed

Is your thinking L-shaped?

Kevin Mears, http://mearso.com, @mearso

• big CRTs meant you needed L-shaped desks - so could fit CRTs into the corner
• but don’t need them anymore for flatscreen monitors
• requirements change, don’t forget to change your tools…
• “Moses said”: my boss says…
  • difficult to argue with someone who isn’t in the room
• politics means that designers & developers can’t just be artists
  • have to sell the work
  • “Design is a Job”
• mobile use case — apply “app thinking” to a web site (Sarah Parmenter, FOWA)
  • what is the single reason for someone using my app?
  • and who are they?
• universities do have lots of different use cases
  • e.g. glamorgan
  • 100 users concurrent active users
  • 100 sub-sites
  • 100+ editors
• teaching people that need to delete stuff that is no longer relevant
  • Ed: but then it’s important to archive stuff on the web too
• basing templates off twitter bootstrap
  • frameworks tend to make you fit the content to the framework

UI for developers

Amber Weinberg, @amberweinberg

Video available on besquare.me

• specialises in mobile web apps
• did audible mobile web site
• pretty much 99% of design briefs Amber is given only include full-size desktop web site
• forget about mockups
  • just make it responsive
• breakpoints are when your site breaks
  • fix all the breakpoints at different sizes
• don’t fake it - you’re not a native app, so don’t pretend to be one
• put content where people can reach it
  • Apple have guidelines showing how people hold iOS devices
• show what’s important
  • e.g. boston globe
  • navigation gets simpler
• use columns
  • can move to less columns before switching to single column
  • compare scroll time with content size
• give extra spacing
  • make sure the text doesn’t hit the edge of the screen
• menus are crucial
  • if there are buttons in the header you may want to keep the menu drop-down and a separate action
  • can also have menus at bottom of page and a jump to bottom link at the top
• choose words or icons, but not both
• reduce images
  • responsive images not yet possible
  • try to use less images and more CSS
• retina-smetina
  • most of the time, users won’t even notice…
  • is it worth the bandwidth?
• buttons
  • read apple’s button guidelines
  • make important buttons bigger, 100% width
  • encourages people to press them!
• hover effects
  • make it clear that hoverable items are interactive
• don’t assume you know what your users are doing
  • but make it easy
• make font sizes appropriate
  • not too big
• don’t disable zooming
  • it’s an accessibility thing
• use sliders - with gestures
  • http://www.woothemes.com/flexslider/
• don’t forget your bookmarklet icon

We, Human

Andrew Spooner, Creative Technologist, Microsoft, @andspo

• works in developer platform evangelism team
• get tech about a year or two before it hits the public
• why do we connect things?
• vannevar bush & the memex…
• internet fridge…
• toaster telling me that the robo-vacuum has picked up the dog being sick behind the sofa
• NEST gives feedback on temperature changes: it will be 21°C in 15 minutes
• in 2008, the number of things connected to the internet exceeded the population of Earth
• latest John Deere cotton picker RFID tags each cotton bale
• microsoft project emporia
  • personalised news editor based on articles that you say you like or don’t like
• kinect
  • daughter thinks kinectimals is a film that she stars in
  • shadow puppet control
  • making people invisible (at least on TV)
  • putting a kinect on a quadrocopter
  • trolley that follows someone on a wheelchair
  • face detection and recognition…
• use with caution
  • what are the standard gestures?
  • cancel?
  • don’t turn up the volume control by whirling your arm round and round
• human capacity is not accelerating like our tools…
• minimise complexity, increase consistency
• design style: http://design.windows.com
  • pride in craftmanship — sweat the pixels
  • fast & fluid — motion & animation
    • custom controls need a lot of extra work
    • we have movement in nature, we expect things to move in the same way on digital screens
    • animation with a purpose
  • authentically digital
    • use sensors
    • iconography can represent digital realm
  • do more with less — get rid of UI chrome
    • make the content the interaction
  • win as one
    • small pieces loosely joined
• summary:
  • contextual & social UX is an expectation
  • understand the human - keep it that way

Design Systems

Laura Kalbag, @laurakalbag

Video available on besquare.me

• moving to responsive design
• but still designing at fixed widths
• shouldn’t be thinking in static
• thinking about devices, not content; deliverables, not process
  • thinking about what they give to the client
• design systems
  • typography
  • layout
  • shape & form
  • colours
• what are you going to keep the same across different viewports, and what will change?
• content is always the same
• for design, might want to start with typography
• then move on to base unit
  • based on width/height of ad unit?
  • used for grids, line height
  • makes site feel consistent across changes
• grid can’t stay the same, but try to keep consistency
  • 6 -> 3 -> 1
  • or 4 -> 2
• shape and form includes textures & illustration style
• colour can be kept the same most easily
• design in the browser
  • brilliant idea
  • can’t do it though…
• tools:
  • share design ideas through style tiles
  • styleguides
  • http://pea.rs
• clients want to know what it looks like on different devices
  • they’re snapshots, not mockups
  • if they like the style tiles, then start prototyping in the browser
• don’t base breakpoints on device widths — should be based on content
  • e.g. videos, images, headings
• “if you’re not ashamed of what you did 3-6 months ago, you’re probably not keeping up”
• another app to try is typecast

a happy grain of sand

Aral Balkan, @aral

Video available on besquare.me

• think about how the whole system works together
• an experience is only as strong as its weakest link
• as a designer, try to remain naive
• washing machine:
  • designers think they’re building a machine that washes clothes
  • users actually want a machine that cleans clothes
  • don’t want or need to know the internals of how or why clothes are washed in different ways
• superman effect:
  • makes the technology disappear
  • and the interaction appear like magic
  • Ed: shouldn’t this be the A. C. Clarke effect…?
• interaction design is about dealing with the loss of a human from an interaction
  • replacing the human with a machine is hard
  • but it’s really important
• focus
  • great design is a symptom of a design-led organisation or organisational structure
  • antoine de st. exupéry: “Perfection is attained, not when no more can be added, but when no more can be removed.”
  • design is not democratic
  • you have to make sacrifices
  • in this day & age, great design is the business plan
• design > test > develop > test > design …
  • keep iterating
  • and don’t forget the vision
  • the user testing needs to be filtered through the vision
  • Ed: e.g. Apple does less user testing as they know that asking people doesn’t always give the right answer
• user empathy:
  • indeterminate spinner isn’t enough — need to show empathy when waiting
• web vs native: http://thelink.is/webvsnative