Top 10 web development trends and predictions for 2014

Tags: , , &

development-predictions-by-zing-design

In 2014, we are expecting to see a continued decline in the use of legacy browsers and an increase in support for new, exciting web technologies. This transition will empower developers to build faster apps that perform consistently across all devices as well as being on-par with the speed and capability of native apps.

As we move away from having to support users stuck in the dark ages, we can build apps without heavy fallbacks, hack polyfills and the inevitable IE-victim guilt which ensues.

So, here are our top ten predictions for web development in 2014 (if you are a designer, you might also want to check out the top 10 web design trends and predictions for 2014):

1. More 3D web shenanigans!

There are a lot of very intelligent developers already taking advantage of the 3D capabilities of modern browsers. We expect to see an increase in support for CSS3 3D transforms, a lightweight, mobile-friendly method of rendering 3D graphics.

The HTML5 canvas has been promising greatness for years. This year we can expect to see more mind-bending and impressive apps, games and presentations harnessing the (currently) experimental 3D context with WebGL.

Right now, 3D canvas development is in the realm of the super-geek, and we believe that we’ll see an arms-race as development companies try to build a tool or framework which take it to the mainstream.

The 3D rendered banner on the Acko website.

Steven Wittens is a 3D web pioneer pushing the limits of what’s possible in the browser

2. The HTML5 JavaScript API

Here are some of the cooler APIs in the HTML 5 JavaScript spec:

  • Web Storage provides a cleaner alternative to cookies, as data can now be persistently stored locally on the user’s browser. This will be especially handy for use in mobile apps as it allows simple offline storage of client data.
  • Web Workers allow multiple complex JavaScript tasks to be performed simultaneously, without the penalties on performance. Workers will be one of the fundamental building blocks for every mobile web app striving to perform like a native app.
  • WebSockets are an exciting, faster alternative to AJAX for real-time communication. We should see an increase in the utilisation of WebSockets for live-chat and online-gaming.
  • Application Cache is another powerful feature which will allow web apps to behave more like native apps by caching the whole app for offline use.

These are among some of the new features which offer all kinds of amazing possibilities. They have the potential to give web apps similar power and capabilities as native apps.

Most modern browsers are ready to start leveraging these awesome features, but as usual, we’re still held back by the legacy IE versions’ lack of support*. The good thing is, we can provide an IE-only fallback if need be. I think we’ll see a move towards quiet-failure or even notifications politely telling the user to download a newer browser, like our one below :)ie7-message-screen-by-zing-design

*legacy Android browser and Opera Mini also lack support, but I like whinging about IE

3. The rise of JavaScript and client-side web apps

This is a trend we started to see kick off last year, and I believe we’ll see it continue through 2014. There are many benefits to building an app entirely with client-side technologies. Here are a few big reasons:

  • Developers don’t need to go off and learn an entirely new language
  • Deployment is a whole lot easier as the app can be deployed on any server as a set of static pages
  • Those HTML5 JS APIs we mentioned before now make it possible to do all the things a heavy server-side framework can do, and maybe even better.

There are of course limits to what you can build on the client-side, and server-side frameworks certainly aren’t going away soon, but we should see an emerging tendency for future small-to-medium sized apps to run solely on the client-side.

We should see a dramatic increase in the popularity of JavaScript and a shift towards JavaScript as the common-language between web developers. JavaScript alternatives like CoffeeScript and Dart will become tremendously popular and the developers of tomorrow will likely be fluent in one or the other.

coffeescript-dart-zing-design

4. The evolution of the front-end framework

Front-end frameworks were very popular in 2013, and this year we hope that we’ll see them further improve the workflow of developers. Another thing we’re eager to see more of in 2014, is the front-end development stack. This would ideally include:

  • The front-end framework of choice (Bootstrap or Foundation)
  • Testing server
  • Task-runner
  • Dependency management
  • Seamless integration with any platform (this may be asking a bit too much)
  • Easy deployment through command line or GUI

Yeoman is a great free tool which closely matches these criteria, it seems to get more helpful and powerful with each new version, so is definitely one to watch. Another app to try out is Mixture, a desktop app which seems to takes care of all of these workflow tasks and more.

