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.