Web Development Trends for 2016 - MivaCon 2016

Welcome to Web Development Trends for 2016. Before we take a look at what are some current trends, let's see where we've been.

In the early days of the web, we’re talk in the early 1990s, everything was text-based, single-column layouts written in basic HTML. There was no such thing as a style-sheet or inline styles or anything like that.

By the time we hit the mid-1990s, tables start becoming the go to element for page layout. Pages are split into frames for separating navigation from content. It's still pretty straightforward in the layouts.
Getting to the late 1990s animated GIFs are all the rage, Flash becomes the new “thing” and CSS start showing up.

Move into the early 2000s, style-sheets take hold allowing for more unified layouts. IE5 is actually the first browser to achieve 99% of support for CSS1...believe it or not Microsoft actually ahead of the times at this point. The positioning of DIVs becomes the new add-on for table-based layouts. Full Flash sites are showing up and JavaScript makes its entrance.

Up until this point, most web pages are 100% width of the screen. Come the mid-2000s, websites start becoming more narrow in an effort to make them look close to the same across the new variety of monitor sizes. Although 800 by 600 pixel screens are very popular, the 1024 screen is showing up. Due to the narrowing of sites, navigation moves from the left and becomes a horizontal bar higher up on the page; really staying that way to this day.

Getting towards the late 2000s, developers are overwhelmed with all the cutting-edge ideas and cool gizmos that so many sites start just showing up as under construction while they try to decide what to do.

The early 2010 s websites are becoming more semantic. JavaScript is no longer a novelty it's almost a must have. Getting into the mid-2010s, the advent of the mobile web and responsive design really starts taking hold; one-page sites become popular; flat and material design start rearing their head. Full-screen backgrounds and videos, parallax sliding, and hamburger menus all start a new renaissance of web development.

This brings us to the mid-2010s. What are some of the current trends? Well responsive design is still the big one. We're getting toward more of a contents focused design as opposed to device driven. The use of icons in place of text to show navigation elements and key points make it a little bit easier to create a unified look. Semi-flat design and subtle color palettes with a reliance on framework such as Bootstrap and Foundation are really popular. The reliance on developer production tools such as Grunt, Saas, and LESS.

So what will the 2016-2017 season bring?

The hamburger button and off-canvas, hidden menus are still going to play a big part. Although previously a resident on mobile devices and tablets, they are now starting to show up, more and more, on desktop layouts. This push will unify how visitors access site menus across the board.

The results are in... visitors scroll. The concern for the past few years about the fold have really started to subside. The new push will be for sites to be longer but easier to scroll and navigate through. Lazy-loading is making the wait and pain of scrolling lessen whereas on-page filtering will make it so you won't necessarily have to scroll several pages to get what you're looking for.

2014 and 2015 saw the tile layout, originally popularized by sites like Pinterest and Dribbble, make a big impact. Tiles will be giving way to the card layout. The card layout is like a tile on steroids. It allows for more information in a small space and utilizes micro-interactions, already popular on mobile apps, to keep the visitor engaged with your content. In the ecommerce world, this is going to become a bigger element especially for products on a category page.

Homepage or hero sliders have proven less effective and, as such, are on their way out. They are being replaced by just a standard large hero image, perhaps the full width of the site, but they will be static. With the impact a single image can make, this will become a prime advertising point causing site owners to change them out more often than slides are usually even updated.

Currently, although many of us think of ourselves as developing or designing as “mobile-first”, the new push is going to actually be more of a “touch-first” pattern. Device size will still play an important factory, however we will be paying more attention to what can be “touched” and how it can be manipulated or interacted with. While previously the realm of tablets and mobile devices, this will become a bigger concern with desktop sites, especially on your larger tablets and “transformer” style laptops.

Responsive web design is going to see some big improvements. As browsers become more unified and more data is being fed back to us, the ability to create more adaptive sites without doing user-agent sniffing will play a big part. The addition of responsive images and the ability to create optimized layouts will really improve the way sites get delivered.

There will be a return to the three-click rule; meaning it should take you no more than three clicks to get wherever you want to be. Concise menus and on-page filtering will lead the way for allowing you to minimize the number of clicks a visitor needs to get to the content, or product, they are really looking for.

Google is starting to become more focused on the actual usability of a site; having your site accessible will increase its usability. Accessibility was an early concept that was difficult to account for and kind of faded in favor of making sites prettier or fancier. However, it does leave out a decent portion of the population. Depending on what you are trying to sell or what kind of information you offer, adding a few ARIA tag to your content could make all the difference in your visitor’s experience.

Animation and interaction of sites will become smoother and richer. I am not saying that there are going to be a lot of animated gifs floating around again or things like that but the animated interactions we currently use will become smoother. Showing and hiding of an element or the way navigation operates; little things like that is what will become more app-like.

Looking beyond 2016 and 2017, what does the playing field for web development look like?
• Quicker page loads are going to still be an important aspect. The ability to utilize server-side caching and even local caching is going to really make an impact in the way websites work.
• Typography is going to make its way from the design world more into the web development world. It is now easier than ever to use custom looking fonts and make them show up on any browser.
• Looping back to rich animations, they will lead the way for smoother in-page interactions or micro-interactions or micro-experiences...whatever you want call them. Things like posting review or logging into a site will become almost seamless.
• With the browser wars seeming to almost come to an end, the adoption of newer, cutting-edge technologies is really going to become more of a norm. We won't have to worry so much about “will this show up in older versions of IE” or “will this only work on Safari on the Mac”.
• I think the biggest thing that I'm looking forward to is element queries. Whereas responsive web design relies on media queries to determine the dimensions of the browser you are using, element queries allows you to do the same things within a given element. This will allow us to actually make let's say product descriptions change the way they look. Without reorganizing the entire page, we can modify or change visibility on content by just querying the containers dimensions.