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.
HTML5   A new way of thinking...David Shariff,Technical Director,Richi.com                              © 2012 Richtor Inc...
About MePreviously @Now @                                                richi.com                                        ...
Is not what you think !
What People Really Mean:  HTML5, CSS3, JavaScript
It got worse !“And then we had...”
Multiple IOSDisplay   480 / 960 x 640CPU       620MHz ~ 1GHz
Android++Display    > 480 x 800CPU        > 800 MHz
iPadsDisplay      ~ 1024 x 768CPU          ~ 1GHz
“What is the web now ?”
Desktop usersexpect this view
Mobile usersexpect this view
Tablet usersexpect this view
“No platform consistency !”         Screen size         Orientation      Browser chrome         Zoom level     Connection ...
How engineersfeel….
“But each device expects   customized views”
AppleDaily
RelevantContent
“Content   is KING!”
“Future is unknown”“PREPARE for it”  © 2011 Richi Inc. All rights reserved.
“Content is the reason for design” © 2011 Richi Inc. All rights reserved.
HTML5 to the rescue
“Future friendly,structured content”  © 2011 Richi Inc. All rights reserved.
Semantic HTML5Platform–agnostic, Meaningful Content© 2011 Richi Inc. All rights reserved.
Semantics Enhance UX© 2011 Richi Inc. All rights reserved.
“The old way…”© 2011 Richi Inc. All rights reserved.
Desktop First                                                                       ?                                     ...
“We are a mobile first company…                                         every single app we are building                  ...
Mobile (smallest) First?                       Future friendly / progressive / awesome© 2011 Richi Inc. All rights reserved.
“Responsive / Adaptive                  Web Design” © 2011 Richi Inc. All rights reserved.
Display                                         (Media Queries)                                  Fluid Grid Layouts       ...
Fluid Grid Layouts + Media Queries  © 2011 Richi Inc. All rights reserved.
Responsive Images© 2011 Richi Inc. All rights reserved.
Perceived VS Actual Performance © 2011 Richi Inc. All rights reserved.
400ms delay results in 5-9% drop in full-page traffic.                    500ms delay drops search traffic by 20%.© 2011 R...
Conditionally Load Assets                                “Only use what I need”© 2011 Richi Inc. All rights reserved.
HTML5 – Not PerfectBut it’s a step in the right direction
Thanks!                                  http://www.facebook.com/david.shariff1                    http://tw.linkedin.com/...
HTML5  - Content first - A new way of thinking
HTML5  - Content first - A new way of thinking
HTML5  - Content first - A new way of thinking
HTML5  - Content first - A new way of thinking
HTML5  - Content first - A new way of thinking
HTML5  - Content first - A new way of thinking
Upcoming SlideShare
Loading in …5
×

HTML5 - Content first - A new way of thinking

4,488 views

Published on

Published in: Technology, Design
  • Be the first to comment

HTML5 - Content first - A new way of thinking

  1. 1. HTML5 A new way of thinking...David Shariff,Technical Director,Richi.com © 2012 Richtor Inc. All rights reserved
  2. 2. About MePreviously @Now @ richi.com davidshariff.com slideshare.net/davidshariff © 2012 Richi Inc. All rights reserved.
  3. 3. Is not what you think !
  4. 4. What People Really Mean: HTML5, CSS3, JavaScript
  5. 5. It got worse !“And then we had...”
  6. 6. Multiple IOSDisplay 480 / 960 x 640CPU 620MHz ~ 1GHz
  7. 7. Android++Display > 480 x 800CPU > 800 MHz
  8. 8. iPadsDisplay ~ 1024 x 768CPU ~ 1GHz
  9. 9. “What is the web now ?”
  10. 10. Desktop usersexpect this view
  11. 11. Mobile usersexpect this view
  12. 12. Tablet usersexpect this view
  13. 13. “No platform consistency !” Screen size Orientation Browser chrome Zoom level Connection speeds Device capabilities Input methods
  14. 14. How engineersfeel….
  15. 15. “But each device expects customized views”
  16. 16. AppleDaily
  17. 17. RelevantContent
  18. 18. “Content is KING!”
  19. 19. “Future is unknown”“PREPARE for it” © 2011 Richi Inc. All rights reserved.
  20. 20. “Content is the reason for design” © 2011 Richi Inc. All rights reserved.
  21. 21. HTML5 to the rescue
  22. 22. “Future friendly,structured content” © 2011 Richi Inc. All rights reserved.
  23. 23. Semantic HTML5Platform–agnostic, Meaningful Content© 2011 Richi Inc. All rights reserved.
  24. 24. Semantics Enhance UX© 2011 Richi Inc. All rights reserved.
  25. 25. “The old way…”© 2011 Richi Inc. All rights reserved.
  26. 26. Desktop First ? degrading / limited / sucks© 2011 Richi Inc. All rights reserved.
  27. 27. “We are a mobile first company… every single app we are building now starts with mobile.”Peter Deng, Product Director Facebook© 2011 Richi Inc. All rights reserved.
  28. 28. Mobile (smallest) First? Future friendly / progressive / awesome© 2011 Richi Inc. All rights reserved.
  29. 29. “Responsive / Adaptive Web Design” © 2011 Richi Inc. All rights reserved.
  30. 30. Display (Media Queries) Fluid Grid Layouts Responsive Images InteractionPerceived vs. Actual Performance Conditional Loading Assets© 2011 Richi Inc. All rights reserved.
  31. 31. Fluid Grid Layouts + Media Queries © 2011 Richi Inc. All rights reserved.
  32. 32. Responsive Images© 2011 Richi Inc. All rights reserved.
  33. 33. Perceived VS Actual Performance © 2011 Richi Inc. All rights reserved.
  34. 34. 400ms delay results in 5-9% drop in full-page traffic. 500ms delay drops search traffic by 20%.© 2011 Richi Inc. All rights reserved.
  35. 35. Conditionally Load Assets “Only use what I need”© 2011 Richi Inc. All rights reserved.
  36. 36. HTML5 – Not PerfectBut it’s a step in the right direction
  37. 37. Thanks! http://www.facebook.com/david.shariff1 http://tw.linkedin.com/pub/david-shariff/17/964/728 david@richi.com© 2011 Richi Inc. All rights reserved.

×