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.

Adobe release major Creative Cloud update

Today, Adobe have both announced and shipped, new versions of its flagship Creative Cloud applications. In this update you’ll find dozens of new features.

Last year thousands of designers dropped Creative Suite/Cloud in search of cheaper, more targetted tools, and many have found real gems amongst the various app stores — Bohemian coding’s Sketch is well thought of, and there is a lot of industry anticipation for Macaw. However the low entry cost of these products is also their achille’s heel; dropping $25 on an app does not commit you to it in the long term, and smaller software houses traditionally struggle to retain a loyal userbase.

Adobe by comparison are continuing to innovate within their established product range, and as a result professionals are continuing to take up Creative Cloud subscriptions; there are currently more than 1.4 million CC members.

Adobe lay claim to 50 separate feature updates in 2013 and today’s is the fourth majorupdate to Creative Cloud since the switch from the Creative Suite licensing model. Skeptics should note that Adobe have kept their word by continually driving innovation in the products, as well as the frequent bug fixes and performance enhancements that arrive more regularly for subscribers.

In addition to application evolution Adobe continue to develop services: last year there were 180 billion pages views for Typekit, and that’s set to increase in 2014; today’s update includes tying Illustrator and InDesign into Typekit, allowing you to add Typekit fonts to print projects and PDFs — a significant boon for companies trying to maintain consistent branding over multiple media formats.

By far the biggest news relates to the central application in Adobe’s armoury, Photoshop. Photoshop is one of the most widely recognized — or at least, named-checked — applications in the world. Despite the many inroads made by budget alternatives, and superb browser-based applications like Typecast, the majority of websites still start life in a PSD.

There are three large Photoshop innovations that are being introduced with this CC update. The first, and arguably the most important for web designers are the new linked Smart Objects. Essentially, linked Smart Objects are assets created in other Creative Cloud applications, that are linked in your files — design a logo in Illustrator, link it to your site design in Photoshop, then anytime you make a change in Illustrator the change is immediately reflected in Photoshop. It’s not an essential piece of kit, but it sure is nice, and I can see it becoming one of those little techniques that we quickly come to rely on.

Additionally, Photoshop CC now has a Perspective Warp tool. This staggering piece of technology allows you to completely change the perspective of elements in an image by simply drawing a 3D box around an object and changing the perspective of the box. The bit in Blade Runner, when Deckard uses a computer to zoom into a photo, panning around corners and zooming into a part of the image that the camera seemingly couldn’t have captured; he was probably using Photoshop’s Perspective Warp.

The big news — certainly as far as Adobe are concerned — is that Photoshop CC now allows you to print in 3D. Using the existing 3D features in Photoshop you can now create 3D designs and print straight to a 3D printer, alternately if you don’t have one, send them to shapeways.com for printing. Adobe are pitching this feature as a finishing tool for 3D models, and it’s not designed to compete with full-blown 3D modelling tools like Maya. The expectation is that 3D modellers will work in their traditional tools, then import into Photoshop to clean up their meshes. It seems like an exciting development for industrial designers, but I can’t see too many screen designers taking much interest.

Given Photoshop’s size, it seems questionable to pack yet another primary use into the tool. 3D print finishing is substantial enough a job to warrant a separate application, especially as CC subscriptions would provide free access to the new application. When quizzed on this, Andy Lauta from Adobe explained that because so many creatives use Photoshop already, it was the natural home for the new functionality — which I took to mean Adobe were concerned that an entirely new application would have limited take-up.

One lesser feature, but one certain to be welcomed by everyone, is that Photoshop is now powered by the next generation Mercury Graphics Engine, giving substantially more performance whether you’re printing in 3D, or cropping a bitmap.

Adobe have also reset the 30 day trials for Creative Cloud, so if you’re tempted to try these features out, you can download the applications and start playing today.

Deal of the week: 21 premium, responsive, one-page HTML5 templates

