Summary of Breaking Development Conference
My poor little brain is still trying to recover from the Breaking Development Conference (#bdconf), where many of the big names in mobile web crammed it full of statistics, theories and practical experience.
First up was Peter Paul Koch, who I'd seen the previous week at a Bay Area Mobile meetup at PayPal, and who had dinner with most of the ITS Mobile Aware Web project team beforehand. PPK gave a slightly different presentation at #bdconf, with less focus on the browser stats (which were amply covered by other speakers), and more on his ideas about where mobile is going: that, in the third world at least, web apps will rule, and they'll be free, and freely shared across devices using Bluetooth. The apps will access JSON data over SMS, use images to work around illiteracy, and use carrier billing and pre-paid SIM cards to charge for data. He also mentioned that Kenya has a higher percentage of people using mobile payments (via M-PESA) than any other.
Stephanie Reiger followed, with Beyond the mobile web a presentation about mobile context (or the lack thereof) . While only 25% of people in the US only use mobile devices to access the web, in Egypt it's 70%, and by 2015, over half the web access worldwide will be via mobile devices. People want the same content on mobile and desktop, because many switch back and forth between them (59% of users have viewed a site on their phone, then followed up on their desktop; 34% have gone from desktop to phone).
Response time is important on the mobile web; Google classifies mobile users into 3 categories:
repetitive now (doing a quick task over and over, like cleaning up email)
bored now (and looking for something quick to kill time)
urgent now (and in need of information, such as running late and needing to check which gate / platform the plane / train is leaving from).
Stephanie also advised using metrics to decide which links to feature first on your mobile site (Mind reading is no way to base fundamental content decisions), making sure your site is accessible, and providing ways for users to customize your site for their benefit (example - click on Menu). Stephanie was the first person I've heard talking about Content First, and bemoaning the lack of content management in Content Management Systems (CMSes mostly deal with everything around the content, but treat the content as a set of immutable blobs).
Next up was Brian Leroux, one of the PhoneGap developers from Nitobi. He talked about frameworks, and how you don't need them to build mobile web apps (and when you do use them, sites start looking the same... he showed two corporate sites: the desktop versions were very different, but the mobile versions used the same framework, and looked very similar). Brian also discussed debugging mobile web apps, remotely using tools like Weinre and JSConsole, and in a desktop browser using WebKit nightly builds and thumbs.js to emulate a touch interface. Finally, he touched on some of the practical limitations, like Local Storage only being usable for about 2MB across browsers.
After lunch, Brian Fling talked about what the (mobile) web can learn from mobile (apps). Apple has taught users to appreciate app design, so good design is important for web apps to be successful. Mobile development is really hard work, because of the number of different platforms, and even on the web side, not all mobile WebKit browsers are the same (PPK has done a bunch of research on the differences). Adding more devices increases the cost of mobile development exponentially, especially on native apps. Mobile web development can be harder than native app development. Developing for mobile web is about 25% cheaper than native, but many clients, even when offered a substantial discount, insist on having native apps that can be made available from the various app stores. The biggest problem, however, is not the client - it's the unstructured, or poorly structured data that we're trying to display. Brian also talked about the W3C CSS Flexible Box Layout Module, and how when web designers use a grid layout, they typically only use vertical units, but in mobile design, we must use horizontal units as well.
James Pearce, from Sencha, talked about "Building Tomorrow's Web With Today's Tools": a perfect storm of web capable devices (iOS, Android, etc) and emerging standards (HTML5, WebGL) is leading to web changing the way mobile devices are used, and mobile devices changing the way the web is used. In many cases, we're moving from a Document request / response model with sedentary users to an application synchronization model with mobile users. (Although there are still many instances where content still fits in the document model, even with mobile users).
James also talked about mobile adaptation - taking existing content and adapting it for mobile devices, whether via presentational adaptation (at the client, via CSS, media queries and/or JavaScript DOM manipulation), prioritizational adaptation (content reordering performed by a proxy (or on the client)), or permutational adaptation (where the server delivers different content to different device types). James had a great slide: Angry Birds for Blackberry.
Jason Grigsby closed out the first day with Native is easy, Web is essential. The way in which CSS media queries have been promoted for mobile hides tough problems and gives developers a false promise of a simple solution for designing for multiple screens. Native is easier, because it's
easier to sell (people get the app store model)
easier to design for (since you're targeting fewer devices)
easier to test (since you're targeting fewer devices)
However, email, Facebook, Twitter and search results all use web links, not app links, so you still need a web site, and most organizations can't afford to target all devices with native apps. The biggest problem is that our internal systems often hold us back, because they were never intended to be web based, or aren't easily extended to deal with multiple layouts. In many cases, native app developers get to start from a blank slate.
Jason then discussed speed, and how web apps have become obese (since 2003, average web page size has tripled, and the average number of objects per page has doubled; the increases since 1995 are 22x and 21x respectively). A recent Gomez study determined that 17% of users will not wait 5 seconds for a site to load. Jason stated that while it's agreed to be a good idea, Mobile First Responsive Web Design is difficult.
Jason followed up on Stephanie's comments about CMSes - "they're the mainframes of the mobile web". New platforms need to support integrated image resizing, video conversion and resizing, separation of content from markup so content can be used in native apps, prioritization of content based on context, full-featured APIs and new ways to enable content editors. Jason suggest that no mater how we approach these problems, we have a lot of infrastructure to build - but all problems are opportunities in disguise.
Jason also discussed testing, using your town's local mobile testing lab (aka... carrier stores), or getting together with others in your community to create a shared mobile test lab.
I'd also seen Luke Wrobleski's Mobile First talk about a month ago, at another Bay Area Mobile meetup. Luke is the proponent of the Mobile First strategy - that by designing first for the constraints of a mobile device (small screen, limited bandwidth, high latency, distracted user, fat fingers using a touch interface), you can make a much better desktop experience too. He shows the difference between Southwest's mobile and desktop sites; the first is easy to navigate, while the latter is cluttered with ads and links. Luke also presented some interesting stats, including:
82% of mobile web use occurs at home
waiting in line is another common "location" for mobile use
Most tablet use is between 6pm and 10pm
Jonathan Snook followed with Fake it 'til you make it: creating mobile apps that feel like native apps. 75% of publishers are only targeting iPhone, iPad and Android. If you don't need native device access (and most apps don't), web apps can iterated more quickly than native apps, since there's no app store approval process. Jonathan showed 37 Signal's Chalk web app as an example of what can be done with a mobile web app.
Jonathan also showed how to detect if your web app is running inside the browser, or in "app" mode, and how to add home screen icons and startup images, how to go full screen and deal with the status bar. Jonathan also stated that frameworks are not needed to create mobile web apps, since the mobile browsers being targeted have capable DOM APIs.
He then covered using CSS and CSS animations for the UI, touch vs click events, input fields, and how to get the best performance. He then discussed testing, and, like others had, pointed out that you need native devices to test. Lastly, he mentioned the 3 common frameworks (jQTouch, jQuery Mobile and Sencha), and hybrid approaches to native apps using PhoneGap or Titanium.
Stephen Hay discussed Real World Responsive Design, using structured content, media queries, JavaScript and new CSS3 layout features. Stephen talked about progressive enhancement - include features when needed, don't remove them when not needed - and using fluid grids rather than fixed grids to reduce the number of queries. Lastly he discussed, and gave examples of, the 3 draft layout features in CSS3 - CSS3 Template Layout, CSS3 Flex Box Layout and CSS3 Grid Layout.
Stephen also talked about responsive design going way beyond just fluid grids & media queries for viewports - it also adapts to circumstances.
He made yet another argument against mind reading "on mobile we try to read user's mind - watch out for the 'probably' and 'I think' when talking about user behavior", and encouragement to do usability testing on flexible layouts and responsive designs.
The second to last presentation was by David Kaneda, who gave an overview and demo of building mobile apps with Sencha Touch.
Nate Koechley wrapped up the conference with a session on the taxonomy of touch, and some of the work the YUI team has done on gesture support in web apps.
