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.

OverTheAir '09: Fluid Layouting Techniques for Widget Development

Daniel Herzog

Original slides:

Fluid Layouting Techniques - Over The Air 2009

View more documents from danfooo.

My notes…

• There’s one web — “You don’t want .mobi — it wasn’t a big success”
• widgets should be cross-platform
  • should take a small amount of space on the desktop, but be bigger (full screen) on mobile
• Vodafone widget engine is based on Opera 9

Fonts

• use media queries to switch to high dpi mode, e.g.

    @media all and (-o-touch) {
        a {padding: 1em}
    }

  • uses opera-specific -o-touch
• alternative:

    @media all and (min-resolution: 200dpi) {
        body {font-size: 22px}
    }
    .myDiv {margin: 1em;}

Images

• should use them at native resolution, loaded from server…
• if you’re desperate, use image scaling using screen width percentages

UI-Elements

• use dynamic images, or scalable SVG
• SVG works across most browsers, apart from IE (but may change in 2009)
• Google working on SVG Web — uses Flash plugin to render SVG content
  • But if widget engine doesn’t support SVG, it may not support Flash either
• Daniel uses Illustrator to create initial SVG, then uses TextMate to hand edit it…
  • Can also use Inkscape but the UI is horrible

More resolutions…

• Portrait & landscape, docked mode (also in portrait and landscape!)
• Deal with these using window.resizeTo
• Call this initially and when the orientation changes

Future

• We’re in trouble — widget runtimes need to return real dpi/ppi values
• Not possible at the moment since developers assume that 10pt is a certain number of pixels
• Would be nice to have an extra CSS property for the real dpi

And another thing… zooming widgets

• Zooming enlarges pixels — see Opera for an example
• But SVG still scales effectively
• Another example: WidgetCity is a widget version of Sim City!

MomoLondon: Mobile Web & Widgets

This was a great Mobile Monday London. Short, snappy presentations; an exciting and relevant topic with a real buzz going on; announcements that you heard here first; and really useful networking afterwards.

Many thanks to Dan, Alex, Jo & Helen!

GSMA One API

Kevin Smith — Vodafone

Kevin works closely with Dan Applequist.

Aim to produce network enabler APIs across mobile operators — charging, location, messaging, user profile, connection profile. They’re a network-level complement to OMTP BONDI, using a RESTful and lightweight web services system.

Major European & Asian operators all involved.

Have a reference implementation (beta) available at http://oneapi.aepona.com. Go try it out!

OMTP BONDI

Nick Allott — OMTP

I went to the OMTP BONDI codefest back in January (sorry, I ran out of time to blog about it). So I didn’t take many notes on this presentation.

OMTP is an organisation of mobile operators working together (who would have thought!), with manufacturers and system providers joining in the fun. They’re working on defining a javascript API through which a web runtime environment can access and interact with device-specific information.

So there’s a location API (compatible with the W3C spec as it goes), access to calendar and contacts, etc. Crucially, they’re actually building a reference implementation in order to figure out how the API should work. That way they can change their spec as they discover that it doesn’t quite work in real situations. The spec so far looks good — more details and the downloadable SDK at http://bondi.omtp.org.

The only problem is that the reference implementation is built on Pocket Internet Explorer. Great access to device information, but really hard to make a good-looking, functional widget using web standards…

They’ve got one demo widget so far:

• EMCC Gig Guide w/last.fm
  • location
  • cached feeds
  • syncing calendars

And here’s where to find the latest widgets: http://bondi.omtp.org/widget-gallery/

Ikivo Enrich

Samuel Sweet, VP Sales

T-Omnia widget solution launched November 2008 in Korea. Based on Samsung, Windows Mobile & Ikivo Enrich.

• SVG display engine (provided by Ikivo)
• Javascript w/device APIs & AJAX support
• Aiming to support HTML display engine later
• W3C widget spec

“Putting lipstick on a pig” for Windows Mobile!

SK Telecom have had 300% increase in shipments month on month since they’ve launched the new interface.

