5 Important Trends in Responsive Web Design for 2016

5

by on January 2, 2016

5 important Trends in Responsive Web Design 2016

5 Important Trends in Responsive Web Design for 2016

  •  
  •  
  •  
  •  

5 important Trends in Responsive Web Design 2016

Responsive web design is the art of creating a website that conforms to different devices and allows people to see and interact with websites on phones, tablets, and computers easily. The first variable width browser website was Audi.com in 2001, Cameron Adams created this in 2004 that demonstrates the early stages of responsive design as it started to be a real possibility for more browsers, ‘Responsive web design’ was coined and further pioneered by Ethan Marcotte, in an article in 2010 and subsequent book in 2011.

Responsive web design has come along way in the last 5-6 years, becoming super important to web design and most web designer’s modern process. If you’re a CMO or marketer who’s companies site isn’t responsive yet, welcome to the modern age and get on that. Most of you are aware and are looking to the future though, so here are 5 responsive related web design trends that will be huge in 2016, whether you like it or not.

1. Content first design 

2. Mobile-first design

3. User-oriented everything, more user testing on mobile devices

4. A/B Testing and data specifically for mobile

5. Evolution of Flat Design, but balanced with more clues as to the function of buttons and tools as to be very clear on what something does. 

Let’s get into why these trends will be important and a little about how you might be able to utilize them over this next year.

1. Content First Design

Jeffrey Zeldman once saidContent precedes design. Design in the absence of content is not design, it’s decoration.”  I’ve gotten a lot better at educating my web design clients, and have started educating them that design is best when I have as much of the real content as possible. But I remember years ago I would be attempting to design something with such little content that the design had to change entirely when I got the content. The headlines were way more words than I planned for, the body text was too little or too much and the photos weren’t the same size or laid-out in the same way as my filler content. Designing in the absence of content is decorating – so in 2016, resolve to make design all about the content and nothing more or less.

“Designing in the absence of content is decorating.” Click To Tweet

‘Content first design’ is the commitment to education of clients that working with them to get the content to be the best it can be, whether with a copywriter or photographer or both simultaneously and as a high priority while designing. It’s an understanding that designer’s don’t just make things pretty, we’re trying to share the content first and foremost and present it in the most compelling and visually striking way to catch people’s attention. If the design is standing out, separate from the content – it may not actually be a great thing after all – unless of course the website is selling design. But not every website is an agency site – design accordingly.

“Not every website is an agency site - design accordingly.” Click To Tweet

Content first design also is a commitment to advise a client on what kind of content they should have on their site. Don’t take a passive role and cringe when they include horrible pictures of their mom and cat- be the change you want to see on the internet and play the broader – marketing advisor role in the process. You’re clients – and your portfolio – will thank you.

2. Mobile-first design

Mobile traffic is up to 47.9% ! My God. Gone are the days of tacking on mobile design at the end of a process, now it needs to directly in the center of the process – and mobile-first design is a great way to prioritize it. This needs little explanation, but I will share some of the benefits from my perspective;

  • Mobile-first design helps you simplify things down to the most crucial elements first and foremost
  • If you subtract things on the mobile design, do they really need to be added on desktop?
  • You don’t end up with functions (like really involved hover functionality) that possibly shouldn’t be used anyways because it won’t work on mobile and will need some backup functionality.

Here’s Google’s traffic on mobile from this past year:

Google Engagement on mobile -responsive design in 2016

3. User-oriented everything, More user testing on mobile devices

Where were you when it became hip to say ‘User Experience’ every 10 minutes in a client meeting? Well I still feel like 2016 will be a climax to the real meat and potatoes of the thinking behind User Testing becoming even more popular. You can get started with User Testing by reading a couple amazing books on the subject; “Don’t Make Me Think,” “Lean UX,” “Rocket Surgery Made Easy,” and “The Design of Everyday Things,” or you can just go down to your local coffee shop, buy a couple gift cards and ask a couple people to try out the website you’re designing (on a prototyping tool or a basic coded version.)

