2014 was a great year for the web and the people who work in the industry. The community as always has driven some of the big changes in 2014 improving the web industry. Responsive web design came on leaps and bounds, responsive images finally made some progress, web typography continued going strong with improved services and we boosted our productivity with new workflow tools. So with such a great year coming to an end I thought we'd have a look what to watch out for in the web world for 2015.
1. Responsive Web Design
Responsive web design had its best year in the industry in 2014 as people are beginning to get a better grasp on how to deal with not just cross browser anymore but cross devices. One of the best examples of how modern day web design can work is that of Brad Frost and co's open redesign of the Pittsburgh Community Food Bank, showing how designers and developers can work together and build something that will stand the test of time.
In 2015 I expect to see people expanding on what we consider possible with responsive web design and innovating in design. With a bigger emphasis on immersive experiences that provide a deeper experience with more scrolling less clicking, typography with more personality, imagery and video along with the development of material design.
2. Responsive Images
We already saw the first implementations of responsive images in the first browsers this year along with some great examples of how it can be used. 2015 will be the year that the industry starts to implement this as a standard with cross browser support improving. Hopefully stopping the sad trend that website page weights are increasing year on year.
3. Javascript
The increasing popularity of one page web apps means new javascript frameworks such as AngularJS, Backbone.js and React will only continue to grow in use. Javascript is popping up even more now thanks to the Node.js and npm and tools like Yeoman, Grunt, Bower and Gulp to name just a few.
It is true that Node.js had it's share of ups and downs in the community in 2014 but it also proved that we can make real time web apps with some interesting twists. In 2015 javascript will be ever more important to front end developers and will be a skill in high demand with websites growing increasingly interactive and blurring the lines between native and web apps.
4. Animation
Amazing progress with Google's material design which puts a great emphasis on the coupling of animation in response to a user's actions makes what might be considered a very plain visual design filled with personality and a pleasure to experience.
The continuation with interaction design and creating experiences that immerse the user with pleasant and useful animation as visual feedback will bring web design closer to completeness. Don't forget to follow the amazing Rachel Nabors to see what is capable in web animation.
5. SVG (Scalable Vector Graphics)
Continued love and support for SVG is a certainty in 2015 with the great tools like Snap.svg and some great tutorials on how to use them with Sara Soueidan. As the landscape of the web continues to change with more and more devices in different shapes and sizes resolution independent imagery can only be possible with SVG.
Showing what's possible with advanced SVG techniques is Codrops with some amazing examples of them being used in transitional effects. Other uses include masks, animated icons and much more.
Serving crisp, clean and lightweight imagery that scales with the browser is a must and with browser support at the best its ever been there's no reason not to start using it in designs for 2015.
6. Design Workflow
The way we build websites is changing massively thanks to the responsive and mobile first movements which has meant we've needed to adapt our design and development processes to cope with the new landscape. Hundreds of devices, screen sizes and capabilities means that websites need to be built with the idea that they can be viewed anywhere. No more pixel perfect layouts-the web has gone back to its fluid roots, adaptability is key.
As these added complexities begin to mount up it means that our old process of design doesn't work well anymore. Building scalable style systems that adopt modularity (a developer's best friend) makes designs more reliable across screens. Atomic design is a great example of how to tackle this problem. Long standing favourites such as style guides and style tiles are becoming essentials in the workflow to ensure consistency and reliability throughout the design. Pattern Lab is a great example of how these two things can be brought together.
In 2015 new design methodologies/systems and existing ones will grow in support. Companies must continue to adapt their design workflow to be able to deliver a truly great responsive experience and these new techniques and tools will only help them on their way.
7. Typography
'Web Design is 95% Typography'. Read this and understand how important typography is to the web. It is a textual medium as well as visual.
In 2015 expect to see more custom fonts as designers gain the skills to create their own fonts! Adding more character to websites and giving some that personal feel. As browsers continue to improve how web fonts work so will the experience for users continue to better. The possiblity of WOFF 2.0 in the near future will mean improved performance for web fonts as well.
8. Workflow Efficiency and Tools
The year's 2013 and 2014 were when developers stepped up their game in creating websites faster and more efficiently with some great tools and automating their workflows.
With such great work being adopted and supported by the community, 2015 should represent the year that everyone should be using them to at least some degree in order to stay effective and competitive. Developers hate to repeat themselves and product owners, managers and stake holders hate lengthy development time on projects so these revelations help ease the pain.
9. CSS
Thanks to big advancements in CSS, developers are able to deliver effects, styles, layouts and animations that were previously void on the web and could only be achieved through very hacky imagery and javascript. More native CSS features means that we can begin to design in the browser and create stuff like this!
The future of CSS in 2015 could bring many things but nothing is for certain. CSS blend modes, shapes, regions, flexbox, new selectors, variables, new media queries and animation are just some of the things on the horizon. CSS blend modes and shapes particularly interest me because they offer things that are currently almost impossible natively and are hard to try and replicate.
Another great article detailing the future CSS is Tab Atkins, The Future of CSS, give it a read.
10. Video
A picture is worth a thousand words, so what is a video worth then? Support for the HTML5 video element is as good as almost any modern feature on the web right now. So why do websites not use this more? Well in 2015 I believe this will start to change, websites like Kickstarter have proved how effective a well put together product video can do for a business.
Websites such as Riley's Cycles and Kaber Technologies show what can be done with video in terms of design to make a deeper more impactful first impression. It's possibly a trend but it's worth watching out for.
These are just some of the things to watch out for in the coming year and by no means is this a complete list. As it has always been in the world of web development and design, there are always surprises and sometimes we find solutions in places we never expected. There is only one certainty in the world of the web though... a bright future.
