≡ Menu

The Difference Between Mobile Websites and Responsive Design {and Why Have One vs. the Other?}

Responsive Design, Mobile Website, Mobile Plugin

Chances are, you’re probably reading this blog post on a mobile device such as a tablet or smartphone. If you’re not, I bet you’ll be surfing around your portable device later today, checking out a movie time, making a reservation at a restaurant, reading another blog post, or doing who-knows-what-else on that little techie piece o’ heaven.

Today’s reality is such that we hop online for anything and everything, and many times, we are doing so on our phones or tablets. We need information right now, and we don’t like to wait until we’re back at home or the office to find what we need. Sometimes, a website is easy to read on smaller devices, but sometimes it requires some (highly annoying) pinching, zooming, and scrolling in order to actually read what’s on the page.

So what’s a website to do when being displayed on such small screens when it was likely meant to be seen on a big, stunning monitor? And, what’s a person who is about to build (or hire someone to build) a website to do when faced with the question of what type of website is needed for their business, product, service, etc.?

First, let’s talk about the differences between a mobile website, responsive design, and a website that doesn’t fall into either of those categories.

1. If a website looks quite different on your mobile device (possibly even stripped down of its pretty graphics and has minimal overall design), but it’s very easy to read and navigate, it is likely a mobile [version of the] website.

2. If a website looks very similar (on a mobile device) to what you see on your desktop monitor, meaning that graphics and text have both adjusted nicely to fit the size of the device, and you can read and navigate everything very easily, you are likely looking at a responsive website.

3. If a website looks exactly (on a mobile device) like what you see on your desktop monitor, but it looks like a miniature version on your smaller device (and requires pinching, zooming, and scrolling to read the content easily), then the website is neither a mobile website nor is it responsive.

Here are some visuals to help give you a better idea of what I’m talking about:


Now, why would you want or need a mobile website or responsive design, and why would you care if you don’t have either one?

Let me break down the reasons, differences, advantages, and disadvantages of all three types of websites so you will never have to wonder again what type of site you have, what type you want or need, or why one might be better than the other in terms of cost, functionality, efficiency, etc.

Mobile Website

A mobile website is actually a separate website from your main (desktop) website. Your site may be built in WordPress or Drupal, but your mobile site will be built in another program such as goMobi, Duda, or Mobelio. These programs offer different pricing plans from free (with ads) to $9/month. You’ll have to upload/create your content for your mobile site in addition to your main site, and you’ll want to use the styling options to make your mobile site look nice and hopefully match the look and feel (at least with colors, your logo, etc.) as your main site.

Advantages of a Mobile Website

  • Mobile sites are easy to navigate, and content is very legible.
  • No graphic design or coding experience is required, so it’s pretty easy to create a mobile site.
  • It doesn’t matter what program you use for your main site since the mobile site builder is a completely different program.
  • The cost of a mobile site may be significantly lower than the cost of responsive design.
  • A mobile site is a great “quick fix” if you’re not ready for (or don’t want) responsive design.

Disadvantages of a Mobile Website

  • Your mobile site will not have the same look and feel (except for maybe your colors and logo) as your main site. So, after all the time and financial investment you spent making your site look fantastic, you’ll likely lose most of the design elements with a mobile site. {Note: This is one of those things that may not matter to some people if their site is more about content than design OR it may matter a lot if their site is more about design than content.}
  • You have to spend time initially creating/uploading the content and styling your mobile site as well as updating it whenever there is new content to add. So, you’ll be updating content in two places each time you have information to revise or add – on your desktop website and your mobile website.
  • While the initial cost of a responsive website may be higher than a combo non-responsive website plus mobile website, the monthly cost of a mobile website could add up over time.
  • In some cases, a mobile website has a second URL (such as m.domainname.com or mobile.domainname.com), and search engines may or may not find it.
Responsive Design

In the spirit of full disclosure (and a good laugh), I have to tell you what I thought the term “responsive” meant when I first heard it. In the web design group I belong to, everyone kept talking about responsive design, and I hesitated to speak up and ask what in the world they were talking about. I literally thought it meant that the website was designed so that people could “respond” to it (meaning, comment on blog posts or something of that nature). I know, I know – silly…but I bet I’m not the only one who thought that.

