Thursday, 15 May 2014

Kidcrafters – a day of talks by parents for parents

This weekend I went to a different kind of conference — not a technology one, but a parenting one (though with some technology involved!).

The conference was Kidcrafters — a day of talks by parents for parents, held at the Royal Institution in London (the same place as the Christmas Lectures).

The whole conference was videoed and is available on YouTube here, but here’s my notes and impressions in the hope that someone finds them useful.

The first speaker ran an exercise that reminded me of a quote from Francis Bacon:

Read not to contradict and confute; nor to believe and take for granted; nor to find talk and discourse; but to weigh and consider. Some books are to be tasted, others to be swallowed, and some few to be chewed and digested: that is, some books are to be read only in parts, others to be read, but not curiously, and some few to be read wholly, and with diligence and attention

The conference felt like a day to weigh and consider — lots of different viewpoints, some contradictory, some provoking, mostly inspiring and all worthy of attention.

For the whole thing to have been organised from scratch in a couple of months is little short of astounding… Congratulations and many thanks to Nick Corston and his team of incredible hard-working volunteers.

Raising Braves: Education for a tricky world

Professor Guy Claxton, Centre for Real-World Learning at the University of Winchester guy.claxton@winchester.ac.uk

  • thinking on your feet - flounder intelligently
  • important both for university & google interviews…
  • how to prepare for this?
  • learn how to flourish when in difficulty
  • John Holt: love learning so well, that they will be able to learn whatever comes up
  • Jean Piaget: intelligence = knowing what to do when you don’t know what to do
  • one of the best ways to happiness: being engaged productively with something challenging and making progress with it
    • being in flow
  • http://icould.com - short presentations on how people found what was interesting for them
  • being venturesome: being willing to try something that you’ll be crap at for a while
  • when you talk to your 4 year old, do you encourage her skepticism? her inquisitiveness?
  • education is everything that we do to help our children to become happiness prone adults
  • school is a cultural norm that is a particular expression of that (and may have been twisted)
  • praise children for their talent, not for their results
  • don’t over-rescue children, especially girls
    • let them struggle and deal with frustration & confusion
  • allow them to be bored — boredom is the engine of imagination
  • have a wonder wall: peppered with their questions and your questions
  • rediscover the conversation about going back to the basics of education

Designing a school around questions and more questions

A question-led curriculum

Paul Phillips, Principal Designate Gladstone School

http://www.gladstoneschool.org

  • setting up a new school
  • how long is a lesson?
    • aiming to have one lesson a day - or maybe one lesson a week
  • “finishing-off homework” is never worth it
    • the children who’ll end up doing the work by themselves are those that most need help
  • each half term will take a big philosophical question and aim to get the children to ask it
  • aiming to use London as a base: get the children to go out into London and bring London into the school
  • “hinge questions” — getting to the point

Design thinking for new learning

Graham Brown-Martin, Ed Labs @GrahamBM

  • industrial revolution: took crafts and scaled them to mass-production
  • got rid of craftsmen and replaced with factory workers
  • industrialisation of education having same effect
  • if you designed a classroom, would it be a room?
  • lots of lenses through which to consider schools

Why I home educated my son for two years

Sarah Eaton @llamacroft

  • we treat children differently from adults
  • adults have options and support
  • took son out of school when he got seriously bullied
    • took about six months to get him to feel better
  • radical unschooling
    • total freedom in whatever he wanted to do
  • Alfie Cohn: Unconditional Parenting
  • he made a web site when he was 8
  • eventually he wanted to go back to school
  • children are more important than the system itself

A digital native’s view of games and gadgets

Dan Tomlinson @dantoml

  • aged 17
  • writes for the Observer
  • was bullied for about 9 years at school
  • found a great set of friends through the internet at aged 8 or 9
  • discovered programming properly about a year after the bullying started
  • we’re undergoing a fundamental shift in the way we interact with the world
  • minecraft gives children a level of freedom and creativity that they don’t get anywhere else

Minecraft – creative or crack?

