What are the best practices for using video on mobile web/responsive web?

1

HTTP Archive suggests that only 1% of mobile pages (tested) are using video, but video’s contribution to the average mobile page size is now over 5% (up from negligible 18 months ago).

What should developers / web owners be doing to reduce the impact of video on a) mobile page size and b) mobile page performance?

Are there any guidelines, standards and/or tools to help keep developers / web owners on the straight and narrow?

For example, are there certain bitrates appropriate for mobile device / mobile network v mobile device / WIFI? And should sites detect device / connection and serve up the appropriate video at the right bitrate?

I am researching/writing an article for ClickZ on this subject.

Thanks. Andy

Average bytes per page by content type, April 2017:

October 2015:

Video transfer size per page, April 2017:

2

Be respectful of mobile users’ limited download capacity:

  • avoid autoplay
  • use efficient codecs and bitrates
  • allow users to opt into HD or low quality
  • allow offline playback

Make the experience enjoyable:

  • fluid fullscreen enter and exit
    • orientation change
    • gestures
  • mute / minimize when multitasking
  • progressively enhance for newer phones, gracefully degrade for older
1 Like
3

Thanks Rick for the useful tips.