In 2014, we are seeing an increase in support for new, exciting web technologies and dependency of browsers is decreasing. 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 10 web development trends for 2014 (If you are a designer, you might also want to check out the top 10 latest web design trends).
1. 3D web shenigans
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 are seeing increasing use of more mind-bending and impressive apps, games and presentations harnessing the (currently) experimental 3D context withWebGL.
- 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.
- 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
This is a trend we started to see kick off last year, and it is continuing 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.
4. Front-end framework
Front-end frameworks were very popular in 2013, and this year we are seeing tremendous popularity in developers. Another thing we’re watching more of in 2014, is the front-end development stack. This includes:
- The front-end framework of choice (Bootstrap or Foundation)
- Testing server
- 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.
5. 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 aniframe 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.
6. Development beyond 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…
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.
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.
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.
9. Responsive design
This year we have seen most of 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.
10. Mobile web apps which behave and perform like native apps
All of the year’s trends 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
Source: Zing Design