The enormous adoption of mobile devices–ranging from smartphones and tablets to newly emerging gadgets such as Internet watches–has fundamentally changed how consumers interact with Web sites. As a result, marketers, Web designers and developers need to consider how this shift impacts their Web sites in numerous ways, including network performance, form factor, 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, ensuring that consumers can get the information they want, when they want it, and perform the actions they seek to perform.
There are three fundamental approaches to adapting Web sites for the mobile environment. The first is to create an alternative site for mobile devices. This is generally considered a stop-gap solution, one that is conceptually straightforward but brings with it drawbacks. These include a lack of SEO and consistent user experience, as well as content management and deployment complexity issues.
The second approach involves using responsive design techniques to optimize Web content for mobile. This approach employs "media queries" to determine the resolution of the end user’s device. Images and other objects are then sized correctly to fit the screen. Responsive design is based entirely on front-end Web technologies.
The third approach is to use adaptive design techniques, which are based on specific templates tailored for different digital online channels and device families. Server-side technologies power these techniques.
CMOs and IT teams must work through several issues before determining the approach best-suited to their needs. The first issue is network performance. Broadband is fast, while, in comparison, 4G and 3G networks are slow, which significantly impacts the user experience. In addition, typically home and office broadband use is "free" to users, whereas users are metered and pay for every bit they download on mobile devices.
Other issues that must be considered are screen resolution and size. Consumers can select from an extremely wide range of mobile devices, each with its own unique screen form factor and resolution. Usually mobile devices present content on smaller screens, and unmodified text and buttons are hard to read or interact with. Similarly, gestures that are natural and intuitive on smartphones and tablets are awkward on traditional desktops, and most Web sites have not been designed for those gestures.
Finally, users visiting a Web site via a smartphone or tablet naturally want to do different things with the content than if they are sitting at a desktop or laptop machine. 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.
As previously mentioned, responsive Web design techniques use front-end technologies to detect the agent and size of the viewport (screen) and then alter the Web page to make it display properly for the user. By display properly we mean: hiding, showing, shrinking, and growing elements to render a usable experience for the visitor. 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. With adaptive design 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.
Using responsive design techniques economizes development time and limits the amount of code that must be maintained. However, this approach transfers 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.
By using adaptive design techniques, marketers are able to provide users an optimal experience with a minimal amount of data transferred and a targeted, device-specific experience. However, the traditional screen, smartphone, and tablet space have little to no standardization, and this can quickly multiply the number of templates that must be maintained.
The good news is that responsive and adaptive design techniques are not mutually exclusive. They can co-exist beautifully, providing consumers with an optimal experience while right-sizing the amount of code and content that marketers and IT have to manage.
It’s important to ensure that the Web content management system solution provides this flexibility. The system should allow you to map any number of online channels and devices to a template group. For example, instead of mapping the iPhone, iPad, and Galaxy each to its own templates, you would map the iPhone and Galaxy to a single small template, and the iPad and other tablets to a single medium template group.
The Internet is becoming much more personal, and smart marketers are thinking about ways to ensure that their audiences are feeling the love. In the immersive, always-on Web 3.0 era, marketers need to be sure their content is reaching consumers wherever those consumers are. Marketers must adopt new, sophisticated Web experience management approaches that acknowledge the enormous shift users make when they use mobile devices--a shift from a stationary, broadcast model to a social, personalized model. This trend cannot be ignored.