{"id":103,"date":"2022-07-26T13:59:49","date_gmt":"2022-07-26T17:59:49","guid":{"rendered":"http:\/\/wpdocs.bu.edu\/bu-stories\/?page_id=103"},"modified":"2025-12-08T11:02:24","modified_gmt":"2025-12-08T16:02:24","slug":"visual","status":"publish","type":"page","link":"https:\/\/wpdocs.bu.edu\/bu-stories\/best-practices\/visual\/","title":{"rendered":"Visuals"},"content":{"rendered":"\n<p>For an ideal viewing experience, text should be short and quick, and visuals should be dynamic and engaging. Opt for high-quality videos and images, but gifs, stickers, and emojis can be incorporated sparingly for some additional flare.<\/p>\n\n\n\n<p>Images and videos should take up the entire screen with minimal use of letterboxing.<\/p>\n\n\n\n<h2>Video<\/h2>\n\n\n\n<p>Videos help provide a more immersive experience. Keep videos on the shorter side, ideally around 15 seconds. Longer videos should be broken into shorter clips across multiple pages.<\/p>\n\n\n\n<p>Similar to social media, stories are consumed in portrait mode, so keep in mind the following:<\/p>\n\n\n\n<ul><li>Shoot video in high-end mobile devices when possible.<\/li><li>Shoot at 720p rotated (720 x 1280).<\/li><\/ul>\n\n\n\n<div style=\"height:24px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns\">\n<div class=\"wp-block-column\">\n<p class=\"has-text-align-left\"><strong>DO<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default full-width-gif\"><img loading=\"lazy\" width=\"195\" height=\"347\" src=\"\/bu-stories\/files\/2022\/07\/do_video_AdobeExpress.gif\" alt=\"\" class=\"wp-image-120\"\/><figcaption>A portrait video creates a more immersive viewing experience.<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column\">\n<p class=\"has-text-align-left\"><strong>DON&#8217;T<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full full-width-gif\"><img loading=\"lazy\" width=\"195\" height=\"347\" src=\"\/bu-stories\/files\/2022\/07\/dont_video_AdobeExpress.gif\" alt=\"\" class=\"wp-image-121\"\/><figcaption>This landscape video isn&#8217;t immersive and the black boxes are distracting.<\/figcaption><\/figure>\n\n\n\n<p><\/p>\n<\/div>\n<\/div>\n\n\n\n<h3>Video Captions<\/h3>\n\n\n\n<p>Videos with narration need captions to be accessible. Not all readers will be able, or want, to hear video content. <a href=\"https:\/\/www.bu.edu\/tech\/services\/teaching\/instructional-video\/my-media\/getting-started\/my-media-faqs\/mymedia-captions-transcripts\/\">Add captions to video using MyMedia<\/a> or Vimeo.<\/p>\n\n\n\n<div class=\"wp-block-columns\">\n<div class=\"wp-block-column\">\n<p><strong>DO<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full full-width-gif\"><img loading=\"lazy\" width=\"277\" height=\"493\" src=\"\/bu-stories\/files\/2022\/07\/do_captions_AdobeExpress.gif\" alt=\"\" class=\"wp-image-138\"\/><figcaption>Captions allow users to engage with stories even if their audio is muted or they are unable to hear.<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column\">\n<p><strong>DON&#8217;T<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full full-width-gif\"><img loading=\"lazy\" width=\"277\" height=\"493\" src=\"\/bu-stories\/files\/2022\/07\/dont_captions_AdobeExpress.gif\" alt=\"\" class=\"wp-image-139\"\/><figcaption>Without captions, the story relies on audio to convey information. This can limit engagement and is inaccessible to some users.<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h2>Images<\/h2>\n\n\n\n<p>Use full width portrait images with good resolution (720 x 1280). The format should be web safe options like .jpg, .png, or .gif. Images uploaded to MyMedia are not supported by the BU Stories plugin.<\/p>\n\n\n\n<div class=\"wp-block-columns\">\n<div class=\"wp-block-column\">\n<p><strong>DO<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"575\" height=\"1024\" src=\"\/bu-stories\/files\/2022\/07\/Screen-Shot-2022-07-26-at-3.48.05-PM-575x1024.png\" alt=\"\" class=\"wp-image-143\" srcset=\"https:\/\/wpdocs.bu.edu\/bu-stories\/files\/2022\/07\/Screen-Shot-2022-07-26-at-3.48.05-PM-575x1024.png 575w, https:\/\/wpdocs.bu.edu\/bu-stories\/files\/2022\/07\/Screen-Shot-2022-07-26-at-3.48.05-PM-357x636.png 357w, https:\/\/wpdocs.bu.edu\/bu-stories\/files\/2022\/07\/Screen-Shot-2022-07-26-at-3.48.05-PM-768x1367.png 768w, https:\/\/wpdocs.bu.edu\/bu-stories\/files\/2022\/07\/Screen-Shot-2022-07-26-at-3.48.05-PM.png 780w\" sizes=\"(max-width: 575px) 100vw, 575px\" \/><figcaption>Images should be applied as Background Images on the Page block.<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column\">\n<p><strong>DON&#8217;T<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"574\" height=\"1024\" src=\"\/bu-stories\/files\/2022\/07\/Screen-Shot-2022-07-26-at-4.05.19-PM-574x1024.png\" alt=\"\" class=\"wp-image-145\" srcset=\"https:\/\/wpdocs.bu.edu\/bu-stories\/files\/2022\/07\/Screen-Shot-2022-07-26-at-4.05.19-PM-574x1024.png 574w, https:\/\/wpdocs.bu.edu\/bu-stories\/files\/2022\/07\/Screen-Shot-2022-07-26-at-4.05.19-PM-357x636.png 357w, https:\/\/wpdocs.bu.edu\/bu-stories\/files\/2022\/07\/Screen-Shot-2022-07-26-at-4.05.19-PM-768x1369.png 768w, https:\/\/wpdocs.bu.edu\/bu-stories\/files\/2022\/07\/Screen-Shot-2022-07-26-at-4.05.19-PM.png 774w\" sizes=\"(max-width: 574px) 100vw, 574px\" \/><figcaption>For most photographs, do not use the Image Block.<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h3>Crop mindfully<\/h3>\n\n\n\n<p>Keep the focus on what\u2019s important. Crop out unnecessary or distracting elements, and make sure the key subject of the photo is in focus and complete.<\/p>\n\n\n\n<div class=\"wp-block-columns\">\n<div class=\"wp-block-column\">\n<p><strong>DO<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"575\" height=\"1024\" src=\"\/bu-stories\/files\/2022\/07\/Screen-Shot-2022-07-26-at-4.17.54-PM-575x1024.png\" alt=\"\" class=\"wp-image-156\" srcset=\"https:\/\/wpdocs.bu.edu\/bu-stories\/files\/2022\/07\/Screen-Shot-2022-07-26-at-4.17.54-PM-575x1024.png 575w, https:\/\/wpdocs.bu.edu\/bu-stories\/files\/2022\/07\/Screen-Shot-2022-07-26-at-4.17.54-PM-357x636.png 357w, https:\/\/wpdocs.bu.edu\/bu-stories\/files\/2022\/07\/Screen-Shot-2022-07-26-at-4.17.54-PM-768x1368.png 768w, https:\/\/wpdocs.bu.edu\/bu-stories\/files\/2022\/07\/Screen-Shot-2022-07-26-at-4.17.54-PM.png 778w\" sizes=\"(max-width: 575px) 100vw, 575px\" \/><figcaption>This image is cropped to properly utilize the 720 x 1280 canvas and keeps the focal subjects in the center.<\/figcaption><\/figure>\n\n\n\n<p><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column\">\n<p><strong>DON&#8217;T<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"579\" height=\"1024\" src=\"\/bu-stories\/files\/2022\/07\/Screen-Shot-2022-07-26-at-4.18.05-PM-579x1024.png\" alt=\"\" class=\"wp-image-157\" srcset=\"https:\/\/wpdocs.bu.edu\/bu-stories\/files\/2022\/07\/Screen-Shot-2022-07-26-at-4.18.05-PM-579x1024.png 579w, https:\/\/wpdocs.bu.edu\/bu-stories\/files\/2022\/07\/Screen-Shot-2022-07-26-at-4.18.05-PM-359x636.png 359w, https:\/\/wpdocs.bu.edu\/bu-stories\/files\/2022\/07\/Screen-Shot-2022-07-26-at-4.18.05-PM-768x1359.png 768w, https:\/\/wpdocs.bu.edu\/bu-stories\/files\/2022\/07\/Screen-Shot-2022-07-26-at-4.18.05-PM.png 782w\" sizes=\"(max-width: 579px) 100vw, 579px\" \/><figcaption>Uploading full size or landscape photos will result in an auto crop where the focal point is unclear.<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>For an ideal viewing experience, text should be short and quick, and visuals should be dynamic and engaging. Opt for high-quality videos and images, but gifs, stickers, and emojis can be incorporated sparingly for some additional flare. Images and videos should take up the entire screen with minimal use of letterboxing. Video Videos help provide [&hellip;]<\/p>\n","protected":false},"author":3324,"featured_media":0,"parent":95,"menu_order":3,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/wpdocs.bu.edu\/bu-stories\/wp-json\/wp\/v2\/pages\/103"}],"collection":[{"href":"https:\/\/wpdocs.bu.edu\/bu-stories\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wpdocs.bu.edu\/bu-stories\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wpdocs.bu.edu\/bu-stories\/wp-json\/wp\/v2\/users\/3324"}],"replies":[{"embeddable":true,"href":"https:\/\/wpdocs.bu.edu\/bu-stories\/wp-json\/wp\/v2\/comments?post=103"}],"version-history":[{"count":46,"href":"https:\/\/wpdocs.bu.edu\/bu-stories\/wp-json\/wp\/v2\/pages\/103\/revisions"}],"predecessor-version":[{"id":496,"href":"https:\/\/wpdocs.bu.edu\/bu-stories\/wp-json\/wp\/v2\/pages\/103\/revisions\/496"}],"up":[{"embeddable":true,"href":"https:\/\/wpdocs.bu.edu\/bu-stories\/wp-json\/wp\/v2\/pages\/95"}],"wp:attachment":[{"href":"https:\/\/wpdocs.bu.edu\/bu-stories\/wp-json\/wp\/v2\/media?parent=103"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}