Jordan podda

Website design and website development are ever-changing practices and one only has to be out of the game for a short time to become outdated. Such is their pace of change that it makes sense for those invested in ‘the web’ to familiarise themselves with upcoming trends that will likely shape web design and development in the near future.

To that end, in this article we will be discussing the web technology trends that we believe will become more prevalent through the next year. Hopefully, with this list to hand, you can stay in the loop and adapt to changes in website conceptualisation, planning and building.

So without further ado, let’s begin:

1. Textured and patterned text

textured text demo

Image source: Tympanus

There’s no arguing against the notion that CSS3 has revolutionised web development, and perhaps the biggest area it has had an impact is typography.

With CSS3, designers can now add styling and neat effects to text without any images or JavaScript and it is possible to add textures, patterns and background images to text in a way that maintains good coding and meets the requirements of SEO. Moreover, by utilising texture and pattern, it is possible to add depth to a website and emphasise important elements such as call-to-action points, value propositions and other important information, and as a result, designers have a lot more freedom with imagery and layouts.

Crucially, practically all mainstream web browsers (Chrome, Firefox and Microsoft Edge) support the latest CSS standards, so a consistent user experience can be delivered and CSS tricks almost always play nice with responsive design (it’s down to the website developer to ensure a consistent user experience across multiple devices), boosting the appeal and potential of textured and patterned text being adopted considerably.

Key features & benefits

  • SEO friendly;
  • Changes can be made directly with the site meaning less time in photoshop etc.;
  • Gives designers more freedom with imagery and layouts;
  • Practically all web browsers support it;
  • Adds depth and functionality to a website.

Recommended reading

Textured and patterned text using CSS

Techniques for Creating Textured Text

2. Website personalisation

Amazon personalisation

Website personalisation is not so much a trend – it’s very much the future of user experience.

If you are new to the phrase ‘website personalisation’, quite simply it describes the process of delivering content based on user activity or location. For example, Amazon provide personalised content on their homepage in the form of new products that they think you will be interested in based on your browsing and internal search history. If you search for “bluetooth speaker” and you click on a product, for instance, then your homepage experience will change to reflect this search with related products (see image above). That’s web personalisation in action.

According to Janrain, 74 percent of online consumers get frustrated when websites provide content not relevant to them. Right now, it is possible to make a user’s experience more relevant from their sessions, or their activity on a website over time. Tracking users and collecting data is the key to offering a valuable personalisation experience – the more data you have, the better the experience you can provide.

Key features & benefits

  • Provides users with valuable personalised content;
  • Improves the chances of engagement and conversion considerably;
  • Can give users control over their own experience;
  • Relatively simple to integrate.

Recommended reading

Personalization Strategy: Tips on Implementation

3. Interaction design 

awwards interactive sites

Interaction design is actually one of the most complex UX disciplines, however, because new functionalities are always coming to be as a result of advancements in code. The likes of parallax scrolling, transitions and loops between elements come to mind. HTML5, CSS3 and jQuery have each offered new functionalities to increase engagement on a website and we have already seen the likes of static graphs and images being replaced with engaging, interactive and easy to digest infographics and data visualisations.

Over the next year, we will likely see interaction design extend beyond the animations and microinteractions (such as the Facebook Like) currently employed. We expect push notifications to become more prevalent and hover effects for secondary content to be more commonplace. They key beneficiaries of these particular elements will be retailers.

Key features & benefits

  • Increasing engagement is what interaction design is all about;
  • This is achieved through key usability improvements;
  • Interaction design also improves user-website relationships;
  • Modern interaction design goes beyond internal linking and search.

Recommended reading

Complete Beginner’s Guide to Interaction Design

4. Innovative transitions and animations

css3 transition example

Innovative transitions and animations refers to utilising new and unique ways to advance and improve overall user experience. While interaction design is the process of designing and implementing these, transitions and elements are the things that make this happen.

For the most part, transitions and animations are designed to improve context. Take animated scrolling as an example. When you click on a link on a normal website, it could take you anywhere. It will load a new page. With animated scrolling, when you click a link, the page scrolls down to the new content instead. That content is still loaded, however it is delivered in a way that keeps the user experience intact. It maintains context.