Once I realized and learned what it was, I became a bit (ok, very!) obsessed and fascinated. It quickly became a habit for me to resize my browser just to see if a website was responsive or not. I admit that I even became rather judgmental and thought that responsive websites were more sophisticated and “with the times.” However, now that I understand more about responsive design vs. mobile websites vs. plugins (hang tight, that’s a new term in this post…but I’ll definitely be covering it below) vs. a non-responsive, non-mobile website, I am much less judgmental (although I still resize my browser when I stumble upon a new website, especially if it has content or graphics that appeal to me…I can’t help it, I’m just so curious!).

So, what is responsive design, and what are its advantages and disadvantages?

There are lots of definitions of responsive design out there on the web, but let’s just stick with the one from Wikipedia, which states that:

“Responsive Web design (RWD) is a Web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors). A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries, an extension of the @media rule.”

 
So, in plain English, responsive design involves – for the most part – being strategic about how you code (style) a website as well as adding in additional special coding (CSS3 media queries) at the end of the website’s style sheet. Doing both of these (among a few other back-end tasks) will make your website resize to fit the browser or device in which it is being viewed*. I also like to explain to clients that a responsive website has content that cascades down the screen beautifully vs. being squished together.

*There are too many products (mobile and desktop, brands and sizes) available today to be able to perform live testing on each and every one of them and to guarantee 100% that the site will render perfectly on every single device or browser. I use a responsive WordPress premium theme, I am familiar with basic responsive coding, and I have access to support forums where I can seek help if needed. However, if a design is very intricate and requires a large amount of extra coding or very advanced coding in order to make or keep it responsive, it may be necessary to hire a subcontractor to complete the additional coding required to achieve perfect responsive rendering.

Advantages of Responsive Design

  • You have one website, so you pay for hosting, design, development, etc. for only one website. You also only update one site vs. having to update a desktop AND mobile site. You’re saving time AND money (a win-win!)
  • You decide what you want to appear on smaller devices and where you want it to appear (i.e. If you want to keep all of the content in your sidebar visible on a mobile device, you can…and you can also decide if it appears above or below the main content on the page. If something looks a little off or you just want something to appear differently on smaller devices, you can adjust its location or even remove it entirely by using media queries – that special type of code I mentioned above that allows you to specify how something should look on a particular device.). A mobile website builder will likely limit you in terms of what you can include in your mobile website.
  • Content is very legible, and no (or minimal) pinching, zooming, or scrolling sideways is needed. This makes for a great user experience!
  • It’s not the wave of the future – it’s the wave of the now (well, for some people)!

Disadvantages of Responsive Design

  • It can cost more, as it takes more time to test the website on multiple browsers and devices, and it takes additional coding knowledge and expertise.
  • If you are dead-set on your visitors having an amazing experience with graphics, animation, or hover effects on your site, responsive design may not be ideal.
Non-Responsive, Non-Mobile Websites

These types of websites are those that appear exactly the same on a mobile device as they do on a desktop monitor. However, the website is going to look like a miniature version of your site on mobile devices. The smaller the device, the smaller the website. There’s no automatic resizing or cascading. If a website has 10 menu items that stretch across the screen on a desktop computer, those 10 items will stretch across your small phone, and those menu items will be tiny (vs. changing into a drop-down menu on a mobile device, which occurs with mobile websites and responsive design). Then, you’ll either need a tiny finger so that you make sure you press the right button or you’ll have to pinch, zoom, and scroll to press the intended menu item/button. Additionally, a sidebar filled with important content won’t fall below your content and remain legible. Instead, it will be squished next to your content (just as it appears on the desktop), and you’ll have to pinch, zoom, and scroll sideways to see the contents of the sidebar.

Advantages of a Non-Responsive, Non-Mobile Website

  • You have one website, so you pay for hosting, design, development, etc. for only one website. You also only update one website vs. having to update a desktop AND mobile site. You’re saving time AND money.
  • You aren’t depriving your visitors of any content, as everything will appear on a smaller device exactly as it appears on the desktop (but it will be quite difficult to read).
  • It takes less time to style/customize this type of website vs. a responsive website because you (or your designer) are not having to constantly test the website on various browsers and devices, and you’re not using the special or advanced coding mentioned above to achieve your preferred design.

Disadvantages of a Non-Responsive, Non-Mobile Website

  • Content is not very legible, as you’ll have to pinch, zoom, and scroll to be able to read information throughout the website.
  • With the number of people using mobile devices for all of their website needs, it makes sense to make it easier for people to read what’s on your website. The key here is to make it easier, not harder, so that people will become repeat visitors…and then hopefully repeat customers.
  • Some [potential] customers may see your website as being behind the times if it is not easy to read and navigate on smaller devices.

