Web Design Trends for 2013 and Beyond
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
As 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.
What are some examples of your favorite mobile websites? Send us links.»
#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.
Scrolling Infinitely and Beyond
Have you seen any other good examples of websites that encourage visitors to scroll ’til their heart’s content? Send us links.»
#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.
#4. Ding-Dong. Flash is Dead
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.
#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.
#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 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.»
#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.
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.)