Cameron Adams - Mobile Web Design ================================= Given this presentation before, felt it got too nitty gritty. This version deals with concepts rather than technical details. How many of you have browsed the web on the mobile device (everyone). How many delighted? (4) Typical. This is for people who are experienced with XHTML and CSS but are a bit unsure about this mobile web thing. Mobile industry has a legacy - 1910 - LArs Magnus Ericsson built a telephone into his wife's car. Had to plug the wires into a telephone poll. Fairly trivial event, it was a toy. Later his company went on to establish infrastructure for cellular systems, paving the way for mobile devices. "Pocket watches provide the closest historical precedent to the remarkable rise of the mobile phone" - used to be a luxury, now most of us have one. Stats on mobile usage. In the UK there are more mobiles than humans. Presents a quandary. Did a reader poll, highly scientific: ~400 participants, 159 unique handsets, 19 manufacturers, 44 countries, 12+ carriers "Designers face a proliferation of capabilities that make the early web look like a playground". The battle around web standards was nothing compared to what we're going through. WML, XHTML, -MP, -Basic, plethora of user agents, inconsistent standards. What is the mobile web? ----------------------- BBC, Yahoo, Fifa, streetmap? Google SMS search? Smart Clients? Something that remains to be discovered? Optimism: more mobiles than PCs - particularly in developing countries More mobiles than landlines phones web usage is continually increasing Context ------- How would I do my portfolio on a mobile? Wrong question - what is contextually relevant on a mobile? Mobile = Mobility Mobility is different to wireless. Mobility is about the whole experience morphing and changing. Completely different device, on a bus on the street. Relevance of context. Design = Communication Bring those together - mobile design is the art of communicating with mobility. Fundamentals ------------ most devices sold today are wap 2.0. XHTML not WML. XHTML-MP (mobile profile) is the official language of WML. Can test it in a desktop browser. What that means is we can take something we're used to, take existing infrastructure and taking components relevant to mobility english360.com/mobile. XHTML and CSS support is highly inconsistent. Used to desktop space, wait until you're in the mobile space. Markup test pages - cameronmoll.com/mobile - can familiarise yourself with the limitations. Look at different devices, you can see it's a mess. Recommend you browse through these pages to see the limitations yourself. Test on target devices, not emulators. Methodology ----------- Method options: 1) do nothing - remain ignorant and hope things get better. Not a horrible method, will support the idea of device independence. Can rely on things like opera mini to reformat on the fly. This method does nothing to address the context of mobility. craigslist is 31k of markup alone. 12 scrolls of content on a mobile device. 2) strip images and styling - rely on implicit hierarchy in HTML to provide structure to mobile device. Still have problems - markup weight is still large, still ignoring context, bloated pages. 3) Handhelp stylesheets - poster child of non-desktop media. One URL, use CSS to hide things and reposition. But biggest drawback is they address primarily aesthetics, not content. 4) develop a mobile specific site / app - need to develop 2 applications not one. Ignoring device independence. W3c doesn't like this approach. Put these on a chart - simple to complex, slower to faster (in terms of user experience), increasing value. Miniaturize or Mobilize? ------------------------ Miniaturize - Repurpose existing content. Example of craigslist.org - 6 primary use cases, 4 relevant to mobility, 2 not. Use case hierarchy, created mockup. Mobilize - content, context, component specific - what if we had something like my.craigslist - capture things i'm interested in and put them in my account, and when I'm out and about I can access those items. Take it one step further - take away desktop, many devices are GPS enabled, take advantage of location based services (LBS). 10 ten listings for where I am on the street. Is that an option? Forces driving the industry --------------------------- J2ME, Java, Ajax, Javascript, Flash Lite, SMS, LBS, RFID, GPS. How will these affect the mobile web now, and in 5 years time? "Mobile device has potential to act as a reporter of data rather than a mere consumer of data". Yahoo's zonetag, take a photo, upload it to flickr, because of the GPS chip it's stored where I was, now I'm reporting data as well as consuming it. Think about "Smart Clients" - application running on the device, only interacts with the web occasionally to pull data down. Maybe we need something that can run on any device and connect only when needed? Proprietary vs: cross platforms UAs? At least 40 UA's, what problems do we run into? What may be solved by cross platform UA's. Big fan of opera mini - runs on most phones, levels the playing field for developers, provides consistency for users with many phones. By far the best UA i've used, fast, breaks up content, etc. What about guidelines and standards? W3c have put together the Mobile Web Initiative - have many manufacturers, have a best practice document, hope to move to CR sometime this month. An uphill battle - not many people happy with the w3c telling them what to do. Sample guidelines: - Keep URIs short - assign acess keys to nav items - use text equivalents - develop for 120px minimum screen width (not 800 like the desktop) Think the w3c is doing a good job in getting community to talk about it. 40 user agents, 160 devices, getting people to develop for that. .mobi ----- a top level domain, approved a couple of years ago, open a couple of weeks ago - set up specifically for mobile web sites - eg Yahoo.mobi. Has two requirements: must use XHTML-MP, and cannot use frames. Russell Beattie, .mobi solves a real problem that people have today and will still have tomorrow. Carlo Longino - "biggest risk is that site owners will buy a .mobi domain, throw up an XHTML-MP site and leave it at that" ideology -------- things that are needed to enthuse users and developers alike - need a mobile web that is desirable, dependable and disciplined. We need an array of thought leaders - need something like the movement for standards on desktop. Need user agent consistency - no way any of us will be enticed to develop for the mobile web without it Mobile device wiki of some sort? tells you what a browser supports? Need this to be a community thing, some kind of collaborative effort. No way we'll have access to all 150 devices, or 300, so we need some resource we can rely on ...and? future lies with all of us in this room.