Enovate https://www.enovate.co.uk/ Latest news from Essex based web design company Enovate Design, as well as commentary on responsive web design and other website design related topics. en-GB Tue, 10 Apr 2018 15:23:00 +0100 Tue, 10 Apr 2018 15:30:07 +0100 Fanatic Aquatic Design goes live https://www.enovate.co.uk/blog/2018/04/10/fanatic-aquatic-design-goes-live Tue, 10 Apr 2018 14:23:00 +0000 https://www.enovate.co.uk/blog/2018/04/10/fanatic-aquatic-design-goes-live

Enovate have developed a brand new, responsive website for our client Fanatic Aquatic Design, who have over twenty years experience in the aquatic industry and specialise in the installation and maintenance of tropical and marine aquarium systems.

Fanatic Aquatic came across our website and got in contact with requirements of what they wanted their website to look like, the functionality it should contain and how they wanted their new website to portray them as a brand. They also provided any business goals they are hoping to achieve by reaching out to us to create a modern, responsive website.  

The process began with the production and completion of the project specification, to which we could then gain a solid understanding of the ideas of designs the client may have, including colour schemes and fonts used for the content throughout the site.

Discussions were iterated back and forth between ourselves and the client after receiving feedback and sending over the revised design. This process continued until a final approval was given, to which the next stage was for the developers to start writing the code to bring the designs to life.

Throughout the project, the client had access to the development site, allowing them to watch the project transform over time. This also allowed the opportunity for the client to provide feedback in the early stages of development. The client had the opportunity to test the site on any device, such as mobile phones, tablets, laptops and desktop PC’s.

After receiving all the content from the client, we began the process of putting that content into the CMS. As with all our responsive website design projects, our CMS of choice was Craft CMS.

Our clients received a training session, which brought them up-to-speed with the CMS, and allowed them to make their own content adjustments, straight to the live site.

Both Enovate and our client are happy with the responsive website and we hope it serves them well for many years to come, and helps generate a steady flow of business enquiries and new projects.

Why not take a look at it yourself, and if you’re considering a similar project we'd love to hear from you.

]]>
Essex Cares Ltd (ECL) goes live https://www.enovate.co.uk/blog/2018/03/29/essex-cares-ltd-ecl-goes-live Thu, 29 Mar 2018 15:30:00 +0000 https://www.enovate.co.uk/blog/2018/03/29/essex-cares-ltd-ecl-goes-live

ECL approached Enovate, and a number of other companies, with a tender opportunity to redevelop their website. The basic requirement was to replace the existing content management system (CMS) with something new and modern but there were also a wide range of additional features and enhancements needed.

We submitted a response to the tender and after meeting the project team at ECL we were delighted to be awarded the contract.

After documenting and confirming the project requirements in a statement of work we began the planning and design stages of the project. We worked very closely with ECL until the draft designs they’d supplied were evolved and enhanced into the final, approved site page designs. During these early stages we also considered SEO best practices, ECL’s existing Google search engine ranking and Google Analytics data, which helped guide us when making decisions related to design and content strategy.

With the page designs all approved, it was now the turn of the development team to get the new site up-and-running. As with all our responsive website design projects, the content management system we used was Craft CMS. Its flexibility and ease-of-use for clients making it the best choice for a project of this scale and complexity.

During the development stage of the project, we gave the ECL team access to a secure development site as soon as we could - the development site is effectively and work in progress site that the client can access - which allowed them to follow our progress as the website was being built. This always proves to be a valuable asset for both parties because it allows the client to supply valuable feedback during the build which can be addressed before the new website is launched.

The finished website has a number of custom features, including a fully bespoke Location Finder. This allows website visitors to find ECL locations in their area, providing matches based on the location and service criteria they have supplied. Another interesting feature is the custom Contact Us page. This has been designed and developed in such a way to help visitors find the exact contact information they need to resolve their query quickly rather than just supplying a single, generic email address or telephone number.

Another unique requirement from ECL was to give their Local Business Managers (approximately 30 users) Craft CMS accounts with restricted permissions so that they could only make content changes to certain areas of the website. Thanks to the flexibility of Craft CMS, we were able to accommodate this.
 
The positive working relationship developed between ourselves and ECL ensured the project ran smoothly and we are elated with the end result, which was delivered on time and within budget. ECL are a fantastic team to work with and we are looking forward to completing phase two of the project and incorporating the new features that will be coming to the site very soon!
 
Why not take a look at the site yourself, and if you're considering a similar project we'd love to hear from you.

]]>
Google Analytics: My experience with their courses https://www.enovate.co.uk/blog/2018/03/15/my-experience-with-google-analytics-courses Thu, 15 Mar 2018 11:00:00 +0000 https://www.enovate.co.uk/blog/2018/03/15/my-experience-with-google-analytics-courses

Google Analytics is vital for training purposes and the workplace, but also helped me work towards my Digital Marketing Level 3 Apprenticeship. There are multiple online courses you can choose from, but Google Analytics for Beginners was the first one I completed out of my list of three.

Second and third on my list were Google AdWords and HootSuite. Both of these are highly relevant to digital marketing, as they give you insights into the business itself and the background knowledge you need when it comes to publishing advertisements and improving income. But for now, let’s look at the Google Analytics courses.

I decided to start gently and chose the beginners option for Google Analytics, hoping to tackle the Advanced Google Analytics course in the future. The units included in the Beginners course are:

  • Unit 1 - Introducing Google Analytics
  • Unit 2 - The Google Analytics Layout
  • Unit 3 - Basic Reporting
  • Unit 4 - Basic Campaign and Conversion Tracking

I worked my way through these units without any problems. Everything was simple, clear and easy to take on board, and so I felt comfortable going forward.

Google Analytics Academy for Beginners and Advanced.
https://analytics.google.com/analytics/academy/

It was then time to tackle Advanced Google Analytics. Looking at the course, I noticed it included the same number of units but each unit contained more lessons than the Beginners course. There was much more information to process, but it was well worth it to gain the qualification in the industry.

The Advanced course units are:

  • Unit 1 - Data Collection and Processing
  • Unit 2 - Setting Up Data Collection and Configuration
  • Unit 3 - Advanced Analysis Tools and Techniques
  • Unit 4 - Advanced Marketing Tools

Both courses will impact deeply on my knowledge of the industry. As an apprentice, you want to increase your skills as much as possible and keep on learning throughout the whole process, and I have to say both these courses helped me achieve that.

Please see the links below for the Google Analytics Beginner and Advanced courses, as well as Hootsuite and the Future Learn Digital Marketing course (not run by Google).

Unfortunately, the Google Adwords course is only accessible for companies or individuals associated with Google Partners, which is useful for digital marketing firms but sadly not for general access. So I have linked below to the free courses that are targeted towards everyone:

How you can learn on the courses

There are two ways you can learn throughout the Google Analytics courses:

1. Video sources

Each lesson is split into a number of videos from Google Analytics experts, with the useful option to change the speed of the video either faster or slower. I found it helpful to watch the videos slightly slower to gain as much knowledge as possible.

2. Transcripts

If you prefer to copy the key parts of the notes down, you have access to the transcripts of the videos, with images relevant to the information included.

I personally did both, watching the videos first and then writing notes from the transcripts. Some people might find it easier to just watch the videos with the option for subtitles, or simply to copy the transcript notes, whichever works best for you.

Luckily for Beginners and Advanced students, Google Analytics doesn’t have an exam at the end for you to pass. Each unit has an end-of-unit assessment to go over all the knowledge you’ve just learnt - when you have passed the assessments for all the units, then you have passed the whole course.

The certification runs out 12 months after your pass date, so you need to retake the course every year to keep your certification current.

So what was next?

After you have completed both courses, it is then time to move on to the Google Analytics IQ Assessment. Unlike the two courses, this is a 90-minute assessment exam with a pass mark of 80%.

The Google Analytics IQ Assessment substitutes for one of the exams as part of my training for the Digital Marketing Level 3 apprenticeship, as this covers content learnt in college and in the workplace (if asked to).

The good news: if you fail, then you are able to retake the exam in 24 hours. To keep your certification up to date, you need to retake and pass the assessment every 18 months.

Thursday 22nd February was the big day I went to college to complete the IQ assessment with my fellow trainees. It’s safe to say it was a nerve-racking experience, but we had a morning packed full of revision and mock tests in Google Analytics Beginner and Google Analytics Advanced to refresh our memories and give us an idea of what the questions would look like in the exam.

