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:
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.
Alexas_Fotos (n.d.). Rubber duck school-leaving - Free photo on Pixabay [Image file].
W3Schools. (n.d.-b). HTML responsive web design.
<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>
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">
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.
