Web Design Trends for 2013 and Beyond

By Mark Gerardot | Jan 22, 2013

Observations and advice for non-designers and non-developers to leverage the best of growing design trends for your next website or digital marketing campaign.

It’s an incredible time for web design. Simply put, HTML 5 and CSS 3 (will) allow us to do things that were never possible before. But that’s the last time I’ll use technical jargon in this article. When I was asked by my colleagues to write an update to the wildly popular blog post Web Design Trends 2012, I was determined to not “geek out” and indulge my fellow web designers and developers with technical speak. Instead I wanted to share my own research and observations about the evolution of web design in 2013 with business decision makers and marketing professionals.

Seven Web Design Trends for 2013

By no means is this an exhaustive list of web design trends, so expect a follow up post in the weeks to come. SUBSCRIBE TO THE MERGE BLOG. »

#1. Think Mobile First

Mobile Web Design FirstAs recently as early 2012, I can safely say that for most web designers, marketing managers and even some digital agencies, mobile-optimized websites took a back seat to their desktop counterparts. Does this sound familiar?

“Let’s do the main website first and if we have any time or budget left over, we’ll do the mobile site”.

If you’ve browsed the internet on your smart phone much, I don’t need to tell you how the above scenario played out in most cases. The good news is that if your website is woefully unprepared to be truly mobile device friendly, you’re not alone. But don’t cut yourself a break just yet. The time to do something and change your thinking is now.

According to Bloomberg, there were some 1 billion smart phones in use in 2012 and that number is expected to double by 2015. So what does than mean for your website? Only Everything.

Mobile devices don’t outnumber desktop computers (yet), but that day is coming. And while today the percentage of mobile users depends on your target audience demographics and user habits, mostly likely 12% – 15% of your current website traffic comes from mobile devices (including tablet devices) — and without a doubt that number will grow exponentially in 2013.

“But our website works on mobile phones”
Most mobile device web browsers will do an apt job of rendering almost any website. So your website may be “mobile friendly”. But a truly “mobile-optimized” website is designed for both the limitations and advantages of a mobile device. If your visitors have to zoom in and out to read your content, it’s not “mobile-optimized”. And the vast majority of your customers and prospects probably feel inconvenienced, if not completely annoyed. Yikes.

Responsive vs Adaptive Design
If you haven’t heard the terms “responsive design” or “adaptive design”, you probably will soon. Responsive design takes the elements of your website (photos, navigation, text) and scales them or repositions them to optimally fit the screen of the device. The benefit to responsive design is that you only need one, very flexible version of your website optimized for any browser device. Cool.

Adaptive web design uses device detection to redirect users to a mobile version of a website. Have you ever noticed that the URL of the site you’re visiting on your smart phone starts with “m.” and then then the normal website address? That’s adaptive design at work. You’ve been directed to a different “mobile” version of the website, specifically designed for viewing on your smart phone. The biggest advantage of using adaptive design is you can limit content to only things your customers might actually do on their phone.

If you’re out shopping for a new car, for instance, you’re going to need different content and tools on your smart phone than if you’re curled up on the couch with your laptop or at your desk at work.

The Takeaway: You can’t afford to underserve 12% or even 10% of your website visitors and potential customers now — let alone 30% – 50% in the near future. Start planning and designing for mobile visitors first. Screen real estate and variables among different browsers do present some design challenges, but you will see the rewards across all mediums and platforms.

Examples of Great Mobile Websites and Mobile Apps:

What are some examples of your favorite mobile websites? Send us links.»

Web Design: Scrolling is the New Fold

#2. Long Live the Scroll

Once upon a time, it was believed that your website content had to fit neatly in an 800 x 640 box, constrained by the top and bottom of your ginormous CRT desktop monitor. Scroll bars have been around since the dawn of the Web, but heaven forbid your visitors should have to use them. It’s been a hotly debated topic between designers and user experience experts for years, but keeping your content “above the fold” is old school thinking. It’s 2013. People scroll.

My own theory is that tablets and mobile devices in general have changed the way we use the web. With the mere flip of a finger, browsing through content is easier, faster and more enjoyable than ardously clicking from page to page. I’m not advocating for one page websites (they’re out there), but if your goal is to keep your visitor engaged and not waiting for the next page of content to load, consider consolidating your website into longer, more content-rich pages.

That said, as we’re all fighting for the short attention spans of evermore distracted users, nothing is less engaging than a long, dry page of text. Imagery and strategic “calls to action” (buttons and links to other content) go a long way toward creating an enjoyable user experience.

Long Scroll Examples:
James Free Diamond Guide
Chevy Volt

Scrolling Infinitely and Beyond
The ultimate example of keeping your visitors engaged with long, scrollable pages is “infinite scrolling”. Sites like Pinterest, AirBnB, and even our very own Merge blog use javascript to cue up and load content beyond (in most cases below) what your browser is showing you. Just when you think you’ve reached the bottom of the page, more content magically appears. No wonder Pinterest is so addictive to most people.

Infinite Scrolling Examples
Merge Blog
2 Days In Seattle
Air BnB

Have you seen any other good examples of websites that encourage visitors to scroll ’til their heart’s content? Send us links.»

Narrative Navigation

#3. Narrative Navigation

As far as I can tell the term “Narrative Navigation” doesn’t exist. For lack of a better term, I made it up. It’s how I describe a growing design trend that I think we’ll see a lot more of in 2013. If you need to walk your website visitors step-by-step through a lot of information without overwhelming them, consider presenting the content in a linear storyline.