Before I summarize all of the above, including my personal opinions on this big and very popular topic, I wanted to share two [more] important tidbits of information:

A Quick Fix for Non-Responsive, Non-Mobile Websites to Make them More Mobile Friendly

People often tell me they want their website to be “mobile friendly.” This is usually before they know the difference between responsive design, a mobile website, and one that is neither responsive nor mobile. The good news is that if you have a WordPress website and want to make your site look better on smaller devices without having a second site or investing the time or money into responsive design, there IS a solution. In fact, when I designed my first WordPress website, it was not responsive, and I used this tool.

WP Touch is a WordPress plugin that enables a mobile “theme” for your website and offers visitors the option to choose the mobile or desktop version on their mobile device. Because this is a plugin connected to/with your website, it pulls the content from your website so there’s no need to enter or update content in two places. Your mobile theme with WP Touch won’t look exactly like your desktop version of your website, and it will likely strip your website of many of its attractive features. However, if you are looking for a way to make it easier for people to read the content on your site and you’re not looking to double your efforts (and money) with a mobile website or spend the extra time and money on a responsive design, then WP Touch is the answer for you! There’s also a pro version with even more features, and those features can help make your mobile theme look quite nice.

How to Know if a Website is Responsive: Three Ways to Find Out

In addition to (1) looking on your phone or tablet to see how a website renders, you can also (2) test it out on responsive testing websites (simulators) or (3) resize your browser to see if the content moves as you shrink or expand your browser.

The first method doesn’t really require any explanation. Just go check out a site on your phone and see if it’s easy to read and navigate (if it is, the site is likely responsive, a separate mobile website, or has a mobile plugin installed) or if you’re having to do a lot of pinching, zooming, and scrolling (if that’s the case, there’s no mobile friendliness going on).

The second method involves typing in a URL on sites such as Responsinator.com, the StudioPress responsive testing page, or Am I Responsive. You will be able to get a pretty good idea of how a website renders on various devices; however, these simulators are not always accurate. For example, my yoga and fitness website looks different on my phone (small and squished) than it does on the simulators (everything is the same size as it is on the desktop, but you have to scroll to the right and down to actually see the content, as it’s hidden otherwise).

The third method is a bit of an old-school, amateurish way of testing it out, but it’s quick (and a little fun if I may say so). To resize your browser, simply move your mouse to the right or left side of your browser. If your browser is taking up the whole monitor, move it over or shrink it a little from a bottom corner. Once you get to the right or left edge of the browser, your mouse will change from a single arrow to a horizontal line with two small arrows on each end. That’s when you can start moving the browser to make it smaller and bigger. If the content stays put and starts to get cut off as you make the browser smaller, the website is not responsive. If the content starts to cascade down the screen and images start to resize nicely based on the size of the screen, then it IS a responsive website. Go ahead and try it now on my site…you should see this blog post’s content start to move as you change the site of the browser.

And finally, my summary:

Some designers and website owners may frown upon mobile websites (such as goMobi), mobile themes (such as WP Touch), or even responsive design since some of the attractive features that they worked so hard to design and code may shift (by choice or not) or be removed entirely. Similarly, some people are adamant about responsive design in order to ensure a wonderful user experience.

In a nutshell, it is very much a matter of personal preference combined with your business goals and needs. Then, on top of those two important factors, you have to consider time and cost. There’s the time involved in creating and updating a second website plus the cost of that second website’s monthly fee (if going the mobile website route) or there’s the extra time and cost involved in having a designer extensively test the website on multiple devices and utilize (or hire a subcontractor for) advanced and/or extra coding.

If your website has a ton of content and you blog regularly, it would be advantageous to have some sort of mobile-friendly viewing option for your visitors. If you are a small business that relies mostly on in-person sales and interaction, then I think it’s perfectly OK to NOT worry about how your website looks on smaller devices.

To conclude, I want to make sure to state that there are a ton of articles online about responsive design and its advantages and disadvantages. There are probably just as many – if not more – opinions on the subject.