Simon De Deny, Dad

  • has shameful memories of playing games all night when younger
    • Ed.: why shameful…?
  • so when had kids and said they wouldn’t have a console
  • then neighbours got a playstation with an EyeToy
  • they enjoyed the physical games, but other games came along with it
  • watched with horror as 6 yo got bored with physical games and really into the non-physical games (Sonic, etc)
  • tried one out himself and got a similar adrenaline hit as taking drugs
  • and this was for a six year old…
  • so got rid of the playstation…
  • much later, son now has an xbox
  • now playing minecraft
  • younger son, 10, also joining in
  • felt more relaxed
  • less of an adrenaline hit
  • engaging socially, creating, problem-solving
  • mods - going beyond the game
  • would like to ask the games industry for “other things” that are more like minecraft
  • creative & problem solving rather than just running around shooting things

Teach your kids to code not just consume games

Stef Lewandowski, Makeshift @stef

  • give them a laptop and let them break it…
  • have a hackable computer
  • use the recycling box as construction kit
  • Eden: low-scale of minecraft for younger kids
  • robots: e.g. http://egg-bot.com/
  • start with making web sites first, before coding…?
    • use as a creative & sharing exercise
  • in Scratch look at drawing with the pen while following the mouse

Should you manage your screen time?

I was looking forward to this part of the day, but the presentations didn’t really get into the issue at hand.

The first presenter, who didn’t set limits to screen time at all, seemed to have children who didn’t get zoned out by the screen — and he himself hated computer games…

The second presenter had children under 5 who weren’t getting any social pressure to play on the computer and were probably too young to do so anyway.

Matthew Karas — no limits

  • daughter likes bikes & guitar
  • son’s favourite activity is writing books with pencil
  • they will jump off the computer if given an offer to go and play in the park
  • personally hate computer games
  • information overload is everywhere: even in a forest
  • “taking children seriously foundation”

Kate Jangra — no screen time at all

  • home educate two boys, one four, one two
  • personally believe that children under five don’t need computing
  • need to learn about moving, mud, etc — the real world — before understanding the virtual world
  • played first ever game (sonic the hedgehog) when 17 and didn’t do anything until finished
  • instant gratification isn’t great for development
  • sets up unrealistic expectations
  • indoor vs outdoor debate
  • children need to fall in love with our world first
  • ration yourself too — children are mimics

My situation — where’s the edge?

I have two boys: a four year-old and an eleven year-old — both of whom are like me and can really focus on what they’re doing, but lose the sense of their body when do so. This could be on a movie, a game or even a book (for the older one — the younger one’s not reading yet…)

I work with computers for a living. I really enjoy the creativity and sense of possibilities computers provide, but I also know that I can get lost and lose whole evenings to trawling around on wikipedia…

Through experimenting with different amounts of time on the computer, we have found that our older boy finds it harder to stop and feels more anger when he plays for much longer than an hour at a time. The issue seems to be how separated he becomes from how he’s actually feeling — it doesn’t seem to matter if the game is a high adrenaline adventure or being creative in Minecraft.

What does make a difference is relating to another person or being physically active while he’s playing. We have a Xbox Kinect and he is much more able to talk about stopping and doing something else if he has been jumping around the room while playing. Similarly, if I have been playing the game with him — and actually talking to him while doing so, rather than us playing separately in the same game — then it’s much easier for him to relate to me about non-game activities.

Has anyone else had a similar experience? I know my son is quite frustrated that we limit his time on the computer so much compared to some of his friends, but we haven’t found an alternative that works better for us.

Screentime – a healthy diet?

Dr Omer Moghraby Child Psychiatrist @moghraby

  • very little research on causality
  • sleep is very important
  • different ages need specific amounts
  • more at younger ages
  • sleep latency is also really important — how quickly you get to sleep
  • increased amount of screen time has an effect on sleep latency
  • increased console use does not link to obesity
  • violence leading to action — mostly debunked, but needs to be contextualized
  • what about kids developmental level?
  • arguments and fights around screen time may cause more problems than the screen time itself…

Q&A

  • video game writer:
    • not much research on active screen usage
    • active engagement is better than passive engagement
    • Kate has a list of articles will make available later
  • dominic — code club & code club pro trainer:
    • Tom: how did you stop bully following you online?
    • Answer: easier to filter out online
    • still hurts, but can skip past it
  • parent & doctor:
    • perhaps a gender difference in bullying getting into personal space
    • have to give girls extra support
    • skeletal development & bone health is important
    • already a vitamin D deficiency in the population — children need to get outside in the summer
    • Omer: supervision & balance
    • not much evidence that this generation are that much different
    • Matthew: children have never declined going to the park…
    • it will always get them off the computer
    • Simon: been using geocaching with 10yo as a fun outdoor activity
  • active & passive screen:
    • concerned about losing non-digital creativity
    • children always drawn to screens
    • digital as constrained… (really?)
    • vs constraints being good
    • vs digital not always screens

