Important Web Design & Development Trends in 2016: Part Two
Page Weights Will Continue to Rise (But May Fall Soon)
The historical trend for website page weight has been to increase each year. 2015 was no different, as the year ended with a 2.2Mb average page weight according to the HTTP Archive. This is about an 11.5% increase over 2014. Expect 2016 to continue the trend for heavier pages, especially due to content like fonts, scripts, and images. Although this may seem like a non-issue, there is good reason behind keeping your page weight down, especially for mobile users who pay for data plans in which every kilobyte of data counts. You can use this handy tool to see how much your website costs users around the world.
There is recent solution that may start bucking this trend: responsive images. Browser support for responsive images has been slowly gaining tracking traction, as Microsoft Edge and Safari 9.1 have joined Chrome and Firefox as browsers supporting the HTML picture element. This element will allow for different images to be served up to different devices. In addition, WordPress 4.4, released in November of 2015, added support for responsive images on the Content Management System. I’d expect other CMS solutions to implement similar support in the near future. Since WordPress drives an enormous percentage of the web, we could see page weight plateau as adoption of the latest WordPress release increases in 2016.
More Animation
Increased browser support for CSS animations and HTML5 Canvas will let 2016 be the year of animation in web design. Websites lacking animation will feel dull and outdated in the coming year. Designers and developers have a trove of animation tools at their disposal, including parallax scrolling (via CSS or JavaScript), micro animations (such as Animate.css), HTML5 Canvas animations, and SVG animation. The increasing availability to these tools for professionals means that animation will be increasingly prevalent.
2016 will also see a rise in cinemagraphs. Cinemagraphs are visual combinations of static photos and videos, where only small portion or portions of an image have movement or animation. Check out these examples to see why they are so compelling and posed to be the next big thing.
Increased Offline & Notification Support with Service Workers
Service Workers is a browser API specification that can be used to make web apps work offline and provide background features like notifications, messaging, geofencing, and syncing. The technology is still fairly new and in draft spec by the W3C. Chrome currently supports most of it, with Firefox and Opera following closely behind. Microsoft Edge and Safari are currently considering supporting the specification, with all signs pointing to development at some point in the future. For developers, Service Workers is implemented via JavaScript.
The point of Service Workers is to allow for users to keep working with your web app where connectivity isn’t perfect. Good examples are mobile users who move in and out of cellular range and laptop users sharing a spotty WiFi signal. The experience will be in full control by the developer, and for the users it would feel seamless without error screens.
An example demo can be found at Trained To Thrill. This demo loads images from Flickr while the user is connected to the internet. After the page loads, disconnect your internet connection and refresh. The page will reload as it has been cached by Service Workers, and it will notify you that you’re offline.
Developers interested in learning more should check out this nice guide by HTML5 Rocks.
More Flat Design & Near-Flat Design Aesthetics
If you haven’t heard of flat design, you’re probably still living in the Web 2.0 world. Flat design eliminates superfluous elements such as gradients, textures, shadows and sometimes images for solid colors, vibrant colors, and bold typography. Near-flat design brings these elements back into the mix in subtle ways without bringing back skeuomorphism. For website design, flat design will continue to be the visual trend in 2016. Think “less is better”.
The signals that flat design is here to stay can be seem with large companies like Google, who recently redesigned their logo in the flat design style. Spotify also took the plunge. Netflix was ahead of the curve in 2014, adopting the flat design concept.
For website design, a look at the most popular flat design websites shows design devices like monochromatic or very limited color palettes, black & white or duotone imagery, and large geometric typography employed. Iconography and simple illustrations are also very trendy.
The challenge for designers in using flat design is coming up with new ways to make sites, apps, and brands feel unique.
Security & HTTPS Everywhere
Web and mobile security is on the minds of all developers and business owners after a rocky 2015 that saw numerous high-profile data and security breaches. A recent security whitepaper by White Hat showed that 86% of all websites had at least one serious vulnerability.
One of the common mistakes in web and mobile security is not having an encrypted website or API endpoint. A big push has been made by the big technology players to bring SSL/HTTPS to developers and agencies quickly and easily to help secure the web. Another point for acquiring HTTPS for all websites in 2016 that it will also have an impact to your SEO ranking with Google.
Web security is a massive topic unto itself, and is much too long explain in one blog post. Developers looking to learn more about web security should check out OWASP (the Open Web Application Security Project) for more information and where to get started.