Just like with everything else in this world, we’re not ALL going to be on the same page. Some people care how their website looks on all devices, and some have plenty of other things they are focusing on (with their website and/or their life in general). I happened to care so much because I wanted to be able to offer responsive design (as well as other options) to my clients. Therefore, I set out to learn the ins and outs (at least the basics) and have made it a goal to educate clients and the general public about this topic. Many people tell me they don’t even know how their website looks on smaller devices or they think they have a mobile website or responsive design, yet in realty, they have neither of those types of sites. If you’re spending the time and money to build your own website or hire someone to do so, it’s worth it to know what type of site you want and need for your business and your audience. Additionally, if you already have a site, it’s important to know what type of site you have and if you need to think about how you can improve your user experience.

I’d love to hear from you! Let me know if you have any questions I didn’t answer above or if you need further information on the different types of websites or why to choose one vs. the other. Clearly this is a topic I am very passionate about, and I’ll do my best to help you understand how to proceed with your own website. If you would like to contact me personally with questions or to chat about building you a new website, just shoot me a note right here and I’ll get back to you shortly.

Like this post?
Get more delivered to your inbox AND receive the
ULTIMATE Website Essentials Guide
Just enter your info and it's yours:
19 comments

19 comments… add one

  • maria February 27, 2014

    You made me run and check how my site looks on my phone.
    Phew! My theme is responsive (and actually, very nicely so!).
    Thanks for the insights :)

    • Stefani Harris February 27, 2014

      You are very welcome, Sophia! So glad to hear your site is responsive, and that you are happy with it. :)

  • Jess February 27, 2014

    This is a great resource! I’m going to have to share this with some of my website clients :-) I like that you showed pros and cons for the different possibilities, and not just, “you need to/HAVE to do this!”

    • Stefani Harris February 27, 2014

      Thanks so much, Jess! Yeah, I read a few articles out there that gave some pretty strong opinions. Responsive isn’t for everyone…and neither is a mobile website. It’s all about personal preference and goals. :)

  • Hope Connell February 27, 2014

    What a comprehensive explanation of this! I bookmarked this as a resource for clients trying to figure out what they need. Thanks!

    • Stefani Harris February 27, 2014

      Thanks for checking it out, Hope! Feel free to use it whenever you need it. I definitely found tons of articles out there on the topic, but none were presented in a friendly, easy-to-understand way – and with examples! :)

  • Leah February 27, 2014

    Woah- epic post! So much detail. Great job explaining all the differences. I do have to say, responsive is a must these days and will only be more and more necessary!

    • Stefani Harris February 27, 2014

      Thank you so much, Leah! Ahhh, epic – what a great word! It is definitely a must for me…but I know it [still] may not matter as much to some. :)

  • Farideh February 27, 2014

    This was really helpful! I had absolutely no idea what the difference was. I assumed it was the same thing. Now I won’t embarrass myself next time a client asks me such a question. Loved that you included visuals.

  • Rebecca Gruenspan February 27, 2014

    Super informative and I hope anyone that doesn’t already have a mobile friendly website will read this (so I’ve shared)! There is nothing more annoying, as someone that’s always looking at sites on my smart phone, than pinching and zooming and moving and scrolling and killing my eyes! Thanks, Stefani!

  • Rebecca February 27, 2014

    Oh wow, what an amazingly detailed post. Some really great info here Stefani, thank you!

    • Stefani Harris February 27, 2014

      Glad you liked it and found it helpful, Rebecca! Thank YOU for reading it! :)

  • Amanda February 27, 2014

    Stefani!!! This is such a detailed post with GREAT information + visuals. I actually don’t even ask a client anymore if they want responsive design, it’s all I offer. I came to a point where I felt I needed to take the decision off their plate. Thanks for mentioning, http://www.responsinator.com/, I haven’t heard of it before but will definitely be a tool I use regularly now!

    • Stefani Harris February 27, 2014

      Thanks so much, Amanda! Great idea about not even giving it to them as a decision. I guess I don’t do that anymore either, now that I’m using Thesis 2.1, which is responsive. But, I still want to tell them about responsive design so they’re aware that they’re getting something awesome…and something of mega value. Responsinator is great…but it’s a bit odd how different my non-responsive site looks on there vs. in reality. Argh – frustrating (but then again, not that it matters so much since I KNOW it’s not meant to be responsive). :)

  • Janet February 28, 2014

    EXCELLENT info!! You’ve explained it so well – “in plain English”! Informative and entertaining :-)

  • Natasha November 10, 2014

    I have more than one wordpress blog.
    Some use responsive design and whilte others use mobile plugin.
    Both look goods for my visitors.

Leave a Comment