We want to see more

Exciting technologies and techniques are constantly emerging in the world of web design. In 2016 we would love to see a lot more of the following;

Critical CSS 

Have you run your website through Google's PageSpeed Insights tool and found a result that says 'Eliminate render-blocking JavaScript and CSS in above-the-fold content'?

Implementing critical CSS will fix this issue, and it will also generate quicker loading times for your website, no empty spaces and overall a smooth web experience. The process allows the important (above-the-fold) elements to load with priority, which sees the web colours display first (this could be the navigation bar, the background behind the hero image, etc.). Then loads the typography, these two elements together generates the majority of your site, which enables the user to start their web experience with no delay.

The images are the next items to display, followed by the remaining content, which would be loaded and ready to view once the user begins to scroll. As the craft of web development continues to evolve, we recognise the need to develop thoughtful systems and processes that can keep up with the demand for fast loading pages, gone are the days of seeing a loading bar when you first visit a site.

Learn more about Critical CSS

HTML Canvas

We’ve all been blown away by the amazing animations and effects in HTML Canvas experiments that keep popping up on the web, but what we’d like to see in 2016 are more practical applications of Canvas. The technology provides many opportunities for enhancing the content and adding more meaning to a page, rather than simply adding flashy effects.

Here are a few examples of websites that have taken advantage of Canvas to improve their user experience in clever ways:

Bancrott Estate Wine Explorer
http://wineexplorer.brancottestate.com/
An interactive map showing the classification of the company’s wines. The dynamic, clickable web allows you to explore similar wines or find wines for a particular occasion or to accompany a type of food.

CanvasMol
http://alteredqualia.com/canvasmol/
Canvas is used here to display a 3D view of the molecule, allowing you to rotate it to look at it. Seeing the molecules in 3D and being able to manipulate them makes the concepts easier to understand.

The Wild Path
http://tympanus.net/Development/StorytellingMap/
A great example of using interactivity to link text and other media to give the content more meaning than each part would have individually. The map traces the journey as the user scrolls through the story and connects images to the relevant part of the map.

Multi-device syncing

Sites designed for multiple devices are a must today, but have you seen sites designed for use by multiple devices at once? The following sites sync the desktop site with a phone, without asking the user to install an app:

Lightsaber escape
https://experiments.withgoogle.com/lightsaber-escape
This game uses the motion of the phone to control a lightsaber, giving the user much more range of motion than using a mouse.

Omnisense
http://experience.omnisense.net/
Omnisense is a decision-based, psychological game that uses a phone as a game controller. Playing with a phone increases the feeling of immediacy and provides an immersive gaming experience.