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.

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