Top 5 Website Trends in 2018

In the first of our 12 Blogs of Christmas we have a look back at 2018 and pick out our top five website trends from 2018. These are website and app design and functionality that we’ve seen grow through the year, and may just give a pointer as to where we need to look in 2019. So if these are the top trends – are they the best way to enhance your website and make the most of your online presence? Not necessarily, and we give our verdict on each.

1. ChatBots

We’re sure you must have experienced the popup welcome when visiting a new website – ‘Can we help?’. Usually on the bottom right of the screen, these advice-offering widgets often feature thumbnail photos of the support person and their name. Nine times out of ten these are automated ChatBots, trained by Artificial Intelligence/Machine Learning to automatically respond with guidance to common visitor requests. The suspicion is that these bots can be helpful, but tend to become an annoyance when continuing to appear on further browsing of the website. So are these ChatBots an annoying passing fad, or can they offer real value to your website visitors? Well, we think they are here to stay and will play a growing part in our web experiences over the next decade. A bit annoying currently, but when it becomes difficult to tell the difference between the bot and a real person then the value of a ChatBot really kicks in. Companies who’ve invested the time in ‘training’ these automated helpers will be a step ahead of their competition.

Verdict: Needs to be used with care currently, but a good investment for the future.

2. Original Illustrations

Website frameworks offer a fantastic way of helping clients get projects up and running quickly, and keeping maintenance costs low. One of the drawbacks though is that website styles, layouts and typography can become very similar unless time is invested in making the project stand out from the crowd. This is where original illustrations have taken a role in adding a wonderful bespoke element to the best of the web.

Verdict: We think illustration can make a real difference, and is well worth the additional initial cost.

MailChimp’s 2018 redesign

3. Data Visualisation

Having worked this year on a large Data Visualisation Portal, we’re perhaps a little biased in thinking that Data Visualisation has been a growing trend for 2018. However, the growth of infographics, mapping and data charting can only help users get the information they are looking for and is a great example of new techniques pushing the boundaries of user interaction. Coding tools including ChartJS, more advanced software such as Tableau, and mapping frameworks similar to MapBox make this a fascinating area to work in.

Verdict: We may be biased, but new techniques make this an exciting field to be involved with.

Mapbox GL 

4. Microinteractions

Microinteractions are those subtle, almost imperceptible, effects that occur when buttons change when you hover over them, or images fade in when scrolling down a page. Although often seen as a ‘nice touch’ that gives a website an added design element, these microinteractions can really help guide and prompt the user through a website path. More advanced interactions can show detailed animation and even morphing of images and text. Developments with the use of SVG images and typography in modern browsers have enabled web developers to let their imagination run free.

Verdict: Becoming a key design element and if used carefully can help guide the user and create a unique style for a website.

5. Progressive Web Apps

Progressive Web Apps or PWAs, are websites which have increased functionality that enables them to give a more app-like experience to the user. On mobile they can give the similar performance of a native iOS or Android app, but run from a website or web app. The huge benefit to client and developer is that the PWA uses only one codebase or set of files, keeping development and maintenance costs much lower than would be needed to maintain  separate native and web applications.

Other features which are typical of a PWA are the ability to work offline with locally stored data until a data connection is available, access to device hardware such as camera and geolocation. Our blog post from earlier this year outlined in more detail the rise of the website PWA.

Verdict: The future of the the web and mobile app.

Starbucks PWA

Top 5 Summary

These are the top five web trends that we’ve picked out from 2018, and maybe give some insight into what to look for in 2019. If we were running a top ten then just missing out on the charts were: Content Marketing, Responsive Design (yes, still), Reactive Design and Push Notifications. There’s another blog post in the making!

The Twelve Blogs of Christmas

4D - 12 Blogs of Christmas

4D - 12 Blogs of Christmas
4D Digital – 12 Blogs of Christmas

This year we are joining the #blogmas campaign and will be running our own 12 Blogs of Christmas over the festive period. Featuring articles that look back on web developments in 2018, looking ahead to 2019, guest posts from friends of 4D, and a few offers thrown in for good measure!

We’ll be running our blog over social media using the hashtag #4D12days – keep a look out and let us know what you think. Any feedback on the articles is welcome!

Every day from Christmas Day we’ll release one blog, articles will cover web design, mobile apps, social media marketing, SEO and all things web! From in-depth assessments of the state of web development to a more light-hearted look back and ahead we hope you’ll enjoy the blogs.

 

4d-christmas-embelishments

Website launch – Baileys of Salisbury

Baileys of Salisbury
Baileys of Salisbury

Baileys of Salisbury are an independent, family-run bed retailer based in Salisbury, Wiltshire. Baileys approached 4D Digital looking to set up a new website for the business, wishing to ensure the quality of the website reflected the mid- to high-end bed ranges they offer in store.