It is important to note that with 70 questions in 90 minutes, you have on average 1 min 28 secs to answer each question and once you have pressed submit for your answer that’s it, you cannot go back. So make sure you read the question carefully and be 100% sure the answer you have chosen is the one you want to commit to.

Any exam is nerve racking, no matter how much revision you have packed in. However, I felt less nervous about this exam due to using Google Analytics most days to check data such as Bounce Rate, Average Session Duration, Users and Sessions on the site during a particular time period.

It also helped that I had set up Custom Alerts and Custom Reports to not only give me a brief outlook on the business, but also for my own benefit. I was able to really work my way around Google Analytics so I had a higher chance of getting questions on any subject that appeared correct. I was over the moon, to say the least, that I passed the exam first time.

Google Analytics IQ Assessment
The page you should see after you have logged in to Google's Academy for Ads

How did I revise?

Some of you might be wondering if I have any tips to pass this exam first time, especially as it is a combination of Google Beginners, Google Advanced and other questions you have never seen before. I will say this exam is harder than the assessments, so get prepared and revise.

Personally, I revise in the classic way, using note taking. I have notebooks full of notes from all different areas of digital marketing, and I find these handy to look back on when I need to.

There are other ways that might work for you, like mind maps, flashcards, watching videos without taking notes, or simply reading big chunks of text, but none of them work for me. I watch a lot of videos but I always write as many notes as I can. A lot of sites have the option to slow down videos, or you can always pause them, so you can make notes at any pace you want.

Reading my notes over and over again helps the knowledge to stick in my brain, and I have shortened them to only the most vital information, to make it easier to learn. I feel the trick is to not over-revise, otherwise your brain could become burnt out with trying to store too much knowledge at once. Even just one hour a night should help you gain the knowledge effectively whilst not over-cramming, as this might stress you out more.

I also Google searched study guides for the IQ exam and there are definitely some helpful ones out there! Study guides are always good to look at, and will usually have a mixture of information and questions to get your teeth into before the exam.

Here are some links for more information:

Want to know more about what a digital marketing agency does?

Check out our case studies to see how we help people and businesses to connect and grow.

]]>
Progressive Web Apps Roadshow (E-commerce Edition) https://www.enovate.co.uk/blog/2018/03/05/progressive-web-apps-roadshow-e-commerce-edition Mon, 05 Mar 2018 16:09:00 +0000 https://www.enovate.co.uk/blog/2018/03/05/progressive-web-apps-roadshow-e-commerce-edition Introduction

Firstly, a confession, I was due to attend the PWA Roadshow at Google’s London offices on March 1st 2018. But due to the trains from Chelmsford being in utter disarray due to a deluge of snow courtesy of a cold weather front known as “The Beast from the East”. I made the reluctant decision to recreate the experience in the comfort (and warmth) of my own home, sadly without Google’s awesome catering and other attendees! This was possible thanks to the talks being available on YouTube and the codelabs being available online too. So I can’t comment on what it was like to attend the day, as I wasn’t able to!

But what I was able to do was go through the talks at my own pace and take ample notes, the end result being this “live” blog capturing what I consider to be the most important points that were covered.

Progressive Web Apps: What, Why and How?

  • The number of global users on mobile surpassed desktop in 2014 (source: comScore)
  • Mobile users spend 13% of their time on the mobile web versus 87% in apps
  • Users spend 78% of their time in their top 3 apps
  • The average user installs zero apps per month
  • Mobile users visit over 100 websites every month

What’s so great about native apps?

  • They behave predictably
  • They can be added to the home screen
  • They start quickly
  • They use push notifications to keep users returning
  • They work offline
  • They sync in the background
  • They have access to device sensors such as the camera and microphone

What are the drawbacks of native apps?

  • Limited reach, as a different version is needed for each device platform

Meanwhile, the Web Platform:

  • Is safer
  • Has a permissions model that is more respectful of user privacy
  • Has far greater reach due to frictionless URLs

Progressive Web Apps (PWAs) combine the capabilities of native apps with the broad reach of the Web Platform. In essence, PWAs aim to radically improve the end-to-end user experience.

This is achieved in four key areas, PWAs should be:

  • Fast - PWAs need to be fast as 53% of users abandon a website that doesn’t load within 3 seconds (source: DoubleClick, September 2016).
  • Integrated - Users need to be able to add PWAs to their home screen and PWAs should integrate with the platform/browser through APIs such as the Media Playback API, Payment Request API and Media Session API.
  • Reliable - PWAs should work offline and be able to handle poor connectivity.
  • Engaging - PWAs should use push notifications to drive user engagement and web push to stay up-to-date.

Twitter has had great success with their own PWA, called Twitter Lite, which launched in the latter part of 2017. Twitter Lite now has more active users than any other Twitter client and beats all other Twitter clients in terms of smallest download size:

  • iOS: 214MB!
  • Android: 24MB
  • PWA: 0.6MB

The Twitter Lite PWA was a great success delivering:

  • 65% increase in page views per session
  • 75% increase in Tweets sent

Other companies have had similar success with their own PWAs including: Air Berlin, The Weather Company, Lancôme, Lyft, OLX, Expedia, Air France, Tui, Trivago, Forbes, CNET, CNN, The Washington Post, The Guardian, The Financial Times, The Independent, Nikkei, Nivea, Rakuten, Alibaba, Pinterest, NBA and OLA Cabs to name a few.

PWAs are particularly important for emerging markets where native apps are:

  • Costly to download
  • Not always supported by older devices
  • Suffer from slow performance on older hardware

Integrated Experiences

66% of online purchases on mobile are on the web rather than native apps, but currently mobile conversion is a whopping 66% lower than on desktop devices. This is because checkout forms on mobile are:

  • Very manual
  • Tedious to complete
  • Inconsistent from one site to another
  • Slow

PWAs can change this dramatically by:

  • Using autocomplete attributes, which generally make the checkout process 33% faster.
  • Using the Payment Request API to eliminate checkout forms for users and standardise payment collection.

The Payment Request API allows developers to request payment information and more with a single API call that returns a JSON Payment Response object, which is then used to collect the payment. The Payment Request API is supported in Chrome with Microsoft and Firefox actively working on its implementation.

Reliable Experiences

Google Chrome's default "No internet connection" dinosaur image
Don't show the Dinosaur!

PWAs should work offline and be able to cope with poor connectivity.

60% of global mobile connections are 2G, so mobile experiences need to take into account slow or non-existent connectivity.


The Server Worker API makes it possible for PWAs to be realiable even when the network isn't.

With a Service Worker the first request to a PWA along with the assets for that page come from the network as normal. The Service Worker only comes into effect with the second request (with one exception if you use skipWaiting(), which immediately activates the Service Worker).

Service workers do not consume system resources until they are woken up to handle an event e.g. a push notification.

Service Workers act as a proxy between the PWA and the network and enable developers to implement different caching strategies for each request within the app.  These caching strategies include:

  • Cache first, fallback to the network - The Service Worker will attempt to retrieve the request response from its cache first before going to the network
  • Network first, fallback to cache - The Service Worker will attempt to retrieve the request response from the network before falling back to the cache. This can be problematic for slow connections as it can take time for the network request to fail.
  • Generic fallback - The Service Worker would try the cache first, then the network and then fallback to a generic cached response, such as “you are offline so we’re unable to retrieve that article right now, how about reading these articles:”, which would list articles from the user’s cache.
  • Cache only - The Service Worker would only try the user’s cache for the request response.
  • Network only - The Service Worker would only use the network for the request response.

Engaging Experiences

Developers should browse the Material Design specification and iOS Human Interface Guidelines to increase familiarity with common user-interface components and their interactions.

Push notifications drive user engagement but can be a source of annoyance for users so require considered use, after all we are interrupting the user. 

Push notifications should be:

  • Timely - It matters right now
  • Relevant - Make it personal to your user
  • Precise - Specific information that’s good to know or act upon

Good examples of appropriate scenarios for using a push notification is a notification that an upcoming flight is delayed. The push notification should be relevant so it’s important to include information such as the flight number and be precise by including the new departure time.

Sending Push Notifications from your PWAs back-end is not that simple so it’s worth using a Web Push library to accomplish this.

Data properties can be added to the notification options to pass information from the push message to the notificationClick event to for example open a particular URL when the push message is clicked by the user. Furthermore, as the push event is handled by a Service Worker it could also cache the URL a user is likely to access from the push notification before it is delivered.

Secure Experiences

