Designing for digital needs to be responsive
June 1, 2015
By Stanley Schwartz
Managing Editor | Publishers’ Auxiliary
Mobile devices are extremely important to a majority of Americans, said Linda West with Act-on Software Inc. “Everyone walks around with smart phones,” she added. “As a consumer, it affects how we deal with friends” and other aspects of our lives.
How information is displayed on a website or mobile device can determine how much, if any, of it reaches the intended audience. West spoke during a webinar on responsive design, hosted by The Association of Strategic Marketing.
She said that 51 percent of e-mails are opened on mobile devices. Another 31 percent are opened as Web mail, and 18 percent are opened on desktops. She also noted that 17 percent of global Web traffic is on mobile devices.
Mobile devices also account for:
• 12% of Americans’ media consumption.
• 23% of paid search clicks.
• 15% of total e-commerce sales this year.
• 39% of mobile users access social networks from their phones.
“We have a new task,” she said. “Manage brand experience across variety of devices. And good design will have an impact on this,” especially if what you’re sending out is digital. People will be interacting with you from a variety of devices.
What may be easy to read on a desktop might not be so easy to read on a mobile device, she noted.
“Type or graphics can be too small,” she said. “It can be a horrible experience for the users.” West suggested designing programs with multiple screens in mind. Make videos mobile friendly for most devices and use larger text, with click-through buttons.
“It makes it a much better experience for the user,” West said. And there would be fewer barriers for the mobile user, increasing engagement. Her company saw a 93 percent increase in sales-ready leads, and its lead generation doubled using this approach.
She noted that in a study by eMarketer.com only 42 percent of worldwide marketers use responsive design for mobile devices. And the same is true for website landing pages.
She quoted Google, stating, “Google recommends webmasters follow the industry best practice of using responsive Web design, namely, serving the same html for all devices and using only CSS media queries to decide the rendering on each device.”
West said there are three must haves when developing responsive design.
Establish goals. It’s a collaborative process developing smart copy and compelling design. It’s important to understand who the typical visitor is to one’s website and what his or her motives are for visiting. You should also know the key concepts that need to be communicated. What do you want visitors to know? You should also have primary and secondary calls to action.
Prioritize content. The content size and color can have an impact on which pieces are most crucial. It’s important to know at every phase where everything is supposed to go, especially when thinking about smaller screens on mobile devices.
Distill content. Cut it down to what’s most important for quick loading functionality. Don’t be afraid to cut the fluff. Use digestible chunks. Make it so that it flows into modular design. Use videos and info-graphics to break up pages.
Mobile phone users are used to scrolling, West said, so by putting the main concepts on your website into vertical chunks, it adds to the depth of the story. And then when it moves to a mobile device, it maintains the hierarchy.
She also said there are some things designers should consider.
Adapt to more fluid development process. Technology development is no longer linear. It’s much more interdependent. A cyclical approach is necessary. Conduct cross-disciplinary meetings, which allow design to evolve as the process moves along. Don’t be inflexible. Use feedback. Don’t be a stick in the mud. Don’t be afraid to change copy to fit, or change design to make it look better.
Do not underestimate development time. Plan for 30 percent more time. If you are doing this on your own, coding is going to take longer; it’s the same with writing copy.
Don’t underestimate total cost, especially when dealing with an outside agency. Costs will be about 30 percent more, too. If doing this internally, budget more time. There will be a bigger upfront investment, but less maintenance cost over time.
Best Practices for Design
Make buttons larger for big thumbs. Make text big, too. And don’t forget to use white space, West said. Forget the fold. The expectation on what’s above the fold has changed because users are comfortable with scrolling. Font size should be between 12-18 points, but it depends on the font you’re using. People want it to be readable.
Breakpoints tell devices how to display certain items, she said. There are key ones for differing phones:
• 480 px for older, smaller smartphone screens.
• 768 px for larger smartphones and smaller tablets.
• 768 px for everything bigger, such as large tablet screens and desktop screens.
Other important breakpoints:
• 320 px for older small, low-res phones.
• 1024 px for wide screens on desktops.
Consider mobile-first approach
She said companies should consider going with a mobile-first approach.
“Keep it simple and start small. It will help you prioritize your content and make it more attractive to readers.
“You don’t want people thinking your mobile design content is an afterthought. It forces copy writers and designers to think ahead.”
“Mobile users are rushed and on the go. That is not true,” she said. People use their phones for everything and get frustrated if they don’t have the same functionality as their computers, so it’s important to have good functionality.
Open source framework for e-mails and websites
If you want to send responsive e-mails, she said the majority of recipients use either Outlook or Gmail platforms. There are e-mail templates one can use on Litmus. (bit.ly/7templates)
Other free things
Adaptive images: Detects screen size and sends resized images in html (adaptive-images.com).
GZIP: Allows compression of page resources for easier transmission across networks.
Smush.it: For image optimization. It eliminates unnecessary bytes to speed up your site.
Testing tool: mattkersley.com/responsive.
Test everything before live implementation.
Open source software
Follow Linda West @misslindawest