Understanding and inspiring creativity in kids

Steve Vranakis Google’s Creative Director for the UK @stevevran

  • grew up in Vancouver, Canada
  • spent most of his time outside
  • immigrant parents: wanted him to be a doctor or something else professional, but he was good at drawing
  • lives in Brighton
  • have a 6 yo & 3 yo + another on the way
  • “65% of today’s primary chidren will end up at jobs that haven’t been invented yet”
  • works for Google Creative Lab
  • Science Museum: Web Lab
    • sketchbots - takes a picture of you, then draws it, and shares the video of it drawing you on youtube
    • universal orchestra - playing instruments with people around the world
    • data tracer
    • teleporters - live 360 degree video & audio feed from somewhere, including inside a shark tank…
  • world’s biggest band over the internet
  • Jam with Chrome
    • choose an instrument
    • could invite up to three other people to join you
  • his group launches everything with a video
  • DevArt
    • coding as a new creative discipline
    • three artists curated
    • competition to have fourth person
    • devart young creators: schools invited to visit before public opening in morning
    • get talks & interaction from artists
  • google science fair
    • what you love
    • what you’re good at
    • what you want to change

Imagination is Priceless

Tom Morley, Eco Toy Box & Instant Teamwork

  • here to represent the godparents, mad uncles and artistic aunties
  • adolescence can fail
  • make sure you stay creative
  • the world’s most popular toy is a stick, the second most popular toy is a cardboard box
  • eco toy box has pictures to make cardboard boxes come alive
  • doors, windows, castles, speakers, masks, portholes
  • stick them on boxes to give your imagination a boost
  • black tie, white lie
    • meet on waterloo bridge and pretend we’ve been up all night
    • a way of getting permission and having fun with our children
  • be as creative, as mad, as flamboyant as you can
  • Tom runs drumming & singing sessions in schools
    • link up with a school in Africa to sing the same song

How a community can inspire kids with creativity

Nick Corston, STEAM Dad

  • little house of fairy tales at camp bestival
    • the science of music
  • watch caine’s arcade
  • offer lots of activities
  • children choose what they want to do
  • most popular prize in school auction:
    • 10 yo son offered to run a stop-motion animation workshop for a family
  • Ford contributed half a Goblin electric car kit
  • S.S. Great Britain in Bristol
    • Brunel should be on the curriculum!
  • community, collaboration, co-creation
  • announcing STEAM Co.
  • want other schools to get involved
  • one school thinking of converting the whole top floor of school into a STEAM attic

The value of drawing with your children

Tony De Saulles, Illustrator of Horrible Science

  • creativity at home is an investment in our children’s futures
  • was only boy in 6th form doing art
  • children all over the world laugh at the same things
    • especially poo and wee…
  • How to Draw Horrible Science
  • workshops: get the children to copy me
  • follow simple instructions
  • there’s no right or wrong
  • copying is a good thing
  • drawing with 150 children: they all drew the same thing but all were different

Getting kids making things and doing stuff

Amy Solder, funding creative things at NESTA

  • Mark Hatch: The Maker Movement Manifesto
  • Look out for Fab Lab / Hackspace / Maker Space
  • Make: magazine — mainly for adults, some kids projects too
  • Make Things Do Stuff: projects for kids
    • written by kids for kids
  • printcraft — minecraft server with 3D printing
  • little bits: magnetic electronic circuits

Get your kids animated through animation

Gavin Molloy, Get Smart

Q&A

  • getting artists/authors into schools who are focussing on literacy:
    • Authors Aloud, Speaking of Books
  • revision mind maps
    • make a mess for revising
    • draw it and label it yourself
    • sticks in your mind

Working smart time not part time

Amelia Torode

I just caught the end of this talk…

Amelia is going to be writing a book — and is looking for input on part-time working

Getting inspired by ideas, innovation & ambitino

