Can Your 300 Page Web Site Be Represented on One Page?

DZone 's Guide to

Can Your 300 Page Web Site Be Represented on One Page?

· Java Zone ·
Free Resource

As you propably know ItsNat is strongly oriented for the development of web sites (not only web applications) based on a single web page without reloading. That is done by following the Single Page Interface paradigm (SPI), with no loss of the typical characteristics of a standard page-based web site (SEO, accessibility with JavaScript disabled, bookmarking, back/forward buttons, visit counters and so on). 

I am a firm believer that SPI is the future of web sites, maybe Web 3.0. In fact there are some big movements like Twitter or FaceBook that are mainly SPI web sites. Of course we do not need to be too purist, there may be two, three pages per web site :)

The problem of SPI applied to web sites is to avoid web site duplication, SPI and page based for SEO. Google is aware of this serious problem and is trying to provide solutions. The hardest part is how to crawl AJAX content, and proposed approaches by Google are too "hand made", costly or problematic in my opinion.

The SPI Manifesto

Trying to push forward web development evolution to SPI, The Single Page Interface Manifesto was published to show how SPI can become real in web sites. To lead by example, my company's web site innowhere.com was converted to SPI with the same aesthetic and of course with SEO, bookmarking and visit counters.

The SPI Tutorial

The next step was a SPI tutorial showing how to build a simple SPI web site with ItsNat pursuing the objectives of the Manifesto. This tutorial showed how a web site can be in the same time SPI and page based, where "states" (in SPI "state" concept replaces "page") can be designed with plain HTML markup and therefore very similar to the traditional page based approach, the main difference is you only design the fragments being to be inserted avoiding the typical repetition of headers, footers of every page (the "include" hell) and in the case of ItsNat, no server logic is included into the HTML markup of templates (because view logic is Java calling Java W3C DOM API). Of course alongside this tutorial is the expected online demo. In the last version of this tutorial/demo Back/Forward buttons are simulated updating the page without reloading, that is, even more SPI (the first version reloaded the page to the expected state).

The next step seems obvious...

Why not convert to SPI a real world big site?

Yes, is done... but not the original one, I have partially cloned as SPI the e-commerce conventional page based web site of a very big Spanish retailer, following similar techniques and code shown in the tutorial. The Spain's law says that web sites of big companies must be fully accessible following the old WAI approach, that is, fully working with JavaScript disabled, as anyone can understand, JavaScript disabled and SEO friendly are two objectives very similar. The Manifesto and the tutorial showed how a SPI web site can be at the same time page based, these ideas and technical background were applied to this new challenge.

This web site resulting from this has:

  • Navigation with no reload.
  • Bookmarking of states the same as pages
  • SEO compatible (try to disable JavaScript to understand how is "seen" by web crawlers).
  • Back/Forward support (browser's history navigation in general) with NO reload.
  • Fully working with JavaScript disabled.
  • Layout" exactly the same as the original site.
  • Remote view/control of other users using the web site (typical "free" bonus of ItsNat).

Read the information in the overview page including the terms of use and what part has been cloned as SPI.

Link to the DEMO.

Can your web site be SPI?

Is SPI the future of web?



Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}