Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Combining HTML Hypermedia APIs and Adaptive Web Design                  Gustaf Nilsson Kotte
Platform fragmentationHTML Hypermedia APIsCapability fragmentationProgressive EnhancementThe API and the web can be the sa...
Hypermedia controls, i.e. <a>, <link>, <form>Rich semantics, i.e. <ul>, <ol>, <dl>Enhance using micro format styleAlready ...
Q: Only GET/POST?A: No problem for Fielding.Q: What about size?A: Gzip is your friend.Q: What about parsing?A: Use existin...
<div class="message-block">  <div id="messages">    <ul class="single">        <li>           <span class="message-text">M...
”Building Hypermedia APIs with HTML5and Node”, Mike Amundsen”Designing Hypermedia APIs”, Steve Klabnik
Most consumers will be in the low-to-middle priced markets
Three iOS devices – 40%             3112 other devices– 60%, up to 3% each
Now: Screen size fragmentation.Future: ?
Mobile firstContent firstUse-cases (or stories) first(What makes you unique?)
Responsive Web Design  • Media queries  • Fluid layouts
Delayed and conditionally loaded contentBundle AJAX requests (think hard about caching though)
Connection speed hint using the HTML5 Navigation Timing API (?)
”Adaptive Web Design - Crafting Rich Experiences withProgressive Enhancement”, Aaron Gustafson“Progressive Enhancement 2.0...
<div class="message-block">  <div id="messages">    <ul class="single">        <li>           <span class="message-text">M...
<div class="message-block">  <div id="messages">    <ul class="single">        <li>           <span class="message-text">M...
Separate API and web on URI levelFollow the HTTP specificationWeb menu with server-side include… (?)
Parallel implementation
Platform fragmentationHTML Hypermedia APIsCapability fragmentationProgressive EnhancementThe API and the web can be the sa...
Why supporting so many different type of platforms/browsers?Data sent with <form> POSTs is flat – conventions needed?How a...
Surviving the Zombie Apocalpyse of Connected Devices
Surviving the Zombie Apocalpyse of Connected Devices
Surviving the Zombie Apocalpyse of Connected Devices
Surviving the Zombie Apocalpyse of Connected Devices
Surviving the Zombie Apocalpyse of Connected Devices
Surviving the Zombie Apocalpyse of Connected Devices
Surviving the Zombie Apocalpyse of Connected Devices
Surviving the Zombie Apocalpyse of Connected Devices
Surviving the Zombie Apocalpyse of Connected Devices
Surviving the Zombie Apocalpyse of Connected Devices
Surviving the Zombie Apocalpyse of Connected Devices
Surviving the Zombie Apocalpyse of Connected Devices
Surviving the Zombie Apocalpyse of Connected Devices
Surviving the Zombie Apocalpyse of Connected Devices
Surviving the Zombie Apocalpyse of Connected Devices
Surviving the Zombie Apocalpyse of Connected Devices
Surviving the Zombie Apocalpyse of Connected Devices
Surviving the Zombie Apocalpyse of Connected Devices
Surviving the Zombie Apocalpyse of Connected Devices
Surviving the Zombie Apocalpyse of Connected Devices
Surviving the Zombie Apocalpyse of Connected Devices
Surviving the Zombie Apocalpyse of Connected Devices
Surviving the Zombie Apocalpyse of Connected Devices
Surviving the Zombie Apocalpyse of Connected Devices
Upcoming SlideShare
Loading in …5
×

Surviving the Zombie Apocalpyse of Connected Devices

635 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Surviving the Zombie Apocalpyse of Connected Devices

  1. 1. Combining HTML Hypermedia APIs and Adaptive Web Design Gustaf Nilsson Kotte
  2. 2. Platform fragmentationHTML Hypermedia APIsCapability fragmentationProgressive EnhancementThe API and the web can be the same thing!
  3. 3. Hypermedia controls, i.e. <a>, <link>, <form>Rich semantics, i.e. <ul>, <ol>, <dl>Enhance using micro format styleAlready standardizedEverybody knows itGood tooling support For native apps: embed in a ”web view”
  4. 4. Q: Only GET/POST?A: No problem for Fielding.Q: What about size?A: Gzip is your friend.Q: What about parsing?A: Use existing libraries for your platform.
  5. 5. <div class="message-block"> <div id="messages"> <ul class="single"> <li> <span class="message-text">Message text</span> <span class="single">@</span> <a rel="message" href="..." title="message"> <span class="date-time">2012-01-01</span> </a> <span class="single">by</span> <a rel="user" href="..." title="A title"> <span class="user-text">User text</span> </a> </li> <!-- ... -> </ul> </div></div><!–- Example, to get all user-texts: $("#messages .user-text") -->
  6. 6. ”Building Hypermedia APIs with HTML5and Node”, Mike Amundsen”Designing Hypermedia APIs”, Steve Klabnik
  7. 7. Most consumers will be in the low-to-middle priced markets
  8. 8. Three iOS devices – 40% 3112 other devices– 60%, up to 3% each
  9. 9. Now: Screen size fragmentation.Future: ?
  10. 10. Mobile firstContent firstUse-cases (or stories) first(What makes you unique?)
  11. 11. Responsive Web Design • Media queries • Fluid layouts
  12. 12. Delayed and conditionally loaded contentBundle AJAX requests (think hard about caching though)
  13. 13. Connection speed hint using the HTML5 Navigation Timing API (?)
  14. 14. ”Adaptive Web Design - Crafting Rich Experiences withProgressive Enhancement”, Aaron Gustafson“Progressive Enhancement 2.0”, Nicolas Zakas“Resource-Oriented Client Architecture”, http://roca-style.org
  15. 15. <div class="message-block"> <div id="messages"> <ul class="single"> <li> <span class="message-text">Message text</span> <span class="single">@</span> <a rel="message" href="..." title="message"> <span class="date-time">2012-01-01</span> </a> <span class="single">by</span> <a rel="user" href="..." title="A title"> <span class="user-text">User text</span> </a> </li> <!-- ... -> </ul> </div></div>
  16. 16. <div class="message-block"> <div id="messages"> <ul class="single"> <li> <span class="message-text">Message text</span> <span class="single">@</span> <a rel="message" href="..." title="message"> <span class="date-time">2012-01-01</span> </a> <span class="single">by</span> <a rel="user" href="..." title="A title"> <span class="user-text">User text</span> </a> </li> <!-- ... -> </ul> </div></div>
  17. 17. Separate API and web on URI levelFollow the HTTP specificationWeb menu with server-side include… (?)
  18. 18. Parallel implementation
  19. 19. Platform fragmentationHTML Hypermedia APIsCapability fragmentationProgressive EnhancementThe API and the web can be the same thing!
  20. 20. Why supporting so many different type of platforms/browsers?Data sent with <form> POSTs is flat – conventions needed?How about mapping between <form> fields and native forms?How to integrate ”web views” in a good way?What about offline support for these views?How does this relate to testing?How does this relate to design?How does this relate to ideas in Lean Startup?

×