Console Browsers: The Ultimate Torture Test

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.

Anna Debenham

Anna is a freelance front end developer based in Brighton in the UK. She works mostly on projects in the education sector. After visiting primary schools with a startup in early 2012, she started exploring how children who don't have a mobile phone or computer could interact with sites on the other devices they use at home.

Context, Bloody Context

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.

Cennydd Bowles

Cennydd is a senior product designer at Twitter. Over the past decade – including a stint at acclaimed consultancy Clearleft – he has advised dozens of companies on the benefits of customer-focused design.

Cennydd is an invited speaker at design and technology events across the globe. He also writes a monthly column for A List Apart, and is author of the book Undercover User Experience Design.

Mobile Web Design Anti-Patterns

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.

Dave Shea

Dave is the creator and cultivator of the highly influential website csszengarden.com, and co-author of The Zen of CSS Design (New Riders, 2005) with Molly Holzschlag.

His current role is VP of User Experience at Mobify Inc. Previously he ran Bright Creative, a one-man studio in Vancouver, working on projects for New York University, Google, CNet, Joyent and others. He speaks internationally at conferences and workshops and was an organizer of the North American arm of Web Directions, a popular international conference series.

His recent extracurricular interests have included icon design, the Processing visual language, GPS tracking his road cycling trips, and improving his home craft brewing techniques. Find Dave on Twitter as @mezzoblue

Doing Responsive Right: Accessibility Lessons from the Field

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.

Derek Featherstone

Derek is an internationally-known speaker and authority on accessibility and web design. He spends his time as the lead of Simply Accessible Inc., based in Ottawa, Canada. The team works with Fortune 500 corporations, educational institutions, public utilities, government agencies and other private sector clients.

He always puts the user first and strives to make the web a better place by designing experiences that are easy to use for everyone, including people with disabilities. That knowledge and experience is what gets Derek invited to speak at conferences around the world, where he combines his teaching background and nearly 14 years of design and development to engage, educate and entertain.

Rendering without lumpy bits

Right, we've got a new project, we have to calculate and draw 500,000 pixels, and the deadline is in 16.67 milliseconds. When we're done, we'll do it again, and again. Web performance has always been about delivering those pixels on time, but the target has shifted. Optimising pure JavaScript (loops, string concatination, arithmetic) is more irrelevant than ever, performance gains are to be found in the DOM, layout dependencies, and the interaction with the GPU.

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.

Jake Archibald

Jake works in Google Chrome's developer relations team, working on specs, testing implementations, and ensuring developers have tools to make their jobs less painful. He's a big fan of time-to-render optimisations, progressive enhancement, and all of that responsive stuff.

Prior to Google, Jake worked at Lanyrd on their mobile web site, and for the BBC working on JavaScript libraries and standards.

Outside of the web, Jake likes F1 and nice beer.

Hot Topics Panel

Mobilism revives an old tradition: the Hot Topics panel where a diverse range of people will comment on the most pressing questions that Mobilism has caused. The panel will be moderated by Jeremy Keith.

Jeremy Keith

Jeremy makes websites. He is responsible for the death of the trees used to print the books DOM Scripting, Bulletproof Ajax and most recently, HTML5 For Web Designers. He also shot a man in Reno just to watch him die. Originally from Ireland, Jeremy now lives in Brighton, England where he pretends to work with Clearleft. Peas grow there.

Scale and adapt: A story of how we built Responsive BBC News

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.

• How we support as many devices as possible using responsive design
• Why performance is key to our success and how we managed to keep the site lean
• How we scale to serve BBC News to the masses
• What tools we use to help us along the way

John Cleveley

John is Tech Lead at BBC News and currently migrating the News site to a dynamic platform. Concentrating on building features mobile first using responsive web design all the way up to desktop.

BBC News has a truly global audience, delivering some of the only unbiased journalism available in some parts of the world. This has reinforced his passion for device support and producing sites that absolutely fly.

Loves canoeing, ale and Radiohead - preferably all at the same time :) Find me here @jcleveley.

Beyond Mobile: Where No Geek Has Gone Before

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.

Josh Clark