Using HTTPS ensures:

  • Identity - Who you are exchanging information with
  • Confidentiality - Who can ready your data
  • Integrity - Who can modify your data

If you need further convincing as to the benefits of swapping to HTTPS, consider that many modern browser APIs are only available over HTTPS such as Service Workers, Push Notifications and Geolocation.

The only drawback of switching to HTTPS is performance, as the setup of the secure connection does decrease server response times. But this performance impact of HTTPS can be mitigated by introducing some new technologies:

HTTP Strict Transport Security

This is introduced with a simple header added to the server response:

Strict-Transport-Security: max-age=259200; includeSubDomains

This says to the browser "only access this website and all its subdomains over HTTPS for the next month". This improves performance by stopping the browser from first requesting a URL over HTTP to then be redirected to HTTPS, essentially removing a round trip from the negotiation.

Further optimisations such as TLS Session Resumption and TLS False Start help to shave off further round trips during the TLS handshake to setup client-server secure connections.

HTTP/2

HTTP/2 unlocks some dramatic performance improvements for HTTPS.

When Weather.com launched HTTPS there was a 50ms hit for the TLS negotiation, which was more than offset by a ~250ms drop per page view (on supporting devices) when HTTP/2 was launched a month later.

With the introduction of Let’s Encrypt even cost is removed as a factor preventing websites from implementing HTTPS. Other certificate types that are not (yet) available from Let’s Encrypt can be purchased for low cost from providers such as SSLMate.

Tooling for Progressive Web Apps

Google’s Lighthouse tool is a great way to benchmark a PWA, returning scores out of 100 across five key metrics:

  • PWA
  • Performance
  • Accessibility
  • Best Practices
  • SEO (added January 2018 v2.7)

Starting Fast and Staying Fast with AMP and PWAs

For humans:

  • 0.1s feel instant
  • 1s feel natural
  • 10s loses the user’s attention

On the mobile web today:

  • 19s is the average mobile page load time
  • 77% of mobile sites take 10+ seconds to load
  • 214 server requests per mobile web page
  • 50% of requests are ad related

Accelerated Mobile Pages (AMP) aims to solve this by improving page loading times on mobile devices. AMPs are built with three core components:

  • AMP HTML is HTML with some restrictions for reliable performance.
  • The AMP JS library ensures the fast rendering of AMP HTML pages.
  • The Google AMP Cache can be used to serve cached AMP HTML pages.

Combining AMP with PWAs takes advantage of the benefits of both complementary efforts to improve the Web Platform.

Wrap Up

Future Web APIs

The PWA Roadshow has only covered a few of the new and upcoming APIs coming to the Web Platform, there are many more and there just isn’t time to cover them all.  Here are a few of the more notable ones:

Credentials Management API

This is a standards-based browser API that provides a programmatic interface between a website and the browser for a seamless login across devices. It removes friction from user login flows, as users can automatically be signed back in even if their session has expired or if they have saved their credentials on another device. It allows for a one tap sign in that leverages the native account chooser user-interface. The API allows the website or app to store the users credentials and synchronise them across devices, either a username and password combination or even federated account details. The API is supported in Google Chrome and Opera today and Apple has started working on it.

Web VR

Web VR allows developers to create a fully immersive 3D experience in the browser using a VR headset and a VR capable device. Web VR is supported today in Google Chrome, Firefox, Microsoft Edge and Samsung Browser.

Web Assembly (WASM)

Web Assembly provides a new way to run code such as C++ on the web at near native speeds. It provides the speed necessary to deliver demanding applications such as an in browser video editor or running a Unity game at a high frame rate.

Codelabs

After the talks it’s codelab time, where you gets hands-on with some example code to implement some of the ideas and approaches covered in the talks. All of the codelabs are straightforward to follow and produce the the desired results without exception.

Completing the codelabs at my own pace rather than within an allotted time allowed me to really dig into the code and do as much background research and experimentation as I wished. From previous experience, the codelabs on the last PWA training day I attended were often more like cut-and-paste races. Where the winner was the person who could cut-and-paste the code samples from the codelab into their files fastest, which isn’t conducive to actually learning and understanding what the code is doing.

Here are links to the codelabs along with the source code to download:

]]>
Web Platform APIs https://www.enovate.co.uk/blog/2017/12/13/web-platform-apis Wed, 13 Dec 2017 22:53:00 +0000 https://www.enovate.co.uk/blog/2017/12/13/web-platform-apis Introduction

The vast and growing array of browser APIs enable web developers to build richer user experiences such as Progressive Web Apps, which are made possible by the collective use of several new browser APIs.

Progressive Web Apps narrow the gap between web and native apps, and establish a set of best practices that can be implemented with universal benefit in almost any web app or website in existence. But in some ways a Progressive Web App is just scratching the surface of what can be achieved on the modern Web today. As an approach that has such broad application there are lots of occasions where web developers can and should go even further.

Depending on the nature of the website or web app, web developers can take a progressive enhancement approach to utilise some of the more niche APIs that are arriving in modern browsers with every release. For example for a web app that streams audio and/or video the Media Session API will allow you to display custom track/artist information and imagery on the mobile device notification tray along with the lock screen and even any paired wearable devices. Yes, the Web Platform can do that today!

But keeping up with all the new and shiny browser APIs is no mean feet, so hence in this blog post I’m going to cover various upcoming Web Platform APIs along with some not so new and lesser known APIs that bring exciting new capabilities to the Web Platform and create new possibilities for building richer and more effective web apps and websites.

Web Share API

Status: Unofficial
Support: Available in Chrome

The Web Share API enables websites to invoke the native sharing capabilities of the host platform. So on an Android device this would open the normal share dialog, which includes sharing via whatever native apps may be installed. This is music to our ears, as for too long have we had to include such functionality with the performance hit and clumsy UI of a third party widget or worse still spend time rolling our own, the video below demonstrates the Web Share API in action:

Cache API

Status: Editor's Draft (Service Workers)
Support: Available in Chrome, Opera and Firefox. Edge and Safari have marked the API as 'In Development'.

The Cache API is one of the core technologies of PWAs and is essentially like a key-value store, with the keys being HTTP requests and the values being HTTP responses. The Cache API provides the offline functionality of Progressive Web Apps, as a service worker can match requests to cached responses.

Fetch API

Status: Living Standard
Support: Available in Chrome, Opera, Firefox, Edge, Safari and polyfill for other browsers

The Fetch API replaces the old and trusty XMLHttpRequest object, which allows web developers to make network requests and handle the responses. The Fetch API uses Promises, which is a far easier and simpler interface to use and helps to avoid issues such as callback hell. Again, the Fetch API is used heavily within Progressive Web Apps to gracefully handle network requests from a service worker and their responses.

Web Workers API

Status: Living Standard
Support: Available in Chrome, Firefox, Opera and Safari

Service workers are a type of web worker, a web worker runs a named JavaScript file in its own thread with a different global context to the current window object. Web workers are useful as they allow web developers to run scripts in another thread, similar to a background process, which keeps the main thread more idle and able to respond to user interaction.

Service Worker API

Status: Editor's Draft
Support: Available in Chrome, Opera and Firefox. Edge and Safari have marked the API as 'In Development'.

Service Workers are a type of web worker that run a JavaScript file in the background, not requiring a web page or user interaction and act as proxy between a web app, and the browser and the network (when available). Service workers in the case of Progressive Web Apps take advantage of several new Web Platform APIs such as the Fetch API, Cache API, Push API and Background Sync API to deliver new capabilities to the Web. Service workers are crucial to Progressive Web Apps and are key to features such as offline access, background sync and push notifications.

Image Capture API

Status: Editor's Draft (MediaStream Image Capture)
Support: Available in Chrome and Opera

The Image Capture API makes is far easier for web developers to control the device’s camera to capture a still image or video and adjust hardware camera settings such as zoom, brightness, contrast, ISO and white balance along with whether to use the front or rear facing camera if applicable.

Payment Request API

Status: Candidate Recommendation
Support: Available in Chrome and Edge

Much like the Web Share API, the Payment Request API seeks to improve user experience on the Web by standardising the e-commerce checkout flow for web users, while potentially saving the collective effort of many web developers in the process. For users, rather than having to become accustomed to the intricacies of each and every e-commerce website checkout flow the Payment Request API will allow web developers to handover part of the checkout flow to supporting web browsers using the Payment Request API. This will not only save web developers time, but will result in an improved user experience for visitors as they can pre-populate forms with details securely saved within their web browser along with utilising a checkout flow with which they are already familiar.

