Breaking Dev: Adaptation

by Luke Wroblewski September 16, 2011

In his Adaptation presentation at Breaking Development in Nashville TN, Bryan Rieger discussed why responsive design really begins on the server and walked through techniques for making it happen. Here’s my notes from his talk:

  • Currently 1/3 of the US has a smartphone (based on 25-50% estimates). So 2/3 does not.
  • HTML5 is really only usable on few devices. The tech industry is making a lot of promises it cannot keep. The HTC Magic ran Android 1.6 but now it’s mostly not supported. So it’s become a doorstop.
  • As more devices emerge and expectations grow, we still can’t see the forest for the trees.
  • The smartphone era (touch, gestures, real Web) began in 2007 with the launch of the first iPhone. An army of Android phones and connected devices followed but now we are in a big gray area and perhaps too focused on the bleeding edge.
  • If you want to use the web on a mobile device, is the purchase of an iPhone the cost of entry?
  • By 2015, well over 50% of Web traffic is expect edto come from mobile devices. In 2015, if you want to use the Web on a mobile device, is the cost of entry that you need to have an iPhone?
  • People have different priorities that account for their purchasing decisions.
  • But as lots of Android phones are now available for less than $200, and new feature phones aimed at the next billion people include Webkit and a touch screen, every new phone will essentially be a smartphone: loaded with everything we have come to define as a smartphone. But not every smart phone is created equal. There are a lot of differences in what phones support.
  • This creates diversity and a lot of inequality which creates an optimal experience for a privileged few and a missed opportunity for many.
  • The common response is “but people don’t actually use those devices”, Yes, but have you offered them anything they can use yet?
  • Go check your logs, people are accessing your sites with all kinds of devices.

Server Side Solutions

  • Our mental models are rooted in desktop PCs, which have not prepared us for a world of mobile devices.
  • Imagine a scenario where a server tailors each request to each client. This ensures each client gets exactly what it needs rather than everything they might not want.
  • Responsive Web Design delivers everything to a device and asks them to make sense of it. Many devices can’t process all this –they lack the capabilities.
  • The client makes a request to a server, the server checks to see if the client has a profile cookie. A profile cookie stores information about the device. By default it creates a baseline profile that provides a very basic experience.
  • Then the server grabs the user agent string, and checks it within a DeviceAtlas (database) to look up information about the device. The device profile is returned but only use what you need.
  • Next query the user agent string against any tacit knowledge you may have. This is information you have that may be missing from a device database. Match these partial profiles using user agent fragments.
  • Merge the baseline data with the data returned from queries into the device profile cookie. At this point, the server has a usable profile on the server and the client has one in a cookie.
  • The server now can begin to filter and adapt content based on what it knows about the device. Adaptation rules will differ but adapting images is most common. Videos, tables, and other DOM structures might need to get adapted.
  • You will often need new resources to decide what to deliver to the client like: alternate content, DOM elements, video, images, scripts, or styles. These resources can be static or dynamically generated.
  • All the content adaptation is performed on the server before a page is downloaded and the client gets only what it needs.
  • An additional feature detection script can be sent down to the client as well. The client can execute this script and update it’s profile cookie accordingly. The client is the ultimate final decision point because it ultimately knows the most about itself.
  • If a customer, reorients their site another set of resources can be pulled from the server.
  • Repeat as required until you have a great set of information about as many devices as possible to prepare for the coming zombie apocalypse of new devices coming.
  • Focus on the known features not the device. You don’t know what browser people are going to be using even on a known device.
  • Tacit data allows you to make tweaks for "important" devices (business goal-specific, high-traffic cases), create custom properties, override false positives
  • User agent strings have been demonized because they were used in bad ways. A lot of what is in the user string is no longer relevant but there is also useful information within them.
  • In this approach, all the heavy lifting occurs on the server. This supports a broader range of devices where client-side-only approaches can be unreliable.
  • A lot of the elements we have in HTML come from the past. Maybe it’s time to revisit some common assumptions and images or media queries.
  • The wise adapt themselves to circumstances like water adapts itself to a pitcher.