Smartphone and tablet adoption is accelerating worldwide, and it can be expected that mobile commerce (m-commerce ^[1]) sales will also be greater in the years to come, with more retailers interested in building  mobile sites to reap additional profits.

Mobile website design is complicated, since one mobile version of a site may not be compatible with every device. The designers have to be aware of best design practices to make your mobile presence meaningful and worthwhile.

There is a continuous debate among Web developers about which way of creating a mobile-optimized website is the best. There are three leading methods for developing a mobile website.

These are:

• Responsive Web design.
• Dedicated mobile websites.
• RESS: Server-side programming renders CSS and HTML, depending on the type of device.

Each method has its pros and cons. A Web developer has to be aware of each technique to implement the best one for the situation.

3 Ways to Design a Mobile Website

Responsive Web Design (RWD)

RWD relies on CSS3 media queries to align the layout of a webpage with the size of the viewing area of a device. The same HTML code is used to present different webpage layouts for tablets, mobile devices, desktops and other gadgets.

Benefits:

• Your website will have similar content and HTML mark-up, so mobile visitors will have the same experience, no matter what kind of device they are using.
• A single URL makes it easier for users to link to and share content. (If the webpage is available under more than one URL address, users can become confused.)

Drawbacks:

It is not possible to separately optimize mobile content. Therefore, a designer using RWD cannot tailor content separately for mobile users.

According to January 2013 data from HTTP archive, an average webpage is about 1.3 MB. However, most RWD sites are comparatively larger. This larger size decreases the performance of  mobile sites, making them slower.

Mobile users are more attuned to mobile-specific user interface design patterns. Moreover, mobile users are accustomed to multi-tasking. Unless the navigation structure is customized for specific devices, users can face problems when trying to accomplish several tasks simultaneously.

Dedicated Mobile Sites

This method improves the experience of mobile users by creating an entirely separate website.

Benefits:

• Simplicity of management: Separate changes are required for mobile and desktop sites. The changes made are limited to each respective version. This means changes meant for the mobile platform cannot be accessed from desktop.
• As you are developing a mobile-specific website, it becomes easier to streamline and optimize it specifically for that audience.
• Content and navigation structure can be customized for mobile users.

Drawbacks:

Sharing a webpage via social media becomes more difficult, since with dedicated mobile sites there are multiple URLs for pages. When desktop users click on mobile URLs shared on social media platforms, they may inadvertently receive the mobile version of the site rather than the desktop version.

In order to avoid duplicate content issues, the Web developer has to use rel=”alternative” and rel=”canonical” meta tags. If a mobile user searches Google and clicks on a desktop URL, the user will either view the desktop version or will be redirected to the mobile version of the webpage. If the mobile version does not exist, the user will receive an error message.

Creating a totally different website for mobile users means that the site will be tailored specifically for mobile users. However, to fulfill that purpose, Web developers have to cut out functionality and content, which turns out to be a nightmare for them.

Responsive Web Design+ Server Side Components (RESS)

This method depends on server-side programming to provide custom HTML and CSS for different devices. The code for mobile users will be different from that of desktop users.

The main objective behind this implementation is to improve the website’s performance. This method works well when combined with responsive Web design. Therefore, this implementation can be referred to as Responsive Web Design+ server side components (RESS).

Benefits:

• The navigation structure can be customized for different tasks performed by desktop and mobile users.
• Developers can remove page elements from HTML and CSS to achieve the desired display.
• It is possible to remove unnecessary JavaScript from HTML, which frees up the CPU resources, memory and cache of mobile devices.

Drawbacks:

• Dynamic HTML increases the load on the server.
• Device detection cannot be relied upon.
• HTML and CSS are optimized for mobile performance. Desktop version uses more HTTP requests and Java Scripts.

Which Method to Choose?

The decision to design a mobile-optimized site depends on the products you sell, your target audience, the investment required, your competition, conversion rates, etc. The design method that will work best depends largely on screen formats, operating systems, browsers and resolutions.

Most responsive Web design sites are not implemented optimally and as a result, these sites take more time to load. Since competition is fierce, you may lose customers if your site performs more slowly. A user will simply switch to another website that takes less time to open. Although it is possible to create websites with shorter load times with dedicated mobile sites, there are various drawbacks attached to this implementation, too.

RESS provides benefits of RWD overcoming its two main drawbacks. The main disadvantage of RESS is that device detection is unreliable. You have to test frequently for new devices to ensure that the process continues to work properly.

There are services like DeviceAtlas, WURFL and others that can detect new devices. It will be a great help to update new devices in your database.

Mobile Web design is successful only when a website is displayed properly on a mobile device. Although it’s a daunting task for designers to represent all the essential parts of a desktop site in a small, mobile window, every day new techniques emerge to make  mobile websites better, faster and more fully-featured.

Mobile Website ^[2] Photo via Shutterstock