Nico Macdonald

  • London Transport Museum Depot — in Acton, where all the things that don’t fit in the museum are stored
    • opens once a month
  • Selfridges Festival of Imagination
  • Big Bang Fair at ExCel
  • Technopop London at QE Park
  • finding out:

Bringing stories to life as experiences

Valerie Coward

  • inspired by Philip Pullman’s Grimm Tales for Young and Old
  • Grimm Tales for young and old at Shoreditch Town Hall basement
  • first 6 week season just finished in April
  • did storytelling as parents tell children
  • were originally concerned that younger children would find stories scary
  • but they didn’t mind — as long as the baddies got dealt with in the end, they were happy
  • actors played multiple parts
  • clearness about the story: the characters can be fluid
  • at the end of the guided session, they let the audience wander through the set
  • coming back in bigger venue in November with new stories

Wednesday, 14 May 2014

MomoLondon: Cloud Computing & Mobile

A new venue tonight — up on the 9th floor of Google’s Central St Giles office. They even provided good food for the hungry mobile mondayers…

The evening’s focus was on Cloud Computing and Mobile, and the questions seemed to focus mainly on the cloud with not much discussion about how it related to mobile. The chair, Camille, kept the discussion moving along briskly, but we didn’t really get into any depth on any of the subjects. Maybe the audience could smell the food!

The panel

  • Chair: Camille Mendler @cmendler
    • Principal Analyst at Informa
  • Rob Easton @Cloud_Easton
    • Head of Google Cloud Platform UK & Ireland
    • Eurovision app used App Engine for back-end
  • Dr Janko Mrsic-Flogel
    • CEO of Private Planet — personal cloud
    • 7 out of 10 carriers are providing a personal cloud solution
  • Caroline Van Den Bergh @GoldenGekko
    • Golden Gekko mobile agency
    • 85% of apps we build are based on Google App Engine
  • Jonathan Raper @MadProf

outages & availability

  • JR: best service providers are those that communicate well when things go wrong
    • one provider went down and didn’t tell us anything for an hour

looking forward

  • RE: google datacentres include a new one in Taiwan at 15 hectares
    • green computing
    • Google can provide very low latency
    • enables reaching out to new business areas such as the film industry
  • JR: still talking quite aggregated performance measures
    • can’t ask for X many transactions for Y pounds
    • not that detailed
    • next step may be platform products
  • CVDB: mobile enterprise software saving two days a week
    • managing remote teams
  • JR: sometimes blame is shifted between telcos & cloud
    • would like to have better tracing
  • JMF: Private Planet have a totally green datacentre in Telecity in Holland for T-Mobile

internet of things

  • JR: the problem is trading information
    • automatically discovering different feeds & blending them
    • spend 3 weeks integrating code and 3 months arguing over terms & conditions
  • CVDB: best successes have been smaller ones
  • CM: find my yak in nepal
    • the yak’s don’t talk back — so there’s no privacy issues!
  • RE: getting electricity usage feeds every 10 minutes
  • CVDB: there has been scaremongering around Google capturing data
  • JR: all our data is royalty-free downstream
    • makes it much easier to deal with
  • CM: Copenhagen have bike devices to share traffic information
    • provide individual exercise info
    • but also shared with municipality
  • JR: Waze has lots of complicated terms & conditions
    • data is available but locked up

the next generation

  • CM: has been proved conclusively that 3D gaming improves your cognitive ability
  • JR: …minecraft
  • JR: it’s still a bit like early 2000 — mobile operator walled gardens
    • want to take down the barriers and bring the data silos together
  • CVDB: working with Saga
    • older people have more time, want to delve deeper
    • tablets more popular than mobile phones

data scientists

  • CM: shouldn’t we moving towards everyone manipulating their own data
  • JR: digital literacy is very shallow, especially in highest decision-making tiers

security issue — data protection

  • safe harbour in tatters
  • can’t use the cloud at all if we have any secure data
  • JMF: Private Planet always has data centre in the specific country
    • but are governments the biggest problem? what about the corporates?
  • JR: if you need to do it, in-country encrypted solutions are available
  • RE: sure, there are some workloads that Google can’t take on
    • e.g. we won’t let you audit our data centre
    • so can’t work under FCA regulations
    • over time, some of these regulations are going to change
  • JR: all have to do as much as we can to help the government make the right decisions
  • JR: sometimes the safest place to do something is in the cloud — e.g. running Windows
    • we don’t allow it on any of our machines
    • but it’s great in the cloud!

