29th January 2019

New Adventures 2019 | Part Two: Progressive Web

Jimi Struselis Thumb

Author

Jimi Struselis

New adventures conference part 2

Following on from Nikki’s article about the New Adventures Conference, I had the pleasure of attending the Progressive Web: Building for Resilience workshop by Jeremy Keith. Here I’ll summarise what the workshop covered and more importantly what I took back from it.

Jeremy’s workshop was a fascinating insight into resilience and how to approach a web project with ubiquity and consistency in mind from both a design and development point of view. The workshop also introduced how the latest technologies should be treated as enhancements instead of core functionality. This then moved onto discussing where the future lay and how to incorporate particular features to improve user experience where possible.

Core features vs Enhancements

Firstly, we were tasked with selecting some of the most complex web applications around today and imagining how we would create them in 1995; back then we had TCP/IP, HTTP(S), URLs and HTML, but there was no CSS (page styling) and no Javascript (custom front-end functionality). Using Facebook as an example, we summarised what the core features needed to be by writing a mission statement about what such an application should be, from this we determined the following:

  • There would be a directory of users to connect with.
  • You would have a list of content created by users you are friends with in a descending order of date. This would likely be paginated like a forum.
  • Each user would have their own page where only their content would be visible as well as a list of their friends etc.
  • Image uploads would be possible, but loading images would be quite a burden on the connection speeds of the time.
  • Messaging would be possible as comments, but instant messaging would not be possible as the user would have to manually refresh the page.

This exercise allowed us to break down a complex application into the very basics and what it needed to do. Facebook’s own mission statement is:

To give people the power to build community and bring the world closer together. People use Facebook to stay connected with friends and family, to discover what's going on in the world, and to share and express what matters to them.

Facebook Newsroom

With that in mind, we realised that we could indeed build a version of Facebook that satisfies their mission statement.

Fast forward 10 years to 2005 (Facebook itself launched the previous year), we had Javascript, CSS, faster internet speeds and technologies such as AJAX and Flash; from there we could add enhancements such as instant messaging, image galleries, lazy loading feeds and user profiles. The important takeaway from that was to realise that so long as the key mission statement was achieved as simply as possible, everything else that could be added later was an enhancement.

Ubiquity vs Consistency

Next, we went on to discuss the state of the web today by looking at it in terms of ubiquity and consistency. With so many devices, operating systems and browsers out there able to access the web we determined that the the web was very good at ubiquity; however it was bad at consistency as each browser / device was different in terms of the features it supported.


In terms of the design and development process, we saw how precision - the pixel perfect designs we wow our clients with and then send to our developers to create, can never be reproduced perfectly on the web, simply because of the webs own inherent inconsistency.

We then moved on to discuss consistency from the end user’s perspective; we looked at form input elements as the best example and determined that whilst we had the ability to override the appearance of a native browser’s form elements to produce consistency with the precise design; in some cases this can be very bad from a user experience perspective. Taking a dropdown for example and using a javascript library to produce something that can then be styled introduces the following problems:

  • Native elements are designed to be accessible in many ways for screen readers and keyboard control etc in ways that the replacement inherently sacrifices. This has further ramifications when translating over to a mobile device.
  • Introducing styled form elements confuses what is consistent for the end user. If you cannot use CSS to style a form input in a particular browser, forcing a styled version one way or another on the users of that browsers means that they will not recognise your form inputs as they are used to seeing and interacting with the purely native version.

Next, we went on to discuss the state of the web today by looking at it in terms of ubiquity and consistency. With so many devices, operating systems and browsers out there able to access the web we determined that the the web was very good at ubiquity; however it was bad at consistency as each browser / device was different in terms of the features it supported.

Or in other words:

Over engineering is under engineering

Baldur Bjarnason

Ubiquity

Today’s Enhancements

The next part of the workshop took another look at enhancements in web applications. We were given 3 words: 1 for platform / application, 1 for subject and 1 for audience (such as: sharing platform, music playlist and commuter). Again, we had to come up with a mission statement: “Allowing users to create and share music playlists for their journey” and then use that to determine what the core functionality would be, in its simplest form

(like 1995 Facebook). From this we could generate a URL structure and prioritise the content for an instance page such as a single playlist. Again we took our core functionality and looked at modern technologies in order to ‘enhance’ it.

By using our music playlist sharing platform for commuters as an example, a good modern enhancement would be Geo-location. This could be used in our example to generate a random playlist based on the following:

  • Traffic conditions - songs could be selected by tempo, based on speed of travel.
  • Weather - songs selected based on mood (Walking on sunshine would not be selected on a day that it rains).
  • Journey time - if a user’s commute has a definitive start and end point of which a journey time can be calculated, this can be used to set the playlist length.

Altogether these are additional enhancements to a user’s experience, but more importantly, they do not impact on the mission statement or what the core functionality should be.

Progressive Web Applications

Finally, during the last part of the workshop, we explored the idea of Progressive Web Applications as well as experimental / partially supported technologies and how these could be used to enhance user experience. The idea was by looking back at how websites and web applications have used certain technologies to enhance user experience in the past, we as developers should also not be afraid of implementing upcoming technologies as further enhancements where available.

With this in mind we took a look at Service Workers (functionality that the browser runs in the background) and what they could allow an application to do, such as having an offline experience by caching visited or important information pages and having them available when connectivity is unavailable; this therefore has the benefit of maintaining user engagement to a certain degree and making it less likely that the user will close the browser when offline. This is but one of the many scenarios that Service Workers can be implemented for and by taking this into consideration, we can therefore future proof our work for a time when support for certain features becomes more widespread…

Naconf debrief

In short, the Jeremy Keith workshop provided a good insight on how to view our web projects from a core functionality perspective all the way to the next generation of browsers and technologies; whilst also appreciating that web technologies such as CSS and Javascript should be treated as enhancements that do not impact the mission statement or core functionality.

Related Views

Interesting? There’s plenty more where that came from…

Join our Newsletter