Josh is a designer specializing in mobile design strategy and user experience. He's author of "Tapworthy: Designing Great iPhone Apps" (O'Reilly, 2010) and "Best iPhone Apps" (O'Reilly, 2009). Josh's outfit Global Moxie offers consulting services, training, and product invention workshops to help creative organizations build tapworthy mobile apps and effective websites.

Before the internet swallowed him up, Josh was a management consultant at Monitor Group in Cambridge, Mass, and before that, a producer of national PBS programs at Boston's WGBH. He shared his three words of Russian with Mikhail Gorbachev, strolled the ranch with Nancy Reagan, hobnobbed with Rockefellers, and wrote trivia questions for a primetime game show. In 1996, he created the uberpopular "Couch-to-5K" (C25K) running program, which has helped millions of skeptical would-be exercisers take up jogging. (His motto is the same for fitness as it is for software user experience: no pain, no pain.)

Josh will also host a workshop on Designing for Touch on Wednesday.

A Successful Cross Platform HTML5 Game, From Shaping To Shipping

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.

Martin Kool

Martin is mad scientist / partner at the Dutch Q42, working on projects such as Rijksmuseum, 9292, Philips Hue, Staatsloterij and Greetz. By night he is an HTML5 game designer and developer. Years back he felt the wrath of Activision, Codemasters and Nintendo when he created the old-school adventure game portal Sarien.net which offers games such as King's Quest and Leisure Suit Larry in HTML5 on the iPad (with a multiplayer twist) and an HTML5 tribute to a classic Donkey Kong II handheld game.

Martin co-founded Handcraft, an HTML5 prototyping environment for hybrid web designers / developers, and wrote livejs. He has a strong affinity with education, doing professional projects with Thieme Meulenhof (sending kids to schools with iPads) and Malmberg, supporting O4NT and designing games such Quento, its sequel, and upcoming games such as "Cat Quest" and "Carrrds!".

Responsible Responsive Images

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.

Mat “Wilto” Marquis

Mat is a developer at Filament Group where he helps create usable and highly-accessible websites for a wide range of clients, including the recent BostonGlobe.com.

Mat is a member of the jQuery Mobile team, technical editor and author for A List Apart, and Chair of the Responsive Images Community Group. He contributed several chapters to the fourth edition of Learning Web Design, and is an active member of the open source community. Mat has beaten Mega Man II for the NES—on “difficult”—without losing a single life. He's probably flipping out about something on Twitter as we speak.

Breaking Limits on Mobile HTML5

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:

• How to refresh a background "frozen" tab on iPad
• Creating a mobile view for IE10 on snapped mode
• Making a push notification on iOS from a website
• Creating a high resolution canvas
• Creating a full-screen experience
• Working with images in different resolutions
• Undocumented meta tags and hacks
• Bypassing limits on storage APIs
• Interacting with native apps
• Speeding up performance

Max Firtman

Max is a mobile+web developer, trainer, speaker and writer. He wrote many books, including "Programming the Mobile Web" and "jQuery Mobile: Up and Running" published by O'Reilly Media.

He has a blog about mobile web development at mobilexweb.com and he maintains the website mobilehtml5.org.

He is a frequent speaker at conferences, including QCon, OSCON, Breaking Development, Velocity, Fluent, JSConf, Google Developer Day, Nokia Developer Days, Campus Party Europe and many other events around the world. He has delivered hundreds of trainings on mobile+web technologies for open trainings and well-known companies around the world.

He has received different recognitions, including Nokia Developer Champion yearly since 2006; Adobe Community Professional since 2011, and BlackBerry Elite Developer since 2012.

Max will also host a workshop on Mobile HTML5 on Wednesday.

Developing for touch

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.

Peter-Paul Koch

ppk is a mobile platform strategist, consultant, and trainer in Amsterdam, the Netherlands. He specialises in HTML, CSS, JavaScript, and mobile browser compatibility. In 2009 he shifted from traditional desktop browsers to the mobile Web, and he never looked back. In 2011 he co-founded the Mobilism conference.

Nowadays he specialises in questions such as "Does your site work properly in Obigo? What do you think of UC's viewport?" He relishes the fact that web developers have no clue what he's talking about, and are forced to pay him boatloads of money to find out.

So you know jQuery. Now what?

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?

Remy Sharp

Remy is the founder and curator of Full Frontal, the UK based JavaScript conference. He also ran jQuery for Designers, co-authored Introducing HTML5 (adding all the JavaScripty bits) and is one of the curators of HTML5Doctor.com.

Whilst he's not writing articles or running and speaking at conferences, he runs his own development and training company in Brighton called Left Logic. And he built these too: jsbin.com, html5demos.com, remote-tilt.com, responsivepx.com, nodemon, inliner, mit-license.org, snapbird.org, 5 minute fork and jsconsole.com!

The State of WebRTC

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.

Rob Hawkes

Rob thrives on solving problems through code. He's a Digital Tinkerer, ex-Technical Evangelist for Mozilla, author of Foundation HTML5 Canvas, and a Brit. You can find out more about him on Twitter and his blog.

What you don't know will hurt you: Designing with and for existing content

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.

Sara Wachter-Boettcher

Sara is an independent content strategist, writer, and rabble-rouser based in Lancaster, Pennsylvania. She got this way after stints as a journalist, copywriter, and web writer, during which she became increasingly dissatisfied with the chaos typically found in web content projects. In 2008, she launched a content strategy practice at her past agency, and started working closely with IA and UX teams to build a better way forward.

Today Sara focuses on designing systems for flexible, adaptable, future-friendly content, which she writes about in her first book, Content Everywhere from Rosenfeld Media. When she’s not consulting with clients or partnering with agencies, she's serving as Editor in Chief of A List Apart; contributing to publications like Contents and The Manual; and speaking about content strategy and user experience at conferences worldwide. You can read her blog at sarawb.com.

The New Photoshop, Part 2: The Revenge of The Web

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.

Stephen Hay

Stephen is a front-end design and development consultant focusing on multi-platform design. He still does client work through his consultancy, Zero Interface. Stephen speaks at industry events, writes for industry publications, and contributed to Smashing Book #3. He is member of the working group for the Dutch government's web accessibility guidelines. His book, Responsive Design Workflow (Peachpit/New Riders) is just out. When he's not working himself to death, he appreciates a good Belgian ale and blogs about twice a year at the-haystack.com.