what if cloud provider company goes bankrupt?

  • JR: escrow
  • JMF: most agreements done via a channel partner — so that partner will continue the service
    • single party relationship is much more complicated
  • RE: cloud business could be bigger than ads for Google
    • SLA penalties are often a percentage of what you pay
    • but if you pay less and less, the SLA means less and less…

is it becoming like supermarket wars?

  • RE: Google reduced prices — and if you use an instance more than 25% per month then get a discount
    • terabyte of storage is $26/month
  • CM: just like a loyalty card…
    • who will be Lidl and who will be Waitrose?

will we still be waiting in several years?

  • JR: overestimate change in the short term and underestimate in the long term — change is stepped
    • sometimes have to wait for the step change in technology or regulation
  • CVDB: business are going to grow up quickly
    • first digital generation CEOs will be around in the next few years

third party dependencies

  • JR: Apple reviews can be capricious
    • if Apple fall out of love with Dropbox, then that could cause a problem for lots of apps
  • JMF: was a huge debate on mobile medical health a while ago
    • then suddenly there was an app that just works
    • and the issues can just disappear
    • gadget-led terms and conditions…?

speed & access?

  • RE: check out server density review
    • blog by someone who reviewed lots of providers and switched to Google
  • CVDB: Golden Gekko mandate that all backends must be on Google App Engine
    • mainly so that clients can scale

new innovations in infrastructure?

  • RE: Google build our own servers
    • apparently they would be the 3rd biggest manufacturers in the world
    • they value new innovation

where is the next growth to make it easier?

  • RE: focused on the developer
  • JMF: If This Then That
    • making cloud development open to the consumer
    • certain mobile operators are understanding this and joining up devices in the home
  • CVDB: finding that parse.com doesn’t suit
    • one size doesn’t quite fit all
    • prefer google’s flexibility

inviting consumers to get more involved

  • CVDB: user testing
    • avoiding ivory tower
    • developed O2 Priority Moments
    • built packaged solutions based on it
    • incentivized behaviour also used in enterprise apps
  • JR: designed a first location bank
    • your own location storage — that you can choose to share
    • (Ed. see also fireeagle)
    • next generation have a different approach to privacy
  • RE: snapchat is a massive google customer
  • audience: teenagers using technology completely differently
    • using snapchat to have a whole conversation
  • RE: snapchat consumes more IT than any banking industry
    • JDI has 10 petabytes on Google cloud
    • consumers of IT will be well away from the enterprise
    • can have failure at a much cheaper cost — can learn more

what financial services are possible in the cloud?

  • RE: restricted by FCA regulations, but other options possible
    • e.g. datasift to search across twitter
    • big challenge to attract IT talent in financial services as there are so many restrictions

skills

  • JR: right now it’s hard to hire — ruby on rails developers are hard to find
    • constraint on development right now
  • CVDB: couldn’t agree more — mobile skills are in short supply

tools for analytics & loyalty/crm

  • looking at how data can be analysed
  • wanting to drive revenue per user
  • wanting to get the right tools in place to complete the feedback loop
  • CVDB: iris solutions company
  • JR: “build it in the cloud, but just don’t tell IT”
  • RE: tableau, BIME, etc. working on top of Google Big Query
    • now a lot cheaper

After the panel discussion

As often happens with Mobile Monday, the discussion after the panel was richer than the panel itself. Some discussion points that came up when I was talking to people afterwards included:

  • How do you balance keeping data on the device and in the cloud, to deal with intermittent network availability?
  • Will the banks get clobbered by more agile personal finance companies that don’t have to worry about so many regulations?
  • Why has it taken Google since 2008 to move from basic App Engine web apps to a full cloud platform?
  • How will Google make more money from Cloud Computing than from Ads? There’s a big market, but the price is dropping…
  • …and on a completely different note, several people were interested in setting up Code Clubs in their local primary schools, but were stretched for time — perhaps they could work together and contribute part-time?

Thursday, 28 November 2013

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
  • 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
  • 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:

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!

Dalek Ling!

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

Just say no to responsive design!

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
  • 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
  • establishing a colour theme
  • 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/
  • 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
  • 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
  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

Welsh Male voice choir
…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.