More Views

Yoav Weiss on "Responsive Images" (Zürich, October 15th 2014)

Quick Overview

Images are the major hurdle in your path to create fast responsive designs, and sending the right images to the right devices without introducing extra latency have been a near-impossible task for a long while now.

Luckily, that is no longer the case. A native responsive images solution is now implemented and shipped in most major browsers, and there's a polyfill in place that would help you handle the other one. But how do you use that new syntax?

Full Product Description

The history that led us to the current responsive images solutions, and why previous hacks and techniques were not cutting it.

The various use cases of the responsive images problem and which parts of the syntax you would need to solve them, accompanied by detailed examples:

Device pixel ratio based selection: We would see how we can easily send high resolution images only to high resolution devices that actually need them.

Variable width images: In many RWD sites, the image dimensions we display our users on smaller screens are not the same as the ones they see on larger ones. We'll see what part of the syntax enables us to give the browser that information, so that it can download the resource that best fits the displayed dimensions.

Art direction: in some cases, you'd want to tailor the image to fit the different layouts of the different responsive breakpoints. Either some cropping to render the subject more clear, different proportions that sit better inside the layout, or a different angle of the image altogether. We'll cover the syntax that allows you to easily do that.

The best practices (and what to avoid) when it comes to the new syntax.

The various image formats out there, and what each one of them is good for.

Image compression best practices, and what open-source tools you can integrate into your workflow to make sure your images are as slim as they can be.

How to integrate responsive images into your workflow, for both static images and user-generated ones.

The workshop will also include hands-on quiz and exercises to see how it all comes together.

This workshop is geared toward web designers and developers involved in the design process. You should at least know a little HTML and CSS.
Further information on the event location and the workshop itinerary are included within the ticket confirmation (PDF) — downloadable after your purchase.

What prerequisite skills do you need?

Basic understanding of HTML, CSS and Responsive Web Design.

Workshop Schedule

8:30 Doors open, Registration

9:00 Introduction & Kick-off

11:00 Coffee Break

12:30 Lunch

13:30 Afternoon Session

15:00 Coffee Break

17:00 The End, Networking

Workshop includes

Snacks and drinks during the whole day

Tea and coffee

Lunch

Paper and pen/pencil

What hardware/software do you need?

A laptop with the latest Chrome/Firefox installed, as well as your favourite text editor.