Why you’re getting responsive design all wrong (and 8 ways to rock mobile)

Young woman using a tablet on the sofa
14,407 designers received our email newsletter last week. Click here to sign up for free.

Remember those silly mobile themes that used to be popular a couple of years ago? You know what I’m talking about…

old-mobile

Awful, ain’t it?

This is beyond me … why would anyone put such a thing on their site? There’s no branding whatsoever, it’s ugly, and gives you no continuity across various platforms. In other words, if someone visited your site on mobile and then on desktop, they wouldn’t be able to guess it’s the same site.

Thankfully, those mobile themes are dead. For good.

So what to do/use instead? Well, there are only a handful of rules when it comes to mobile, but at the same time, they can make or break your site’s success. And it’s not that I’m trying to sound smart here. It’s just that catering to the mobile visitor is way different from catering to the desktop visitor.

1. They want the raw content – give it to them

The first thing you need to keep in mind is that a mobile visitor is mainly about the content.

Usually, they don’t care about the fancy action points you have waiting for them (social media buttons, additional subscription forms, sidebar links, nice shadows, etc.). What they’re after is the content itself.

So you’re job – as the person building the site – is to provide it to them as quickly as possible, and in its raw form.

Here’s an example – Engadget (standard design to the left; mobile to the right):

engadget

Notice that the standard version features a lot of stuff displayed across various boxes and columns. The mobile, however, focuses just on single stories one by one, and it doesn’t even show the complete menu.

The reason is simple – again, people on mobile don’t care about any of that additional stuff.

2. Mind the screen size (not the resolution)

Contrary to popular belief, screen resolution doesn’t matter.

For instance, the new iPhone 5s is 1136 x 640, which is quite a lot, and surely enough to display any website without any additional tweaks. However, the screen is only 4 inches, and this means that displaying the desktop version of a website is, in fact, pointless because people aren’t going to be able to see all the details.

Therefore, when constructing the mobile version of your site, try not to think about the resolution, but about the real screen size instead. The average mobile screen these days is probably around 3.5-4 inches. If the mobile version of your website is to be user-friendly, it needs to use this space effectively.

3. Consider your goals

If you’re working on a new site then I’m sure you have at least one specific goal you want to achieve with it. Maybe you want to provide your audience with carefully crafted articles, or showcase your photography skills, or sell a specific product, or whatever else.

While the standard desktop version of your site can handle multiple goals (to some extent), the mobile version cannot.

In essence, mobile can help you achieve various things, and I don’t see a reason why you shouldn’t be able to make your mobile ultra-effective. But that’s only possible if you focus on one goal at a time.

So when you’re working on the mobile version, focus only on your single most important goal and nothing else.

4. Brand through minimal elements

Even though you naturally want to make your site as recognizable as possible, you should do whatever you can to refrain from using too many elements. Instead, just stick to the absolute minimum.

In most cases, a logo at the top of the page really is enough. Remember that the visitor is not there to be looking around, but to consume a specific piece of content.

Obviously, you can and should also use the color scheme that you applied to your standard site. That way, you’ll manage to keep everything congruent and not confusing when the visitor comes back later on (on their desktop).

5. Be careful with social media

The trend nowadays is to display a number of social media share buttons below every piece of content possible. It seems that no website exists without at least some social media integration.

That is a fact. And although I don’t see the trend itself as a bad thing, I think that it can easily backfire when we’re dealing with mobile sites.

As indicated before, users are usually not interested in anything else other than the raw content when they navigate to your site from a mobile device.

They always have a specific goal in mind, and sharing your content on social media is rarely it. If they just wanted to check out what’s going on, they’d use their desktop computer.

Now, you can display a couple of social media links/buttons if you must (zero is preferable). But, I think that doing anything more is too much. Remember that the screen is very small and if you decide to display, let’s say, four share buttons, it will probably occupy the whole visible area.

6. Provide custom navigation

Displaying massive menus linking to every possible page or post on your site may work for desktop, but won’t cut it for mobile.

