November 22, 2014

3 Ways to Design a Mobile Website for Your Business

design a mobile websiteSmartphone and tablet adoption is accelerating worldwide, and it can be expected that mobile commerce (m-commerce) 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 Photo via Shutterstock

15 Comments ▼

William Johnson


William Johnson William Johnson belongs to the most creative field of digital media, Web design. Currently he is obsessed with the latest trend in eCommerce development, online marketing, Magento eCommerce and lots more. He is an editor at Big Eye Deers.

15 Reactions

  1. Good advice here, but at this point in the market evolution, it makes far more sense to find a partner in the mobile space that can help you make the decision and actually build a site that produces results. We went to FiddleFly and they helped us decide on a specified mobile site and then built it for us and it looks awesome. [Edited by Editor]

    • Mobile website is fine. But did you get a responsive one that is compatible with any device? Don’t you think it is better to have one for even tablets or any other smart device that will launch in next 5 years or so? I personally prefer Responsive because it is the gen next one.

  2. Great tips. Right now I just have a WP blog plugin that automatically formats my blog for mobile browsers. It’s seems to be working great for me. I’m sure there may be additional things I can do to make it more user friendly; however, I believe it serves it’s purpose well for right now.

    Thanks for sharing your insight with us.

    Ti

    • Good to know that you have got a shortcut tool. Have you tested this on iPhone or Android or Windows platform?

      Could you please share the name of the plug in? I may test it on my blog. However, does the plug in work the same way for tablets or other smart devices with different screen size? If it is , then I must say you have got an excellent plug in and that too for free, I hope.

  3. We just went with a great design from MODassic Marketing of Dallas. It is a Responsive design and we are loving the look and feel. It is actually a custom WordPress design. They are a great company to work with, BTW.

  4. I prefer “responsive” due to the fact that clients will receive my news alerts fully responsive in their mobile email app. 99% of all smartphone users check their email on a mobile device nowadays. They love getting email they can read and then link over to the mobile website version to continue reading. It’s all starting to mobilize…

  5. Responsive Web Design is the way of the future for several reasons like: single website to maintain that adapts to all devices including mobile and tablets, todays internet users browse using mobile devices and they are no longer satisfied with being served only selected content but they want the whole deal just like when they are on desktops.
    Also the statement “It is not possible to separately optimize mobile content. Therefore, a designer using RWD cannot tailor content separately for mobile users.” is simply incorrect because I design and develop in Drupal and it is very possible do define contexts which will serve not only different content but also mobile friendly image sizes and even disable some website regions on mobile websites if that is the clients preference.

  6. Hello,

    In this post we have tried to make a clear distinction between RWD (in primary stage) and RESS (the latest one which most of us apply in real life). RWD sites with RESS don’t allow you to customise mobile content for different users. Usually RWD sites are large in size and they need server side help.

    • Just one change in my previous comment –
      RWD sites without RESS don’t allow you to customise mobile content for different users. Usually RWD sites are large in size and they need server side help.

  7. Hi there,

    Thanks for the informative post. Blogger has an option to render a blog for mobile viewing, in case you didn’t know. At the same time, the Opera Mini mobile browser is able to compress data into a single viewable page, so it might be a good idea to have a banner reminder on your website telling people to view your site on their mobiles via this browser.

    Alana

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



Compare your business to the industry - Try our new tool


X