One page application development

The rise of the one web page application.

There is a big increase in the rise of 'one page' web applications. WJP Media creates 'Full-Stack' websites and 'SPA' - single page web applications, which allow content to be added and updated easily online.

'SPA' - single page application, will mean absolutely nothing to the majority of people.  So, here is a quick insight into what a one page web-app is.

Angular, React, Vue

Traditional web pages

Traditionally, websites deliver html to a web browser one page at a time. This html is 'stateless', which means it has no idea of where it sits on the big scheme of life, universe and everything.... It has no  knowledge of what's going on...

Compare this to an application which sits on your phone or computer. An 'application' knows who you are and what its purpose in life is. It remembers what you've asked it to do and is programmed to deliver results according to the information and requests supplied to it. An application kinda knows what's going on....

Granted this is a massive over simplification and an imperfect description of the differences between a web page and an application, but you hopefully, get the picture!

Ah, but I hear you say, so how do websites know how to show me the goods I want to see and buy, if they're completely dumb?

Well, in the beginning there were simple web pages, devoid of any 'interactivity'. Then someone figured how to entice flat-html to interact with a basic computer script. This allowed basic web pages to be connected to server-side databases.  Which allowed web pages to have a certain amount of interaction by having their content changed at the request of a browser (the person looking at the web page). Which was nice...

Then along came browsers that could read a scripting language to add 'client-side' interactivity, thus enriching the experience of websites. Javascript had arrived.

 

One page apps

Ok, so what is a one page web app?
Instead of the 'web-server' delivering a new 'web-page' each time the browser make a request, an SPA (Single page application) dynamically changes its content 'client-side' (in the browser) thanks to a set of code libraries based upon evolutions of Javascript. All the necessary HTML, Javascript and CSS is delivered to the browser just the one time.  Then the browser changes the content of that page according to user actions.  There is just one hit the to web-server.

The idea is that this provides a seamless 'application' type experience which works well on any device, be it traditional computer, laptop, tablet or smart phone.

These single page applications use Javascript frameworks such as Angulur JS, React or Vue.js

Here are some links to some SPA websites, if you would like to see some examples.

Apple Plug SPA example

Plastics SPA example

 

Unlike a more traditional multi-page website, a single page website organises its content in sections that can be accessed by scrolling down. Which means that the content has to be organised logically in the knowledge that a user will be tempted to skip a section and scroll rapidly, without reading the content.

 

So, is an SPA - single page application - the right choice for me?

Maybe, maybe not, but let's start with the 'pros' for an SPA.

1) Simple user interface - easy to use.

2) Increased 'Sticky-ness' for your site - Users don't need to navigate away from the one page - so they tend to engage more by scrolling, rather than navigate to another page or site (often away from your own site).

3) Clarity of content - If you have a story to tell, then SPA is ideal. By concentrating all your content on one page, you have the chance to tell your story in a linear fashion. Which is not easy to do if you are spreading your content over several pages (which may never be seen).

4) Higher conversion rate - because your 'story' is concentrated on one page, your chance of a successful CTA (call to action) is higher. Your chance of directing them to a sale (for example) is higher. Thus the 'conversion' rate is higher.

5) Naturally good on mobile devices - Many websites are 'responsive' these days. Meaning they adapt their layouts to the device they are being viewed on (PC, Tablet, Phone, etc).  However, an SPA is naturally designed for mobile devices, because you don't have to navigate to different pages - something that can be difficult with traditional sites.

 

Ok. so those are the advantages of a Single Page Application. So what are the disadvantages?

An SPA is not the corrrect choice for all websites. Let's like at some of the reasons why they may not be appropriate.

1) Narrow content means narrow keyword targeting - The idea of an SPA is that the content is aimed at a very specific audience, with your message equally specific.  So, if you have a lot to say, and multiple messages to get across, then an SPA is not for you. Equally, because an SPA is only one page, with one message, you can only use one set of keywords. So your ability to promote a wider range of content and try to rank a wide range of keywords, is strictly limited.

2) Confusing content - Again, if you have a lot to say, and need to pass on a lot of information, then an SPA is probably not for you. Attempting to get across complex information on one page (even with the best graphics and illustrations) is a big ask. You may well create more confusion than comprehension, thus defeating the reason for developing a Single Page Application.

3) Poor Analytics - The information supplied in analytics (e.g Google Analytics) is vital to any web marketing campaign.  If your website is one single page, then you can only get analytics about that one page.  So working out (for example), which content on your site visitors are drawn to, is far more difficult.

4) Scalability - You can't just add a page of content to a SPA, when you feel like it.... So, if you find yourself needing to add a lot of extra information - something that really needs another page - then you've got a problem!

 

So, that is a quick overview of what a Single Page Application is all about. At the end of the day you need to think carefully about whether an SPA is right for your business.  If so, great!  WJP Media work in React and Angular and we are more than happy to develop an SPA for you!

 

 

One page application development

About Us

WJP Media creates 'Full-Stack' websites and 'SPA' - single page web applications, which allow cont…

Full -Stack Dev

'Full-Stack' development, refers to a developer (or developers), who are just as comfortable working…

Single Page Apps

The rise of the one web page application.

There is a big increase in the rise of 'one page' web app…

Umbraco Dev

In today's online environment the ability to easily modify and update your website is crucial. Umbra…