I recently had the great opportunity to talk mobile web, future-friendly, qr codes and more with Christopher Schmitt (@teleject), Dave MacFarland (@davemcfarland), and Chris Enns (@ichris) on the Non-Breaking Space Podcast. I had a lot of fun so I hope you don’t hate it.

• Brad Frost on Non-Breaking Space Podcast
• The podcast on SSKTN
• MP3 download
• Subscribe to the Non-Breaking Space Podcast on iTunes or RSS

In Reset the Web, Stephanie Rieger (@stephanierieger) explains how mobile is just a glimpse into the very early stages of an entirely new digital ecosystem system.

• The web is less than 8,000 days old.
• What is the web actually for? Man as a tool maker has the ability to amplify our inherent ability. The computer amplifies memory, problem-solving, calculation, projection, analysis
• The Internet amplifies knowledge. The true potential of the Internet was revealed only when it became ubiquitously available.
• A smartphone is not a smartphone, it’s a device to simplify curiosity. It’s always connected to an open platform accessible by anyone with a browser
• “Hold on, Let me look that up. I just happen to have to sum of human knowledge in my pocket.” “The magic is in the palm of my hands”
• The internet is what brings these devices to life. Without connectivity, these devices could only perform a limited number of tasks.
• Technological revolutions require a level of plumbing. The web requires cables and connections, and so invention, implementation and market adoption influence what’s possible. It takes a long time to evolve the necessary plumbing to drive innovation.
• Internet “plumbing” is the scaffold on top of which we innovate.
• Emerging economies are skipping the traditional computing model (desktops, fixed lines and infrastructure) and are instead jumping straight to mobile infrastructure.

Contexts will be varied and unpredictable.

• Current products are still deeply rooted in the past, but new diverse platforms and interactions will emerge. Small, large, mobile, immobile, and everything in between.
• Contexts may be diverse, but they still ‘fit’ our mental model of the web

In the future, everything will be connected.

• Cotton Candy computer: plug a smart computer into any dumb computer Many unknown unknowns.
• Google’s Project Glass and other speech-and-voice interfaces show us how not every connected device will rely on a screen.
• Old “thing” + connectivity + software + UI = New smart “thing”
• It now costs next to nothing to make something smart or connected. Emerging chips don’t require a traditional power supply, meaning they can be embedded in anything.

“Just in time” will replace “Just in case”

• Right now, we have to go to the web , but in the future the web will come to us. In the future, things will tell us information rather than us having to seek out information about the thing.
• “We don’t want the app. We want what the app does. We could care less if we have the app, we just want the functionality.”
• In the future, our devices load applications opportunistically that are accessed seamlessly.
• No new technology fully replaces the old, it simply augments it.
• The most profound technologies are those that disappear. They weave themselves into the fabric of everyday life until they are indistinguishable

Content will need to flow like water.

• Responsive design is just the beginning. It’s not just about flexible layouts, it’s about flexible content
• The browser and web platform. It’s easy to forget how much infrastructure we’ve built into the web and browser. Things like forms serve an important purpose.
• Things we add are often a response to change. Interface conventions change as technology becomes available. “We have a robust browser now, how do we navigate it?” Reader apps are a response to clutter
• Proxy web browsers are giant polyfills. They add a lot of value as they bridge the gap between the capable and incapable.
• Tools that bridge the gap to respond to change: “Reader” apps, UA switching on mobile browsers
• The rise of more baked-in features, like HTML5 forms. They’re intelligent, responsive, platform-appropriate yet adaptable components. What if we applied this to other components?
• Everything you add to the page is something you’re taking away from the latency profile of the page. Everything you add should have real value.
• ‘Back to Top’ links are useful and easy to implement for long mobile pages. Why aren’t they baked this into all browsers?
• Social media widgets are currently implemented client-side. These should eventually be offloaded to the platform. They should be considered plumbing. Mobile is the needle, social is the thread. -Pew
• There are only so many ways to re-arrange complex navigation. Some sites are just complex, period. What about a native trigger that fires up a default browser “menu” component, similar to datepicker, or select menu, etc.
• Media formats aren’t adaptive enough. We keep forgetting about user choice. They are the best ones to determine what quality of media they want.
• Look to Quicktime wired media (used connection speed and screen size) as a reference. Drop in a self-contained package that allows you to not have to worry about the logic
• Cultural change more dramatic, but we tend to focus on the technologies themselves.

