Tips and strategies for online sales and marketing, and how to use SiteCaddy to manage your web presence.

10/18/2012

The move towards the mobile web is in high gear, and soon more people will access the internet (and your website) via a mobile device than with a computer or laptop. In the last 12 months, I've fielded a lot of questions from clients about creating an app or creating a mobile website. But I've found that many times when someone asks about building them an app, what they really want is a mobile site, or vice versa.

And this is not surprising. Everything you hear these days is app, app, app! It's a new frontier, the language is not familiar to everyone, and it changes from month to month. This post does not intend to make the reader an expert in any of these topics. But hopefully if you read this, you will have an understanding of the different options available for making your content available on mobile devices, and the advantages of each option.

The Problem

While smartphones and tablets (and some day your refrigerator and toaster) usually have web browsers built in that can surf the web, most websites designed in the lst 10 years do not work well on mobile browsers. There are many issues involved, but it basically boils down to two:

The site was not designed to fit on the small screen

It's hard to interact with the site without a mouse and standard keyboard

So what do we do? Do we have to invest in completely recreating our website? Do we have to create a separate site specifically for mobile? Do we need to take on the expense of building and maintaing an app?

The answer is... maybe. But don't make any decisions until you know your app from your elbow.

Responsive Design, Mobile Design, and Apps

As the mobile web has progressed, so too have techniques for presenting a better user experience on mobile devices. In this post, I describe 3 common solutions:

Responsive website design

Mobile website design

Apps

This post does not cover all the details of these topics. My only goal with this article is to make you feel like you understand the most important options, and have a feel for which ones might make sense for your business.

Let's define each of these options in the context of a practical example.

The Example

Let's say that the home page of your business website has:

A main menu with 7 items/links

A photo slideshow that runs from left to right

A 3 column layout, with menus in the left column, content in the middle, and a few widgets in the right column with news headlines and event listings

Let's keep it as simple as that for now, and see how this home page works on different devices.

Responsive Website Design

The concept of responsive website design is not new, but it's gained a lot of traction over the last few years as mobile web use has skyrocketed. The principle is simple: the design and content on your website should respond to the screen/device on which it is displayed.

So looking at our example home page, if this website was not designed to be responsive, what would happen if a customer viewed it on a smaller screen? The answer is... we're not sure. It might mean that on an iPhone, the site visitor can only see a fraction of the website at any one time, and they have to frantically scroll around the screen to get to certain menu items or read an article. Or maybe on an Android device, they can see the entire screen, but it's been shrunk down in size so much that it's very hard to read or use the buttons and links on the site.

By contrast, if this site was designed to be responsive, it would actually reconfigure itself according to the size of the screen on which it was displayed. So for example, on a very big screen it would show in all its intended glory. On a slight smaller laptop screen, perhaps it would still display nearly as normal, but the size of the photo slideshow would be slightly reduced, and the center column with the content would be slightly reduced, so that the balance of the site would remain in tact. But then on a really small screen - such as an iPhone - the actual configuration of the screen would change automatically. The main menu items would stack one on top of the other (vertically) instead of left to right (horizontally). The photo slideshow would be replaced by a single small photo. And the 3 columns would be stacked on top of each other, so none of them would need to be reduced so much in size as to be unreadable.

This sort of automatic reconfiguration of a site to best suit the needs of different screen sizes - that's responsive design. And it can work differently for each site - many of the decisions are left to the designer. What's important is that without having to put in the effort and expense of designing a separate site specifically for mobile platforms (not to mention the associated maintenance costs) the one site will work well (or at least pretty well) on any screen size.

Mobile Website Design

A mobile website is built from the ground up to suit small screen sizes. Typically a mobile website:

Has a simple, icon driven home page

Has a reduced set of menu options, always stacked vertically

Has a reduced set of functionality compared to a full site

Does not feature photo slideshows or animations

The key here is that when I say mobile website, I do not necessarily mean a different website. Any good website will be designed so that the content and the design are separated, and this means that you should be able to present the content on your website as either a responsive site or a mobile site - without having to maintain 2 separate sites.

When I think of mobile sites, I often think of airline sites. Airlines are big companies with deep pockets, and thre is a margin on each ticket sold. The process of selling an airline ticket on a website is complex, and involves calendar widgets, seat charts, and menus of price options. Airline customers are often travelling and therefore often accessing the internet via smartphones. It makes sense that airlines would want to present their customers with a good mobile shopping experience.

Take a look at the difference between the mail Lufthansa website, and the mobile version:

http://mobile.lufthansa.com

http://www.lufthansa.com

The mobile version of their website is not just a modified version of the main website, it's a completely different and much simplified user experience.

Lufthansa Site, Full

Lufthansa Site, Mobile

Note: The customer should not need to know the URL for the mobile version of a website - the web server is typically configured to automatically display the right site based on the visitor's device, and then the website should usually give the visitor the opportunity to switch back and forth between mobile and normal website. That way the visitor gets the recommended experience by default, but they can choose a different experience if they like.

Apps

An app (short for application) is not a website. Sure - it might look and work just like a website, and it might feature the same content as on a website - but it is not a website. An app is a lightweight application that is designed specifically for mobile devices.

