Single Page Application or Nested Pages: Corporate Website

[elpbatista]

Single Page Application SPA

The purpose of this approach is to display corporate information in the same place and provide external links to related topics through "calls to action" that act as an entry point to the parts/features of the project that you want to highlight.

Navigation

Single depth menu (navigation bar) that provides jumps to named sections section id="section_id" through local links href="#section_id"

• Corporate: This is the entrance screen (before scroll) that shows the most attention catching information (video and some impacting message) + search form + Advertisement Section
• About: It jumps to the About section: Text About AddressForAll + Consulting Board + Sponsors
• Resources: It jumps to a section with calls to action pointing to ex: Data download page, API entrance page, Tools download page
• Services: It jumps to the already existing Services section
• FAQ (external link)
• Blog (external link)
• Contact (jump to the contact form in the footer)

It also incudes some unlinked messages (blue box in the proposal) to provide some visual balance as well as call to actions

Nested Pages

It is the traditional approach. Navigation can be solved using nested menus and submenus, and is usually supported by a breadcrumbs element to provide context and provide information about the current depth level

Navigation

• Home
• Corporate
  • About US
  • Statute
  • Projects
  • Partnetships
• Resources
  • Data
  • Services
  • Api
  • Tools
• Contact
• FAQ
• Blog (external link)

[ppKrauss]

Using issue #7 as rationale:

• SPA is "not for now", versions 2.0.0 and 2.1.0 are urgent and must use "old classic Web" as reference.
• SPA, as a kind of optimization, may be appreciated in future 2.2.0+ website versions, but only for some group of pages, not for all website.

... having said that, let's comment something about the theme.

---

"Single vs Multi-Page Application": this is an architecture decision for "smarthphone application" development, but the AddressForAll website is not an application in that sense, is more like a "classic website" (e.g. old Wordpress websites). So this is a requirement restriction: the AddressForAll webpages can be optimized, grouping correlated pages in one, using SPA strategy, but not all (v2.2.0) website.

Other requirement restriction: our target audience, it is not "all the Web", we have very low pageviews per day, and it is not for entertainment or selling... Is important to include into /docs/generalSpec a target audience definition.

Let's check pros and cons about "grouping correlated pages" in SPA... The PROS:

• Quick Loading Time: is faster than multipage.
• Seamless User Experience: content changes and not the page.

But our webpages are lightweight, our multipage solution is lightweight, so we are using less bandwidth, and we have also quick loading time with our multipage solution.

... The CONS of SPA use:

• Doesn’t Perform Well With SEO:

• Uses a Lot of Browser Resources: so if the homepage need to redirect "find my address" for common people (a new target audience) to some good application, it is not a good strategy to use SPA at homepage.

About SEO and Semantic Web (add semantic layer into webpages), our multipage solution, perhaps website version 2.2.0 or 2.4.0, will add Schema.org semantic in a transparent way, like this Lexml-DOU/demo.

[ppKrauss]

ok, Multi-Page Application