Designing Your Mobile Website: Responsive Design vs. Separate Mobile Sites
Online transactions from desktop computers and laptops are still growing at double-digit rates, but not having a mobile website could start to erode your sales in the not-too-distant future. These recent statistics from ComScore show that you can't afford to be behind the curve on mobile:
- 1 in 10 e-commerce transactions takes place over a mobile device.
- Mobile transactions are growing at twice the rate of traditional online transactions.
- By the end of 2013, revenue from mobile sales could surpass $25 billion.
Mobile websites can be created as either a separate website or with responsive design. Each style has advantages and disadvantages.
What is Responsive Design?
A website that uses responsive design adjusts its appearance based on the device that your visitor is using. It displays one way on a desktop computer and another way on a smartphone. To create a responsive website from scratch, you'll need to know HTML5 and CSS3. Alternatively, you can utilize a content management system like WordPress or Drupal and then install a mobile plug-in.
Responsive websites require only one URL, so you don't have to worry about setting up redirects and connections to a desktop website. Also, when you update your content or change your design, you only have to publish the changes once. They'll automatically translate to your mobile customers, so shoppers get a consistent visual experience no matter what device they use. Most importantly, Google says that its search results usually favor responsive design over separate mobile sites.
A Few Disadvantages
The biggest concern related to responsive design is loading time. Research consistently demonstrates that customers navigate away from websites that take more than two seconds to load. You'll have to pull up your mobile website from time to time and verify that your loading time is up to speed. If it isn't, then you'll have to sacrifice some design elements from your desktop website to make your mobile website faster.
You may also have problems with responsive design if you depend on affiliate marketing revenue. Advertisements like banner ads are difficult to place on a responsively designed site. Therefore, if you choose responsive design, you'll have to weigh whether increased customer revenue will outpace your AdSense dollars.
What About Creating a Separate Mobile Site?
Unfortunately, separate mobile sites can create problems for SEO. Imagine this scenario: a customer shopping for a T-shirt clicks the link to your product page. Instead of redirecting to the mobile product page for the T-shirt, the customer is redirected to your mobile website home page. This error, called a "faulty redirect," can negatively affect rankings.
Smartphone-only errors can also hurt SEO. Some of these problems include:
- Serving up a 404 page to mobile users. A desktop view is better than an error page.
- Unplayable videos. Flash videos, for example, can't play on both iOS devices and on Android 4.1 or higher.
- Redirect loops. Googlebot-Mobile interprets your mobile website from the view of an iPhone 4. If Googlebot-Mobile is mistakenly directed to a feature phone version of your website, which then redirects Googlebot to your desktop website, then Google recognizes an infinite redirect loop error.
If you do choose a separate mobile site, then test it on different mobile devices to make sure that your customers get a good experience. In many cases, responsive design, in addition to being low-maintenance, delivers the best mobile experience for your customers. Regardless of which method you use, you need a mobile-friendly website. If you don't have one, then you may already be losing customers whether you realize it or not.