Let Your Content Soar with Flat Design

Let Your Content Soar with Flat Design

By on May 1, 2013 in Content & Social Media, Web Design | 8 comments

Responsive Web Design

Have you noticed things are getting flatter? Not things in nature, trees and bald eagles and the like. But some business web designs are losing the elements that used to make them “pop”. Led by by content-focused mobile apps, web designs are following phones into minimalist, “flat” designs.

Users and Content First

Device interface designers prioritize usability over glitz, leading them towards simple and often flat graphics. Look at the Windows Phone interface and apps like Foursquare and Nike+ Running for more examples. Mobile designs like these influence the whole app industry and web design besides.

Since mobile browsing is fast becoming normal web browsing, web designers, like app designers, have to make specific choices to accommodate mobile devices. A mobile-first approach means prioritizing access to content so that mobile users quickly get the information they’re looking for. You might even call this a content-first approach.

When content comes first, flashier extras get left behind. No faux 3D graphics, automatic videos or novel animations. Many of those website accoutrements dazzled and amazed visitors in the early days of web browsing. Today, mature and modern designs give content the spotlight, rather than hide it in the drop shadows.

Google Likes It Flat

Here’s the kicker about great content and minimal, mobile web design. It makes Google happy. You see, flat and minimal graphics work really well for mobile responsive web designs. And mobile responsive web design adheres to Google’s own published best practices for websites. Choosing to design with this approach is choosing SEO friendly web design. Here’s two big reasons why:

Quality Experience – Website traffic remains an important indicator of authority. If a mobile user arrives at your website to find shallow graphics and difficult menus, they will bounce right off to the the next thing. Too many bounces and your quality ratings go down. You’ve got to deliver a quality experience on mobile. For now, that means content-focused layouts and minimalist styling.

One Website, No Duplicates – Some web designs spin one page into several with overlapping content served specifically to mobile devices. There’s nothing wrong with these mobile-only sites. It’s simply a hassle to change one, change the other to match, all the while making sure search engines know you’re making mobile alternates, not plagiarizing yourself. While Google continues to support mobile-only URLs, it’s far better to present all users with the same information, regardless of their device.

There’s a lot more ways responsive design is changing SEO, but at the core is content. Flat graphics as part of a mobile responsive design give users the straightforward, solid experience that keeps them sharing and coming back, building your authority for SEO.

Note: A flat or minimalist aesthetic is not responsive design. Web designers create amazing things for mobile responsive sites using all kinds of aesthetics.

But isn’t “flat” boring?

We’ve gotta entertain the people, blow their minds am-I-right? How does “flat” make it “pop”?

For business and even restaurant or event websites, the content-first approach demands restraint. Your website content should be the exciting part, supported by clear navigation tools and buttons. Don’t worry about heavily stylizing all of the backgrounds, buttons and menus. When you and your content are great, everything else should just hold you up, not compete for attention.

If your aim is to entertain or amaze, let’s talk about an amazing content strategy instead of flashy styling. Let your quality content, whether written word or multimedia, be the star of the site. Users will appreciate it and search engines will reward this approach.

photo credit: steveberardi via photopin cc

  • http://twitter.com/tikikitchen Professor Tiki Ohana

    Although I agree that the current trend in design, and possibly the future for front end development, is responsive design, I think this post mistakes flat design for responsive design.

    Yes, we want to make sure our Google overlords are happy and provide our users with clean, fast, and scalable designs, but the aesthetic system used – flat or otherwise – is not the issue.

    To call Flat design the future is to pigeon hole design into one specific system that does not affect a users ability to read or use the site. Flat design is merely an aesthetic layer on a wider responsive platform that allows for a quick user experience regardless of device. Flat design is not responsive in and of itself, and should not be seen as a design platform. It’s just an aesthetic.

    The goal with web design is to make pages, stylesheets, and images light weight for greater performance. This means using CSS (or CSS3) for graphical elements such as gradients where possible, using sprites over single images, compressed javascript, clean semantic based markup (such as HTML5), media queries to target devices, and so on.

    By saying that Flat design is somehow connected to responsive design, you are ultimately doing a disservice to the field by pigeonholing one aesthetic over others.

    Flat design is an aesthetic trend. Responsive design is the future or site and interactive development. That is until the future changes, and then whatever comes next will be the future.

  • http://twitter.com/pwolfgram Peter Wolfgram

    Thanks for the red flag, I didn’t intend to pigeonhole minimalist/flat aesthetic. Simply that I find it really useful for responsive design, which in turn is the recommended approach. I’ll add a note on the post to clear things up.

  • http://twitter.com/tikikitchen Professor Tiki Ohana

    The thing I think is hysterical about the whole “Flat design” issue is that for years designers have been clamoring for things like background gradients, rounded corners, and greater control of visual attributes with CSS. Now that they have that, everybody is switching to Flat design.

    It’s going to change again, but I think it’s going to be marriage of Flat design and more CSS3 type standards.

    I also think one of the reasons for Flat design (especially by Microsoft Windows products) is that IE 7 is still around, and a lot of designers just said “screw this, I’m making my life easier.”

  • http://twitter.com/pwolfgram Peter Wolfgram

    That. Unless the audience is going to be all IE for some reason, maybe corporate types, it’s not worth using limited resources to fight it. Graceful Degradation sounds like a bad 90s alt-rock band, but that’s here to stay as well.

  • http://twitter.com/tikikitchen Professor Tiki Ohana

    And I hate to be a stickler (seriously I do humbly apologize for being critical) but I would also contend that Google doesn’t care about the aesthetic style used on a website. All Google cares about is clear, easy to read, user centric content.

    Whatever style you design in is irrelevant, as Google does not make visual assessments. Google only cares about making sure that the content is easily accessible, well organized, and semantically marked up. It looks at keywords, rich data schemes, and semantics tags. As long as it’s not flash, and it’s accessible to their crawlers Google is happy.

    And we should all strive to please our Google overlords.

    I think you are on the right track in terms of responsive design, and how Flat design can actually make our lives as designers easier, but I’d be careful about saying that Google cares about design aesthetics.

  • http://twitter.com/tikikitchen Professor Tiki Ohana

    I can’t like this enough. Graceful Degradation=90′s alt rock. Progressive Enhancement = Dub Step?

  • http://twitter.com/pwolfgram Peter Wolfgram

    What about The Progressive Enhancements? They’d be like Rush, but every song would start with just triangle.

  • http://twitter.com/tikikitchen Professor Tiki Ohana

    Well played, sir. Well played.

  • Pingback: The Back to Basics Design Movement

×

Do Prospects Hate Your Website? Find Out Now