Responsive web design has become much more than just about media queries, flexible layouts and flexible images. Information architecture, interaction design, legibility and readability as well as critical tasks are other factors that must be taken into account especially as users interact with websites in many different ways and contexts.
Until now! New, native responsive image functionality lets authors mark up multiple, alternate image sources. This markup paves the way for enormous performance gains by giving images the ability to adapt to meet users’ needs.
This workshop will give you hands-on experience with the new markup.
In This Workshop You Will Learn
- Efficiently scaling images across screen sizes and resolutions with srcset and sizes
- Art directing with picture and media,
- Type-switching with picture and type,
- Deciding when to use each of these markup tools, and why,
- Testing and measuring the effects of what you’ve done,
- Automated strategies for generating alternate image sources,
- Polyfills and fallbacks that enable you to code for the future without sacrificing,
- functionality for the browsers of the past,
- Retrofitting old sites, aka teaching old imgs new tricks,
- New design patterns that the new markup enables.
What Hardware/Software Do You Need?
A laptop, a browser, and your text editor of choice.