Mobile vs Responsive Design: What Does It Mean For You?


Not Sure How To Fit A Responsive Web Design Onto Your Existing Website?

Worried About How Long It Will Take To Find All The Needed Knowledge and Put It Altogether?

You No Longer Have To Worry.

Practical Responsive Web Design is an all in one course that will show you how to fit a responsive web design onto your existing website without sacrificing hours upon hours learning and running down dead ends.

Guru status not required. You'll see step by step how do your website, new or existing, up and running with a responsive web design.

How do you get started? Just click here and let's begin.

Mobile vs Responsive Design

You’re likely aware that mobile should be part of your business’s communication campaign. You might even have a mobile aware website. But how important is mobile to the success of your business?

There are plenty of stats running around showing the growth of mobile. But what about the decline of the desktop? If these two statistics are going in opposite directions (desktop declining and mobile increasing), doesn’t that mean mobile is becoming dominant? If so, how quickly?

Let’s get a firm handle on where the desktop is going. Last week, The Blackstone Group, one of the largest private equity firms, pulled its bid for Dell. Blackstone cited Dell’s deteriorating business. This is a fairly tectonic shift for the industry.

Blackstone’s move isn’t a surprise. Mobile/social/wireless communication is what people are buying, not desktops. Laptops, tablets, phones and peripherals will work better together in the months to come. Cables are and will continue to disappear.

Mobile computing infographic
image courtesy of tnooz.com

Responsive Design For Most Of Us

As an entrepreneur, the take away is that your website needs to work on all of these different devices. Likely, you have heard of responsive design or even mobile aware websites. These methods are a good start. But, being aware of how quickly the non desktop user base is building, you need to take it up a notch.

Here’s what I mean: mobile aware websites look for specific devices. This is a maintenance issue as you’ll need to constantly keep up with new and changing devices. For most websites, it’s better to have a device independent, responsive design.

A responsive design will scale your website across many screen sizes, including smaller mobile devices.

But Who Wants A Purely Mobile Website?

A purely mobile website is usually a different website from your main site. Maybe it is at m.yoursite.com. These sites are very optimized for the mobile experience. Whereas a responsive design scales up and down with screen size but doesn’t necessarily provide the most optimal mobile experience.

Here are a few reasons why you might want a mobile website:

  • Display hours of operations and clickable phone number
  • Restaurant menu that is very optimized for mobile viewing
  • Mobile optimized shopping cart and checkout process

Going with a purely mobile site depends on what makes the most since to serve up to mobile visitors. If your site is mostly content, responsive design is a great choice.

Besides the bullet points mentioned above, if you have lots of functionality, purely mobile may be a better option, allowing you to retain full functionality and optimize for a great mobile experience.

A Better Responsive Design

The common approach to responsive design is to start with a few device sizes in mind. Perhaps the iPhone, Galaxy S3 and iPad. Developers will then add media queries or breakpoints for each of those screen sizes. This means as you go from a full desktop screen size to an iPad size, something changes on the site so it looks nice on the iPad. As you go from iPad to iPhone, something changes again on the site for it to look nice on the iPhone. These changes are called breakpoints or media queries.

Starting with certain screens in mind and building out the site means your still chasing devices. Instead, have the site react based on how the design looks. This approach is backwards from how it is commonly done now.

Here’s what I mean, start at full desktop screen size. As the browser is decreased in width, there will come a point where the design begins to look ugly. Implement a breakpoint and adjust the design. Now keep decreasing the width. At some point the site gets ugly again. Add another breakpoint and design adjustment.

The key is that you are not dependent on any device. You are simply adjusting the design based on size, no matter what device views the site.

In Summary

You don’t know what the next big technology for communicating will be. By having a fluid, device independent design, in most cases you’ll be prepared. But if you are going purely mobile, realize it will require more upkeep.

Let me leave you with a couple of tips:

1.) Keep it simple when posting to your blog or adding pages. This will keep your responsive design from breaking. And yes, it can break.

For example, if you are doing any special type of formatting by using large margins, negative margins, fixed widths, or absolute positioning, you may need to compensate the design via media queries.

2.) Your website isn’t the only point of communication that you should be checking for mobile compatibility. Before sending out your newsletter, always send a test to yourself and make sure it looks good on your mobile device.

Following these tips will help keep your responsive campaign on track and viewable by a larger than average number of devices.

Please leave any questions or comments below. Also, I’d appreciate any tweets of this article. Thank you!



Opt In Image
Are you still struggling to validate your info product idea?

Solve that problem now by signing up below to get the entrepreneurs guide to info product marketing free!

2 Comments

  • Brian (@bbrian017)

    April 25, 2013

    I remember the first custom them I did, man what a waste of cash. Overall it looked amazing but the darn site was just a beast and over 8mb to load. Anyone visiting on mobile was probably upset after seeing how many MB it was just to visit. The new one is under 1mb and is loading pretty good now.

  • Brett

    April 25, 2013

    Hi Brian. It’s common for a responsive design to load a smaller image for smaller screens. But what many don’t know is the larger versions of the image still load. They just aren’t visible.

    Some of the more advanced responsive designs are detecting speed or general device and loading only the optimal image, which is a faster overall experience for the user. I’m working on this adding this technique to BBS.