7 web design trends you’ll actually see this year (and how to survive them)

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.

 

1) 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.

 

2) 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.

 

3) 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).

 

4) 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.

 

5) 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.

 

6) 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.

 

7) 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.

What trends do you see developing in 2014? Do you think something revolutionary will happen? Let us know your thoughts in the comments.

Featured image/thumbnail, prediction image via Shutterstock.

  • jeanpaulstander2

    Great article, had a good laugh….Hyena lol

  • manuel stoppa

    Pretty apocalyptic view!

    I hope that no one of these first 6 points will never happen. For the seventh i’ve no considerations.

    • http://www.webdesignerdepot.com/ Benjie — WebdesignerDepot

      I don’t think anything here is negative. Change happens, but usually it’s neither good or bad, just different.

      • manuel stoppa

        I can understand that change means evolution, but the return of the Flash medias and a JavaScript without jQuery is freaky. Flash is something that all web developers nightmares. And jquery gave an elegant and a clear, well-documented approach to js.

      • http://www.webdesignerdepot.com/ Benjie — WebdesignerDepot

        I’m certainly not suggesting that there’ll be a return to Flash (I hope not). Just a return to things characteristic of Flash sites from a few years ago, such as large images for backgrounds and more immersive experiences. This is already happening, usually with the help of jQuery.

        Equally, jQuery is great, for what it’s designed for. But it’s not as fast as JavaScript and even gzipped, it adds 19kb to a site — that’s fine if you’re using it throughout a site, but vanilla JavaScript, CSS transitions and even some HTML5 is more efficient and produces better results.

      • Luca Rosaldi

        I don’t think Benjie is referring to “Flash” when he talks about “Rich Media”. Rich Media may also refer to HTML video, audio or games.

        In particular, in the last year there’s been a rise of full video backgrounds in home pages. That’s an example of HTML5 rich media.

        Learning vanilla Javascript is not freaky. On the contrary, I think it’s a fundamental skill for a good front end developer, and one of my purposes for 2014. The one and only thing that scares me about vanilla JS is IE compatibility, expecially IE8, which here in Italy is still too widespread to ignore.

        Overall, I think the previsions pointed in this article are pretty much possible, if not desirable. :)

  • http://www.fadamakis.com/ Fotis Adamakis

    I totally disagree with all of the points. Commenting just to come back at the end of the year and review this.

    • http://www.webdesignerdepot.com/ Benjie — WebdesignerDepot

      You can review it now! The point is that all of these things are already happening.

  • http://www.sarahevansdesign.co.uk/ Sarah Evans

    Really nice breakdown.
    I have seen a decline in using JQuery for my own work. I use CSS3 instead where I can. I also feel there has been a slight shift from creating ‘fancy’ websites, going back to simplicity.

    I really hope you’re right about SVGs taking off this year. Well overdue. They are awesome! The pain point for me is implementing a fallback for older IEs and old Android versions. I don’t think we’ll be able to ignore doing so for a few more years.

    • Lucidz

      Using CSS3 instead of Jquery is relative to your target platform (IE versions and all that) and is a natural progression of development. Why write a cumbersome script with mediaqueries can do so much. My complaint about jquery is not the ease with which it can be developed or the download time for the script (lol), but more so that it encourages poor dom search manipulation. IE: People get lazy about specificity, and rely on jquery to just “find the thing”. This causes real ramifications on dom manipulation speed. Case in point, I have an IPAD1 i test things on, and about 50% of the sites have so much jquery, written so poorly, that sites run terribly, and in some cases, cause safari to crash!

  • sbruchmann

    :hover is not a pseudo-element, it’s a pseudo-class.

    • http://www.webdesignerdepot.com/ Benjie — WebdesignerDepot

      You’re right, thanks for pointing that out :)

    • JesseWallace

      And it’s also not going anywhere. Ever. It’s a standard adopted link state, just like :visited. Even when/if mobile ever reaches 90/10 adoption, it will not die.

    • Lucidz

      One would think, that if a site is truly responsive, delivering the best, targeted yet flexible experience to mobile and computer users, then hover has value add for the computer users. Why would it go away?

  • ArtOfFredskov

    Little saddened about the :hover, but it does seem as a pretty legit statement.

    • bgbs

      hover is not going anywhere anytime soon. Hover still provides a useful user-experience on desktop computers. It’s the touch screens that have no need for it. As touchscreens become more advanced, I’m sure down the road in 4-5 years will see a touch screen which can sense finger hover. So don’t abandon hover yet.

      • ArtOfFredskov

        Personally i won’t abandon it ever anyway, but i’d be sad to see if the majority of pages neglected it if it started trending. Bit like the flat UI is trending all over – sad story if you ask me – makes every web page look the same.

      • Nicolai

        Touch screen with hover…? How do you interact on a touch-device? You do not drag your finger around, you see what you want to interact with, and then you tap it…

      • Jesse1989pp

        “you see what you want to interact with”…. Pinpoint eye-tracking hovers, boom :’)

      • Andy Astrand

        A variety of smartphones (android/samsung I think) already support a touchscreen by proximity, it knows where your finger is above the screen. Not sure whether they are using that to trigger hover but technically it’s all possible now.

  • Gijs van Dam

    Great article, I agree with you on most points, although I find the header of #r misleading. You could just as easily say that content is now even more important, now that companies understand that they should regularly improve and add upon their content.

    With regards to jquery being big (it is), there seems to be some interesting development on minifying jquery even more by removing dead code from the library using Google Closure compiler. Although this seems to be still in beta.

  • Heywood

    LOL! At first I thought this article was serious.

  • http://Darklit.net/ George

    Wow. Really diverse comment pool here.

    I pretty much agree with everything in the article, esp point 5 on content. Terabytes of “content” are uploaded to fast ocean of the Internet daily. The last thing we need is more of it.

    People should really focus on the point of their site. If its a news site – then yeah, people are there for content. If its a portfolio, people want to see your work. Form should follow function. Not much point in adding your voice to the roar of experts voicing their opinion for most of us.

  • Michael Meininger

    SVG has been around for 20+ years and accepted by W3C for the last 15 years. So why start now? Even the logo on Google is still png…

    “Content” has already lost a lot of it’s its edge in the past couple years, FRESH content(blogs & social), incentives(downloadables) and other “inbound” tactics are key to maintaining a properly optimized site.

    • Magnús Davíð Magnússon

      The reason to start now is the ubiquity of high PPI screens on mobile devices and the increase in high PPI screens on laptops/tables/desktops. Resolution independent assets are more important now than ever.

  • Peter Pottinger

    So no change form 2013 then?

  • http://piano.detwiler.us Tune

    HA, I very much dislike “website as app” cluttering up my mobile, and worse yet, nagging me when I visit a page in a mobile browser. Thank you, but I prefer a bookmark in a browser on mobile for all but a few sites where an app version truly adds functionality

  • Max Monastyrev

    Fuck flash.

  • Bianca Board

    I agree that we’ll probably see the return of Flash like features. Though I can’t figure out if that’s a good or a bad thing.

  • http://www.testshoot.com/ TestShoot

    *How about how responsive will continue to be a compromise between usability and portability.

  • Stuart

    With regards to point 2. I agree very strongly. There is nothing more annoying than a stack overflow post where someone has a javascript question and all the answers revolve around jQuery. People should learn javascript, not jQuery. It is a helpful library, not a language.

  • Paul

    Yeah boo-hoo @ Flash… let’s not mention the huge wave of heavy scripted websites with Loading scripts and loading time, no, these are way better than Flash. The usual visitor has the exact same bad experience: wait to load images and effects to access the content.

    It’s the same ol problem, people are focused on that last technology to implement even if it breaks everything. Why? Because it’s hip.

    I hope we’ll see a decline of animated effects and parallax crap this year.

    • Kyle Breckenridge

      I don’t think the issue here is the actual effects themselves, but the developers not using progressive enhancement principles. I’m not a proponent of scroll hijacking effects and the like, but I also don’t have a problem with them as long as you build your site to paint something as quickly as possible, then add the “flash” on later.

  • Pablo S.

    I think jQuery is going to leave, but is not for vanilla Javascript. jQuery is leaving because of other more advanced frameworks (MVC) like AngularJS.

  • http://jaf.ar.com/ Jafar

    Pretty good list. A lot better than what some other authors have been touting.

  • stotskii

    7) SVG will (finally) take off

    If you need to export SVG from Photoshop you can use http://zeick.com/

  • Andy Astrand

    Is rich media really going to get easier. Given the amount of time it took to bake the HTML5 we have do we really expect it to get better quickly without getting browser specific extensions that will all clash and we won’t want to use? (speaking as a dev who got depressed rather quickly about how little had actually been done in html5, especially given the time it took)

  • http://www.webdesignerdepot.com/ Walter Apai

    Sorry, we cannot allow reposting of our articles.

  • http://www.webdesignerdepot.com/ Benjie — WebdesignerDepot

    I’m delighted you think so :)

  • Beth

    Interesting to read the comments.. I’ve read some other articles addressing this same topic and yours has given me some things to consider that others have not—especially number 2. I totally agree with points 3 and 5. Site growth and usability should be number one priorities and considered during the planning and design stages. For some, mobile sites make sense, but for others responsive design is more suitable.

    Great article!

  • Arthur Brown Jr.

    Great article. I believe we will see SVGs begin to come into their own this year. I think they will begin to see real growth via the site logo.

  • DG-Legend

    Bahahahahahaha! This is by far the most absurd/ridicoulous/studiply funny comment I’ve seen in a long time. I was littlerly in tears laughing at this for like 5 minutes.

    Please don’t delete it so I can come here and re-read it when I’m having a bad day.

  • Gareth Ferguson

    I don’t understand the sudden hate for jQuery from web hipsters that has appeared recently. As internet speeds increase, surely a 86kb (or less!) download is not that big of a problem? Especially since it is used on a high percentage of sites, chances are that users will already have it cached. As for the performance hit, yeah the stats might show its slower than plain JS when you are measuring it. However in reality the difference between JQuery and regular JS is rarely noticeable if you are doing it right. Maybe people just dont like how popular it is.

    I agree with other points such as :hover and mobile web.

  • Meowrrr

    meowrrr purrr meowrrr purrr

  • João

    nice article, congrats

  • arnoldwender

    “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” LOL good one buddy!

  • Bence

    jQuery is good, it’s not a question, the point here is, if you only need for one effect and only once on the page, it’s easier and better in term of pageload to write it in javascript without any library.

  • lauralouise90

    Google loves to keep everyone on their toes – just when you think you know what you’re doing they change the game again! I don’t think that content will disappear – I believe that’ll always remain important both for design & SEO. Laura @ Ricemedia Web Design

  • lukeatfindgreydotcom

    Wow an article about trends that is worth reading. You are spot on with everything! Great job on this one.

  • http://ManCaveZen.com/ Scott Kelley

    I agree with everything but #5:content. Content will increasingly be king as long as google reigns supreme. Those who don’t heed the warning will be the ones who will continually fall prey to #6, as they have for years. Even if you don’t consider google in your calculations for some reason, content is the reason for social sharing and for virality. If you don’t have google, don’t have social media, and don’t have viral sharing outside of those venues, you’re dead in the water.