I’ve now had the opportunity to hear Stephanie present on multiple occasions, and every time I am completely blown away. This time, I was honored to make it into Stephanie’s slides in the form of a tweeting smart toaster. I’m very happy about that!

In This Web Goes to 11, James Pearce (@jamespearce) demonstrates how device and network APIs can take the mobile web to a whole new dimension. The future looks awesome.

The Current Mobile Web World

• The web was bound to escape from the desktop and was meant to be carried with us wherever we went.
• Native apps have access to all the device APIs and as a result can create more contextually-aware experiences.
• Look beyond the piece of glass and think of the human on the other end of the device.
• The mobile web is trapped in a sandbox called the browser and we’re forced to adapt to browser’s constraints.
• Mobile web is in a pretty sad state with regards to capabilities. “I’m sure there are plenty of Facebook mobile web users that are confused why there isn’t an ‘upload photo’ button.”
• It’s not that native solutions will go away, but the web needs the power to at least be competitive with native solutions.
• WAP sites years ago had access to device APIs that sadly aren’t available in modern mobile browsers

Device APIs

• Device API Working Group, a good rundown of what we can hope to expect from the mobile web soon.
• Geolocation is one of the best supported device APIs out of everything.
• <input type=file> currently doesn’t work on iOS, but is supported on Android 2.3+.
• getUserMedia currently is only supported in Opera Mobile. James demoed a simple photo-taking app he made with 100 lines of code. Related: check out Patrick Lauke’s browser-based QR code reader demo which uses getUserMedia.
• Messaging API allows you to send text messages from mobile browsers.
• Mobile devices are bristling with sensors, unfortunately the mobile web currently doesn’t have access to many of them.
• Mozilla WebAPI and Boot to Gecko projects are hoping to make web THE platform. You can actually view source on a Boot to Gecko phone. James was a little concerned at first that Mozilla was duplicating efforts, but Mozilla has made a commitment to bring everything into the W3C as it gets developed.
• The goal of PhoneGap is to expose as many device APIs as possible.
• SMS and camera access and more could make authentication far more frictionless. Email is a pain in the ass.
• Privacy concerns aren’t as big of a deal as they are a user choice. Also, things that were historically taboo (i.e. sharing location) are now commonplace.
• Progressive enhancement can give way to ‘no compromise’. If a photo app doesn’t have camera access, you’re not in business. Sometimes apps require advanced support and there’s little you can do to give an experience to unsupported platforms.
• Ringmark is a way to gauge how advanced a mobile browser is and what APIs it supports.
• We have an opportunity to evolve the web beyond a web of documents, and device APIs give us a glimpse of how to do that.

• Great ideas and innovation aren’t enough. You need to articulate your vision in order to create great design.
• Stay true to design principles in the face of fickle clients.
• Brian used an example on his work for the BBC iPlayer to demonstrate how users just want the content to be clear. Clients and teams tend to overcomplicate simple problems and often create worse user experiences as a result.
• Focus on the clarity of design, not on the bells and whistles. Brian explained how after Nike Better World came out, everyone got on the parallax bandwagon. His client wanted to incorporate parallax into their design project, so they spent many hours of testing and prototyping a parallax version of the design. It was a costly process and they found that it didn’t test well with users.
• Less Is More. Constantly refine and focus on keeping the experience very very simple.
• Designing experiences that are meant to work across designs

10 ways to access an experience

1. Universal app— an experience that’s offered across a multitude of channels and devices. Brian used NPR’s COPE strategy as an example.
2. Native application— an app built specifically for a native platform. Proprietary technology isn’t going anywhere and can provide cutting edge functionality
3. Native Hybrid App— a combination of native and web views
4. HTML5 hybrid app— a native shell whose contents are built primarily in web technologies
5. Responsive Web app— An app that is created using responsive web design techniques. (I typically use AudioVroom as an example of a responsive app)
6. Mobile Web App— An app written in web technologies and deployed on the web
7. Desktop Web App— An app written in web technologies that are only optimized for desktop experiences. The experience is rendered as-is for mobile browsers
8. Responsive Web Site— a site built using fluid grids, flexible images and media queries and hopefully good progressive enhancement techniques
9. Desktop Web Site— a site optimized only for large desktop screens
10. Mobile Web Site— a site optimized specifically for small mobile browsers.

Mobile Design

• Building a design language is a mandatory step in order to create coherent cross-platform experiences.
• When we talk about design, we talk about resonating with people.