Visual Experience

How to Make Sure That All Devices Have the Best Visual Experiences

Open your website’s page with the highest conversion rates on three different devices: mobile, tablet, and desktop.

Do it, really. Let me wait.

Does your content appear as you had hoped it would?

It doesn’t, as many marketers will discover. Unsatisfactory are the user experience and messaging consistency. It can be downright horrible at times.

What brought you here? After all, publishing content requires a significant investment from your business. By utilising the COPE (create once, publish everywhere) strategy, you can even make the most of those content resources.

And it might be an error.

Be positive, my content marketer friend. I’m here to assist with a SAM modification. ion – COPE-M

Learn why COPE-M is required.

When using the conventional COPE approach, you upload a single content piece (such as a definition, image, or description), and the CMS pulls (rather than pastes) that content into various outputs. Your repository is affected when you update the original content.

COPE content is sophisticated as a content strategy. It works well. It is sensible. Your investments in unique content are amortised and your content is reused more often. It is compatible with audio, video, and text.

But COPE won’t solve all of your content publishing problems. While images shrink down for your devices, modern browsers reflow your text. An image that looks fantastic on a desktop computer might not be recognizable on a mobile device.

Although COPE is a fantastic place to start, image control requires a more complex strategy. Create once, publish everywhere is what I refer to as COPE-M. The transition from a decent user experience to a terrific one may be made possible through COPE-M.

Your user experience may be improved, consistency can be increased, and your search engine optimization (SEO) can be enhanced with updated content if you adopt a COPE-M approach to your content publishing strategy.

COPE and images may not always get along.

Since Daniel Jacobson introduced the idea and technical methodology behind this content reuse strategy in 2009, a lot has changed. Despite the fact that material is now spread across a variety of device types, COPE is still a sound idea. More formats of content are consumed by audiences.

Images have an issue when single-sourced text is viewed in different browsers, but it still works for text. Text’s look can be separated from it. The appearance of text, including font sizes and column widths, can be changed without affecting the original source thanks to cascading style sheets.

Pictures are less changeable. The appearance of rendered visuals (such as JPEG or PNG files) cannot be isolated from them. There are times when a single source’s one size does not fit all. Even if an infographic looks great on a PC, it could be difficult to read on an iPhone. The viewer has to pinch, zoom, squint, and complain in order to see it.

Select the photos to be multi sourced.

You must think about when to COPE and when not to COPE with your photographs until content management systems are smart enough to automatically provide perfect viewing experiences for every image on every device.

Returning to my initial request, please open your best-converting page and check how it looks on various devices. Apply this principle to your website’s other crucial pages and graphics. They’ve presumably already been assigned tags in your analytics programme.

Tip: Focus only on pages that receive a sizable portion of their traffic from mobile devices.

Test the chosen pages on various devices to determine which images to multisource. Take a designer, content strategist, or user experience expert and a stack of devices. Think like your audience when loading your content. Add the image to a list of images that should be multisourced if it appears compressed.

Don’t only check to see if the image appears, as a tip. Examine it closely to see how it appears. COPE is most likely not the best approach if the user needs to pinch and zoom to see the entire image.

All content-related departments, such as content strategy, design, content engineering, and user experience, should be informed of the findings, as they should be aware of how your website’s images load.

planning for several screens

It can be beneficial to upload many images and specify to the system which breakpoint to utilise for each one because an image must be compressed on the high and low ends to fit a mobile device screen.

A breakpoint is the point at which the system switches from one image to one that is more appropriate for the viewing device. Because users can scroll vertically indefinitely but cannot enlarge the screen, breakpoints are dictated by the width of the device.

Three different breakpoints are shown in this illustration: 320 pixels for a cell phone, 720 pixels for a tablet or big phone, and 1,024 pixels for a laptop.

On a smaller screen, this image might become unreadable if it were a chart or infographic. You should therefore make a special effort to source several photos. The term “responsive art direction” describes this method. It’s a browser hack that gives you a little more control over how your viewers see the photos.

Here’s how it functions with the first illustration. This time, I made separate images for the 800, 400, and 200 pixel sizes. Their faces are around the same size when they are published.

One daughter is sitting on the steps with our dog in the 800-pixel horizontal version, while the other is standing along the railing with a view of the neighborhood in the backdrop. The dog is seated next to one of the girls on the steps in the 400-pixel vertical version, and both rails are visible. Each daughter and the dog have their own step in the 200-pixel vertical version, but only one railing is visible.

This strategy is not COPE. It is a minor component of COPE-M. I gave myself three times as much work to do. Because of this, you should restrict this time-consuming labour to just the crucial converting content.

Put COPE-M to work for your company.

Numerous outputs of a single image in various sizes and ratios can be produced by the majority of digital asset management (DAM) systems. For the best results across all screen sizes, crop the images if you are unable to retake them. Don’t expect your designers or developers to redesign each and every image on your website because it might be a lot of work. Aim for impact.

Consult your SEO experts before employing the multi-image strategy if SEO is a major priority. Websites that don’t offer the exact same experience on desktop and mobile could be penalised by Google’s algorithm. Even though you are giving humans a better experience, a Google crawler might not be aware of this just yet. Of course, Google will welcome it if more people find your page worthwhile as a result of a better image experience.