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
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.
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.