With a relatively short project time, 4D worked closely with the client in order to co-ordinate with the store opening at the end of November 2018. Launching on time and with on-site client training and an ecommerce framework, the website is all set to grow and go from strength to strength.

The website was built with a particular focus on mobile and tablet device layouts, with larger lifestyle images being more prominent on desktop browsers.

With an ecommerce framework at its core, the website system will be well-set to expand the ranges of beds featured in-store and online. Custom settings have been applied to enable the store owner to easily add and update page content and enquiries.

We’re extremely pleased with the website and look forward to working together with Baileys of Salisbury over the coming years.

www.baileysofsalisbury.co.uk

 

Corsham Rugby – Player Sponsorship

4D Digital - Player sponsorship - Corsham Rugby

Adam Draper - Player Sponsorship - Corsham RFC - 4D Digital
Adam Draper

4D Digital are pleased to be sponsoring our local rugby club, Corsham RFC, for the 2018-19 season. We are Player Sponsor for first team player Adam Draper. Adam, who graduated from Loughborough University last year, plays centre for Corsham and is part of the 1st XV who play in the Wadworth 6X Southern Counties South West Division.

Last Season, Corsham 1st XV won the Bath Combination Vase Cup at The Rec, Bath Rugby’s home ground, and will be looking to continue their good form in the league this year.

Corsham Rugby run two teams at Senior level, the 2nd XV playing in the Dorset & Wilts 2 North division, having been promoted last season.

In addition, the club run a thriving junior section from age groups at U7 to U16.

 

4D Digital - Player Sponsorship Corsham Rugby
Photo courtesy of Christopher Chard Photography

 

Have you done your Christmas shopping yet?

4d-christmas-embelishments

No, you probably haven’t. Unless, that is, you’re one of those lucky souls who remembers to buy cheap wrapping paper and cards in the January sales. The rest of us though, will probably start thinking about it as the nights draw in and the crisp Autumn air rings with the sound of fireworks being let off a month early.

Ecommerce preparation

The vast majority of our festive purchases will be made online, a sign of how quickly ecommerce has become the norm. If you own or run an ecommerce store you will know that the next few months sales make up a large chunk of your annual turnover. As these crucial weeks approach, we’ve put together a few tips on how to make your life easier and keep those orders flowing.

Buffer - Automate Social Media

Marketing

Automation is the key here. Make the most of scheduling tools such as Buffer, HootSuite and MailChimp to schedule your content. Set up your Social Media activity and promotions a week ahead and then leave it to run itself. You may need to respond to any customer enquiries in these channels but the majority of the work can be done in one hit.
Don’t be afraid to give your customers plenty of offers over this period. We’ve all received the daily Amazon email in the run-up to the big day – and it’s done for a reason – people are ready to buy.

Customer support

Predict and prepare for your busiest periods. Unless this is your first Christmas selling period, you’ll know pretty well which weeks, days and even hours are the busiest for orders and enquiries. Half of the population will leave their buying until, at most, ten days before the 25th of December. This may not be ideal from their point-of-view, but it gives the store owner a heads-up on when to expect their busy time.

Black Friday is an American thing, right?

Not anymore. This year Black Friday falls on November 23rd and the big online stores will be hoping to maximise sales. With a little preparation you can set yourself up to make some sales here also. It might be a bit annoying for so much focus to be given to one day, but people love a bargain – why not make the most of it?

4d-christmas-embelishments

Christmas website embellishments

My personal favourite. Christmas for me only starts with the first client that asks for the animated snowflakes to be added. In truth, the flakes have been there waiting all year to be reactivated, but the sight of those digital flakes slowly drifting down the screen never fails to lift my spirits. Which it does for many people, and is why adding a few tastefully-designed Christmas graphics to your website can freshen it up and add a little sparkle to your orders.
Try to avoid the Santa hat on the logo though…

Quick wins

We all like a quick win, and this can apply to your website also. Have a look through to check on any broken links, missing images, odd spelling – the sort of thing that can give customers doubt and lead to missed sales. Check your Privacy Policy is bang on (we all did that for GPDR so that’s ok…) and your T&Cs protect both your and your customer. Increased sales will, inevitably, lead to increased returns and now is a good time to remind yourself of what you actually say in your Terms and Conditions. A good rule is to set expectations – delivery times, stock availability – and to be realistic with what you can deliver – literally.

Christmas Offers and Sales

The days of the January Sale being the only time goods were discounted are long gone. Did we all really wait to go out on Boxing Day for a good bargain? Maybe it was just to get away from the relatives and experience some fresh air. Why not create a Christmas Offers page? Most ecommerce frameworks, such as WooCommerce, Shopify and Magento, let you create a new category and copy existing products into it within minutes. People love a bargain!

4d Logo with Top Quality Santa Hat

Gift Vouchers

You know that Uncle who’s a pain to buy anything for? Gift Vouchers. We’ve all done it, and it’s a great option to add onto your ecommerce site. The upside of Gift Vouchers is that a decent percentage never get used. That’s a little sad but at least it’s good for your profit margin…