Network Information API

Status: Living Document
Support: Available in Chrome, Opera, Samsung Internet

The network information API allows web developers to detect the connection type (wifi, ethernet, cellular, etc.) of the user’s device and effective connection type (slow-2g, 2g, 3g or 4g). This is useful as it allows us to make decisions in terms of whether to preload videos on page load or for a service worker to cache certain assets depending on effective connection type.

Background Sync API

Status: Draft Community Group Report
Support: Available in Chrome

While Service Workers allow us to provide a web app experience when offline in terms of serving cached content to the user, what happens when the user wants to send data to our web app offline? That's where the Background Sync API comes in, it allows us to capture the request the user wants to send to the server and send it when the network connection is restored.

Push API

Status: Editor's Draft
Support: Available in Chrome and Firefox

Building upon Service Workers, the Push API gives web apps the ability to receive messages pushed to them from a server, regardless of whether the web app is in the foreground, or even currently open, on a device. This is already one of the more popular new APIs in usage terms as web apps are always keen to find new ways to re-engage users and push notifications are quite an effective way of communicating with users. In order to send push notifications web apps have to request permission from their users via the Permissions API.

Ambient Light API

Status: Editor's Draft
Support: Available in Edge and Firefox

As it sounds this API allows web apps to detect changes in ambient light, so much like how most SatNav systems will adapt their display contrast settings for night time use, this API enables web apps to similarly respond to changes in ambient light.

Broadcast Channel API

Status: Living Standard
Support: Available in Chrome, Firefox and Opera

The Broadcast Channel API allows simple communication between windows, tabs, frames and iframes from the same origin (domain). Use cases include being able to update the logged in or logged out status of a user across multiple tabs if they log-in or log-out on one tab. The Broadcast Channel API has similarities to the Channel Messaging API except that the latter is for one script dispatching messages to one other (one-to-one). Whereas the Broadcast Channel API is suitable for dispatching messages to many listeners (one-to-many). 

Web Audio API

Status: Editor's Draft
Support: Available in Chrome, Edge, Firefox, Opera and Safari

The Web Audio API is far from new, but it has been steadily improved more recently and provides web developers with the ability to control audio on the Web, allowing us to choose audio sources, add effects to audio, create audio visualisations, apply spatial effects (e.g. panning) and more.

Web Animations API

Status: Editor's Draft
Support: Available in Chrome, Firefox, Opera and Samsung Internet

The Web Animations API is a great addition that allows web developers to build animations using JavaScript that render with the same performance as declarative CSS animations. The benefits include faster frame-rate with lower power consumption compared to traditional JavaScript animation which translates to a better user experience on all devices, particularly mobile. This is achieved by empowering developers to “build performant compositor threaded animations using JavaScript”. In addition, the API also allows us to inspect and manipulate running CSS animations, making it far easier to update some state once a series of animations have completed or pause running animations.

WebUSB API

Status: Editor's Draft
Support: Available in Chrome and Opera

While full browser support may never arrive the WebUSB API is still worth a mention as being able to access USB devices on the Web feels like somewhat of a milestone.

Media Source / Media Source Extensions API

Status: Recommendation
Support: Available in Chrome, Firefox, Edge, IE, Safari and Samsung Internet

Another API that’s not new but perhaps not well-known amongst web developers. The Media Source Extensions API (MSE) provides functionality enabling plugin-free web-based streaming media. Using MSE, the traditional src attribute of a <video> element and can be replaced with a Media Source object. This enables more advanced media delivery and control than is currently possible with <video> and <audio> elements alone. Use cases include adaptive streaming, so swapping the bitrate of a video stream in response to changing connection speeds. It lays the groundwork for adaptive bitrate streaming clients (using DASH or HLS) to be built on the MSE API, such as the open source Shaka player.

Media Recorder API

Status: Working Draft
Support: Available in Chrome, Firefox

The Media Recorder API makes it possible for web apps to easily record and instantly use media from a user’s input devices so audio, video or both. This therefore gives web developers the ability to easily build web apps that capture audio recordings or video recordings, another great asset to the Web Platform.

Web VR API

Status: Editor's Draft
Support: Available in Edge and Firefox (basic support)

The WebVR API provides a means for web apps to communicate with virtual reality devices such as the head-mounted Oculus Rift or HTC Vive. This enables web developers to build apps that can receive position and movement information from the VR device and translate that into movement around a 3D scene. Enabling web developers to build virtual product tours, interactive training and immersive games.

Generic Sensor API

Status: Working Draft
Support: Not supported

Data from device sensors is used in many native apps such as games, augmented reality apps and fitness tracking apps and whilst it’s possible to access some sensor data on the Web already the Web is lacking the broad range of sensor data available to native apps. This is what the Generic Sensor API hopes to address, by exposing sensor devices to the Web Platform in a consistent, performant and easy to use way.  At the time of writing the Generic Sensor API has just been released as an origin trial in Google Chrome 63, so it’s very new. But it’s certainly one to watch as support, and the number of sensor interfaces, will hopefully grow.

Visual Viewport API

Status: Draft Community Group Report
Support: Available in Chrome and coming to other browsers soon

This isn’t enormously exciting but worth a mention anyway as it might come as a surprise to many that there’s such a thing as a layout viewport and a visual viewport. When a user pinches and zooms on your page the visual and layout viewports diverge and this can cause unpredictable results. With the new Viewport API it makes it possible for web developers to tame this unpredictability in style! The video below shows both the visual viewport (red border) and the layout viewport (green overlay) and how they can diverge when pinching and zooming.

Media Session API

Status: Editor's Draft
Support: Available in Chrome for Android, coming soon to Chrome, Safari and Firefox

If you have an Android phone you are probably familiar with the notifications tray, that place where you see a banner spanning the width of the screen showing your latest emails, messages, push notifications, etc. When casting or consuming some video/audio media you might be familiar with seeing some playback controls here that allow you to skip the track or see the song, album and artist information. The Media Session API brings the ability to customise the notification tray content and playback controls for media on the Web. Enabling web developers to provide an experience deeply integrated into the host platform. So much so that this metadata, artwork and playback controls can be seen on the user’s lock screen and even a paired wearable device.

Web Bluetooth API

Status: Draft Community Group Report
Support: Available in Google Chrome

This is another one of those milestone type APIs, I don’t think many web developers would realise that it’s possible today in Chrome to connect your web app to a Bluetooth device! Granted it’s probably not for the faint-hearted and the specification if you can even call it that is very much in flux but it’s pretty incredible to know it’s something that is available on the web right now and is improving with each browser release.

Device Memory API

Status: Editor's Draft
Support: Available in Google Chrome

The Device Memory API allows web developers to get some form of benchmark in terms of the performance and capabilities of a user's device. With a plethora of devices able to access the Web not all are able to handle everything web developers can build. Utilising the Device Memory API enables us to deliver a "Lite" experience to devices which will struggle with a website's full experience. We can also augment our website statistics by gathering device memory data where possible and therefore better inform our decision making and testing to match the capabilities of real user devices.


And there you have it, some bleeding-edge APIs, some existing APIs but not so well-known, and some other APIs that have just come a long way. Hopefully, this blog post has sparked some ideas for how you can utilise these new APIs to build experiences that you never thought were possible on the Web.

]]>
Plus Risk goes live https://www.enovate.co.uk/blog/2017/11/20/plus-risk-goes-live Mon, 20 Nov 2017 00:00:00 +0000 https://www.enovate.co.uk/blog/2017/11/20/plus-risk-goes-live

That was exactly the situation with the website we designed and built for Plus Risk, a brand new insurance company based in Essex striving to provide 'straightforward insurance in a complex world'.

The client found and made contact with us via our own website, as many of our clients do, and from there a meeting was scheduled so that we could meet, discuss and better understand not just the proposed project but the business as well.

Following the production and completion of the project specification we began work on the website design, this involves close collaboration with the client to gain a firm understanding of how they want their business to be portrayed and what they want the site to do in terms of business goals.

Designs for the major pages in the site were created and evolved until the client was happy to approve them and then they could be passed to the developers to be used as blueprints for the next step of the project, writing the code.

As with the vast majority of our content management system (CMS) projects we used Craft CMS as the foundation of the site, mainly for its flexibility for us in terms of development but also, and just as important, for its ease-of-use for our clients who are responsible for editing and adding content following the successful launch.

Once the development site was up and running we provided secure access to it so that the client could follow our progress and supply feedback. It also meant they could test the website in any device, seeing how it adapts and responds to different screen sizes, as any modern, responsive website should.

