by Josh Clark
Touchscreens are everywhere now, even the desktop, and this workshop tells you what you need to know to make the most of them. Fingers and thumbs turn desktop design conventions on their head, with the ergonomics of handheld devices demanding entirely new design patterns for both web and apps. Handheld touchscreen design introduces ergonomic concerns that are new to many digital designers; it’s no longer just how your pixels look but also how they feel. At the same time, touch gestures have the opportunity to sweep away away buttons, menus and windows from mobile devices, but gesture design takes care and education. Find out how to do it the right way. This workshop takes a hands-on approach (ducks) to touchscreen design with practical guidelines, rich examples, exercises, and a bunch of new rules that bust the "settled" conventions of the desktop.
This workshop will give detailed information about the mobile browser ecosystem in 2013 and how to create successful mobile applications for the browser and for native and fullscreen apps, such as PhoneGap apps for store distribution, Chrome Apps and Firefox Open webapps.
We will cover
The workshop will include labs that can be executed directly on mobile phones easily based on an online coding tool. Labs will include:
Besides testing on every attendee phone, we will have on stage several devices that will be used to make live tests, such as a BlackBerry 10, Firefox OS, Internet Explorer 10, Android and iOS.
by Dave Shea
Mobile design is necessarily about embracing constraints, but sometimes we go too far. We strip down our content to a bare minimum in pursuit of misguided ideals about mobile context. We provide 'useful' mobile UI components that immediately proceed to get in a user's way. We make improper assumptions about a user's environment. Let's place dozens of these mobile design anti-patterns under the microscope and talk about why they don't work, and what we should be doing instead.
by Stephen Hay
Deep in the dank, dark bowels of traditional web design workflow, HTML and CSS have been held prisoner for years by the Designers. Cold, exhausted, and terrified for the next deadline, they remained shackled to the very end of the web design process along with their developers. Until those dreaded moments when the large metal door opened and the next Photoshop comp walked in and forced them to create his likeness with pixel perfection, again and again.
But then the devices came.
The devices began to infiltrate the world of the Designers, complicating their workflows and adding frustration to their projects. Some Designers saw that this was not the way and called themselves Responsive. These brave rebels set out to free HTML and CSS, and team up with them to create an effective web design tool: the web-based mockup.
Browsing on a game console is a strikingly different experience to browsing on a desktop or mobile device. Consoles teach us about a whole new level of inputs including voice, gesture and d-pad. They also prepare us for challenges such as designing for screens that could be inches or feet away from the user.
2012 brought us the Wii U, a second screen console with a surprisingly decent browser, and IE9 for the Xbox. 2013 promises a range of new Android consoles, and the PlayStation 4, which features a "share to the web" button on its controller.
Now that all modern consoles have a browser, and one in five 16-24 year olds already use one to visit websites, it's a context we need to think more seriously about.
This session will cover the current state of the console browser market, where it's going in the near future, and how these devices will shape how we design and build websites.
Life used to be easy. We created sites to work on a few browsers and when we had time we asked the new guy to build a half baked mobile version. Then the device explosion ruined our cozy happy dev life.
My talk will discuss how BBC News met this challenge at scale.
by Remy Sharp
I've always been a big believer in using jQuery as a shortcut route to adding interactivity to web sites. You don't need to know the intricacies of browsers bugs around the DOM. But now you've got that essential jQuery knowledge, what's next? How do you live without jQuery? Are we even there yet? And what about your colleagues and peers - how do they progress with you?
If you've been in the mobile field for a while, you're sick of context debates. Sure, they all start innocently, but soon enough they collapse into a sad tangle of metaphysics ("But what IS context anyway?"), lazy stereotypes, and implausible scenarios involving public transport. So let's try a fresh approach. Dictionary definitions and "it depends" generalizations are hereby banned. Let's talk details. We'll discuss whether context even matters in modern web design, ways to find out how people will use your product, design principles for different situations, and why we've been looking at the whole thing upside-down anyway.
Several hacks are available for mobile web development that are unknown to most web developers. This talk will go over 15 of the most interesting unknown hacks for mobile web developers.
More than 15 hacks that will surprise you on mobile browsers, such as IE10, Safari on iOS and Chrome for Android. Quickly, we will go though the problem, the code and the live demo of the hack working on a real device.
Hacks list include:
by Josh Clark
Everyday technology is hurtling into the realm of science fiction, even magic, with new devices that are as surprising and delightful as they are useful. Developers and designers are running hard to keep up with this warp-speed pace of tech innovation, and for now, mobile devices are at the forefront. But what’s next? Trends are emerging at the hazy edges of the tech universe that hint at the future of computer interfaces, including computers without interfaces at all. Learn how to prepare for that future now.
Designer Josh Clark, author of “Tapworthy,” takes you on an expedition of this final frontier. Learn how phones and other sensor-rich devices have changed how we approach computing, and explore how we can better design for sensors. Learn how more and dumber machines will make us smarter, and how our current work lays the groundwork for a future of social devices. Along the way, you’ll see how games lead the fleet, how robots can help us build our software, why post-PC computing is about far more than phones and tablets, and how you can prepare for this future now, going boldly where no geek has gone before.
Your mobile computing devices use technology that was originally designed for accessibility purposes. There has always been a significant overlap in terms of mobile and accessibility best practices. Rooted in simplifying and optimizing interfaces, Responsive Web Design gives us tools that help us provide a better user experience. And while there is a cross-over between mobile and accessibility and similar philosophies between accessibilty and RWD, using Responsive Web Design techniques doesn't automatically make something accessible.
Making a Responsive design accessible actually requires a deep look at design patterns, layout, interaction and more. In this session, Derek looks at accessibility issues that creep into Responsive designs, what you can do about them, and provides guiding principles for ensuring that you're creating an experience that is optimized for everyone, including people with disabilities.
Touchscreen devices have become ubiquitous, but do you understand what it takes to develop for touch? First there were only the Apple-created touch events, but recently Microsoft created its own set of events. And once you understand both, you have to learn multitouch event handling. And even if you get all that right, how does touch actually work? Why the infamous 300ms lag between the touch and the following of a link? What's the deal with touch-scrolling layers with overflow: auto?
In this presentation PPK will treat all these questions and more, based on his fundamental research on dozens of touchscreen browsers.
The goal of a “responsive images” solution is to deliver image sources optimized for the end user’s context, rather than serving the largest potentially necessary image to everyone whether or not they’ll see any benefit. Unfortunately, this hasn’t proven to be quite so simple in practice as it seems to be on the surface.
Small screens should get smaller images, sure, and large screens should get larger ones. Naturally, only high-resolution displays should qualify for high-resolution images, but what if that user has limited bandwidth available? Would the low-resolution image be preferable—and at what point? Further, should we developers be making those kinds of decisions *for* the user in the first place?
During this talk we’ll discuss the road to a standardized solution to the surprisingly thorny issue of responsive images, what that solution—or solutions—might look like, and some of the scripts and techniques we can use in our work today.
by Martin Kool
Ask people about choosing HTML5 for mobile game development and they'll look at you funny. Google for success stories and all you'll find are "HTML5 is dead" naysayers.
It's tough to find a single success story out there, so if just for statistics sake...
... here's one: Quento.
It's a little math game we made, available on many platforms such as iOS, Android and Windows 8, all thanks to HTML5. The game is being used in schools, played all over the world and had nothing but positive reviews in the media. But how did that happen?
This is its full story, from concept sketch to post-launch support and all the messy little details in between.
I'll show you how we picked our framework of choice, how we handled cross-platform development in all its glory and ugliness, how to use HTML5 mobile constraints as a benefit and successfully validate a concept and find its strengths and weaknesses. I'll cover our way of marketing, launch and post-launch and share all our in-depth sales details per appstore with you, just to give you the facts.
by Rob Hawkes
WebRTC brings peer-to-peer networking to the browser, and it's here to stay. So what is WebRTC? How does it work? How do you use it? And what are others doing with it? In this talk, Rob covers the current state of WebRTC, outlines how to use it, and shows off some of the amazing things that it can do beyond video chat.
Are you trying to make responsive design scale for a complex site? Building an app, but your organization doesn't have an API yet? If so, you've probably got legacy content—content that already exists, and that doesn't fit neatly into your new project.
What do you do? You could ignore it and end up with one of those responsive homepages that devolve into big content blobs after just one tap, or a one-off mobile site that no one can remember to maintain. You could put it off until it becomes the bane of your existence: the thing that "breaks" your design, because it's way messier than you’ve planned for.
Or, you could deal with it. If you take the time to make existing content work for you—by understanding what you've got, identifying patterns and relationships in its structure, and cutting the cruft along the way—you'll end up with a system that will not just support your content, but _enhance_ its meaning, message, and power.
In this talk, you'll learn how to start analyzing content and understanding its structure—and see how content knowledge can help make your mobile products better and longer-lasting.
We'll look at a series of real-world rendering issues and how to combat them, understanding why particular hacks work, and how sometimes working against the browser can trick it into performing better. Covering basic html layout and animation, GPU interaction and high-dpi (retina) considerations across browsers and devices.
by Jeremy Keith
A final talk with the most interesting speakers at the conference.
15th–17th May 2013