The Challenge of the Mobile Web

The explosion in adoption of mobile devices—ranging from smartphones and tablets to newly emerging gadgets such as Internet watches—has fundamentally changed how visitors and customers consume and interact with our Web sites. We are living in a multichannel era of engagement. Based on current adoption rates, traditional desktop use of the Internet will be eclipsed by mobile devices by the end of 2013.

This transformation gives Web designers and developers much to consider, including network performance, form factor and screen resolution, and overall usability. Web content and experience managers everywhere are working diligently to plan and execute changes to their Web sites to accommodate this important and fast-moving evolution.

One of the technical questions that needs to be answered is how to tackle these challenges. There are three fundamental approaches:

• using responsive design techniques based on entirely front-end Web technologies such as JavaScript and CSS;
• using adaptive design techniques based on specific templates tailored for different digital online channels and device families; and
• creating an alternative site for mobile devices (typically the m.subdomain pattern is used)

This essay will explain and address both responsive and adaptive design techniques to help you make an informed choice that best works for your organization. It will not cover the alternative site option in detail. An alternative site is generally deployed as a stopgap solution that, while conceptually straightforward, has many drawbacks, ranging from lack of search engine optimization and consistent user experience to content and deployment complexity issues.

What issues do we face when dealing with multichannel?

A wide range of network performance profiles. Broadband is fast, while, by comparison, 4G and 3G networks are slow.

Cost to the end user. Typical home and office broadband use is "free" to users, but users are metered and pay for every bit they download on mobile devices.

Screen resolution and size. An extremely wide range of mobile devices is available to the public, each with its own unique screen form factor and resolution.

Basic usability. Typical mobile devices present content on smaller screens. Text and buttons that are left unaltered are hard to read or interact with via fingers.

Feature gap. Gestures are natural and intuitive on smartphones and tablets but not on traditional desktops.

Intention gap. When users access our sites via smartphones and tablets, they often want to do different things than when they are on their desktops. Users interact with their mobile devices on the go, in the context of what they are doing. They are not visiting to browse. They are visiting to interact.

What is responsive Web design?

Responsive Web design techniques use front-end technologies, such as JavaScript and CSS, to detect the agent and size of the view port (screen) and then alter the Web page to make it display properly for the user. Displaying properly means hiding, showing, shrinking, and growing elements to render a usable experience for the visitor.

What is adaptive Web design?

Adaptive Web design has many of the same objectives as responsive Web design, but uses server-side technology, namely channel-specific design templates, to accomplish its goals. The main difference is that with adaptive design, you have an element of server involvement; that is, you can send channel-specific responses to the device. This ranges from a subset of content specifically intended and targeted to the device, which cuts down on data transfer time and cost, to entirely unique experiences for a given channel.

Which approach is better?

When we use responsive design techniques, we cut down on development time and limit the amount of code artifacts we maintain. However, we also end up transferring much more data to users than they need. Users pay and wait for every bit transferred. On a mobile device, a user is even more likely to abandon slow and heavy pages because they cost both time and money.

When we use adaptive design techniques, we can offer the user an optimal experience with a minimal amount of data transferred and a targeted, device-specific user experience. However, the traditional screen, smartphone, and tablet space have little to no standardization, and if we're not careful, this can quickly multiply the number of templates we're maintaining beyond what is manageable.

What to do about it? Use them both together!

It turns out that responsive design techniques and adaptive design techniques are not mutually exclusive. They can coexist beautifully, providing the users of our Web properties with an optimal experience while helping us to right-size the amount of code and content we have to manage.

Be sure your Web CMS solution offers this flexibility. For example, our company's CMS allows you to map any number of online channels and devices to a template group. Instead of mapping the iPhone, iPad, and the Galaxy each to their own template, you would map the iPhone and the Galaxy to a single small template and the iPad and other tablets to a single medium template group. Cluster your mappings by form factor and experience.

Not every device in the mapping is going to fit perfectly. As mentioned, each device has a different sized view port. This is where responsive design shines. You use the template to send the device the appropriate amount of data for the approximate form factor and experience and allow the client device (via responsive design techniques) to fill in the differences.

---

Russ Danner is vice president of products at Crafter Software, and is responsible for product management, product development, and support, as well as client and partner success. He has more than 15 years of experience with software architecture, design, and implementation.

---

Related Articles

All-New Adobe Target Simplifies Testing and Targeting

Adobe Marketing Cloud extends Web and mobile optimization capabilities to marketers across organizations.

Really Simple Systems Updates CRM Offering

New version will run seamlessly across desktops, tablets, and smartphones.

OpenText Unveils Web Experience Management Solution

OpenText WEM empowers businesses to offer omni-channel experiences to improve online sales and customer loyalty.

Responsive Design for Enterprise Web Sites

The basics, benefits, and pitfalls to consider.