This particular project really was a joint effort between us and the client and we're delighted with the end result and hope it serves Plus Risk and the team behind it for many years to come. Why not take a look at it yourself and if you're considering a similar project we'd love to hear from you.

]]>
Boosting Google traffic to your blog https://www.enovate.co.uk/blog/2017/11/08/boosting-google-traffic-to-your-blog Wed, 08 Nov 2017 13:30:00 +0000 https://www.enovate.co.uk/blog/2017/11/08/boosting-google-traffic-to-your-blog

When a blog author has finally published a new blog post and is sitting back and basking in the success of their achievement, one thing is guaranteed. That it won’t be long until they use Google to try and find their newly published prose and they may well be disappointed with the result. Perhaps they can’t find the new blog post at all or it’s a long way from the prime ranking positions.

When thinking of boosting traffic to your blog from Google looking at inclusion in Google News is a great place to start as it delivers over 6 billion clicks to publishers every month. That said, your website needs to be approved for inclusion and Google is fairly selective so you may need to be realistic that if you’re not really blogging about newsworthy topics on a regular basis perhaps Google News isn’t where you should focus your efforts. If you think you might have a chance at getting included in Google News great, their quick start guide is where to get started.

For the rest of you fear not, there’s still lots you can do to boost your traffic from Google:

1. Blog about popular topics, it’s true that in journalism timing is everything. So if you’re able to keep your finger on the pulse and write blog posts that tap into events or topics of the moment that’s a great strategy to increase traffic to your blog as there’s no point blogging about topics or events that are only of interest to a narrow audience.

A popular blog post on our website is about implementing Brotli compression in Nginx, “what?!” you may say but in our field it was quite popular around February this year, exactly when I published the post and it was our most popular blog post for a number of weeks thereafter.

2. Make sure you’re not doing your content a disservice when it comes to the blog post’s title and meta description, these should be carefully considered. Don’t leave this to an automated tool, it’s definitely the most important few characters you will write so do take your time.

3. Whilst this won’t necessarily have a big Google search impact I’d still recommend you invest some further time to compose an eye-catching Open Graph image (example below), this is the image that displays when your blog post is shared at Twitter, Facebook and LinkedIn. If design isn’t your thing consider employing the skills of a designer for this purpose. We’ve noticed more retweets and shares when we’ve put more effort into the design of our Open Graph images, so don’t neglect this.

The Open Graph image for our blog post “Why we love Craft CMS”
The Open Graph image for our blog post “Why we love Craft CMS”

4. Make sure your blog has an XML sitemap and it has been submitted to Google’s Search Console, this XML file gives Google a list of all the pages in your site so it can quickly identify new additions it needs to index.

5. For particularly time sensitive blog posts, from the Google Search Console, use the “Fetch as Google” tool, which then provides an option to “Request Indexing” this is effectively a notification to Google to ask the search engine to crawl your new page as soon as possible. This may well be functionality that is built into your chosen CMS but it’s worth checking if that’s the case, and if not doing so manually as it should mean new blog posts are indexed in a matter of hours instead of days.

6. Boost your reputation as an author by making sure your blog posts are attributed to you as the author, if you’re lucky enough to get blog posts published on other leading sites in your field this is great as it should boost your reputation in Google’s eyes as an author and in turn increase your rankings as a result.

7. Accelerated Mobile Pages (AMP) is an open-source initiative Google launched in October 2015, with the aim to improve page loading times and reduce data use of web pages on mobile devices. It’s been very successful with many major news publishers quickly adopting the approach. You can often see AMP enabled web pages listed in a carousel at the top of the search results so also serving your blogs posts via AMP is a surefire way to increase their search engine prominence and drive more traffic.

So there you have it, that's our top strategies and tips for boosting traffic to your blog from Google and achieving faster entry into Google’s search results for new blog posts, I hope you've found it useful.

]]>
Graphic Design Essex goes live https://www.enovate.co.uk/blog/2017/11/08/graphic-design-essex-goes-live Wed, 08 Nov 2017 00:00:00 +0000 https://www.enovate.co.uk/blog/2017/11/08/graphic-design-essex-goes-live

The existing Graphic Design Essex site had served us very well, providing a home for our range of graphic design services and portfolio of work for almost eight years - a lifetime in web years (very similar to dog years, before you ask) - and proudly holding the top spot in Google for “Graphic Design Essex” for most of that time. Successful SEO performance aside, it was in desperate need of a complete overhaul to introduce a brand new, responsive design and the integration of modern content management system in the form of Craft CMS.

I began work on the new site design whenever I had some spare time so, as with most internal projects in a busy web design agency, it took a little while to come together but, eventually, the bold colour scheme and clean lines fell into place and a design that we were all happy with emerged meaning the developers could begin coding.

Building the site in our favourite CMS, Craft CMS, was relatively straightforward and didn’t cause too many headaches for us. After all, we’ve built almost 52 Craft CMS client sites now so there’s not much we haven’t seen when it comes to developing code for Craft.

As the development site came together we began the process of writing content, taking photographs of our graphic design work (using a very professional and fancy-looking lighting and camera set-up) and then populating each page with text, images and stock images where necessary.

As with most website projects, it’s the content that can become the hardest task but with a final burst of dedication and determination we’ve delivered a site that looks great, contains a wealth of information about our graphic design services and examples of our work so hopefully it’ll serve us for another eight years and perform just as strongly in the search engines as it’s predecessor.

]]>
Van Vynck Craft CMS re-build goes live https://www.enovate.co.uk/blog/2017/10/12/van-vynck-craft-cms-re-build-goes-live Wed, 11 Oct 2017 23:00:00 +0000 https://www.enovate.co.uk/blog/2017/10/12/van-vynck-craft-cms-re-build-goes-live

Enovate first began working with Van Vynck over twelve years ago and in that time we have designed, developed and hosted three versions of their corporate website.

This latest version of the site is the first to use Craft CMS. The reason for switching from MODx to Craft was for two main reasons: the need for an improved editing experience for Van Vynck’s content authors and a desire to boost their search engine rank by totally replacing the underlying code with search engine friendly code. After discussing all the benefits to Van Vynck, they were more than keen to relaunch their site using Craft CMS.

Van Vynck were, for the most part, happy with the site’s original design, the only exception being the homepage, which was redesigned and redeveloped to include a carousel and to better display the key information and calls to action. Working closely with the client and communicating regularly helped keep the project on track and ensure expectations were met.

Following the completion of the development work we handled client training, teaching the content editors how to use Craft CMS, and then we worked through an automated content import process, bringing all the text and images from the old site into the new.

After adding the final touches and addressing any bugs that came up in testing, the client was happy with the finished site and we were proud to deliver a fast website that is easy to navigate and runs smoothly on any device.

]]>
ScanmarQED goes live https://www.enovate.co.uk/blog/2017/10/11/scanmarqed-goes-live Tue, 10 Oct 2017 23:00:00 +0000 https://www.enovate.co.uk/blog/2017/10/11/scanmarqed-goes-live

ScanmarQED approached Enovate with a requirement for a modern, innovative website, that would clearly describe the marketing products and services they offer to clients around the world as well as integrating with a host of third-party systems that they relied on.

After a detailed research and discovery phase we created an initial site design based on our understanding of the client’s requirements which they provided feedback on, specifically what they liked, disliked and what they wanted to change. Following this feedback process we revised the design until we reached a version the client was happy to approve.

On completion of the design and development work, we moved onto delivering the client training, which involved teaching the client how to add content and images to the site, create new pages or remove redundant ones and how the various integrations had been implemented within their Craft CMS installation.

Both Enovate and the client are very happy with and proud of the finished site and it achieves our goals of delivering a fast website that is reliable and responsive, ensuring it is usable on any device, whether that be a desktop or mobile phone. We hope the new site serves the client well for many years and we looking forward to working with them as the site grows and evolves.

]]>
Progressive Web Apps https://www.enovate.co.uk/blog/2017/10/02/progressive-web-apps Mon, 02 Oct 2017 14:30:00 +0000 https://www.enovate.co.uk/blog/2017/10/02/progressive-web-apps

"Progressive Web App" is a term first coined by designer Frances Berriman and Google Chrome engineer Alex Russell back in 2015 to describe web apps that narrow the gap between web and native apps. Progressive Web Apps take advantage of modern web technologies such as service workers and web app manifests to provide a user experience nearer to native apps without the chore of an app store download and install.