Apps are great for delivering specific functionality that suits the mobile user. Online banking is a good example. If you wanted to check your bank balance on your banks website on your Android phone, could you do that? Sure. You could type in the URL for the website, login with the little keypad, login again since you typed it wrong the first time (if you're like me), navigate to the page with your balance, and then make an appointment with your eye doctor because you just realized you're not 18 anymore.

The same experience with your bank's app would probably be more like:

Lauch app and sign in.

Press huge button that says "Check Balance".

Look at your balance.

Congratulate yourself for being so cool - treat yourself to expensive espresso on way to work.

So in this example of an app, I did not show anything that is not already available on a web site. So what's the difference? There is a lot of overlap between apps and websites, and the differences are often subtle and confusing.

So rather than spending another 1,000 words on trying to provide more distinctions between mobile websites and apps, let me make a broad generalization... if you are a small to medium sized business, and unless you have a really good business reason for doing so, you DO NOT need to take on the expense of creating your own app for your business. I repeat - at this time, most small to medium businesses do not need to build their own web app. There are web platforms on the market that will take your existing web content and create an app for you!

Summary of the Differences, and What You Probably Need

Let's start to wrap up this post, summarize a few points, and make a few practical suggestions for your business.

Responsive Website

All new website designs should be responsive. If you have a budget for expanding your business online, then you should be looking at upgrading your existing website design to a truly responsive design. This is something you probably should look at. A well designed responsive website will provide users on almost any device with a good experience.

Mobile Website

As you continue to expand into the mobile market - and you should agressively plan for this in 2013 - you can then look at a mobile version of your website. You probably will never need a mobile version of a website if you have a simple brochure website. Save your money and put it into online advertising or a fancy espresso machine for your kitchen. But if your site features complex interactions such as reservations, tee-time bookings, or e-commerce carts and checkout processes, then a mobile version of your website will probably provide your members/customers with a better experience, which will lead to a better conversion rate, which will mean your mobile investment will pay for itself quickly. And its certainly a good way to get in front of your competition in an area that is growing explosively.

App

I would not steer anyone away from having an app, I would just not recommend developing an app yourself. What I would simply say is that your first question should be... "do I really need an app, or do I really need a responsive/mobile website"? Remember - even in a mobile world, your website is still the hub of your online universe, and all the apps and feeds and tweets and posts should be directing traffic back to it.

How Am I Supposed To Manage All This Stuff???

You're not.

You already have a day job. And a website to manage. And your Facebook page, and your Twitter feed. And there is always going to be "the next big thing" that you have to spend time on. Unless you have a big IT department of a big budget, you have to draw the line somewhere.

What you need is a single platform that will automatically provide you with:

An option for a responsive web site

An option for a mobile web site

An option for an app

In a perfect world, these things should be done for you, and leverage all the content and functionality you have put into your website. If you try to manage a dozen different online platforms for your company and you don't have the resources, you will end up with a dozen really bad online platforms.

All new client websites are being designed to be responsive from the ground up, and all older design themes have the option of an upgrade to a new responsive framework.

Releasing mobile versions of all client sites

Releasing apps focused on e-commerce, bookings, and communications.

Releasing an app that will help clients manage their accounts from their softphones.

All of these services will be integrated, and controlled from the one main account. No need to juggle content from mulitple sources - just focus on your company website, and the SiteCaddy platform will automatically present it in the correct format for your visitor's needs.

So in other words we'll take care of the responsive design, the mobile site, and the apps - and our clients take care of their business and their content. The way it should be. And we're not the only company that will be providing these types of services - so find a company that does this work for you before you look at taking on these challenges yourself.

Summary

I hope this article - if nothing else - gives you an apprecation of the subtle but important differences between responsive websites, mobile websites, and apps. As with anything on the web, don't get overwhelmed by it - just learn enough to be able to make an informed business decision. You don't need to be an expert. Choose a platform that will provide you with mobile options for your visitors, and ideally an app for more complex processes, and then enjoy that espresso while it's still hot.

Feel free to contact us at SiteCaddy any time if you would like more information on how we help businesses get online and go mobile.

I am starting up a new internet blog directory and was wondering if I can
submit your blog? I'm trying to grow my directory little by little by hand so that it retains good quality. I'll make
sure and put your website in the proper category and I'll additionally use, "Responsive Websites, Mobile Websites, and Apps. Know Your App from Your Elbow!" as your anchor text. Please be sure to let me know if this is acceptable with you by contacting me at: lucilleeaster@t-online.de. Cheers

I blog often and I seriously thank you for your content.
The article has really peaked my interest. I will take a note of your website and keep checking
for new details about once a week. I subscribed to your
Feed as well.

Hi there just came upon your blog from DuckDuckGo after I entered in, "Responsive Websites, Mobile Websites, and Apps. Know Your App from Your Elbow!" or something similar (can't quite remember exactly). Anyhow, I'm happy I found it simply because your subject material is exactly what I'm looking for (writing a college paper) and I hope you don't mind if I collect
some information from here and I will of course credit you as the reference.
Thank you so much.

Delighted to see such a positive response to this posting, and thanks to everyone for their comments. I'm seeing a lot of people with questions on this topic around the web - it really does remind me of the world of web design 15 years ago. Too many questions and too many cowboys.

Hey there! This is my first comment here so I just wanted to give a quick shout out and say I truly enjoy reading through your articles. Can you suggest any other blogs/websites/forums that go over the same subjects? Appreciate it!

Awesome website you have here but I was wanting to know if you knew of any message boards that cover the same topics talked about in this article? I'd really love to be a part of group where I can get feed-back from other knowledgeable individuals that share the same interest. If you have any suggestions, please let me know. Many thanks!

I'm really loving the theme/design of your site. Do you ever run into any browser compatibility issues? A small number of my blog audience have complained about my blog not operating correctly in Explorer but looks great in Safari. Do you have any recommendations to help fix this issue?