The types of animation and transition one can create with code are endless. Website developers considering such elements for a website need to consider how they are going to make each element understandable, however. Most consumers are used to interacting with content through links. Providing an alternative may be confusing. A fantastic example of an element that works is pull to refresh which has all but replaced the load button within apps.

Key features & benefits

  • Loading and hover animations;
  • Quickly show or hide content with a gesture;
  • Animated scrolling;
  • Context-based hiding and collapsible forms.

Recommended reading

A Sass library for creating flexible CSS transitions and animations by Zurb

10 Cool Examples of CSS3 Transition & Transform Hover Effects

5. Responsive design for advanced devices

apple-watch-screen-shot

With only 22% of marketers saying that they were ahead of the curve when it came to responsive design in 2013, one can only guess how those study participants are feeling three years later after the introduction of the smartwatch and virtual reality headsets. These devices have thrown a real curve ball at marketers, designers and developers, and while they are not popular enough to warrant serious development time right now, they are becoming increasingly popular and they will need to be considered by developers at some point.

How popular? Well by the end of this year, smartwatches are expected to have reached 46 million sales while virtual reality headsets are expected to have reached 11 million sales (Statista). If those statistics are to be believed, a significant amount of people are going to be accessing content online on a wearable device. The challenge developers now face is how to take responsive design beyond the smartphone and tablet computer for really, really small screens, and as you would probably guess, that challenge is extremely tough.

Basic interaction has to take centre stage when designing a website for smartwatches and VR. The basics have to be done well. CSSDA has a fantastic article on smartwatch UI designs and concepts – this will give you plenty of inspiration moving forward.

Key features & benefits

  • Responsive design for screens down to an inch;
  • All while maintaining user experience.

Recommended reading

Responsive Web Design Is Set to Hit the World of Virtual Reality!

6. Full screen form interfaces

minimal form example

Image credit: Tympanus

When you want somebody to give you their personal or business information, the contact form they use has a big impact on whether or not they will bother. A contact form that’s poorly structured, a contact form that asks for too much personal information or a contact form that doesn’t load properly on mobile devices will turn people away.

Full screen form interfaces simplify contact forms greatly. The idea behind them is to allow for distraction-free form filling. For example, Codrops published a concept form that’s incredibly minimal – it asks for one piece of information at a time and it only loads the next part of the form once you submit the previous bit of information. The form effectively guides you through the filling process, to ensure you provide everything it needs. With that particular example, the last page is a simple review page with a submit button.

By taking up the whole screen with a single question at a time, the full screen form interface is a very functional and fun way to hand over information. You can check out Codrops’ demo here – as we’re sure you will agree, it’s a damn sight nicer than a regular contact form.

Key features & benefits

  • Less distractions on a page encourages users to take action;
  • Streamlined forms that take less time to fill;
  • Ideal for smaller screens like smartphone screens.

Recommended reading

Fullscreen Form Interface

7. Material Design

material design example

When Google announced Material Design in 2014, the world took notice. This was, after all, going to inspire how all of Google’s apps and services were going to look and feel going forward. With elements that expand and shrink, lots of animation and lots of shadows and lighting effects used to transcend flat design, Material Design is one of the most visually stunning and useful advancements in design since, well, ever. But, it hasn’t been something a lot of website developers have adopted. We think that’s going to change this year.

The core principle of Material Design is touch. It is based in layers with weights, animations and motion. It can be used for graphic design, a device interface or for an app or website or indeed across any channel or platform. The purpose of Material Design is not to be a pretty picture though, it’s all about creating hierarchy, meaning, and focus. Deliberate colour choices and effects and typography put emphasis on the most important content on the screen to guide users and improve functionality. From a website design point of view, then, Material Design ticks all the right boxes which is why it’ll become more prevalent in 2016.

Key features & benefits

  • Create sleek and simplified interfaces;
  • Blends the best elements of flat design and skeuomorphic design;
  • Puts emphasis on the most important content on the screen;
  • For mobile, desktop and beyond.