PWAs are exciting for us as web developers and web designers as it has the potential to bring greater demand for our skills and a broader canvas for our work to be consumed. For brands large and small it presents a fantastic opportunity to potentially reduce the costly development and maintenance of mobile apps across multiple platforms, along with managing the legacy of older versions of an application still being in existence. Instead brands can continue to invest in their web apps and take advantage of PWAs to deliver a rich native-like user experience from the "web platform", which is constantly up-to-date.

But what's the difference between a web app and a progressive web app? Progressive Web Apps have the following characteristics:

  • Progressive - Work for every user, regardless of browser choice because they're built with progressive enhancement as a core tenet.
  • Responsive - Fit any form factor: desktop, mobile, tablet, or forms yet to emerge.
  • Connectivity independent - Service workers allow work offline, or on low quality networks.
  • App-like - Feel like an app to the user with app-style interactions and navigation.
  • Fresh - Always up-to-date thanks to the service worker update process.
  • Safe - Served via HTTPS to prevent snooping and ensure content hasn't been tampered with.
  • Discoverable - Are identifiable as "applications" thanks to W3C manifests and service worker registration scope allowing search engines to find them.
  • Re-engageable - Make re-engagement easy through features like push notifications.
  • Installable - Allow users to "keep" apps they find most useful on their home screen without the hassle of an app store.
  • Linkable - Easily shared via a URL and do not require complex installation.

Browser support for Progressive Web Apps is excellent in Google Chrome and Opera, followed by good support in Firefox and Samsung Internet with Microsoft Edge improving fast. Safari on the other hand is notably lacking, perhaps because of their reliance on apps and the app store and PWAs could be seen as a threat to that business.

Whilst most demos of PWAs focus on the mobile experience PWAs are also set to make an impact on desktop devices by being built into Chrome OS and Windows, launching what feels far more like a desktop application rather than a web experience. This makes PWAs even more exciting as they have the potential to not only consolidate development effort across mobile devices but desktops and beyond, using the universal support of web standards and the advances in the web that PWAs are forging.

Microsoft is taking an interesting approach in Windows, where they speak about the "web platform", meaning the triad of cornerstone technologies for the web (HTML, CSS and JS) with Edge being one application built upon that web platform. Their implementation of PWAs in Windows is not taking the approach of another manifestation of Edge but rather a secure and sandboxed environment for a real application to exist with its own identity, ratings and comments on the Windows store. Which can then be installed and pinned to the start menu and taskbar like any native Windows application.

Microsoft has also indicated plans to crawl the web for PWAs and automatically present quality examples in the Windows Store (source), if the idea takes hold I imagine it wouldn't be long until the Google Play Store follows suit.

Some notable examples of PWAs already out in the wild include the Financial Times, Forbes, Twitter Mobile, Paper Planes and more examples can be found at PWA.rocks.

Whilst the concept of PWAs may seem new it's actually been quite a long journey to get here. The first seeds of PWAs were sown as far back as 1999 when HTML Applications, with .hta file extensions were first introduced into Windows. More recently we’ve seen the Electron, Ionic and Cordova platforms package up applications developed in web-based technologies into forms that mimic native applications.

If you are itching to get started and develop a PWA, there are some good places to start, first off Google has a great tutorial on building your first PWA. The "Hello World!" of PWAs is a Hacker News Reader app and so HNPWA is a great resource to discover common approaches and architectures for PWAs that serve the same purpose as a Hacker News Reader. Many of the JavaScript frameworks of the moment provide tooling to scaffold out the groundwork of a PWA, take a look at Preact CLI and Vue.js. But that's not to say a PWA requires a JavaScript framework, Google have released a JavaScript library called Workbox, which helps to build some of the more complex aspects of PWAs such as Service Worker caching strategies.

It will be interesting to follow the story of PWAs over the coming months and years. With the likes of Google and Microsoft throwing their weight behind PWAs it's likely we'll see more and more brands turning to PWAs as a viable alternative to native apps and reaping the benefits.

]]>
An introduction to structured data https://www.enovate.co.uk/blog/2017/09/26/an-introduction-to-structured-data Tue, 26 Sep 2017 09:23:00 +0000 https://www.enovate.co.uk/blog/2017/09/26/an-introduction-to-structured-data

As website designers and developers, it is our job to ensure the content on the sites we build is efficiently presented to the end user.

A customer looking at the website for a local beautician will want to, on a basic level, know what services the company provide, how much those services cost and whether or not the company is local. A customer looking through an online store will not necessarily be concerned where the company is based, but more interested in which products they have for sale, how much those products cost, images of the product, and whether or not the product has good reviews.

Something that can be overlooked by designers and developers however is how the website content, and its context, is delivered to search engines, not just the end user.

Search engines, such as Google and Bing, obtain information from websites using crawl bots. These bots don’t have the same level of intelligence as you or I. They can’t look at a number on a page with a currency symbol next to it, and immediately or reliably associate that piece of content as representing a price. And even if they could, what is that price for? Is that price related to a special offer?

There has been some huge advances in the way of machine learning and artificial intelligence, and this sort of ability is well within the grasps of Google and others, but the resources needed for such a task are, at the moment, far greater than sending crawl bots to a page and analysing the provided structured data.

Search engines are very intelligent, but they just need a little helping hand. And this is where structured data comes in.

What is structured data?

Structured data describes your site’s pages in such a way that search engines can decipher its content and its context. I previously mentioned a few examples of the types of content you can markup with structured data (services and products), however the ever expanding library of data types or schemas includes (but is not limited to) events, recipes, local businesses, articles, music, TV shows and movies, reviews, and videos.

Each of these types of content has completely different information to the next. A recipe will need a list of ingredients along with cooking instructions to become a valid recipe, but an event won’t need any of this. An event needs dates, locations, and ticket prices, to name but a few.

Structured data allows web developers to present any of these properties and provide the necessary pieces of information for each one, helping search engines to make sense of it all. When search engines get a better understanding as to what your pages are about, they are able to surface this information to the end user, but only in situations where it becomes relevant to their needs.

What language do I write structured data in?

Structured data can be written in a few languages, there is no right or wrong approach. However it’s a good idea to understand the different formats you can use to markup this information to help decide which is suitable for you and your website.

We quite often turn to the guidance of Google when deciding which approach to take. Currently, Google support three formats:

Google recommends using JSON-LD, and that’s also the format we use for our website projects, so in this post I will focus on implementing that.

JSON-LD provides advantages over Microdata and RDFa, as you don’t need the structured data as HTML markup for it to be used. JSON-LD sits at the bottom of the page, before the closing <body> tag as a chunk of JavaScript. It has no visual impact on the website, and is only read by the search engines that support it.

Below is a very basic example of some markup I could use on my Meet The Team page. Here I am taking my information and defining myself as a Person schema using RDFa:

<div vocab="http://schema.org/" typeof="Person">
  <p property="name">Jamie Wade</p>
  <p property="jobTitle">Front-end Developer</p>
  <p property="worksFor">Enovate Design Ltd</p>
</div>

As you can see from the Schema.org documentation, there is a plethora of information that can be associated with a Person schema. It’s great to define as much as you can, but we don’t always want all of this information to be visible on the website. And it can be a bit of a hindrance having to hide the extra information using CSS that we don’t want to be visible. This is where JSON-LD shines.

What does JSON-LD look like?

As mentioned previously, JSON-LD is a chunk of JavaScript that has absolutely no visual impact on your website. You can define as much, or as little information as you like, and you won’t need to worry about hiding the excess using CSS.

Take the example again for defining a Person schema for my Meet The Team page. This is what the same information would look like (as a basic implementation) of JSON-LD:

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Person",
  "name": "Jamie Wade",
  "jobTitle": "Front-end Developer",
  "worksFor": "Enovate Design Ltd"
}
</script>

What also makes JSON-LD shine above the alternative formats, is we can very easily nest further information. Again, taking the example from before, we can modify the 'worksFor' property into a 'workLocation' property, define Enovate as a 'LocalBusiness' schema, and include all the information about Enovate inside that:

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Person",
  "name": "Jamie Wade",
  "jobTitle": "Front-end Developer",
  "workLocation": {
    "@type": "LocalBusiness",
    "name": "Enovate",
    "alternateName": "Enovate Design Ltd",
    "description": "Creative Web Design agency based in Chelmsford, Essex. Offering Website Design, Web Development, SEO, Internet Marketing, eCommerce and Hosting.",,
    "url": "https://www.enovate.co.uk/",
    "telephone": "01245 646 464"
  }
}
</script>

