Smartphone users overwhelmingly hold their phones in the vertical (or “portrait”) orientation, yet, until recently, shooting vertical video was seen as amateurish and was resoundingly ridiculed.
That’s changing.
Responding to consumer behavior, the media are embracing vertical video; eLearning designers should take note.
Media embrace vertical
Increasingly, advertisers and media organizations, including the BBC and National Geographic, are creating vertical video content targeted to their growing mobile audiences. Social media platforms like Instagram, Vimeo, and Periscope enthusiastically embrace vertical video. Vervid is a social media app designed around vertical video; it includes tools for editing vertical videos. Facebook began supporting vertical video ads in September and quickly reported a strong response—lending credence to Snapchat’s claim that nine times as many viewers watch an entire ad if it’s in vertical, rather than horizontal, orientation.
The growth in acceptability—even popularity—of vertical video offers eLearning designers new opportunities. Though eLearning designers do not always know whether learners will use the content on a smartphone, a tablet, or a laptop, the ability to integrate vertical video opens up a new dimension for creative eLearning design.
Responsive design adds flexibility
Responsive design displays content differently depending on where it is used. Scalable type and images adjust to the size and orientation of the viewing screen. You can assign images, columns, blocks of text, navigation menus, and other elements a maximum width or a proportion of the window, such as half or a third of its width. These elements are repositioned within spaces of different size to provide each learner with a clear, easily navigable view of the eLearning content. A navigation menu that appears on the left-hand side of a full-screen browser window might become a block, stacked with text and images, in a narrower window or on a smartphone screen. Images may be scaled or stretched, depending on the properties the developer sets. Using responsive design aids accessibility, too, since the design adjusts to a magnifier tool as easily as it accommodates a resized browser window.
Responsive design uses CSS (cascading style sheet) media queries to determine the media type, then applies the appropriate style sheet or rules. The media query identifies the type of display a learner is using, as well as its width, height, orientation, and resolution. Style sheets govern content appearance on different devices. For example, the font, type size, and layout can be different for print than for screen viewing.
Using a responsive design to accommodate vertical viewing saves the effort of repurposing horizontal video for smartphone use and eliminates the need to maintain separate web and mobile modules:
- On a smartphone or a vertical tablet, the video can fill the screen. Using vertical video conforms with the way learners prefer to hold their phones. Text or links and images can be formatted for a vertical screen orientation as well.
- When the vertical video is accessed on a horizontal tablet or on a laptop, the design can include text, links, or additional images alongside the video so the screen space is not wasted and the design is visually appealing.
Pairing responsive design with innovative use of vertical video, eLearning designers can create content that is appealing, usable, and attractive on phones, tablets, and laptops. Whether the learner uses a full-screen or a scaled-down browser window, in portrait or landscape orientation, gives a lot of flexibility! Giving learners greater control over how they access eLearning can deepen their engagement and increase the amount of time they spend on eLearning.
References
Hoober, Steven. “How Do Users Really Hold Mobile Devices?” UXmatters. 18 February 2013.
http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
Marcotte, Ethan. “Responsive Web Design.” A List Apart. 25 May 2010.
http://alistapart.com/article/responsive-web-design
http://www.adweek.com/news/technology/snapchat-persuades-brands-go-vertical-their-video-164305