November 24, 2014 | Product Development | by Marfeel

Responsive design’s visual effect made simple

The ongoing mission of this blog is to whittle down the complexity of mobile design into simple takeaways for publishers and bloggers going mobile or thinking about it. The source is the dynamic collaboration that happens every day as Marfeel’s specialists try to make a better mobile experience. Today, I’m writing about enhancing the mobile experience with outstanding design that makes images and videos responsive.

Optimizing the look and feel of images and videos across all devices is a challenge that is being met with new innovations in responsive design. New devices have flooded the market. Without an adaptive and automatic solution, developers would have to deal with almost inexhaustible complexity keeping images and videos optimized everywhere.

Responsive design makes websites flexible so they adapt automatically to different mobile environments. Images and videos used to be one size fits all, but as responsive image and video techniques get better so does the overall visual effect of the mobile experience. Here are three advantages to being mobile friendly with responsive imaging and video.

1. Less code, better adaptation

Just try to code fast enough to have a unique website for all the devices out there each version compatible with the rest…and over the course of time! Rather than identifying the parameters of each device and hand-tailoring development for it, responsive design describes in code various options for dimensions, layout positioning, and the pixel width of the images and videos. It lets the browser do the work of detecting the device screen, viewport and connection and then determines automatically the best adaptation of the images and videos for each distinct environment.

Less code is needed overall and images and videos are more adapted to the range of devices on the market.

2. Less manipulation, greater visual effect

Be Mobile FriendlyResponsive design can be intricate and there is no one established method for applying it to mobile sites. The design is neither perfect or without tradeoffs. But when responsive image and video techniques are effective visuals should look great on all devices. No squishing and reshaping. It means the right resolution and the right width and height ratio for every image and video wherever they appear. After all, no one wants to watch a video that is cut off or pixelated.

This is something Marfeel is working on. The mobile sites it designs are being adjusted in a subtle but powerful way. Their team of designers and developers are striving to capture on all devices the true look and feel of publishers’ images and videos. The payoff for the user is being able to see images and videos exactly how they were meant to be seen. It is an ongoing challenge to make the optimal visual impact, but responsive design makes it possible.

3. Less waste, faster performance

Unresponsive design comes from a world with few screen sizes and poor image and video quality. Since the explosion of diversity in the mobile industry and the increased capacity to render images and videos of high quality, two major problems have emerged that responsive design helps to resolve.

First, images and videos are unfortunately often loaded with one basic resolution that may work well on smaller smartphones but will be of low quality on larger screens such as on tablets. The second problem is the reverse and is more common now: images and videos are loaded with a high resolution irrespective of the device. Of course the quality on smaller screens will still be good. But why should a smartphone user wait longer to get a video with a high resolution that they do not even enjoy. For designers trying to trim their mobile experience this is a source of waste that needs to be eliminated.

What responsive imaging and video can do is strike an automated balance between optimizing resolution and maximizing speed. That means large devices get the quality they deserve and are not forced to view pixelated images and videos. And small devices get faster with less load times because only the resolution they need is delivered. When all the images and videos of a website are combined, this optimization can dramatically decrease loading times and have a great effect on performance.

Responsive image and video techniques are an opportunity to snap everything into place with even more speed. Marfeel is developing the foundation for responsive imaging and video that not only looks good, but that also shaves off load times and make our partners’ sites even faster.

Look on both your smartphone and tablet at one of the mobile experiences we designed, Geo.fr and observe the sharpness of the visuals. 

Your page views, reading time and engagement depend on how mobile friendly you are. Having responsive images and videos are key to boosting the experience of your site on mobile.