Importantly, the W3C Widget spec now allows SVG as an alternate rendering option for widgets. This means that the Ikivo widget engine can be W3C-compatible.

Announcement tonight: Ikivo will be supporting BONDI

Firefox Mobile

Christian Sejersen

Currently called Fennec but will be called Firefox when it gets released. It runs on the same codebase.

Some countries currently have more than 50% Firefox usage. Mozilla are starting to wonder what they should do when they get a monopoly…

Fennec for Windows Mobile coming out soon (April?); Symbian version started not so long ago.

Shows a demo of running Fennec on Nokia N810 (Maemo) — Fennec Alpha Walkthrough on Vimeo

Browser controls are off the edge of the page to the left and right. Just scroll that way to see them.

Firefox Addons can be made compatible with Fennec. 20 or 30 Addons are available after a month, with no promotion from Mozilla.

There is full API compatibility between mobile and desktop, so once they add location & camera access to mobile, these APIs are available from the desktop build too.

My thoughts

As per Bruce Lawson’s talk at the Betavine birthday party, the browser writers don’t see the difference between mobile and desktop. I agree with them that the APIs and browser can be very similar, but I still think there’s a difference in how you would design a service.

A mobile service needs to take one particular function and “polish the hell out of it” (as goes the recommendation for iPhone app design). A desktop web app still needs to be polished, but has more leeway in its design. There’s also the interaction styles: a mouse is not a finger is not a d-pad, and you need to make the interface appropriate for each of these styles. Sure some of this can be done with stylesheets, but when you’ve got less screen space you want to deprioritise certain content off the screen completely.

Panel session

Chaired by Dan Appelquist

• Francois Daoust (W3C)
• Graham Thomas (T-Mobile)
  • 8 years at Nokia on UI & UX
  • Also bringing games into market (Club Nokia)
  • Been at T-Mobile for 7 years, now Head of Multimedia
  • T-Mobile very active in mobile internet — have iPhone and G1
• Christian Sejersen (Mozilla)
• Kevin Smith (Vodafone)
• Brad Sipes (CTO, Ikivo)
• Nick Allott (OMTP)

T-Mobile widget roadmap — want to have develop once, run across all handsets. Enabling the long tail…

SVG helps to bridge the gap between different screen sizes — since scalable. But Brad sees it more to “make things fun”.

Q: How does BONDI fit in with other web runtime initiatives, like Adobe AIR or Mozilla Prism?

• CS: Prism currently in labs (local look & feel for web-based content). But don’t really have anything to say as Mozilla…
• NA: OMTP did due diligence and found 25 different ways of doing the same thing. Operators decided on a common standard and then broke it in 25 different ways…
• NA: 3 parts to standardisation
  1. APIs
  2. Display engine
  3. Security (one of the big problems for Java on mobile — see signed apps…)

Q: Sounds like lots of separate bits. Do they fit together?

• NA: Yes. At least all the people on this panel do… OMTP working with W3C. SVG long-established as rendering tech. OMTP location API is W3C compatible, and could use One API as implementation by getting location from http query.

Q: How do I make money out of writing a widget?

• GT: Key benefit of widgets — start using internet more, like iPhone & G1.
• KS: Earn £20K from Voda competition…?
• FD: sell the widget like the iPhone app store.

One advantage of interoperable widgets is that you can buy your widget from anywhere. You can have your own payment mechanism

• DA: Can we build interoperable application stores? Micropayments never really went anywhere with the web. Will we get there with widgets?
• FD: There were some standards about micropayments 10-15 years ago, but they werer never finished… Maybe it’s time to dust them off and complete them.

Q: What benefits do I get from a widget that I don’t get from HTML5? (Hugo from Google)

• FD: Widgets give you more context, but it’s just a wrapper.
• CS: A lot of the widget issues have come up because of security issues. But in essence it’s the same thing that needs to be solved across mobile and desktop.
• BS: Widgets give you local application feel that HTML5 isn’t aiming for initially. But HTML5 will converge in the longer term.
• NA: Some of the widget stuff has been created as a sticking plaster to avoid 15-20 different solutions while HTML5 gets itself ready.
• DA: BONDI allows HTML5 over https to take advantage of secured APIs.