The books will help provide the context for this practice, but the idea is that User Testing is simple, and doesn’t need to be made that complicated. Here is a basic script, and remember that you’re always testing the site or application and not the person who’s trying it out. If they don’t get something or you see them struggling, take note. It’s that empathy that’s becoming so important in web design and it’s the same for responsive web design – you need to be aware of how people are looking at the site on their phones. A way to test online remotely is UserTesting.com. If you’re already using user-testing to amp up your design process, congrats you’re ahead of the pack – but are you testing enough on mobile devices?

Sometimes super simple things that would otherwise go un-noticed get uncovered and become super obvious with just some really basic mobile user testing. A really comprehensive responsive web design process in 2016 should be enhanced by regular mobile user testing.

4. A/B Testing and data specifically for mobile

Designers sometimes seem to think they don’t need to be involved in the ‘marketer’s tools.’ Things like Unbounce, Optimizely, LeadPages, and Inspectlet. But just like User Testing, ways to see what the real patterns are for people using the site are extremely important for making measurable changes. With a combination of Analytics, User Testing, and A/B Testing, designer’s can not only make better, higher converting websites, but they can speak more authoritatively on what works and what doesn’t.

It’s important to note, that A/B testing requires good guesses (and a solid amount of traffic) and so you should research what is likely to move the needle as far as getting more contact form submissions, selling more product or sustaining traffic and any other types of conversion you’ve set up as a key performance indicator on the site. Designer’s who implement landing pages and get data back from those efforts and who A/B test their and other’s designs with services like Optimizely are 10x more likely to be able to say with any degree of certainty what design patterns do and don’t work out in the wild. Test your assumptions. And watch your designs get more and more effective.

Mobile-centric A/B testing simply means you filter your tests for mobile traffic – I’ve found that sometimes a test that hasn’t made a huge splash for desktop has upward of 50% more conversions on phones! Can you say moving the buy now button up further? When things get stacked on top of each other with mobile design sometimes crucial things get pushed down – A/B testing can be another way to stay aware of things like this. From there I’ve found it helpful to simply make the change with media-queries or Javascript for mobile only rather than shuffle things around for all devices, when the real benefit is mainly on phones. If you haven’t been, A/B test in 2016, it’s fun!

I love the tool Optimizely, and you can get started with a basic package for free. (Not an ad, Optimizely is just a really cool service that you don’t have to be super-programmer to implement.)

 

Google Material Design - Patterns in Responsive Design, Trends for 2016

 

5. Evolution of Flat Design, but balanced with more clues as to the function of buttons and tools as to be very clear on what something does.

2015 was perhaps the year where everyone and their mom might have some idea what flat design was, but 2016 will be a little more sophisticated. I predict that many designers will start using a little bit more ‘affordance’,’skeuomorphism’ or visual similarity to physical objects to clue people in as their function, but without sacrificing the progression we’ve made with flat design and the simplification and white space that’s has been ushered in with the rise of flat design. A middle ground so to speak.

I see this the forward thinking iconography I’m seeing on Dribbble, Pinterest and Behance, and the rise of material design from Google that mixes the two together to create a common visual language that is becoming pervasive for both responsive design and mobile apps. This video has some great examples of the types of subtle skeuomorphic – but mostly flat design style I’m talking about.

 

Bonus – Design Trends of 2016 Infographic from Coastal Creative

Design Trends 2016

 

So cheers, and here’s to this being the last of my predictions for 2016 post, and to actually getting busy creating trendsetting websites! I hope I have indeed shared a solid nugget or two about where responsive web design is headed in 2016, and thank you for reading!

 


  •  
  •  
  •  
  •  
Free Marketing Audiobook

Leave a Reply

2 Comments on "5 Important Trends in Responsive Web Design for 2016"

Notify of
avatar
Sort by:   newest | oldest | most voted
Cody
Guest

Good stuff!

Tim Brown
Guest

Thanks Cody 🙂

Ready to get started?

Get a free consultation now