Responsive Web Design with Media

Media Examples with Responsive Treatment

Images

A common technique in Responsive Web Design is to make images flexible by setting a max-width of 100%. The image will then shrink and grow up to the max restriction. Images are often used for backgrounds of pages or containers where the text and other elements float over the top of the background image. Another popular use for images is to display a gallery. See the images below from the beautiful Kansas City fall 2018. With the help of a CSS flexbox, the images fluidly change size and arrangement.

Flexbox Image Gallery - Leaf Walk 2018

Border Collie Husky Fall Leaves Fall Leaves Fall Leaves Pine Needles Pine cone American Sweet Gum Fruit Looking Through a Leaf

Video

Video has become a critical means for web builders to include in their design. A local video can be embedded into a page using the HTML5 <video> tag. See an example on the credits page. The challenge with directly embedding a video hosted within a site is that file sizes, especially for high resolution video, can be very large which is like kryptonite for the page load speed of a website. To counter that, it is popular to use a video hosting service such as YouTube or Vimeo and embed the video into the page.

YouTube has become one of the most watched platforms in the world and they offer an attractive video player, but their embed codes include height and width attributes which do not lend themselves to being very responsive. A way to counter that is to use CSS to create a container where the video is displayed at 100% width and with a bottom padding of 56.25% to maintain a 16:9 ratio. The container is then wrapped in a second div which can be used to size and arrange the video on the page. Credit to YouTuber, Ralph Phillips and his video "Embed Responsive Videos with YouTube iframe and Video Tag which explains this well!

Other Files

Audio

Audio can either be linked or embedded in an HTML5 element player which uses the <audio> tag. Browsers built-in audio players may vary or offer different controls.

Download the Track "Forgiveness Music Bed" by Ray Martin

Portable Document Format (PDF)

PDF files have a tremendous amount of benefit because they were developed by Adobe to be a standard document type that can be displayed on a web browser or downloaded to a device independently from application software, hardware, or operating system.19 While they can be interactive allowing a user to enter data or add a signature, they are most commonly used in web design as either a standard way to display a document that the user may want to print, or as an easy way to share something created by an application that doesn't display on a web page such as a Word, Excel, or PowerPoint presentation.
Ex: Open in a new browser window using target="_blank"

File Downloads

Web browsers have an amazing ability to read and display many types of files, but there still remain countless types which they are unable to display. Other times a software developer may want to allow a user to download their program and install it in their computer. Another use for file downloading is to share a document that may be too large to send via email. A link is used to initiate the download process of the file.
<a href="../media/helloworld.docx">Download</a>
Ex: Download File

Video Hosting Platforms Compared

Name Users Watch Time Embed Option
YouTube >2 Billion 1 Billion hours/day yes
Facebook 2.45 Billion 100 Million hours/day *Y/N
Vimeo 90 Million not published yes
Dailymotion 300 Million 3.5 Billion hours/month yes

*Facebook videos can only be embedded if their privacy is set to public.