In the Digital Pulse ‘Uncovered’ series, we break down buzzwords to clarify technology and terminology.
Here, Adnan Jaswal explains what a single page application is and why designers are clamouring to use it.
The way we use the internet is rapidly evolving. In 2015, mobile overtook desktop as the preferred digital platform. Users have become accustomed to not only receiving content but generating it themselves. Installing apps, along with the broad functionality that comes with them, is commonplace.
As a result of these influences, modern users expect websites or web applications to provide an increasingly rich, interactive and fluid user experience – much like native applications do on devices such as phones and tablets.
Touted as one of the major web design trends of recent years, the single page application (SPA) is a solution that enables designers and developers to build web applications that respond to the demands of today’s user.
What is a single page application?
Websites that are slow, clunky and one-dimensional are losing relevance in the digital age, where users expect a rich and interactive digital experience. Traditional web applications, which generally serve page after page of static content, are not well suited to meet those expectations.
A single page application is one that’s loaded as a single HTML page in the browser. As the user interacts with the application, the relevant parts of the page – rather than the whole thing – are dynamically updated.
Facebook is one example that uses single page application design. To see more, the Awwwards website maintains a list of other, well-designed ones.
Key features of single page applications
No more page reloads
The most important feature of a single page application is that it eliminates the need for page reloads when navigating through the application or performing app tasks.
For example, in a traditional e-commerce web application, when adding an item to a shopping cart, a user may see a white flash as the page reloads. In a single page application, the item will be added to the shopping cart seamlessly and relevant parts of the page updated or redrawn in a fashion that doesn’t demand the whole page to reload.
Let’s take an example such as online retailer Catch of the Day. On that site, when you add an item to the cart, the image of the cart in the top corner of the page refreshes to show the total number of items in your cart. The page itself doesn’t change – a giveaway is that the URL remains the same.
The browser shares the workload
With a single page application, most of the interaction logic is executed in your device’s browser – which means that not all commands, or actions, are sent all the way back to the server to be processed, as was traditionally the case.
Traditional web applications work on a request/response cycle. Every time the user’s browser sends a request, the server responds with a new HTML page. The HTML page is loaded in the browser as a page refresh.
This ‘thick client’ model makes the application work seamlessly, which results in an experience more like that of a native application. By removing the ‘round trip’ of sending commands to the server and back, the journey is quicker – and therefore more fluid.
A seamless journey from online to offline
A single page application can remain in use even when offline. This is because most of the interaction logic is downloaded to the browser when the application is accessed for the first time. The application state during offline mode is stored locally on the browser, and when network connectivity becomes available again it syncs with the server.
An example of this feature in use could be a travel application that tracks a user journey for a route that spans an area where network connectivity might not be available. During periods of network drop out, the application would still continue to function in offline mode, resyncing when network connectivity becomes available.
Being able to connect the dots of a user experience that moves between online and offline in this way has long been a feature of native applications on mobile devices – but it is also one of the drawcards for employing a single page web application.
Where to from here?
There are some wider accessibility considerations to bear in mind when building this type of application, particularly if aiming for a triple-A rating. Make sure that you are up to date with World Wide Web Consortium’s WAI-ARIA accessibility specifications and that accessibility is part of your quality assurance process.
The arguments for single page application are so strong that most modern websites are now based on this design. Long live the single page application!
Adnan Jaswal is a manager in PwC’s The Experience Centre and the author of KnockoutJS by Example (2015, Packt Publishing)