Feature
Site managers and marketers everywhere are challenged by the tidal wave of mobile devices currently in circulation.
How do you deliver consistent, high quality digital experiences across desktop and mobile channels? This article recaps our recent Mobile Customer Experience webinar and includes a full video recording of the event. Dive on in.
As detailed in CMSWire's May 11 webinar, "Optimizing Mobile Customer Experience with Responsive Design," web and marketing managers can use the principles of responsive design to create fluid digital experiences that automatically scale and optimize to best fit the specifications of any viewing device.
The event featured presentations from Giovanni Calabro, VP of Design, Siteworx, Matt Fiore, Principal Designer, Siteworx, and Kevin Stakem, Technical Director, Siteworx.
Adaptive Digital Experiences
Calabro began by describing responsive design as “something that’s not new, but funny enough, is.” After reviewing the website design challenges posed by the proliferation of viewing devices described above, Calabro offered a few statistics that indicate this proliferation will only continue:
- By 2014, mobile traffic to websites will exceed desktop traffic.
- By 2015, 81% of US cell phone users will have smartphones (Goldman-Sachs, 2011).
- 86% of mobile Internet users use their mobile device while watching TV, with 37% of those browsing the Internet for non-TV-related material (Yahoo, 2011).
- InsightExpress found that 43% of mobile Internet access occurs at home.
Fiore then opened his remarks by explaining the concept of responsive design as “a way of creating a digital experience that adapts to seamlessly deliver content suited to the device context of a user’s screen size, operating system or orientation.”
In responsive design, site layout adapts to multiple screen sizes and morphs, changes and rearranges content in a way that is optimal for device resolution.
Sizing Up Responsive Design
Responsive design involves designing a site at different “break points,” or standard screen sizes, that allow designers to accommodate many different devices at once.
As demonstrated in the following graph, Fiore said in some projects Siteworx has used break points of 320 px (smaller smartphones), 600 px (larger smartphones and smaller tablets), 768 px (mid-sized tablets), and 1024 px (the largest tablets, as well as laptops and desktops), although break points should be chosen on a “case by case basis”, in accordance with your specific project and audience.
Calabro compared this model to the development model that would have been used a few years ago, with design for one or two pixel sizes and separate development teams looking at the business needs and brand messaging of sites at each pixel size separately, without much communication.
“Many times you’d get a loss of valuable data and messaging, not thinking through how someone might use a phone differently from a tablet or a desktop,” he said.
In addition, Calabro said this approach did not take wrinkles caused by new devices getting released into account. “When the Kindle came out, the resolution was just off enough from what we were used to with the iPad that it wasn’t a scramble, but there was head scratching.”
One Codebase, Flexible Grids
Instead of designing for a specific device, responsive design best practices dictate that you should plan to scale your digital experiences for a range of screen sizes, focusing on the smallest screen first and drawing from a single codebase.
As Fiore explained, a responsive strategy tailors content to a range of screen sizes using a flexible grid system that allows content to contract and expand based on a particular device’s resolution.
He gave the Boston Globe site as a good example of a site developed using responsive design, using “device-agnostic” design elements to deliver the richest user experience regardless of device.
Calabro pointed out that the Boston Globe site is also a good example of how even an enterprise site with a large amount of constantly changing content can effectively use the principles of responsive design to provide an optimal user experience regardless of viewing device.
ROI on Responsive Design comes in part from a single team with a single code base.
Learning Opportunities
Webinar
Jun
6
The Future of Social Media: Emerging Trends and How to Stay Ahead of the Curve
The impact of emerging technologies like AI on social media
Webinar
Jun
7
The Building Blocks of Personalization
This webinar will explore how personalization can create powerful ecommerce shopping experience.
Webinar
Jun
8
Attracting—and Keeping—Your High-Net-Worth Investors
Join PwC to dissect their recent survey findings on a specific customer subset — high-net-worth investors.
Webinar
Jun
13
The Future of Contact Centers with AI at the Helm
Learn how to balance human intuition and interaction with the potential uses of AI to create delightful and lasting CX
Webinar
Jun
13
Learn How to Deliver Dynamic Video Experiences at Scale
Learn how to convert existing assets into video experiences in near real-time.
Webinar
Jun
20
3 Steps to Unlock Your Customer Data and Drive Revenue
Discover how Twilio Segment’s #1 Customer Data Platform helps implement data-driven strategies.
Responsive design is based on the strategy of using only one codebase, one content platform and one URL to manage user experience across all devices.
Fiore explained that having a single URL provides enormous benefits from the perspective of analyzing and monitoring traffic and from achieving high SEO rankings. In addition, developing different sites for different applications requires different skillsets and codebases, which Fiore said becomes a “bear” to manage.
“Codebase should be important to you as a marketer,” commented Calabro. With device-specific codebases he said if a change needs to be made in messaging, it could involve going into each codebase and altering the code numerous times, as opposed to making the changes for all devices “in one clip.”
Responsive Design: The Methodology
Calabro emphasized that responsive design is not an added feature, but a methodology that begins with how teams are put together and requires constant changes and learning, and also does not involve creating device-specific sites.
“You can start with one breakpoint, but you can’t call that site responsive,” he said. In addition, he said companies can try to retrofit existing device-specific sites to the responsive methodology, but cannot start a new project by developing many device-specific sites and then going back to make them responsive. And responsive design does not totally eliminate the need for some native apps.
ROI and Your Mobile Strategy
During the webinar we looked at several ways a responsive design strategy offered significant return on investment.
Primary ROI factors include:
- Enhanced SEO deriving from a single URL for content and services
- Faster response times due to a single URL for all devices
- Reduced development and change management complexity due to a single code base
- Faster time to market due to a single code base and unified team
- Faster iterations due to a single, integrated team sharing knowledge and skills across channels
- More robust and engaging cross-channel experiences due to a unified planning and execution team structure
The concept of “mobile first” design is gaining traction throughout the world of content management, and Fiore said it is also the best concept for responsive design.
“We usually say it’s optimal to start at a mobile breakpoint first and get your prioritization of content right, and then progressively enhance for more features in the layout of content as you travel up in size,” he said. This helps developers determine what content is core and absolutely necessary at the outset of development.
“This does infer you have people working together upfront in a way they normally don’t,” said Calabro. “You’re getting a lot of minds in that room that understand the limitations of the system and understand the business together.”
Getting Started: Is Mobile Really First?
To get started on responsive design, Calabro said companies should first identify which devices drive positive results. This may mean that some companies should not adopt a “mobile first” strategy.
The best advice is to analyze and set device/channel priorities, think about your content strategy upfront and organize a collaborative, integrated team that can work together on delivering intelligent customer experiences.
To obtain more details on any topics addressed by the speakers or during the audience Q&A session, check out the full webinar recording:
