Responsive Design and Vertical Video Add Up to Engaging eLearning

October 26, 2016

Smartphone users overwhelmingly hold their phones in the vertical (or “portrait”) orientation, yet, untilrecently, shooting vertical video was seen as amateurish and was resoundinglyridiculed.

That’s changing.

Responding to consumer behavior, the media are embracingvertical video; eLearning designers should take note.

Media embrace vertical

Increasingly, advertisers and media organizations, includingthe BBC and National Geographic, arecreating vertical video content targeted to their growing mobile audiences. Socialmedia platforms like Instagram, Vimeo, and Periscope enthusiastically embracevertical video. Vervid is a social media app designedaround vertical video; it includes tools for editing vertical videos. Facebookbegan supporting vertical video ads in September and quickly reported a strong response—lendingcredence to Snapchat’s claim that nine times as many viewers watch an entire ad if it’s in vertical, rather thanhorizontal, orientation.

The growth in acceptability—even popularity—of verticalvideo offers eLearning designers new opportunities. Though eLearning designersdo not always know whether learners will use the content on a smartphone, atablet, or a laptop, the ability to integrate vertical video opens up a newdimension for creative eLearning design.

Responsive design adds flexibility

Responsive design displays content differently depending on whereit is used. Scalable type and images adjust to the size and orientation of theviewing screen. You can assign images, columns, blocks of text, navigationmenus, and other elements a maximum width or a proportion of the window, suchas half or a third of its width. These elements are repositioned within spacesof different size to provide each learner with a clear, easily navigable viewof the eLearning content. A navigation menu that appears on the left-hand sideof a full-screen browser window might become a block, stacked with text andimages, in a narrower window or on a smartphone screen. Images may be scaled orstretched, depending on the properties the developer sets. Using responsivedesign aids accessibility, too, since the design adjusts to a magnifier tool aseasily as it accommodates a resized browser window.

Responsive design uses CSS (cascading style sheet) mediaqueries to determine the media type, then applies the appropriate style sheetor rules. The media query identifies the type of display a learner is using, aswell as its width, height, orientation, and resolution. Style sheets governcontent appearance on different devices. For example, the font, type size, andlayout can be different for print than for screen viewing.

Using a responsive design to accommodate vertical viewingsaves the effort of repurposing horizontal video for smartphone use andeliminates the need to maintain separate web and mobile modules:

On a smartphone or a vertical tablet, the videocan fill the screen. Using vertical video conforms with the way learners preferto hold their phones. Text or links and images can be formatted for a verticalscreen orientation as well.
When the vertical video is accessed on a horizontaltablet or on a laptop, the design can include text, links, or additional imagesalongside the video so the screen space is not wasted and the design isvisually appealing.

Pairing responsive design with innovative use of verticalvideo, eLearning designers can create content that is appealing, usable, andattractive on phones, tablets, and laptops. Whether the learner uses afull-screen or a scaled-down browser window, in portrait or landscapeorientation, gives a lot of flexibility! Giving learners greater control overhow they access eLearning can deepen their engagement and increase the amountof time they spend on eLearning.