Yeoman zing design

5. Wider use of HTML5 video

If you go to any website these days, there’s almost always a video – and 99% of the time it’s rendered through an iframe from YouTube or Vimeo. There are a few reasons why this method is so popular:

  • YouTube and Vimeo host the videos so you don’t have to worry about bandwidth or storage
  • The correct video format is loaded based on the browser making the request, alleviating any compatibility issues
  • It’s really freakin’ easy!

In saying that, what we hope to see in 2014 are more developers using custom HTML5 video tags to display video on websites. Using the latest standard, you have more control over the presentation of the video and can keep it in line with the rest of the site’s design.

Here are a few tips for consistent, cross-browser safe HTML5 videos:

  • Include the video formats .mp4, .webm and .ogg – You can convert your video with apps like this one, there are quite a few web video converters available now.
  • Add a Flash fallback if you want to support IE8 or below – this will hopefully be less of an issue by the end of this year!
  • Host the video on a CDN, for speedy download times and peace of mind.

HTML5-video-zing-design

6. Development beyond the screen

2014 will more than likely see the release of weird and whacky ways (such as through wearable technology) to view media. Google Glass is a great example of this. Developing a web app which behaves itself on these futuristic devices is bound to cause some headaches.

The Glass’ browser (named XE7) has a resolution of 640×360 pixels and it can be controlled with voice, by a touch-sensor on the side of the glasses or with head movements.

So how the bloody hell are you supposed to build for that??? I guess we’ll wait and see, but at a glance it seems a responsive website will work fairly well…

google glass user looking creepily at the camera.

OK Glass, How do I look less like a creepy cyborg?

7. Getting creative with cookies

The recent EU cookie law is not as tasty as it sounds.

As many developers will probably be aware, the EU put in place strict rules on all European organisations with websites – they must now notify their users if the site is using cookies and ask the user’s permission to use them.

One of the challenges this year will be finding a creative, unobtrusive method of delivering this message. The challenge will be keeping users on the site, giving them an option of finding more information on cookies and (preferably) giving them a way-out if they don’t want to visit a site which uses cookies.

A step further would be to give the user the power to sort through the cookies and tell them clearly what each cookie is doing, allowing them to enable/disable any of the ones on your site.

eu-cookie-law-flag-by-zing-design

8. Drag and drop everything

HTML5 native drag-and-drop revolutionised user interfaces when it arrived on the scene. Now it’s all grown up, I expect we’ll see a more interactive web, which leverages this technology subtly and creatively.

What we expect to see more of this year:

  • Greater touch device support for drag-and-drop interfaces
  • More interactive info-graphics with drag-and-drop capabilities like the mind-blowing slavery footprint survey.
  • More sites and apps allowing users to customise the layout with drag-and-drop.
how-many-slaves-do-you-have-zing-design

How many slaves work for you? Find out at slaveryfootprint.org

9. Responsive design will become mandatory

This year we want to see all new websites and apps being built to respond to each and every device imaginable. There’s really no excuse for not building responsive now, with frameworks like Bootstrap and Foundation at every developer’s disposal.

bootstrap-3-vs-foundation-4

We’ll also see an increase in the use of responsive JavaScript, as some functionality doesn’t translate well across all devices. Hand-picking which resources are loaded based on the device will become the norm. Trimming down unused scripts on mobile will be essential to faster web apps.

Following this, we can expect to see the decline of the “mobile web” – i.e. websites which redirect users to a completely separate site (these can end up providing wildly different content to the “desktop site”). This old-school approach is bad for usability and is a nightmare to maintain.

10. Mobile web apps which behave and perform like native apps

All of the year’s predictions lead up to this one… The idea that with all these amazing new technologies at our disposal, we as web developers should be able to build sites and apps with the following qualities:

  • Design and functionality which responds to any device size and input method
  • Consistent support for touch and gestures
  • Offline capabilities for users on flaky mobile broadband connections
  • Low processor demand, and as such, lower battery power usage
  • Lightning fast loading speed and task performance

People who have viewed this post also viewed

Comments

Leave a comment

* Required fields

captcha

Please enter the CAPTCHA text