chat loading...
Skip to Main Content
It looks like you're using Internet Explorer 11 or older. This website works best with modern browsers such as the latest versions of Chrome, Firefox, Safari, and Edge. If you continue with this browser, you may see unexpected results.



  The library has limited services and changed hours due to the Coronavirus situation. Watch our Coronavirus page for the latest information..  


Animated GIFs as Instruction Tools - ILF Annual 2019 - Public: Animated GIF: Screen Size

This is a workshop guide developed for ILF Annual 2019, with extra boxes to allow public users to see the code used.

Introduction

The next several components of this session will focus on ways to adjust the content provided to users based on criteria such as screen size and internet speed. Code is deliberately not working and will be made to work during session. This segment will cover adjustments based on screen size.

When prompted, please COPY the following links:

Animated GIF

Static image

Using LibGuides

If you are unfamiliar with LibGuides, during this session, click the small box on the lower right, then HTML to open the section with code.

Screen Size

Place alternate text here

Code to Change

Raw Code

<picture>
  <source srcset="PLACE STATIC IMAGE HERE" media="(max-width: 600px)">
  <source srcset="PLACE ANIMATED GIF HERE" media="(max-width: 1500px)">
  <img src="PLACE ANIMATED GIF HERE" alt="Place alternate text here" style="max-width:100%;height:auto;">
</picture>

Prerequisites

Set viewport

The HTML of webpages requires viewport for this function to work. LibGuides already uses viewport as part of its own responsive design. Viewport code shown below:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 

Browser versions

This method relies on HTML5, compatible with the major web browser versions released 2015 and after. However, the final piece of code is provided in case of outdated versions or unusual browsers.