What do search engines actually do with structured data?

This is a very good question, and something I quite often find myself explaining to customers who can’t quite understand the benefits (and cost) of having structured data implemented on their websites. In fact, structured data has more than likely been under our noses for quite a while, we have never just made the connection.

We all know what a Google search result looks like. Take this result for a search for “apple pie recipe”. This is what you will see for a site that does not provide any (supported) structured data:

A screenshot of a basic Google search result for 'apple pie'

Pretty standard, and not very eye catching. All we have here is a title and description. However, using structured data we can get our results showing up like this:

A screenshot of a Google search result for 'apple pie' showing the differences structured data makes

This page is, after all, a recipe. So with the correct structured data markup, we can tell Google all about the recipe. Google can then take this information and present it to the end user. Straight away, we can see an image of the apple pie, and we can see it’s very highly rated, but we can also see how long it takes to prepare, and how many calories it contains. Straight from the search result.

These results are taken from Google on a desktop device. The results look even better on mobile:

A screenshot of a structured data Google search result for 'apple pie' on a mobile device

This is the real, sell-able benefit of structured data. Results like this are far more eye-catching than standard Google results. Plus, on mobile devices, structured data results will feature much more prominently than standard results, which can have a huge impact on your organic search traffic.

Hopefully I have given you a thorough introduction into what structured data is, and my recommendations for implementing it into your site.

]]>
AATi goes live https://www.enovate.co.uk/blog/2017/09/22/aati-goes-live Thu, 21 Sep 2017 23:00:00 +0000 https://www.enovate.co.uk/blog/2017/09/22/aati-goes-live

AATi approached Enovate, along with several other Essex website design companies, looking for a wide range of services from designing and hosting a new website to creating new business stationery and updating their suite of product brochures. 

The site’s design phase was very much a collaborative process between our design staff and the business development team at AATi. As with all our projects, we worked through a detailed research process to get a firm understanding of what the client liked and needed in terms of design and how they wanted to present themselves within their industry sector. The finished design is both striking yet understated, making a visit to the site memorable but also enjoyable.

As with all our new website projects, the site is built on the Craft CMS (content management system). This particular project relied heavily on Craft’s locale feature, allowing us to effectively build three separate sites under a single domain, one for each aspect of the business: Rail, International and Commercial.
 
Following on from the website design and development process, it was time to add the content and images to the rapidly evolving development site, making sure to constantly update the client with our progress, gather their feedback and make any changes required. AATi were a great company to work with and we are proud to have launched their new site and look forward to being involved in its development in the years ahead.

]]>
Branding and rebranding https://www.enovate.co.uk/blog/2017/09/18/branding-and-rebranding Mon, 18 Sep 2017 09:00:00 +0000 https://www.enovate.co.uk/blog/2017/09/18/branding-and-rebranding

Many clients and consumers that have an interest in web design and development may ask what does branding and rebranding mean and when is a good time to rebrand?

Branding is a term used to define the features a company uses to differentiate themselves from other companies. Companies develop their brand in a variety of ways, using their name, logo, design style and slogan. You can display branding either physically or digitally.

Physical branding can be leaflets, posters, billboards or newspapers. Digital branding refers to online branding such as social media marketing or Google AdWords which would both feature the company’s branding.

Companies want to market their brands as much as possible, so creating a bright and original logo is just that. You want your company to stand out from the rest as there is a lot of competition out there, no matter what industry you are in.

Rebranding is a marketing strategy, very similar to branding, except it aims to update and refresh tired or out of date branding. This can include coming up with a completely new name, design, slogan or logo. Rebranding is usually completed with the intention to target a wider audience. Usually a company will rebrand with consumers, investors, and other competitors in the same industry as the company in mind.

An example photo of a branding image from Pexels

When is a good time to rebrand?

  • There are several reasons why a company will want to rebrand. If the market is growing too fast, an owner will want to keep their website competing in the market as much as possible and will want the services to be constantly at top form, otherwise clients will see them outdated and choose a different company that just has that cutting edge. You always want to be unique compared to your competitors and stand out.

  • If an established company wants to target a different demographic, your branding needs to appeal to a new audience, and revising your branding is an essential part of this change. Very complicated or difficult to understand branding can make consumers click away from your site. If your logo is over-complicated with graphics and text it can be hard to understand the tone the brand is going for and what they are trying to achieve as a company.

  • A brand slogan that is too long, unclear or is not relevant to its market can also reduce your impact in comparison to your competition. Often, the more your brand becomes successful the more you overlook your branding. Is your branding childish or outdated? If you are a company that wants to target an older audience, certain colour schemes can be seen as childish. Bright colours may want be toned down or switch to using pastel/low opacity colours.

  • If a certain part of your branding, such as the name of the business or logo is misleading and gives potential clients the wrong impression, consider why these exist and what you can do to change and improve them. Research and focus groups would really help here, allowing you to test branding styles to see which resonate best with your target audience.

There is no time limit on how long it takes to rebrand a company or product. Some companies will complete the task quicker than others depending on their size and how strong their current brand is, but it’s a critical element of any organisation that must be done well. It may seem trivial but branding is vital when it comes to conveying your message to clients.

]]>
The Boardroom relaunched with Craft CMS https://www.enovate.co.uk/blog/2017/09/18/the-boardroom-relaunched-with-craft-cms Sun, 17 Sep 2017 23:00:00 +0000 https://www.enovate.co.uk/blog/2017/09/18/the-boardroom-relaunched-with-craft-cms

The Boardroom have been a client of ours for over eight years and in that time we have delivered a wide range of services to them; from website design, development and hosting to logo design and business stationery.

Most recently, they asked us to redevelop and relaunch their corporate website on a modern and easy-to-use content management system (CMS), replacing the MODx system that their existing site was built on which was proving difficult to use for their content editors.

As Craft CMS specialists we wholeheartedly recommended Craft and outlined the many features and benefits the client would receive by switching to a Craft site. For example, our Craft sites are responsive, ensuring the sites we build function on any device, they are search engine optimised and clients often report a bump in their search engine rank following the launch of a new Craft site and the are super-fast thanks to our advanced caching, hosting and content delivery strategies.

The Boardroom team indicated that they were happy with the site’s design so the front-end wasn’t changed from a visual perspective, although it was rebuilt using the latest HTML, CSS and SASS techniques to mimic the existing look-and-feel.

Alongside the front-end work we integrated the site’s design into a Craft CMS installation and wrote and ran an automated content import process to extract the content from the existing site and bring it into the new site, saving both us and the client from a fairly laborious and time consuming task.

On completion of the development process we carried out a thorough phase of testing and bug-fixing, where necessary, and then progressed to launching the finished site. We can’t wait to see how the new site grows and we’ll be following the content updates the site editors make with much interest.

]]>
Gmail Actions https://www.enovate.co.uk/blog/2017/09/14/gmail-actions Thu, 14 Sep 2017 10:14:00 +0000 https://www.enovate.co.uk/blog/2017/09/14/gmail-actions

The vast majority of web applications send some form of email notification, with larger and more complex web applications having a long list of the various email notifications they send to users and admins. Often these emails require or encourage their recipients to complete an action, for example clicking on a link to confirm their email address or to view a record.

Gmail Actions allow web developers to surface these actions right on the subject line in the inbox at Gmail. Just like Google’s rich snippets and structured data the recommended approach to accomplish this uses JSON-LD and utilises schemas from schema.org.

Sadly Gmail Actions aren’t available to all as there are a number of requirements that must be met prior to being able to register with Google for the privilege. Email senders must be sending an email volume in excess of 100 emails per day to Gmail recipients for several consecutive weeks along with authenticating emails with either DKIM or SPF, which should be the case anyway.

At the time of writing Gmail supports three Gmail Actions:

  • RSVP Actions for events

    • RsvpAction - For emails where recipients can RSVP with either “yes”, “no” or “maybe”.

  • One-click Actions for just about anything that can be performed with a single click

    • ConfirmAction - For emails requiring recipients to approve, confirm and acknowledge something. A ConfirmAction can only be interacted with once.

    • SaveAction - For emails where recipients can save a voucher or adding songs to the listen queue. A SaveAction can only be interacted with once.

  • Go-to Actions for more complex interactions

    • ViewAction - For emails requiring recipients to go to your site to complete the action.

    • TrackAction - For emails requiring recipients to go to your site to track packages being delivered.

