You’ve been convinced you should create a mobile site for your website. You start to do some research but pretty quickly you get lost. What do I include or leave out from my normal website? What about other types of devices, such as tablets, should I alter my website design for those too? There’s something called a responsive site that sounds similar to a mobile site, but what’s the difference? I’m confused. Help!
Not to fear. We’ve broken it down for you and we’re going to keep it as simple as possible.
A mobile site is a site designed only for the screens of small phones. Oftentimes, a mobile site loses many of the functions of the normal website. Think of it as a trimmed down, slimmer website. Additionally, when a user visits the site on a mobile device he or she may be asked if they want to stay on the mobile site or continue to the regular site.
Here’s an example:
A responsive website detects the width of the browser (i.e. is it small, like on a phone, medium sized, like on a tablet, large, like on a laptop, and even extra large, like on a desktop computer. The website responds according to the width of the user browser, and changes layout accordingly. The design is not limited to mobiles phones; rather it offers a solution for all size browsers.
Let’s take a look at an example:
From left to right, this shows barackobama.com on a mobile phone, tablet, and desktop computer1.
Can’t see the difference between responsive and mobile design? Unless you’re jumping devices, it may be hard to detect. The alterations lie within the code of the website. Designers use fluid grids, flexible images, and CSS3 media queries to create the look and flexibility of responsive websites. It’s not something a visitor may be able to see outright, but it is a significantly more flexible way to deal with browsers of various sizes.
So if a responsive web design works in all size browsers, why wouldn’t you choose to build a responsive website? Unfortunately it’s not that simple. Before making the decision, you should consider the following three factors before choosing responsive design:
Time and Money
Does your web development team have the time and financial stability to create a responsive website? There’s a great deal of work that goes into creating a responsive website and it can often be more time consuming than creating a mobile site. If you’re not sure you have the resources now, consider starting with just a mobile site and adding a responsive layout later.
Browser Support
Older browsers may not support all the features of responsive web design. Newer web design languages, such as CSS3 and HTML5, are often used to create responsive websites. However, these languages are not fully supported in all browsers. Consider which browsers your visitors are using to access your site before jumping into a responsive design.
Content
Responsive design often limits what you can do on a normal website or mobile site. For example, many banks let you deposit checks by taking pictures of them. However, this function is difficult to achieve with responsive web design and may be more suited for an app or mobile website.
Web design vs. Web app
Maybe you don’t need a responsive or mobile website at all. Consider whether an app is a better alternative to your mobile needs. Think about how your users would use your website in app form and if it makes more sense than creating a mobile or responsive site.
While creating a mobile or responsive site is a critical step for your business, there are a number of factors to consider before deciding on the right design. Learn as much as you can about mobile site and responsive site design, and don’t be afraid to experiment. Whether you decide to build a mobile or responsive site, ensure it creates a user experience that will keep visitors coming back!
1. Polacek, John. “What The Heck Is Responsive Design?” Retrieved March 15, 2013. ( http://johnpolacek.github.com/scrolldeck.js/decks/responsive/ ).