Gordon Choi

Author of the Mobile Website Book

User Tools

Site Tools


implement_mobile_website_strategies

Implement Mobile Website Strategies

Part Two Chapter 05

When developing your website for both mobile and desktop screens, you must choose a strategy. The three most common mobile website strategies are:

  • Responsive Design
  • Separate Mobile Website
  • Dynamic Serving

In short, the three mobile website strategies differ in:

  • The number of URL sets your website will use.
  • The number of HTML code sets you will have to maintain for your website.
StrategyOne Set of URLsOne Set of HTML Codes
Responsive DesignYesYes
Separate Mobile WebsiteNoNo
Dynamic ServingYesNo

Responsive Design

Responsive web design is a mobile website strategy in which your web server always sends the same set of HTML codes to web browsers (of all devices) requesting your web pages. Your website's CSS is used to alter the rendering of the web page depending on the screen width of the specific device.

Whether a user visits your website on a desktop device or a mobile device, your website's URLs always stay the same. For example, when your website's homepage is displayed on a desktop screen:

www.example.com - desktop

When your website's homepage is shown on a mobile screen:

www.example.com - mobile

Configure Viewport

For a website with responsive design strategy to work, the prerequisite is to configure the viewport.

<meta name="viewport" content="width=device-width, initial-scale=1">

Examples

For example, both sites are using responsive design, and the web pages work on both mobile and desktop devices.

www.mobilewebsitebook.com
www.analyticsbook.org

Advantages

  • Going forward, you will only have to maintain a single set of web page codes.
  • You provide a single URL for a piece of content for both desktop and mobile users, but the layout of your web pages will self adjust depending on screen width (i.e. mobile or desktop screens).

Disadvantages

  • In order to have your web pages self adjust depending on different screen widths, you will need to have carefully designed CSS.
  • Mobile users visiting your site may have to download the full-size images and files that are for desktop screens, and download the size-reduced images and files for mobile screens. This often ends up with increasing page load time while reducing web performance.

Separate Mobile Website

With separate mobile website strategy, your website uses two different URLs for mobile and desktop websites. i.e. One set of URLs for your mobile website, and another set of URLs for your desktop website.

Examples

For example, the homepage URLs of your websites:

www.example.com - desktop
m.example.com - mobile

For example, a page that displays a list of hotel of a specific city (e.g. Shanghai):

www.example.com/shanghai-hotels/ - desktop
m.example.com/shanghai-hotels/ - mobile

For example, a page that shows information of a specific hotel:

www.example.com/shanghai-hongqiao-number-one-hotel/ - desktop
m.example.com/shanghai-hongquao-number-one-hotel/ - mobile

For example, a sitemap page has links pointing to all other pages of the website:

www.example.com/sitemap/ - desktop
m.example.com/sitemap/ - mobile

For example, the forum homepage of the website:

www.example.com/forum/ - desktop
m.example.com/forum/ - mobile

Codes for Search Engines

According to Google, you can allow Google's organic search algorithm to better understand the structure of your separate mobile website by adding codes. For example, on the desktop version of your homepage you should include:

<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/">

On the mobile version of your homepage you should include:

<link rel="canonical" href="http://www.example.com/">

You should add similar codes to match both versions of all the pages of your website. For example, on the desktop version of your list page you should include:

<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/shanghai-hotels/">

On the mobile version of your list you should include:

<link rel="canonical" href="http://www.example.com/shanghai-hotels/">

Advantages

  • Each website will have a distinct set of HTML codes and CSS that are device optimized (for user experience).
  • When you have two separate sets of codes, you can improve web performance (i.e. speed) with device-specific optimized codes (without negatively affecting the other version).

Disadvantages

  • Budget, development and maintenance will be more demanding as you always have to work with two sets of codes for your websites.
  • For marketing, you can use a standalone set of mobile URLs for marketing or promotion to mobile users.

Dynamic Serving

With dynamic serving, your website renders different sets of HTML codes to mobile users and desktop users through a single set of URLs, depending on the user agent requesting the web page.

Whether a user visits your website on a desktop device or a mobile device, your website's URLs always stay the same. For example, when your website's homepage is displayed on a desktop screen:

www.example.com - desktop

When your website's homepage is shown on a mobile screen:

www.example.com - mobile

Vary HTTP Header

The prerequisite for dynamic serving to work is to configure the Vary HTTP header. The Vary HTTP header is part of the web server's response to a request, such as:

GET /page-1 HTTP/1.1
Host: www.example.com
(...rest of HTTP request headers...)

HTTP/1.1 200 OK
Content-Type: text/html
Vary: User-Agent
Content-Length: 5710
(... rest of HTTP response headers...)

The Vary HTTP header informs the web browser that the contents of the response will vary depending on the user agent that requests the web page.

Advantages

  • You only have to maintain a single set of URLs for both mobile and desktop versions of your websites.
  • You have two separate sets of codes, and can improve web performance (i.e. speed) with device-specific optimized codes (without negatively affecting the other version).
  • A mobile user visiting your web page is only required to download the size-reduced images and files that are optimized for mobile screens/devices. This user doesn't have to download the other set of files that are optimized for desktop screens/devices.

Disadvantages

  • You will have to maintain two different sets of HTML codes, CSS, JavaScript, etc, that are device-specific.
  • For dynamic serving to work, you will have to configure Vary HTTP header. The configuration of the Vary HTTP header is operating system (or environment) dependent (i.e. IIS, Apache, Nginx, etc). To maintain the Vary HTTP configuration, you will be required to update the Vary HTTP header information across all operating systems.


Gordon Choi's Mobile Website Book has been available since November 2016 and is proudly powered by Folks Analytics.

Thank you for reading! If you love my book, you're welcome to donate through Paypal.

implement_mobile_website_strategies.txt ยท Last modified: 2017/02/23 12:23 by Gordon Choi