7 Web Design Trends you'll actually see this year

It's the time of year when every blogger on the Web pulls out a crystal ball, dusts off the tarot cards and spends hours staring pointedly into tea cups in an effort to predict the trends for the coming year.

The resulting lists usually range in plausibility from the absolutely certain (Apple will release a new device) to the utterly implausible (it will be a TV).

The truth is that it is extremely rare for any trend to arrive out of the blue. If you look carefully you'll see the roots of every major trend in the coming year start to develop in 2013 (or earlier). Whilst it's possible that a genuinely revolutionary concept will be popularized, it's far more likely that 2014 will be a year of small incremental gains, inspired by, or in response to, steady technological development.

The future of web design is already evident, we just need to look behind us to see it. Here are 7 predictions for 2014 that are already proving true, and how you can survive them.

The decline of :hover

The :hover pseudo-class in CSS is one of the most original design concepts on the Web. Closely tied in with the cursor, it indicates when a person is considering clicking an element, and encourages them to do so. However, as devices that lack a cursor continue to flood the market, the usefulness of :hover is increasingly questionable.

Recently, I overheard a conversation in which a designer argued that the use of :hover was actually bad practice, as it encouraged UX designers to think in terms that most end users wouldn't experience (ie. navigating with a cursor). Certainly, interesting hover effects are cropping up less and less in new sites.

Survival tip: Whilst it's true that mobile users will probably surpass desktop users over the next 12 months, the percentage of desktop users will still be in double figures. We've designed for platforms, IE7 for example, with far less market share. Mobile-first does not mean desktop-never, and :hover degrades gracefully. So for me, :hover still has a slot in the toolbox; just not a mission-critical one.

jQuery loses market share

When it first arrived on the scene jQuery was a revelation. I'm still consistently amazed by how simple it is to manipulate DOM elements on the fly, and not just in one browser, but across all of them!

jQuery is justifiably one of the most popular libraries of all time, and for many people has become synonymous with JavaScript, with sites being built in "HTML, CSS and jQuery".

However, jQuery isn't without its critics and the voices of dissent grew louder throughout 2013. The principal objection to jQuery is that it's big. Even though version 2.0 has dropped support for IE 6, 7 and 8, it's still a large file to load; especially on mobile sites. The extra http request and the extra kb is a hefty price to pay for something simple, like an opacity tween.

More and more people are realizing that vanilla JavaScript is faster, and more efficient, for anything other than large amounts of DOM manipulation (when jQuery really does excel).

It's unlikely that jQuery will disappear anytime soon - it's far too good a library for that - but the market dominance it's enjoyed over the past two or three years is starting to slip.

Survival tip: Spend some time getting to know the language behind jQuery; find out how document.getElementById() works. You may surprise yourself with how much vanilla JavaScript you already understand, and your ability to use jQuery will improve too.

The death of the mobile web

So much of the web design landscape is made up of the attitudes, fads and prejudices of web designers; the mobile web was doomed the day someone suggested it as an alternative to responsive design.

The mobile web is any website designed to work exclusively on a mobile device, usually a smartphone, normally run in parallel with a desktop site. In other words, two websites. You might as well hang a 'Best viewed on a 1024 x 768 monitor' sign on your homepage.

Of course, there're good arguments for running multiple sites for some businesses, not least because our use-case varies - the classic example being a restaurant site, where desktop users probably want to see the menu and mobile users probably want directions to the business. But all of that has been lost in the mad rush to embrace the one-site-fits-all mentality of responsive design, especially as real-world situations that justify multiple sites are few and far between.

Survival tip: Consider developing multiple sites if there's a good reason to believe that users will benefit from different content on different devices, but treat them as micro-sites. And of course, make sure any site you build is responsive (the variety of mobile screen sizes will continue to increase this year).

The return of rich media

When Flash took a nose-dive, it took with it not only Adobe's unassailable market position, but also the fashion for anything Flash-like.

Clients, unsure of exactly what was bad about Flash rejected anything Flash, flash, or flashy. A few brief years of restraint followed, with designers embracing minimal design and clients embracing smaller invoices.

It was very early in 2013 when things began to change, and the growing love of full-screen images, text animation, page transitions, single-page sites has continued to grow at pace.

The incredibly under-baked quality of HTML5 video set rich media back by a couple of years, but 2014 will be the year that changes.

Survival tip: Make your motto "Just because I can, doesn't mean I should." Learn from the mistakes of the past by using rich media in ways that enhance projects and always focus on keeping load times down.

Content will lose its crown

The old adage that 'content is king' is justified by Google rankings, design fundamentals, and client priorities.

However, the endless march of CMS like WordPress, SquareSpace, Webydo and Drupal means that designers are increasingly finding themselves designing not only for content they don't have, but for content that will change on a regular basis.

Content is often finalised many months after the web design agency has moved on to pastures new, and whilst this can only be a bad thing for design, the good news is that clients are increasingly understanding the Web as an ongoing project, one that requires both regular maintenance and professional management.

Survival tip: With content in a state of permanent flux, the new monarch is the brand. Not just visual brand, but tone of voice, style, language and quality. Be flexible with your approach, and focus on designing systems, not fixed pages. Websites now need to be designed responsively, not just for a variety of devices, but for a variety of content.

Google will pull the rug out from under us (again)

Changing its algorithm on a Friday night seems to be something the team at Mountainview do whenever they think they're the only ones working the weekend. Many a web designer has arrived at his/her desk on Monday morning to discover reports of clients' sites, previously at #1 on Google, languishing on page 8357 of 8358. It's a wonder Google have yet to name an update 'Hyena'.

There's no reason to think that 2014 will be any different to 2013 or 2012 on this front.

Survival tip: Google continue to advise the same thing: Write good original content aimed at humans not bots. If you've dodged a bullet so far, don't think you'll continue to be lucky. Now is the time to ensure your SEO is entirely white hat. The big news this year is local SEO, so focus your content on that front.

SVG will (finally) take off

I've been predicting that SVG will take off for years, and I'm consistently proved wrong. But, 2014 will be the year of SVG, all down to our love of icons.

In the last 12 months the Web has become increasingly besieged by icons. Where once text reigned, we now have icons. Even the helpful little 'menu' to indicate navigation on mobile screens has been replaced by an obscure hamburger icon that takes up exactly the same amount of space and is less transparent.

Yes, it's possible to use icon fonts, but why would you, when a small amount of code delivers the same results without the need to load a bulky icon font file?

SVG also solves the responsive image issue; it's true that the images suited to a vector format are more limited than bitmap, but the popularity of flat design and the fashion for simple block-color illustrations creates the perfect environment for SVG to establish itself and develop in 2014.

Survival tip: Try exporting some SVG files from a drawing application and then take a look at the code. It's great that there are image apps that will create SVG for you, but a real master understands his/her tools; learn to hand-code SVG and you'll be reaping the benefits throughout 2014 and well into the future.

(courtesy: www.webdesignerdepot.com)