Breaking Dev: Client-Side Adaptation

by Luke Wroblewski September 13, 2011

In his Client-Side Adaptation talk at Breaking Development in Nashville TN, John Boxall described using client side code to transform existing desktop Web sites into mobile-optimized sites. Here’s a quick set of notes from his talk:

  • With client side transforms you can continue to use desktop code but manage the two things you need for a mobile site.
  • This is a solution for the North American market where smart phones dominate and everyone has Javascript enabled.
  • In a proxy model, you want to shuffle markup code around. Example: move something from the bottom to top. Also want to manage external resources like images and videos. How do we do both of these with Javascript?
  • Use Javascript to disregard everything in the HTML source: image adjustments, element removal, source order, and more.
  • In order to transform the source order, you need to hide the body until the transformation has completed changing source order. This needs to be wrapped in a conditional isMobile statement. So do your source transform functions.
  • Beforeload is an event that fires in WebKit before any external resources load. To use it, add a document event listener. You can never load an external resource before you bind this event listener. Otherwise, resources will get downloaded as Safari tries to bring things down as fast as possible.
  • If you remove the src attribute for a script tag, it won’t load. But this requires every document to change their markup.
  • Instead use a conditional isMobile to write a style tag around a script tag you don’t want to load. Using a noscript tag instead makes it harder to extract content within.