Narrative navigation allows you (the narrator) to give a presentation to your audience without having to be there. As with most great presentations, the examples below communicate clearly and succinctly with an emphasis on infographics that tell the story. I’ll let the following examples and links speak for themselves.

Narrative Navigation Examples
Tinke by Zensorium
Spokes: Eclectic Pedicab Rides
Survey of the States
Vasona Networks

HTML5 Canvas Animation Example

#4. Ding-Dong. Flash is Dead

This probably isn’t news to you, but Flash websites are a thing of the distant past. The demise of Adobe Flash is many fold, but history will likely credit Steve Jobs for refusing to support Flash on iOS devices (iPad and iPhones). But fear not, fans of web animation, gamification and whiz bang user interactivity. Canvas, a scriptable element of the new HTML5 spec, can render animations using 2D shapes and bitmap images (photos and graphics made up of pixels). SVG (scalable vector graphics) can also be animated by using javascript, but for fear of getting any more technical, I instead encourage you enjoy the examples of HTML 5 canvas animations below.

Be forewarned
Just like Flash, the use of HTML 5 Canvas animations beg the question: “Just because you can, does it mean you should?” As with any special effect, it’s very easy to overuse and abuse Canvas. Also keep in mind that not all browsers support all elements of HTML 5, and even fewer support Canvas. HTML 5 shows great promise for the future of Web design, but I encourage you to focus first and foremost on creating great content that is relevant to the needs of your audience.

Examples of HTML 5 Canvas Animations
Mr. Doob – Clouds
Canvas Photo Example
Analog Clock Example
Sketchout Game

Full Screen HD Video

#5. Bigger is Better

If you haven’t noticed it yet (and how can you not) images and videos on the Web are getting bigger and bigger. Today, high speed internet and 4G mobile networks provide users with more bandwidth than they ever had before. And super high-def displays and devices, like Apple’s Retina display simply look amazing. At 326 pixels per inch, it has a pixel density so high your eye can’t distinguish individual pixels. Not surprisingly creators of content are taking advantage of bigger and faster bandwidth and super HD displays. Size and the compression of images and video will always be a limiting factor with web media, but if you had told me 5 years ago that full screen HD video was possible with little or no buffering, I’m not sure I would have believed it.

In 2013, look for large HD images and video to continue to grow bigger and better.

Examples Websites using HD imagery and video
Deutsch Inc.

Digital Magazine Design

#6. Digital Magazines

Traditional printed magazines will continue to fade away in 2013. Read “The Slow but Necessary Death of Print”. Much like NewsWeek did in late 2012, publishers will continue to move to 100% digital magazines, blogs and apps. Smart phones and especially tablets have forever changed the way that we all consume content.

Content Aggregation
Content aggregators like FlipBoard, Feedly and Pulse are absolute game changers for publishers. No longer do they need to worry about the cost and monumental effort it takes to produce a monthly or weekly magazine. Advertising is still the life blood of the publishing business and that won’t change any time soon, but now publishers can focus resources on what they do best — creating great content.

As content consumers, we no longer have to wait for the new issue of our favorite magazine to hit the news stand or our mailbox. RSS feeds are nothing new, but the beautiful design of a new breed of content aggregators and digital magazines make for a much more enjoyable user experience. If you’re a die hard print hold out, then nothing will replace the look, the feel and even the smell of ink on paper. But digital magazines offer new and exciting opportunities for new kinds of interactive content not possible with print.

What’s your favorite RSS content aggregator or digital magazine?
Send us links.»

Web design using Web Fonts by Adobe

#7. Web Fonts

It used to be that you could only use “web-safe” fonts for websites — fonts that are standard issue on all computers like Times Roman, Georgia, Arial, Helvetica, Lucida Grande, Trebuchet, Verdana or even (dare I say it?) Comic Sans. But in 2010, the WC3 (World Wide Web Consortium) or “Web Gods”, as I like to call them, began adopting the new font format standard WOFF (Web Open Font Format). So now almost any font can be embedded into a web page.

Mobile Web Design using Web Fonts
Good Magazine’s mobile website is a great example of using highly readable WOFF web fonts.

Until recently, the adoption of WOFF Web Fonts has been slow on the uptake. In 2013, however, I think we’ll see it explode. And to be honest, that scares me a little bit. Call me a cynic, but giving web designers and marketing professionals carte blanche to use any font available is a little like handing a set of markers to a 4 year old standing next to a fresh white wall.

The upside to a nearly unlimited quiver of available web type faces is the potential for consistent branding across all mediums. If your organization’s brand standards dictate the use of Futura Condensed Bold or Freight Sans Black, no longer do you need to have a print standard and a web standard.

A Word about Font Sizes
The rise of mobile devices and higher resolution displays has dramatically changed how we design for the Web, including the font sizes, line height and letter spacing. A growing design trend of the good (especially for aging eyes like mine) is the use of larger, more readable type with more line height (space between lines of text). As designers and decision makers shift resources and thinking for the mobile web, I think we’ll see more and more emphasis on readability improvements.

Some things never change

As you consider how to make the most of the latest web technology and design trends, be careful not to get caught up with design fads or fall in love with “must have” special effects. While bells and whistles can be crowd pleasers in the short term, it’s unlikely they’ll fulfill any meaningful goals of your new website.

  • Create unique content with a fresh, informative POV.
  • Force yourself to think like the customer. Design and organize content for the user experience, not for internal organizational systems and audiences.
  • Give a short, clear path to the transaction.
  • Provide simple, intuitive navigation. (Everyone says it. Far fewer succeed.)

There are no comments. Leave a reply.

Leave a Reply

Your email address will not be published. Required fields are marked *