Q: My question: widgets on the standby screen? What about battery life?

• GT: want them on the idle screen, with notification etc. Want eBay etc event-based dynamic.
• CS: Palm Pre will be fully web-based
• BS: T-Omnia has widget framework attached to button on the side of the phone. Can have lightweight widget framework on low-level phones that aren’t capable of running full HTML5 browser.
• NA: battery notification & event APIs planned for BONDI 1.1

Q: What sort of security model?

• NA: BONDI — consumer delegates trust to an entity. Doesn’t work to prompt the user for everything. Instead they should be able to trust Norton, Google, T-Mobile, etc.
• DA: using XML digital certificates within the widget

Q: If you had one widget, what would it be and how would you interact?

• BS: weather. would beep at me if thunderstorm coming in.
• KS: widget that tells me if my 8 year old daughter has turned off her light…
• CS: can I have a browser instead?
• FD: tells me which way I should vote on W3C…
• GT: M25 road traffic info
• NA: a widget that syncs my contacts
• DA: location-based ski conditions. What’s important is that the bar is lowered. I want my mom to write widgets!

Q: Have Palm come up with a way to make webapps feel like native apps? (Hugo, Google)

• CS: Mozilla often have discussions about how to make the browser look native. But people don’t care. They want Facebook to look like Facebook, not a T-Mobile application.

Q: What do operators feel about making widgets more available? (David Stone)

• GH: Shortly launching service with idle screen. Demo on idle screen. Gallery also available.

OverTheAir: WICD -- Daniel Herzog (Vodafone)

Two profiles: WICD Full & WICD Mobile. Full gives you SVG full and full XHTML, CSS & EcmaScript.

Mobile requires EcmaScript 3rd edition Compact Mobile (no eval) as well as CSS & XHTML

Browsers that support it:

• Opera 9.5 beta 1
• Safari 3.1
• Firefox 3 beta 5 (though not officially, yet)

Big feature in WICD SVG is rightsizing

• if the browser just defines the width as a percentage
• go ask the SVG for its aspect ratio
• assign the height appropriately

WICD also includes media queries. These include things such as dpi which can be very useful on smaller devices. Opera will update media queries in real-time when resizing the browser window :-)

Can interact with SVG and XHTML — e.g. hover over a link and get the SVG to respond immediately; also create SVG animated circular radius over a clicked point on a google map.

SVG has Javascript within it so can encapsulate functions within. Can then address each object’s methods from javascript in the XHTML page.

SVG:

Object.prototype.myAnim = new animatorClass();

XHTML Javascript:

document.objectOfTypeMyAnim.animatorClassMethod(params)

At the moment, designers have Illustrator to create static images. Animations are harder to create. Debugging is now easier using Firebug. There’s another tool called Inkscape available for Linux, Mac & Windows. It’s getting better all the time.

Future of Mobile: Beyond WAP: Advance Browsing, Mobile Ajax, and the future of the Web

by Daniel Appelquist (Vodafone)

• Voda are pushing forward on xHTML Reunification
  • XHTML Basic (W3C) vs XHTML-MP (Open Mobile Alliance, ex-WAP Forum)
• Participating in W3C Ubiquitous Web working group
• "In 5 years time, there will be only one web, and it will be the mobile web"
• W3C has launched mobileOK from today
  • Tests plus open source java reference implementation for local checking

• Mobile AJAX Workshop from Sep 2007: http://www.w3.org/2007/06/mobile-ajax/report.html

• DOJO has refactored itself and shrunk down to target iPhone and Nokia S60 browser
  • A lot of the bulk in DOJO was dealing with IE6, taking it out made the lib much smaller
• Device access vs. security
• SVG tiny 1.2 includes AJAX capabilities
  • e.g. Vodafone Germany - Bundesliga SVGt app running in Ikivo player
  • will move to be integrated within the browser
• WICD - Web Integration Compound Document

  • Mandates XmlHttpRequest

  • Details http://www.w3.org/2004/CDF/