Merry Christmas!

If you do own or manage an ecommerce store then best of luck for 2018, maybe one or two of these tips will have been of use. Merry Christmas and Happy Black Friday!

WordPress 5.0 – Gutenburg – Review

WordPress Gutenburg 5.0

WordPress Gutenburg 5.0
WordPress Gutenburg 5.0

If your website is built on the WordPress platform then the next release of the software – number 5.0, named Gutenberg – is something you need to be aware of. This version offers some real benefits, but also potential problems.

A new WordPress release is quite common, and depending on security settings, minor updates can happen almost without the website owner realising. Every year or two though, a major release is scheduled, and Gutenberg falls into that category. Because of the nature of the update though, WordPress developers (like us), have been given regular previews in order to prepare for the release.

What’s all the fuss about?

With the release of Gutenberg, the team behind WordPress have decided to update the editor that sits at the heart of the WordPress CMS. The current editor (based on the TinyMCE plugin) is functional, but has fallen behind what other newer CMS systems offer. The ‘new kids on the block’ of the CMS world such as SquareSpace, Wix and Craft, offer a much sleeker editing experience. To be able to maintain its position as the leading platform, WordPress needs to completely overhaul it’s writing and layout capabilities.

Block by block

A major part of the new editor is the ability to set the layout of the page using ‘blocks’. These are preset types of content, such as Text, Image and Media. Those familiar with plugins such as SiteOrigin will find a certain familiarity with how these work. On first use the ability to drag and drop content areas, to set layout structures and types, is wonderfully smooth.

The editor itself is clean and lean, and again feels so much more modern compared to the current setup. The animation below shows how easy it is to add text over an existing image.

All good then?

Up to a point. As much as we love the new editor and the way it uses the block system, there are some concerns. For a fresh install on a new website we found Gutenberg to run smoothly and quickly. But when integrated with a website that’s been around for a few years, some cracks did start to appear. A mature WordPress site inevitably has built up quite a variety of plugins. We found that care needed to be taken in order for problems not to occur. Our main issue seemed to be those plugins, such as Advanced Custom Fields, and how they incorporated existing content with the new editor. On a couple of occasions some content was inaccessible in the admin area, something many users would find unusable.

Summary

We liked Gutenberg and it’s crisp efficiency. But care does need to be taken when installing the update. It may be that plugin developers ensure that their plugins will seamlessly work with Gutenberg, and the well-known ones mentioned above probably will. Let’s hope so!

If you have a WordPress website and would like advice or help on maintenance, we’re always happy to chat. Just give us a call on 07449 045955 or use the email form on our contact page.

Progressive Web Apps – How they can help your business

Most businesses realise that mobile technology needs to be at the forefront of any digital strategy. We all know how powerful and addictive mobile apps and websites can be. However, businesses can harness this (in a good way) by using a technology that creates a new type of mobile app or website – the Progressive Web App.

Add to Home Screen

A Progressive Web App (PWA) is a website or application that interacts with the user just as a native app would do. Unlike a native app, a PWA is not installed via an app store such as Apple’s App Store or Android’s Google Play. The application is simply a website visited by the user, who is prompted to install a shortcut onto the mobile home screen.

This seemingly small difference offers a huge benefit to anyone developing and maintaining the app. No app store means no commission fees, no time-consuming approval process every time the app is updated. In addition to bypassing the app stores, being based on web technologies enables the application to written in only one codebase – not the multiple versions that are needed to maintain iOS, Android and Windows apps. Reduced development and maintenance costs, quicker release to market – it’s easy to see why many some of even the world’s largest brands are pursuing the PWA route to market.

PWA Functionality

Only in the last two or three years have PWA’s been given access to the hardware device functions a native app could use. Camera, Microphone, Push Notifications, Geolocation, File system – all of these and more can now be accessed by mobile web technology and therefore a PWA. Transferring data on secure https connections, the ability to work offline – these are now default functionality for a PWA and make for exciting possibilities.

Starbucks leads the way

Let’s have look at three of the best PWA examples currently in use. All are from big brands who are slowly moving away from building native iOS and Android apps.

Starbucks

Like them or loath them – Starbucks have led the way with PWA apps. Featuring geo-location for nearest stores and good offline capabilities.

Twitter Lite

The Twitter PWA or Twitter Lite as it’s referred to, can be installed via https://mobile.twitter.com

The performance is so good that it’s easy to forget this is not a native app.

 

 

Debenhams

The might not be considered bang up-to-date in the fashion stakes, but the team at Debenhams are ‘en mode’ with this one.

https://www.debenhams.com/webapp

 

The future’s bright – the future’s PWA?

There may always be a place for native apps. But we would suggest that anyone looking to build a new app should seriously consider the PWA route. Reducing development cost and time as well as removing the need for app store approval, can make a serious difference to any new project.