Do you optimize your marketing content for mobile devices? Most likely, you’re at least providing your content for smartphones and that’s great. . .but smartphone layouts aren’t exactly one-size-fits-all. Plus, what about tablets, “phablets,” TVs, game consoles, even wearables?
Here are some eye-opening statistics (from Smart Insights):
• Within three years, mobile will take over desktop internet usage.
• Of the world’s 4 billion mobile phones in use, 27% are smart phones.
• More than 20% of Google searches are being performed on mobile devices.
• ALREADY, 30% of emails are opened using a mobile device.
How on earth can you make all your content work properly on any device? Is that even possible?
The answer is yes, with the concept of Responsive Web Design.
Better viewer experiences lead to conversions
Responsive design is a method in which the layout of pages changes based on the functionality and size of the device that is being used to view it. Using this concept, you can create emails and landing pages/websites using a flexible and fluid layout that can easily adapt to different screen resolutions and devices, including mobile devices. As a result, you can deliver a much better viewer experience, which in turn leads to greater lead responsiveness and conversion.
Until recently, “optimizing for mobile” meant you had to create separate content: one design for desktop and another one for mobile. A “sniffer” determined what device was being used and then sent the viewer to a completely different website. If anything went wrong, forms wouldn’t work, links weren’t coming in, images were off-kilter.
Thanks to the introduction of CSS3, we are now able to deliver content to each device that is laid out specifically to fit the characteristics of that device. Essentially, we are enabling our content to adapt to its environment, instead of having to provide altered content for different devices. Now the user gets the same experience no matter what device is being used. In addition to delivering a smooth, effective viewing experience, this streamlined, flexible approach eliminates duplicated efforts—and the errors that tend to creep in when content has to be recreated for different layouts.
Responsive design also helps with search engine optimization. Where previously you had separate web pages that search engines had to track, now the search engines are seeing a single page that can be delivered to answer every query.
The three elements of responsive design
Responsive design can be broken down into three technical elements:
• Relative sizing
• Flexible images
• Media queries
Relative sizing
How often have you seen a web page’s text render in obviously erroneous sizes or locations—or not render at all? That’s because conventional web design used the pixel (px) for determining text sizes for certain layouts and positions, and different devices render pixels differently. It’s not uncommon for something to render as one px in one browser and five px in another.
The responsive design approach to font scaling uses the em, which is a true typographic unit that has been around for many, many years: since at least the 13th century, according to Merriam-Webster. I guess that makes it time-tested for success! Basically, 1 em equals the size in pixels that is defined in the CSS rule font-size (16px is a common example), and ems are resizeable in all browsers. Using this approach makes it much easier to maintain your site’s text and ensure that it will render correctly anywhere it is viewed.
Here’s a handy chart and calculator for easy conversion from PX to EM: http://pxtoem.com/
Note: You can also use percentages for font size—but it’s best to pick one or the other and stick with it sitewide.
Flexible (or fluid) images
Image size in responsive design works via percentages, which are resizable units. Instead of setting image size in pixels, you set a percentage, based on the original aspect ratio, that tells the browser how to enlarge or reduce the size of the image. This approach maintains the integrity of the original image on different devices.
Points to consider:
• Move away from adding the fixed width and height in the image tag
• With a single line of CSS img {max-width: 100%;}, you will ensure that an image won’t exceed the width of its container
• Because images are sized using percentages, they scale with the browser window
• Images can also be hidden for smaller screens
Media queries
Responsive design is a current buzzword in part because of the increase in attention to device usability. Companies are losing conversions because their media doesn’t adapt to the devices that people are increasingly using to view them: for example, a form that cannot be filled out on a lead’s iPhone. Media types have been the conventional way of handling device rendering for a while. But media queries offer much greater potential for improving the response of websites by designing for the specific characteristics of devices—like resolution and orientation—rather than just for categories of devices. This approach helps to increase accessibility, so people have a better experience viewing and interacting with the material.
Here are sample media queries to detect different media devices/resolutions:
<style type=”text/css”>
/* tablet media styles */
@media only screen and (min-width: 501px) and (max-width: 800px) {…}
/* mobile media styles */
@media only screen and (min-width: 50px) and (max-width: 500px) {…} </style>
For more on media queries in responsive design, check out http://www.w3.org/TR/css3-mediaqueries/.
A couple of caveats
Like most things in life, responsive design isn’t perfect. Even with careful layout, you’ll still experience breakpoints; for example, with content of two or three columns, you’ll have to start shifting or layering content so it flows vertically. And responsive design absolutely helps ease the difficulty of different browsers across all phones and so on—EXCEPT Android’s Google App, which does not render responsive design because it doesn’t read media queries in CSS. So you’ll certainly see a few hiccups here and there, but for the most part, you can depend on a much better user experience.
Make the move right now
Unlike a lot of marketing automation projects, responsive design is something you can start doing right now, on your very next web page or marketing email, to make a big difference. It’s just a matter of eliminating the step of developing a mobile landing page, and designing your one page responsively instead. Start with simple layout, and then move toward more complex design with more images and content areas.
And, of course, DemandGen is here to help! Contact us to discuss a responsive design project.
Micheline Farah, a DemandGen Marketing Automation Consultant, has an extensive background in digital marketing, including experience in lead generation, lead form conversions, lead nurturing, campaign tracking, web analytics, and Google Adwords. She helps marketers build highly effective systems for generating successful and repeatable campaigns.
The post Responsive Design: Delivering Content That Fits On Every Device appeared first on DemandGen.