One of the most appealing kinds of sites, for all types of businesses is the one-page parallax scroll. There’s a spacial delight in simply scrolling through content, and of course, on a mobile device, swiping through content is more appealing than struggling to tap a minute link.

If you’re looking to get a professional, responsive, one-page site online in the shortest space of time possible, then look no further than this tremendous deal from our sister-site, MightyDeals.com:

You can get not 1, but 21, amazing parallax templates for just $19. That’s less than $0.91 per template!

Designed by Flashmint, these 21 one-page responsive templates are fast loading, work well across all devices, and all feature simple intuitive navigation. Built in HTML and CSS (note that they’re not WordPress themes) they are simple to edit and deploy. Each template features parallax scrolling — one of the Web’s most popular fashions — which is deployed on a huge range of sites from doctor’s offices to multinational corporate sites. But that’s not all, many of the templates also feature other popular trends, like infinite scrolling, CSS3 effects, image carousels and large-scale type.

Just take a look at the templates included in this superb deal:

This superb set of one-page parallax HTML and CSS templates usually retails at $567, but for a limited time, you can get the lot for just $19, that’s a staggering 97% off! Head over to MightyDeals.com right now to grab this amazing deal whilst it lasts.

3 reasons we should stop using navigation bars

If you’re anything like me, you spend a lot of time studying other designers’ work. I like to look at projects for the experience and the interactions created for the users.

Obviously, as more techniques come about, the changes in web design take place and newer, better things arrive. We’ve experienced the life of the splash page, the introduction header, parallax scrolling and so many other things that have affected the web experience. However, those things were mainly aesthetic and didn’t really change the way we create websites.

Lately, I’ve been thumbing through some websites and have seen a new change. One I think I like, but am not sure. A change that I could see really reinventing the way we even think about designing websites. It would cause us to be smarter and think more intuitively about our audience. And that couldn’t be a bad thing. This technique is something that’s not unique to the world of responsive and mobile design. However, for some tablets and desktops, it’s a new variety of navigation.

We aren’t getting rid of menus all together, we are just hiding them until they are called for. Could this be something that takes off?

How important are navigation bars?

The navigation bar was born right along with the Internet. Designers believe that placing all the menu content in clear view on a page just makes sense. And it’s hard to argue. If you come to a website for the first time, you want to know what’s available and where to go. It seems to have cemented itself as an important part of web design. Wireframing toolkits and programs include navigation bars, just like they include dummy text and buttons.

Navigation bars are presented in many different ways. Lately, sticky navbars have become very popular. Unlike the proposed effort, this nav bar is always present on the page. However, sticky bars are usually used in sites with heavy parallax scrolling (another huge trend). This can end up being a bit distracting, especially when it takes up a horizontal area at the top of a page.

It’s hard to argue the effectiveness of navigation bars. As a matter of fact, I won’t. They are effective and are the norm in web design right now. But, is there a better way to present our menus that could possibly change the entire way we think about web design? I believe so, and this way to change web design is to get rid of the navigation bar all together. But why?

3 reasons to stop using navigation bars

1. Fewer distractions

This is something I’ve touched on previously, but with the absence of navigation bars, there’s obviously fewer distractions. Navigation bars have become a place to store all the content you can’t fit on your website. On top of that, we put every single page we’ve imagined and come up with on the navigation bar. Some are junky and cluttered. Some have telephone numbers and search boxes. Some are just big and only have three small links on them. Some have drop-down menus that span the entire height of a website. What’s the point?

In the past few years we’ve come to notice that web design was becoming a little too cluttered, thus the resurgence of the ever-popular minimalist design. But instead of really fixing the problem of clutter, we’ve just stripped our web designs of the exciting stuff. In addition, the focus on the menu and the sitemap have really cost us the most important parts of the website. Immediately when we start designing, we are taught to think of the sitemap and how everything is going to connect. Imagine if we spent that time thinking about what the audience wants and how they’re going to use it. 

2. Customer Focus

