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.
- 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.