This is something I’ve learned when I started working with codeinwp.com – a company providing PSD to WP services for people who don’t want to cut their designs manually. Most of their latest mobile builds follow this principle to the beat.

For example, take a look at Writer’s in Charge (standard design to the left; mobile to the right):

wic

A simple design in itself, granted. But for mobile, the content block is as near to the top of the screen as possible and the main menu is hidden.

This is a good direction to take.

To give you a general how-to, you can do this:

  1. Use the most minimalist menu possible linking only to the most essential pages.
  2. Arrange the rest of your content in a “next” and “previous” manner.

That way everyone can easily find the core pages, and at the same time, they can consume your content without the need to go through a massive list of links. Just two simple “next” and “previous” buttons will be enough 90% of the time – the power of simplicity.

Here’s how The Next Web does this:

tnw

7. Convince them to visit you again

For me, the true power of a proper mobile site is not only about managing a sudden need for content on your visitor’s part, but it’s also about convincing them to come back when they’re on their desktop computer.

What’s funny is that most of the time, you don’t even have to give any specific reason to do it.

For instance, at the bottom of your mobile site you can display one of these things:

  • A visible RSS subscription link, along with some basic info on the benefits of subscribing. Instead of going with a standard RSS link you can also try a Feedly subscription link.
  • A short email subscription form. You can get it from MailChimp – the only A-list email newsletter service provider that offers free accounts.
  • A straightforward link saying “email this page to yourself.” The simplicity of this option might just be enough to make it work surprisingly well. This can be a simple “mailto:” link with some predefined content.

Of course, if you’re in a niche that allows you to provide an interesting incentive for the visitor to come back – one that actually makes sense – then by all means offer it as well.

8. Mention that it’s the mobile version

This might sound funny, but some visitors don’t realize that they’re in fact browsing a mobile version of your site (I mean, they don’t know that there’s a more developed version meant for desktop visitors). That’s why stating this openly is a good idea.

The bottom of the page is a great place to do so. This is also yet another place where you can use one of your “convince them to come back” elements and mention that the full version of the site has a lot more to offer.

This one sums up my set of ideas. So, is the mobile version of your site doing its job like it’s supposed to? Leave a comment and let’s talk.

Like what you've read?

Subscribe to our M,W,F newsletter packed with awesome content just like this. We'll also throw in a free ebook just for signing up. Enter your email below. Download will begin immediately.

About Karol K.

Karol K. (@carlosinho) is a blogger and writer, published author, and a team member at codeinwp.com. Check us out if you don’t like converting your PSDs to WordPress by hand, we’ll take good care of them for you.

 

1463032_455892897861742_989695917_n

About Karol’s business: Karol is a freelance writer working with codeinwp.com, The top-notch PSD to WordPress service. YOU DESIGN, THEY CODE. As simple as that.

Comments

  1. Scott H says:

    Great article. Thanks!

  2. Kim Solberg says:

    Excellent article and great examples. This article is really very helpful. Thank you!!!

  3. Mind the screen size (not the resolution). Great points there, I always tended to think about the resolution of the device instead of the screen size. Great Article!

  4. Thanks for correcting “your” to “you’re” in the title of this article. It was a bit disturbing to see that in the subject line and title of the email version! Keep on blending!!

  5. Donna Camacho says:

    Thanks for correcting the headline. There is also a misuse of the word in the paragraph under item number one:

    “So you’re job – as the person building the site – is to provide it to them as quickly as possible, and in its raw form.”

    This time, it should be YOUR job….not you’re job.

  6. Awesome. Just awesome! Hey Karol you’re going to be part of the team yh? Looking forward to more of this.

  7. Why would you say “mobile version” if it’s simply a responsive version of the full desktop website? It’s the same code made responsive with media queries; we don’t want to go back to the awful example you started off with in your article. :)

    • Karol K. says:

      I just wanted to emphasize one of the main strengths of responsive design, which is being probably the best solution available for creating mobile designs. For instance, responsive layouts can be used to display (or not display) specific elements of the site based on the screen width of the device.

Join the conversation

*