Transitioning from Web Sites to Web Apps with the History API: SMX Advanced 2013

  • 632 views
Uploaded on

Tom Conte's 2013 SMX Advanced Crazy, Technical session presentation highlighting a demand for native application functionality on the web and using the HTML5 History API to build accessible and …

Tom Conte's 2013 SMX Advanced Crazy, Technical session presentation highlighting a demand for native application functionality on the web and using the HTML5 History API to build accessible and engaging photo galleries.

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Head over to my blog to read up on the JavaScript used in this presentation: http://bit.ly/16eZRJ0
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
632
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
0
Comments
1
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. June 2013 Prepared By Transitioning from Web Sites to Web Apps with the History API
  • 2. 2 Tom Conte 2 •  Senior SEO Strategist •  www.morpheusmedia.com •  tomconte@morpheusmedia.com •  @cometton @cometton | #smx
  • 3. 3 3 Websites using standards-based JavaScript APIs provide richer web experiences, similar to native apps, without sacrificing browser or site usability. @cometton | #smx
  • 4. 4 Native Apps vs Web Sites 4 •  Which is more inviting? @cometton | #smx
  • 5. 5 Facebook Mobile Web vs Native App Usage 5 •  Not only do users want it, but it’s cheaper and ubiquitous @cometton | #smx
  • 6. 6 Web Apps 6 •  Update states, not pages to provide faster and responsive experiences @cometton | #smx
  • 7. 7 Ajax + History API 7 •  Pros: •  Rich experience •  Performance benefits •  Browser features are usable •  URLs can be bookmarked •  URLs can be indexed •  URLs can be shared •  Old URLs can be redirected •  Page weight is lighter •  Doesn’t require server configuration •  Accessible without JavaScript •  Cons •  Limited browser support and compatibility (for now) @cometton | #smx
  • 8. 8 A&E: A Case Study 8 @cometton | #smx
  • 9. 9 A&E Photo Galleries 9 •  Some galleries were built in Flash others with a hash (#) •  All unique content was placed on one page •  Long load times •  Images weren’t always indexed The hash limited the success of photo galleries @cometton | #smx
  • 10. 10 The Challenge 10 •  User Experience •  Native-like: Fast, seamless, responsive •  Crawlability •  Unique URLs for each gallery image •  Relevancy •  A single title, caption, and image per URL •  Accessibility •  Works in the most basic of browsers @cometton | #smx
  • 11. 11 Step 1 11 •  Build a photo gallery to function using HTML and PHP only •  Title tag is set as the image title •  Meta Description is set as the image caption •  URL pathname is set as the image filename <a href=“/page” id=“prev”> <img src=“prev.gif” alt=“Previous” /> </a> Image Caption Image Image Title > > Thumbnail Thumbnail Thumbnail > > Link > Link > Link Gallery More Galleries @cometton | #smx
  • 12. 12 Step 2 12 •  Set an on-click event on the “previous” button (Hijax) var link = document.getElementById(”prev"); link.onclick = function () { alert("I'm using unobstrusive JavaScript!"); return false; } @cometton | #smx
  • 13. 13 Step 3 13 •  Update the URL in the browser with a path var link = document.getElementById(”prev"); link.onclick = function () { history.pushState(null, null, swapHTML(link.href)); return false; } @cometton | #smx
  • 14. 14 Step 4 14 •  Asynchronously update the page’s content to a new state function swapHTML(href) { var req = new XMLHttpRequest(); req.open("GET”, “http://example.com/gallery/” + href.split("/").pop(), false); req.send(null); if (req.status == 200) { document.getElementById("gallery").innerHTML = req.responseText; var link = document.getElementById(“prev”); link.onclick = function () { history.pushState(null, null, swapHTML(link.href)); return false; } return true; } return false; } @cometton | #smx
  • 15. 15 Step 5 15 •  Configure analytics tracking and back-button functionality window.onload = function() { swapHTML(location.pathname) _gaq.push(['_trackPageview', “/virtual/” + location.pathname]); window.addEventListener("popstate", function() { swapHTML(location.pathname); }, false); } @cometton | #smx
  • 16. 16 Results: Month 1 16 •  Gallery landing page ranks in the 1st position •  Nothing changed @cometton | #smx
  • 17. 17 Results: Month 2 17 •  3 sub-pages of the gallery ranked in the first 4 positions @cometton | #smx
  • 18. 18 Results: Month 3 18 •  Mega-sitelinks appear for the main gallery page •  2nd position is occupied by another sub-page with it’s own sitelinks @cometton | #smx
  • 19. 19 Results: 1 Year Later 19 •  1st two positions are owned by client each with sitelinks •  Although competition has increased, visibility is stable @cometton | #smx
  • 20. 20 Results: Increased Organic Traffic 20 •  351% increase 3 months after re-launch of a Storage Wars photo gallery @cometton | #smx 0" 10,000" 20,000" 30,000" 40,000" 50,000" 60,000" 70,000" 80,000" 90,000" Storage(Wars(Organic(Traffic( 3"Months"Pre6Launch" 3"Months"Post6Launch"
  • 21. 21 Our Job is Never Done… 21 •  Implement rel next and prev •  Share page equity across the entire gallery •  Execute scripts on demand •  Prioritize the order in which content is downloaded •  Pre-fetch content •  Load new content in anticipation of user actions @cometton | #smx
  • 22. 22 Other Uses of the History API 22 •  Infinite Scroll •  Push a new URL for each additional content request •  Continuous playback •  Avoid interrupting music play while browsing a site @cometton | #smx
  • 23. 23 Final Thoughts 23 •  Close the gap between native and the web with JavaScript APIs Geolocation Local Storage WebSockets Video & Audio Web Workers Server Events Page VisibilityCanvas Messaging @cometton | #smx
  • 24. 24 Resources 24 •  Learn more about JavaScript by following Jeremy Keith (@adactio) @cometton | #smx
  • 25. 25 Thank You! 25 •  Tom Conte •  @cometton •  www.cometton.com •  tomconte@morpheusmedia.com •  Morpheus Media •  @morpheusmedia •  www.morpheusmedia.com •  morpheusmedia.tumblr.com