10 Important Web Design and Development Trends in 2016: Part One

Thinking of refreshing your website in 2016? Here are the latest trends and cutting edge web tech you need to be aware of.

IE8 Dies (Finally)

keyboard close up

The final nail in the coffin for Internet Explorer 8 is January 12, 2016. That’s the day when Microsoft will only support the latest browsers on the versions of Windows it still supports. For most users, this means you’ll need to be running Internet Explorer 11 or Edge in order to get support, updates, and security fixes from Microsoft. (If you’re not running Windows 10 and Edge yet, you should really consider upgrading: it’s awesome!).

There’s no need to fret: seeing IE8 ride into the sunset is not a bad thing. Most web frameworks and plugins are planning on dropping or have already dropped IE8 support ““ examples include Angular 2, Bootstrap 4, and jQuery 2. IE8 is only at 1.2% worldwide usage at the end of November 2015, and that number will sharply drop in 2016.

For designers, this means we can fully utilize modern web features without fear, such as media queries, CSS3 properties, SVG icons and images, and better JavaScript support. For clients, this means faster development, faster sites and applications, and decreased development support cost.

ECMAScript 6 Improves JavaScript

2015 was arguably the year of JavaScript. 2016 is shaping up to be a repeat. The driver this time is the release and ramp-up of support for ECMAScript 6 (also known as ES6 or ECMAScript 2015), the latest version of JavaScript. ES6 is a significant upgrade, with the last major advancement released all the way back in 2009 (which is a long time in web years!).

For developers, ES6 brings support for classes, arrow functionsmodules, templating, and more. If you still need support for ES5, a library like babel.js will translate your JavaScript backwards for compatibility with older browsers. Check out the support chart for browser compatibility and a full rundown of ES6 features.

For clients, ES6 doesn’t manifest into many things you’ll see on the front-end of your site or app, but you’ll benefit with cleaner and faster code driving your sites, which will also be prepared for the future of the web.

Static Website Generators

Construction vector graphic

Did you know that the first ever website, Tim Berners-Lee’s original home page for the World Wide Web, was static? Soon after, SQL databases and web stacks such as LAMP (which drive sites build on WordPress, Drupal, and Joomla) became popular to help separate content from design and to make the web editable by the masses.

In 2016, we’ll see the return to the static website through increased popularity in tools such as Jekyll, Middleman, and Assemble. Static website generators such as these take a back-to-basics mentality to solve the issues that have become common with the web and many content management systems ““ security, speed, and caching.

Static site generators use a variety of languages at their core (such as JavaScript, Ruby, and Python), but the main language they are built on is called Markdown, a simplified way of writing HTML for writing, blogging, and note-taking. Once mastered, Markdown can replace WYSIWYG editors found in most CMS platforms.

These generators still have some growing up to do, but be sure that you’ll be hearing more about them in 2016 and beyond as they gain more traction and start replacing simple blog and marketing websites. Check out this list of popular static site generators for more info.

Increased Flexbox Usage

Flexbox (also known as the flexible box module) is an advanced CSS property that will gain widespread adoption this year. Its purpose is to provide a more efficient way to lay out and align a website’s design. Flexbox will allow designers to build grid systems without relying on CSS floats, complicated percentages for widths, or any need for JavaScript or jQuery hacks for equal height columns.

The main attributing factor for flexbox not being widely adopted is because of older browsers. Flexbox was first introduced for Internet Explorer 10 in 2012, and used a different syntax than what is now the current specification. With Microsoft now pushing users to IE11 and Edge on the latest operating systems, we’ll see flexbox used much more in 2016.

A great guide to using flexbox can be found at CSS Tricks, and for a full list of supported browsers and known bugs check out Can I Use. A useful grid system has been developed that you can download and use in your site designs today.

Card Layouts In Mobile and Desktop Designs

The web has matured over its lifetime from a page-based desktop system to a content on any device system. Cards is a layout device that is at the forefront for allowing content to be easy viewed and digested by users. Examples of cards are tweets from Twitter, an Instagram post, or a Pinterest pin. Google has moved to using cards as part of their Material Design framework on their web apps and their native apps.

Cards are a useful device for designers because they are responsive design friendly — they scale well on mobile devices and on large desktop screens. They are best used for small, short bursts of information, like a photo, a short amount of text, a small handful or links or function, or a combination of the bunch.

Cards are also useful in native devices, as users can touch them, swipe them, and scroll through a list of them. They can also animate and flip to allow for more functionality, if needed. They should not be used for long-form text or data entry, where traditional pages are better suited to present that type of information.

If you have good case for using cards, be sure to check out these resources:

Take a look at the next 5 trends in Part Two of this blog series

Want brilliance sent straight to your inbox?