A Go-to Action in an email will display a button as shown below in the recipient's Gmail inbox:

Gmail Actions

To accomplish this we need to include some JSON-LD code within the email the recipient is sent, Gmail detects this code, which is invisible to the recipient and outputs the necessary action button.

The following JSON-LD code is for the ViewAction that outputs a “Watch movie” button:

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "EmailMessage",
  "potentialAction": {
    "@type": "ViewAction",
    "target": "https://watch-movies.com/watch?movieId=abc123",
    "name": "Watch movie"
  },
  "description": "Watch the 'Avengers' movie online"
}
</script>

The following JSON-LD code is for a ConfirmAction that outputs an “Approve Expense” button, this is a One-click Action, which as you have no doubt guessed can only be interacted with once:

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "EmailMessage",
  "potentialAction": {
    "@type": "ConfirmAction",
    "name": "Approve Expense",
    "handler": {
      "@type": "HttpActionHandler",
      "url": "https://myexpenses.com/approve?expenseId=abc123"
    }
  },
  "description": "Approval request for John's $10.13 expense for office supplies"
}
</script>

Google have recently (July 2017) deprecated the ReviewAction and within Google’s own documentation they mention more than once that the schemas from schema.org that these Gmail Actions are based upon are still being standardised and therefore are likely to change so the on-going maintenance of Gmail Actions should be consider with any implementation.

Gmail Actions provide a useful way for web developers to make emails more actionable and encourage recipients to complete the actions we want them to with greater ease. Despite being called Gmail Action, these also work in Google’s Inbox also.

There’s more information and code samples available on Google’s Gmail Actions documentation. Google also provide a useful Email Markup Tester to check your JSON-LD code is valid.

]]>
The Worshipful Company of Curriers Members Area goes live https://www.enovate.co.uk/blog/2017/09/04/the-worshipful-company-of-curriers-members-area-goes-live Sun, 03 Sep 2017 23:00:00 +0000 https://www.enovate.co.uk/blog/2017/09/04/the-worshipful-company-of-curriers-members-area-goes-live

A Currier is a specialist in the leather industry. Currying is one of the ancient and essential leather processes of cleaning, scraping, stretching and finishing hides, by oiling, waxing or colouring the desired surface finish after the tanning process.

During the development of the members’ area we worked closely with the staff within the Curriers Company that would be responsible for the day-to-day maintenance and management of the area. This ensured the code we developed for each feature was thoroughly tested and fit for purpose, fulfilling all the criteria specified in the statement of work.

As with the public element of the site, the members’ area was all built as custom code within the site’s Craft CMS environment. This make life much easier for both us and the Curriers team as there's only one environment to maintain for both elements of the site and they work together seamlessly.

We’re incredibly pleased with the site we’ve built for the Currier’s, especially as it marks our third Livery Company project, following The Worshipful Company of Farmers and The Worshipful Company of Needlemakers, and also adds to the rapidly increasing number of secure, members’ areas we’ve developed for our clients.

]]>
Lois' first week at Enovate https://www.enovate.co.uk/blog/2017/07/28/lois-first-week-at-enovate Fri, 28 Jul 2017 16:22:00 +0000 https://www.enovate.co.uk/blog/2017/07/28/lois-first-week-at-enovate

I started my Digital Marketing Apprenticeship on Monday the 24th of July. Digital Marketing is something I have always been interested in as I see myself as a creative person.

I have never been able to complete any work experience previously in this particular industry unfortunately, so I had to rely on research. It is safe to say I was never nervous coming to work with the Enovate team, after meeting most of the team during the interview process, they were all nice, hard working people. Something that is important in a business and to be able to work well together in a team. The office is extremely clean and a safe environment to work and the air conditioning ensures it never overheats or is uncomfortable.

The receptionist Sandra, was the first person I met during the interview process and she is one of the nicest receptionists you could ever meet. Not only was she beaming and happy but she was so welcoming when I walked in, it is a pleasure to be working with someone like her.

Now onto the team. The people I work with in the office are Michael, Mike, Jamie, Rob and Jake. All of which have different roles and tasks they are working on, which is often the more technical side of creating and maintaining websites. I have never worked in a more relaxed environment, which is not a bad thing I can assure you, completely different to my previous job. Everyone is busy and productive but no one ever has portrayed any feelings of stress because the office environment means everything is easily accessible and is very calming as the location that we are based is very quiet.

A photo of me working at my desk at Enovate Design, a web design company based in Essex.
A photo taken of me whilst I am working at my own desk.

In just one week I feel I have gone from a young adult to an adult, I have never been so independent. Travelling to and from work and using my own initiative, which I had to do in my previous job but getting used to doing that in a different environment can be hard, but if you are passionate about something then that is something you would work for.

The tasks that I have been set are interesting for me, especially keeping up with the Social Media aspect using Hootsuite and blogging using a content management system  called Craft CMS which I found very easy to  use, even though Craft CMS is a huge piece of software that ranges from letting you add content to a website to creating the Meta Description that people would see underneath your website's title in the Google search engine results. This lets us include keywords in the Meta Description of a page, a tip for improved SEO which then leads to higher rankings.

I have also enjoyed using a new piece of software called Affinity Designer, which is a mix between Adobe Photoshop and Illustrator. I have enjoyed getting to know this software as it is vector-based, which means no matter how far in you zoom, the quality stays the same. As when you use Photoshop (with raster files) the quality weakens and becomes pixelated and when it comes to a professional website and creating the Open Graph Image, (This is the image you see when you share the blog post on Social Media, to add interest and fun.) It means that the quality is impeccable, which is very important on a professional website.

There are many opportunities here at Enovate to experience the different aspects of Digital Marketing, some I had no idea about prior to starting the role. This includes PPC (Pay-Per-Click) and SEO (Search Engine Optimisation) and courses that you can complete to improve your skills in Digital Marketing. Ones I have looked at so far are:

Certificate of Completion for the Google Analytics Course for Beginners.
The certificate of Completion I received for the Google Analytics Course for Beginners.

These are all useful courses to look at and at the end you can earn a certificate of completion, which can advance your skills further. The main highlight of my first week at Enovate was completing the Google Analytics Course for Beginners, but there will be a blog post about completing this course in the future, when I have also tried my luck at the Google Adwords course.

]]>
Lois joins Enovate https://www.enovate.co.uk/blog/2017/07/24/lois-joins-enovate Mon, 24 Jul 2017 15:01:00 +0000 https://www.enovate.co.uk/blog/2017/07/24/lois-joins-enovate

Lois has joined the Enovate team in Chelmsford as a Digital Marketing Apprentice, following the completion of college, where she studied for BTEC and A Level qualifications. Lois is excited to be taking her first steps in a career in Digital Marketing and was delighted to be offered the role at Enovate.

Lois already has a working knowledge of many of the tools used in digital marketing, having studied Graphic Design, Photography and Media at college. Her experience and knowledge will only grow and improve as she begins her career at Enovate.

Lois will be working closely with all members of the team, taking on an array of digital marketing tasks under the guidance of more experienced staff.  Lois is looking forward to gaining invaluable knowledge and experience in the workplace as she studies for a BCS Level 3 Diploma in Digital Marketing.

When Lois is out of the office, she loves to spend time with family and friends but also likes to be creative whether that is drawing, painting, colouring or even writing a blog post for her own website.

]]>
Rob joins Enovate https://www.enovate.co.uk/blog/2017/07/21/rob-joins-enovate Thu, 20 Jul 2017 23:00:00 +0000 https://www.enovate.co.uk/blog/2017/07/21/rob-joins-enovate

Rob's former role was as Senior Web Developer at the City of London Corporation, where he was one of the lead developers that delivered the most recent iteration of their public-facing website, which is built upon Microsoft SharePoint.

After graduating from university with a 2:1 honours degree in Systems Development, Rob applied for a job as a Web Developer at a local company in Chelmsford called Netforce Group Plc. This is where his path first crossed with both Dan and Michael, who were also working at Netforce at the time.

Soon after joining Rob became involved with the redevelopment of the City of London Corporation's public website, which he worked on until Netforce closed and went on to join the Corporation's internal web development team as a Senior Web Developer. Whilst there, Rob was one of the lead developers on two major redevelopments of their public website using the latest Microsoft technologies of the time.

His development background is predominantly in server-side programming using C# and ASP.Net, but he does also have experience of client-side technologies, including HTML, CSS, JavaScript and jQuery. He has also written many scripts in his time using a variety of languages like Python, Bash and PowerShell.

]]>