At one point, I posed the question of whether or not flat design has made our web sites too simple. I’ve also asked other community members if they think minimalism is killing our creativity. I’ll spare you the lengthy read and summarize by saying this: we’ve traded in spectacular design for subtle web experiences. What do I mean? We’d rather have a simple blog with a white background, as long as the posts auto-scroll. We’d rather use a monotone or two-tone color scheme and make the highlight color something totally expected. Because we think that’s cool.

Now, I must admit that we must be weary of over-designing. It’s something I don’t recommend at all. But it seems like we just stopped designing all together. And the things we find to be good design are really only things other designers can notice and enjoy. It took me about 5 years to learn the lesson that what a designer may think will look good isn’t always what the customer thinks looks good.

In order to be successful with this, we have to focus on the customer/audience like never before. We have to try to figure out exactly what they want to see and how they want to see it. Navigation bars have kind of been like a guided process before, but since they’re the norm we’re just slapping it on a site as one-size-fits-all. The focus on the customer creates a greater connection with them and lends itself to experience driven designs like never seen before.

3. Experience driven designs

Let’s build a bridge. This bridge connects what we want them to see along with how we want them to see it. The length of the bridge varies depending on how far away the two are from each other, but there must be a bridge nonetheless. We obviously want to have the smoothest bridge possible so the transfer of information can be as smooth as possible. By ridding ourselves of the navigation bar, we’ve created a platform to have a fully immersive brand design that should cater directly to the customer.

This allows us to now create experiences. Yes, we’ll probably have to get away from the world of strict minimalism. However, this gets web design back to what it should be; a space on the web dedicated to the relationship between a brand and its customer. These experiences should make visitors more away of the brand while also creating an interesting way to do so. Rather than just clicking a link and being taken to a whole new page, now there’s an opportunity to really create something. There’s an opportunity to take all the cool new advances in HTML and CSS3 (aside from just scrolling) and create something magical and mindblowing.

Conclusion

Without that pesky bar at the top of our pages, it really frees up a whole new world of thought. I’m sure you’re thinking, well if you move and it’s hidden, then there’s really no difference. But we are essentially taking away the very thing that moves viewers from page to page. How does one design a website like that? How does one manoeuver around a website like that? It seems impossible and as if removing a bar couldn’t have such a large impact, but I beg to differ. You can check any scrolling site that makes no large use of navigation.

Is this the next thing in the world of web design? Can you imagine going to a website that has no visible menu, but knowing where you want to go? It seems like a mighty interesting challenge; one many will take. Of course, the first problem would be for sites that are heavy on pages: Does your flyout menu contain tons of links or do you just learn to condense all the content? No navigation bars could really change the way of web design, but only the future can tell if this will be a new trend.

Giveaway: Win 1 of 10 professional WordPress themes from TemplateMonster

A great source for high-quality WordPress themes is TemplateMonster, so we’re absolutely stoked to be able to announce this awesome giveaway.

What better way to start 2014 than with a brand new look courtesy of TemplateMonster?

10 lucky winners will each be able to choose 1 theme, from TemplateMonster’s collection of over 2000 themes. With that many options, you know you’ll find something to fit the bill.

The choice of which template to select is entirely down to you (if you’re one of the lucky winners) but we recommend that you choose one of the 500+ themes based on TemplateMonster’s popular CherryFramework.

The CherryFramework is built on the hugely successful Bootstrap framework, making it fully responsive, so you’ll look great no matter what device your customers are using. Installation of the themes is incredibly simple, and once you’ve got them installed there are over 50 different shortcodes to speed up your productivity. The CherryFramework also features flexible post formats.

The CherryFramework themes even support the WordPress Multilingual Plugin, making them an ideal choice for anyone running a business with an international clientele.

Most importantly, TemplateMonster have built the CherryFramework on a parent > child basis, meaning that they can update the framework with every new version of WordPress without overwriting any changes you’ve made to the child theme.

Just take a look at a small sample of some of the 2000+ WordPress themes you could be choosing from: