The Top 8 Responsive Web Design Trends That Defined 2015

It is a fact that the only thing that is constant is change, this being truer when it comes to the Internet than just about anything else.

Mobile Design Trends in 2015

2015 was the year in which the mobile web really took off, mobile devices starting to overtake desktop PC’s when it came to time accessing the Internet. Google turned the screw further by making the declaration that sites that did not work well on the smaller screens these mobile platforms used would be penalised when it came to being included in their Search Listings.

Responsive Web Design

The stage was thus set for a huge change to hit the Net, businesses having to come to terms with the fact that they just had to ensure that their sites not only worked on Smart Phones and Tablets, but worked well too. The issue was that there was (and still is) many ways of making a website ‘fit’ onto a Smart Phone’s screen.

The article that we came across here shows Eight of the design trends that have been prevalent in 2015.

The whole debate is an interesting one and it is probably correct to say that there is no one correct answer, no one size fits all, each site’s needs having to be considered on its own merits.

There is also the matter of whether you need to have two different sites entirely, not one that fits both needs. There is a lot to be said for this in that you can then design a site with a limited screen size range in mind and don’t have to ensure that the site looks good on screens ranging from 3 inches wide to 20 inches (or more) wide…

Then there is the matter that people (perhaps) need to receive a different message when viewing on a smaller screen. This might be just because the screen is smaller and therefore the message has to be delivered in another quicker, more precise, way, or it could be because people take in information in a different way when they are using mobile devices, simply because they are using a different ‘mind set’ at the time.

All of this is quite thought provoking don’t you think?

Anyway, please do read the full article on Responsive Web Design in 2015.

8 responsive web design trends that defined 2015

The article that introduced responsive web design to the world was published by Ethan Marcotte just over five years ago.

In the short timespan since, responsive web design has gone from an interesting new idea to the industry-wide accepted approach to multi-device design. As we look to 2016, we can see that the maturation of this approach brings with it a number of best practices as well as some exciting trends.

Let’s take a look back at successful trends of the year with an eye towards the future.

1. Captivating storytelling

Mankind has always used stories to convey ideas and share information. Stories activate parts of your brain that simple facts and figures do not. On websites, storytelling creates more engaging and memorable website content.

This storytelling approach has been embraced by sites like Medium and by many web writers who are now using stories to better convey important details, information, and compelling data.

When using storytelling in your responsive website, some basic tips to follow include:

Hook readers quickly  and make sure that you have a strong opening that falls above the fold on all viewports so that readers see it immediately

Ensure line lengths for your story are optimal for both large and small screens. Lines that are too long are hard to follow, while line that are too short break the flow of normal reading. Strive for a range between six to 75 characters per line and adjust font sizes as needed to achieve the best results.
Use visuals where appropriate to accentuate the story, but be mindful of file sizes and ensure quick downloads on all devices

Make it easy for readers to share the story with others. Consider placing sharing functionality at both the top and bottom of the content so that readers do not need to scroll to do use these features. This is especially helpful on small screen layouts that require substantial scrolling. Also make sure that these buttons can be easily used on touch screens.

2. Less is more

Many SEO and website experts have long suggested that “bigger is better.”

Their argument is that a site with lots of pages has the best chance to rank for a wide variety of key terms. The problem with creating incredibly dense websites is that they can be confusing for people to use and they can be difficult to keep updated. Outdated pages and content are often left neglected, creating sites that are bloated and no longer relevant.

When you think about loading the content on smaller devices, you can imagine the usability nightmare that ensues.

Studio Meta

Many websites have begun to take the opposite approach to this “bigger is better” recommendation. Smaller sites are hyper-focused on specific topics, eliminating any pages or content that aren’t critical to the user experience.

This “less is more” trend can be seen in the popularity of single-page websites, including parallax sites. You can also see it in sites that have aggressively simplified their sitemaps.

3. Patterns everywhere

When an approach becomes popular and widely used, like responsive web design has, patterns will often begin to emerge.

As explained in Web Design Trends 2015 & 2016 by UXPin:

A web design pattern, aka UI design pattern, is a reusable solution to a commonly occurring problem you might encounter every day.

The value in using a good web design pattern to solve a problem is that users will be familiar and comfortable with your solution. The downside to using established patterns is that if everyone uses the same approach, websites begin to look very much the same and design uniqueness is lost. You must weigh the benefit of using an established pattern against the downside of not being able to design something new and unique.

One common responsive pattern, for example,  is off-canvas navigation.

When evaluating design patterns, always ask yourself these questions:

What problem am I trying to solve?
How have others solved this same problem?
Is there pattern to those solutions or an established best practice?
Is this pattern overused?
What barriers, if any, exist to using this pattern on my project?
To learn more about responsive web design patterns, check out some common layout patterns as outlined by Google and a useful responsive library by Brad Frost.

4. Card layouts

One of the most popular design trends today is the “card layout.” Popularized by Pinterest, the card layout has become a widely used approach to presenting easily scannable chunks of content on a website.

Card layouts are very attractive when considering the UX for responsive websites. Because these cards effectively break content down into smaller blocks, those blocks can then be more easily rearranged for different screen sizes and layout needs.

Cards can help improve information distribution, which is why sites like Twitter and Google have followed Pinterest’s lead with this UI pattern and why more and more sites are sure to apply this approach for 2016 and beyond.

5. Hidden menus

Another UI pattern example that has been popular for many years is the hidden menu. From drop-down and fly-out menus that are revealed on hover to the infamous “hamburger icon” to navigation drawers, hidden menus are used to save space while still making those menu option available to a site’s visitors.

While the benefit of saving space on a responsive design is undeniable, there have been a number of people who have argued against the practice of hidden menus. Menus that are hidden to save space are less likely to be accessed than those that are consistently shown.

One experiment actually showed that these hidden navigation items cut engagement time in half.

The challenges of responsive navigation are something that UI designers continue to grapple with. Despite the possible downside to hidden menus, expect this design pattern to remain a popular choice for responsive navigation.

6. Big hero images versus no hero images

The hero image trend is quite interesting.

Many sites use gigantic hero images that span the entire width and height of a screen. Other sites have taken the exact opposite approach to hero images, eschewing their use altogether and preferring only bold colors and rich typography in their place.

These two competing trends each offer their own benefits and drawbacks. Using rich images can add visual flair to a design, but giant images mean additional time for those images and the site to load. Removing large hero images may decrease the visual richness of a design, but the loss of those images speeds up load time.

Additionally, according to Google/YouTube user experience research, removing these images can actually help create a more appealing site. In their study, researchers found that reducing the visual complexity of a page, while also increasing its prototypically, could actually increase its appeal.

In summary:

Big hero images

Visually rich and appealing
Slower loading times
No hero images

Not as visually rich
Faster loading time
Less complexity can increase overall appeal
Both of these approaches to hero images are valid and each will likely remain popular in 2016.

7. Rethinking advertising

Online ads and responsive websites have always experienced a challenging relationship.

For years, online ads were sold based on size and locations. This poses a problem with responsive sites since the size and placement of various UI elements will change across different screen sizes. This makes fixed advertising sizes a poor fit in a responsive environment.

Changes in privacy concerns and how web browsers handle advertising are also sending shockwaves through this long-time staple of the Web.

Apple’s iOS9 added substantial fuel to this fire with their announcement that they will now allow third party developers to create ad blocking software for the Mobile Safari browser. This change has the potential to fundamentally change the way the Web works.

In the very near future, all sites – responsive or not, will need to rethink how advertising is used.

8. Improved workflow

Not all trends can be seen visually on the final website. Some trends happen behind the scenes as that site is being designed and developed. An improved responsive workflow is one of those trends.

One important change many designers are using is responsive prototyping.

Instead of static design comps that seek to show different possible breakpoints in a potential design, responsive prototyping tools (like UXPin) create more authentic experiences that can be deploy quickly and easily.

These prototypes will better convey interactions that will allow you to get more informed feedback and to make better overall UI design decisions.