Taking A Website From Good To Great - Part 4: Maintaining The Responsive Experience With Embedded Objects
Responsive website design or RWD for short is an increasingly important part of the online presence of any organization. Use of mobile devices online continues to grow at a faster pace than desktop, and with an increasing variety of screen sizes.
Mobile friendly strategies used to involve designing multiple websites to meet the needs of each platform, such as desktop, large tablet, small table, large phone, small phone, or releasing apps specific to the operating system such as iOS or Android. Now with the plethora of devices and system environments, that is not a cost effective strategy. A true responsive web design can provide a great user experience on all platforms if done well.
One aspect of RWD that is commonly forgotten about is embedded objects. There is a large variety of rich media to choose from when building a website, including videos, audio players, images, maps, social media posts and more. Most of these objects do not have responsive design built into the embed codes provided on their service.
Example Of YouTube Embed Code
If you copy and paste the embed code without any changes to it, your embedded video will have a fixed width of 560 pixels by 315 pixels.
Example Of Desktop View With Fixed Width YouTube Embed Code
In this example you can see the 560 pixel wide video does not fill all of the available horizontal space on the page, leaving a lot of blank space to the right of the video player. Although all of the content is actually visible, leaving unused blank space is unsightly, and filling the extra space with a larger video could make the user experience more accessible to those with vision impairments.
Example Of Mobile View With Fixed Width YouTube Embed Code
In this example, you can see that the page is responsive, and it adjusted to the size of the screen. The video however, is now running off of the side of the screen, because the 560 pixel width exceeds the width of the mobile screen. This causes unsightly scroll bars which are now needed in order to view all of the content. Horizontal scrolling on a mobile device significantly degrades the user experience.
Making Embedded Objects Responsive
In most cases there is no quick and easy universal HTML tag you can add to an embed code to make it responsive. Responsive code is typically controlled in CSS. Some content management systems have plugins that will help you automatically turn embedded objects responsive, but they are often platform specific and do not work with all embed codes.
Thankfully, there is an easy way to turn any embed code responsive with a website put together by Jeff Hobbs called Embed Responsively. Embed Responsively has built in options for common sources of rich media, but the tab that works for everything is the Generic IFrame tab.
Embed Responsively Code Converter
Simply copy the embed code from your media source and paste it into the Generic IFrame tab and click the Embed button.
The responsive code displays at the bottom of the page for you to copy.
Sometimes the CSS code still contains fixed width values even after using Embed Responsively. If you notice fixed width values in the CSS, simply delete them and the code will be responsive.
Example Of Desktop View With Responsive Width YouTube Embed Code
In this example you can see that the video fills the entire width of the web page, it is fully responsive in the desktop view thanks to the code generated by Embed Responsively.
Example Of Mobile View With Responsive Width YouTube Embed Code
In this example you can see that the video shrinks to fill only the width of the web page without spilling over the edge of the screen and causing horizontal scroll bars to appear.
Now that you know how to embed responsively, it is a good time to review your website.