Blog

How Responsive Design And Flat Design Improve Online Marketing

Over the past two years or so, we’ve seen two web design trends catching hold. I believe these trends are more than just fads, and that aside from just looking good, they are beneficial for SEO and other online marketing efforts. They are responsive design, and flat design.

What Is Responsive Design?

Simply put, a website is responsive if it responds or adjusts to fit desktop, tablet, and mobile screens. You can quickly test out whether a site is responsive by moving your mouse cursor to the right border of your browser, clicking and holding it, and then shrinking your browser width-wise. Go ahead, try it with this site right now. Or below is a responsive site we built for The Storage Center. Regardless of the device someone uses to access the site, it will adjust gracefully to be the right size for the screen.

Responsive design is rapidly replacing the previously popular “mobile website” that many companies had. Mobile sites redirected the user to a separate url, often something along the lines of “m.whatever.com” or “whatever.com/mobile/” and often didn’t provide the same functionality as the full website, sometimes causing frustration to users. And sometimes you would get the mobile site when you didn’t want it, if you were on a large tablet, for example, and were more interested in navigating the full website. In addition, these mobile websites also required the website owner to update two separate websites whenever static content was modified. With responsive design updates are made once and flow seamlessly to all versions of the website because there is only one website.

How Does Responsive Design Help My Online Marketing?

First, responsive design provides a better experience for visitors to your website. Whether they’re on a desktop, laptop, tablet, or smartphone they’ll get a website that fits perfectly on their screen. The site provides complete functionality, rather than a heavily stripped down version. Second, because you only have one website to maintain, you’re more likely to maintain it better. More up to date content means better content, and happier visitors who will use your website more thoroughly rather than bouncing off and trying the next one. As pointed out in this Forbes article, chances are a significant portion of your traffic is already accessing your site on mobile devices. If you’re not catering to them with a responsive website, you’re losing customers you might otherwise gain. Now, let’s talk about flat design.

What Is Flat Design?

First, some history. When the Internet started out, everyone was on dial-up modems. Of necessity, websites were simple and contained little in the way of rich content like video or large graphics, or else they would have taken too long to download. As broadband became the norm, websites became fancier. Web designers embraced “skeumorphism,” or making elements on a website look like things they aren’t. A button on a website that looks like a real, three dimensional object, is an example of skeumorphism because it’s not a real button. A website is flat, of course, not three dimensional. Flat design embraces this inherent flatness and eliminates what is unnecessary. Gone are gradients, shadows, and the appearance of depth. While flat design will likely evolve as time goes on, it is already here, and here to stay in one shape or another.

The website shown above is, in fact, not flat (it was designed about two years ago, and the responsive aspect was a later add-on). By contrast, to the right is a website we’re building right now for Value Store It, a self storage company based in Florida (click image to view full size). Although the site still has some depth due to the photos, these are not skeumorphic because they do not attempt to look like something they aren’t. Everything else is simple, uses bold colors, and is as flat as can be, other than with the exception of certain icons which are already set in stone due to their use in offline marketing.

How Does Flat Design Help My Online Marketing?

Some of the benefits of flat design come merely from being up with the trends. What is perceived as cutting edge tends to have more credibility, because it communicates that one is up to date, alive, and with it. A website that looks like it was designed four or five years ago sends the message that perhaps the company it represents isn’t in business any more, or if they are, perhaps they aren’t up on the latest trends in their own industry, either. This might seem a bit silly, since one can hardly expect an account or dentist to be constantly staying abreast of the latest trends in web design and online marketing, but nevertheless the unconscious perception is there, and rather than fight it, you can gain an advantage by embracing it.

In addition, flat design focuses on what really matters–content. Users can do without the embellishments, and flat design points them to what they’re looking for by getting rid of clutter, making text easier to find, and easier to read. As with responsive design, flat design improves the level of engagement with visitors to your website. The more time visitors spend on your website, the better your bounce rate, and the better your SEO efforts as a result. This is definitely one of those cases where optimizing your website for humans results in optimizing your website for search engines at the same time.

By combining responsive design and flat design, your website not only stays up with the trends, but it’s more user-friendly, leading to visitors spending more time on your website, higher engagement, more leads, more sales, better SEO–what’s not to love?

Want to receive posts like this by email? Sign up now!

Hi! I'm Josh Steimle, and I started MWI from my apartment while a college student in 1999. I'm responsible for MWI's overall strategy and marketing. I'm also the author of CMOs at Work (Apress, 2016) and a frequent contributor to Forbes, Mashable, Entrepreneur, and other publications. Read more of what I'm writing on my blog.

When I am surfing the net using my mobile phone, I tend to leave a page if I found out it is not responsive. My time is limited and I just couldn’t be bothered to enlarge the page and repeatedly sliding left and right in order to read it. It frustrates me. Great explanation on the advantage of flat design as well. An up to trend website will surely provide customer confidence (Well.. seems like this company got a good taste and knows how to hire a good design firm, they must know what they are doing, let me hang on a bit longer…).