Reset the web

In Reset the WebStephanie 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!

@brad_frost tweets on web-enabled toaster

@brad_frost posted on 04/23/12


5 responsive web design pitfalls

By Brad Frost on April 27, 2012

1. Hiding content

Because responsive sites share a single code base, they have a better chance of achievingcontent parity, which is great. However, that doesn’t mean that it’s all gumdrops and butterflies. There are still many responsive sites that hide or remove content for smaller screens in order to deal with screen real estate constraints.

Follow this simple guide: don’t penalise users for the device they happen to be browsing with. People are coming to our sites and services with expectations, and it’s our job to make sure they’re able to achieve their goals. Mobile users will do everything desktop users will do, but it must be presented in a usable way. So do all that you can to make sure as many people as possible can access your content and functionality.

It’s also worth noting that content that gets hidden with CSS still gets downloaded, which is terrible for performance and brings us to our next pitfall to avoid…

2. Bloating it up!

OK, so you’re not gutting content for small screens and you’ve made an effort to deliver a full experience regardless of context. All’s well with the world, right? Well no, because now you have a bunch of stuff to load and that takes time. 74% of mobile users will leave after 5 seconds (PDF) of waiting for a page to load, and the unfortunate reality is that only 3% of small screen versions of responsive sites are significantly lighter than their large screen counterparts. That means users bear the burden of a potentially massive download.

normal page on Barack Obama’s responsive site weighs over 4MB. Four. Megabytes. This is unacceptable by any standard, but especially falls apart when you consider users who may be on EDGE, 3G or poor WiFi connection.

For a site whose goal it is to reach out to the general population (all with different mobile races, mobile creeds, mobile colours and mobile religions), this causes serious accessibility issues:

Sure, part of this is RIM’s doing, but these are real constraints that we need to be aware ofSure, part of this is RIM’s doing, but these are real constraints that we need to be aware of

One of the biggest challenges of creating responsive web designs is the balancing act of delivering a full experience while still maintaining a snappy user experience across the board.Cut away the cruft, follow performance best practices, don’t assume a strong connection by default, and look for ways to exploit great techniques like conditional loading to keep initial page sizes down.

3. Ignoring contextual conventions

A phone is not a tablet is not a laptop is not a desktop is not a TV.

Each device provides its own unique form factor, interface conventions, constraints and opportunities. We need to be considerate of all these variables in order to create experiences that feel natural to the user. Now I’m not recommending recreating every platform’s native UI in the browser, but we do need to be mindful of how people hold their devices, what icons they’re used to seeing, and so on and so forth. A good responsive experience reaches outside of the sandbox that is the browser and is sympathetic to the user and the device context.

Responsive web design by definition is not mobile design, so it’s up to us to introduce contextually-considerate elements to our designs. That means handling responsive navigation in a way that makes sense to visitors across contexts. That means designing for touch. That means avoiding forcing mobile users to sift through ridiculously long amounts of disparate content just to find what they’re looking for.

Let’s account for the many differences across these devices, understand that some compromise is inevitable, but put forth a solid effort to be more considerate of context.

4. Serving a one-size-fits-all experience

Mobile is much more than just various small screens, and these emerging contexts unlock entirely new use cases, patterns and possibilities. We shouldn’t sell ourselves short by only creating responsive layouts. For example, we sometimes forget that mobile phones can get user locationinitiate phone calls, and much more. Hopefully soon browsers on all these gadgets will have access to even more device APIs, further pushing the boundaries of what’s possible on the web.

We should all we can to make the entire experience respond to what the device is capable of.Addressing constraints first gives us a solid foundation to stand on, then we can utiliseprogressive enhancement and feature detection to take the experience to the next level.

5. Relying on device dimensions

320px. 480px. 768px. 1024px. The fold. Oh God, the fold.

The fact of the matter is that we don’t control what our visitors’ browser sizes are, nor what dimensions manufacturers decide to make their devices. Believe me, they’re trying every size in the book.

Why you should never rely on device dimensionsWhy you should never rely on device dimensions

In addition, page height has always been even more of a moving target because of bookmarks bar, browser chrome and the Ask Jeeves toolbar. But now in the mobile web world, a web experience is often not seen through the lens of the browser at all. We visit links through Facebook, Twitter and other apps, each of which has its own custom chrome for containing web views. Of course hierarchy of content still matters and you want to get to the guts of the page as soon as possible, but you can’t get all worked up over the available pixel height, learn to let go.

In his article Fanfare for the Common Breakpoint, Jeremy Keith eloquently states that “it’s not about what happens at the breakpoints, it’s about what happens between the breakpoints.” That means our designs should hold together irrespective of any particular dimension.

Let the design itself sort out where breakpoints should occur. I absolutely love this advicefrom Stephen Hay:

“Start with the small screen first, then expand until it looks like shit. Time to insert a breakpoint!

By letting the content itself determine the breakpoints of our responsive designs, we’re preparing our designs to look great in not just today’s landscape, but tomorrow’s as well.

Do the evolution

We’re at the tip of the iceberg as far as creating adaptive experiences go. While these pitfalls (and many more not covered in this article) exist, they are no reason to shy away from creating adaptive experiences. With more connected devices of all shapes and sizes come onto the scene every day, we as web creators have an opportunity to be there when they arrive. While it’s admittedly a bit daunting, we should accept the challenge and embrace the opportunity to reach people wherever they may be.