Delivering optimized media-rich content for mobile

How to deliver visually rich user experiences on mobile without dragging down page performance.

Originally Posted on on March 28, 2018

We all know the adage, “A picture is worth a thousand words,” meaning that a complex idea can be conveyed in just one image. The phrase was made popular nearly 100 years ago in an article about the power of images in advertisements, and the sentiment rings just as true in today’s always-on digital age. It’s been said that the human brain processes visual information 60,000 times faster than text, and research supports that images directly impact mood and invoke a variety of emotions.

This makes visual media, both images and video, a powerful tool full of marketing potential. According to YouAppi’s CMO Mobile Marketing Guide, 85 percent of digital marketers plan to boost their mobile marketing budget for videos in 2018 by 10 percent over 2017 levels. That’s to meet a marked surge of interest in videos, which are a superb medium for personalization and connections.

Source: YouAppi’s 2018 CMO Mobile Marketing Guide

During an interview in 2017, Pinterest CEO Ben Silberman said, “A lot of the future of search is going to be about pictures instead of keywords.” We aren’t quite there yet, but the visual web has changed the game. All signs point to continued growth in the use of media-rich content to engage digital consumers.

Mobile is king

Mobile reigns supreme in today’s digital world. More than half of the time we spend each day with digital media is done with our mobile devices, and 80 percent of all shoppers make purchases via smartphones, logging billions of transactions and revenue every month.

By 2019, mobile advertising is forecasted to represent 72 percent of all US online ads. Notably, smartphone owners often search while on mobile devices and are five times more likely to leave a mobile-unfriendly site. If you aren’t providing the best mobile experience possible, you are likely losing out to your competitors that are.

If media-rich content provides a powerful vector of communication with your target consumers, and you need to reach them on their platform of choice — their mobile device — the path forward is clear. You need to provide a media-rich, engaging experience, delivered seamlessly to their mobile device. Great! Let’s all do that…

Easier said than done

Unfortunately, this can be more challenging than many think. Over the past three years, as a result of the ubiquity and large file size of non-text content, the average weight of a webpage has increased by nearly 85 percent, leading to slower load times. Research has shown that even a three-second loading time causes a 53 percent bounce rate.

Factor in the shift to Mobile-First Indexing by Google, and that page load speed will be a ranking factor for mobile searches, optimizing your mobile web content is critical to your SEO and user experience. Then, layer on top of that the thousands of different mobile devices, various network providers, browser types and screen sizes, and creating a robust experience for customers requires dedicated collaboration, cooperation and coordination among knowledgeable marketing and development professionals.

Overcoming the challenges

Here are the three top challenges marketers will need to overcome to create an optimized media-rich experience for mobile devices and thereby improve user engagement.

  1. File size: Videos and images take up far more file space than text, and compressing file sizes can speed up page load times. Establishing a strategy for optimizing videos and images requires expert knowledge accompanied by a detailed analysis of many factors, including data types, quality settings and resolution. Formats and delivery methods are also key considerations.
  2. Design: The design must be dynamic and provide an adjustment of the layout. The more media-rich content you introduce into the layout, the more complicated it becomes to offer a fluid responsive design. Besides screen size, you must also accommodate device viewports, CPU types, RAM and network limitations.
  3. Asset management: Who creates and manages all those different videos and images? Often, multiple versions of the same asset are in simultaneous use. What happens when you need to update those assets or add new images? Is marketing or design or engineering creating the responsive design? There could be a lot of management overhead.

Addressing technical challenges

You must achieve a balance between the need for speed to market and the need and desire for a media-rich visual experience that is also optimized for mobile delivery. Here are a few tips.

  1. Compression: Image compression can significantly reduce the file size. You can also think about tradeoffs between the quality of an image and image size. Are you able to visually notice a reduction in the resolution of an image? Compressing files is a good start to achieving faster load times.

  1. Image format: Be sure to apply the best image and video formats for the various devices and browsers. When should you use JPEG vs. PNG vs. JPEG-XR vs. SVG?

  1. Give a DAM: Adopt a digital asset management (DAM) solution that can help you optimize the workflows and processes needed to manage a new influx of rich digital content so you can:
  • Categorize and organize the content files; add, edit and store their metadata; and synchronize with the local files and folders.
  • Collaborate, control and streamline the workflow; enable notifications; and vigilantly maintain the versions to ensure up-to-date downloads.
  • Search the media library, and then sort the results according to the predefined criteria.
  • Share and publish the content according to launch schedules and read-write access criteria, subsequently archiving the automatically generated code into the content management system (CMS).
  • Collate detailed performance and usage analytics; monitor and correct errors; and generate comprehensive reports with emphasis on the key metrics.

Bridging the gap between marketing and development

Delivering an optimized, media-rich experience to mobile customers has become a critical intersection of marketing and engineering. Marketing’s need to provide visually rich, optimized content that will engage users and benefit SEO is colliding with technical considerations that must be addressed through engineering workflows. A close collaboration between the two will be required to overcome technical challenges and successfully provide customers with an engaging and profitable experience.