Recommended reading

Material Design – Google

Material Design Lite

8. Magento 2.0

magento 2.0 screen shot

Magento is the world’s most popular e-commerce platform so it’s safe to presume that the latest version of it, Magento 2.0, will be adopted prolifically across 2016 by retailers just as any new version of WordPress is on blogging networks.

Magento 2.0 has been hailed as a “new era of commerce innovation” by Magento on their blog, and it has addressed the key limitation of the previous version, which was heavy server and resource use. Core features include a responsive framework, grid layouts, full page caching and an updated technology stack which includes HTML5 support. Out-of-the-box, Magento 2.0 also comes with multiple payment integration for PayPal and other gateways.

So for all intents and purposes, Magento 2.0 is a more complete commerce platform than the previous version, and the fact that it is compatible with more popular platforms like Oracle and MSSQL than the older version will seal the deal for many website developers.

Key features & benefits

  • Highly modular technology stack with HTML5 and CSS3 support;
  • Integrated payment gateway support, including PayPal, out-of-the-box;
  • Simplified upgrade process and easier maintenance;
  • Loads of high quality responsive themes to choose from.

Recommended reading

Magento 2 developers hub

9. Readily available open source libraries

open source example

Open source libraries have been used by website developers for tens of years, however they are becoming ever-more crucial to the conceptual process as more and more developers approach the design of a website without access to final content, imagery and fonts.

Having access to good fonts and CSS effects and UI kits makes the development process much swifter, thus helping to meet deadlines and improve workflow. There are a wide range of open source libraries out there specialising in CSS, jQuery, HTML5, fonts and much more, and they are quite often free to access or cost very little. One can even go as far as using an entire front-end framework from a library, such as Bootstrap and Foundation.

Through 2016, the use of open source libraries will likely increase as more web developers seek to integrate trends previously mentioned in this article, such as innovative transitions and animations and full screen form interfaces. Everything a web developer will ever need to build a good website can be found within open source libraries. Here’s a few quality ones we have collected over the years – feel free to use them as you wish:

Key features & benefits

  • Get access to CSS effects and UI kits cost-effectively;
  • Discover new and exciting web development advancements;
  • Get help from active developer communities;
  • Hone your skills and become a better developer.

10. Email marketing advancements

pret interactive email example

Email marketing is often under-rated and some marketers have opted to invest their email marketing budget into social media instead. Far from being dead however, email marketing still has an awful lot to offer through 2016.

This year, we believe that we will see a lot more responsive email marketing campaigns and more interactive email marketing campaigns using transitions and animations like hover and loading animations. The trends that have dominated website design will start to find their way into email. This belief is one that is backed by Alex Williams of Trendline Interactive and Williams also thinks that Google will be rolling out style support to Gmail in the near future, giving people the opportunity to change the design of their emails before they send them; if they did that, it would pave the way for the rest of the email industry,

Beyond responsive and animation, we also think email marketing will see more video and personalisation in a similar vein to our website personalisation section above. Emails will be sent to consumers based on their browsing and search history (not just their purchases), as opposed to the same email being sent out to hundreds of people at once. This is an email marketing strategy used prolifically by Amazon and eBay and John Lewis, and we think plenty more retailers will start to adopt it throughout 2016 – if it works for the big boys, then there’s a good chance it will work for everyone else.

Key features & benefits

  • Transitions and animations will become more prevalent;
  • Video will start being used a lot more;
  • Personalised emails based on browsing and search history will be commonplace.

Recommended reading

10 epic email marketing predictions for 2016

Summary

So there we have it! Ten web technology trends in 2016 you should definitely consider implementing yourself. In our opinion, we strongly feel that the likes of material design and website personalisation will blossom this year.

What do you think will be the biggest web technology trend this year?

Share this post

Was this article useful?

Subscribe to our monthly mailing list to receive more articles like this.

Jordan podda

Posted By Jordan Podda

Jordan is a key member of the design team at Tone.