Robert Lloyd was speaking about The Edge of the Web at Responsive Conf, these are my notes from his talk.
Avengers titles from 1963 are typical for TV at that time. TV was still a new medium, low resolution and the picture was cropped at different sizes by sets. Design was low resolution, high contrast.
As technology improved colour was introduced but black and white sets were still very common so designs were still high contrast.
Still the case today with widescreen and HD.
The original Dr Who titles created in 1963 are still the basis for the current titles.
Are we doing the same for the web?
Transfer size has been going up steeply but the number of requests is barely increasing. Images are the main culprit here - they are a square peg in a round hole. The web uses flexible units such as % and
em - images use fixed, static units:
px. SVG is a child of web - it's flexible - we should be using vector images much more and photography much less. The web is all text.
Meaning is our baseline, design is an enhancement.
When does an image not use an
- Interface images - fonts, SVG, CSS image replacement.
- Content imagery - adds to the meaning of the content, optimised bitmaps ~80% quality.
- Decorative - don't add meaning, optimised bitmaps ~60% quality and can be loaded in as an enhancement.
Can we use smaller file size images as an aesthetic choice? Embrace the low fidelity. We shouldn't try to achieve pixel perfection on the web.
We are seeing a move away from "print" layouts towards application style interfaces - apps have always been responsive. Keep a clear distinction between the content and the interface.