Passenger Focus: responsive images done right

Words: Paul Lloyd

Passenger Focus is a consumer watchdog protecting the interests of UK rail and bus passengers, who will no doubt appreciate a new site that adapts to their device.

While the site, designed by Browser, is utilitarian and includes a header that’s quite crowded at its fullest width, the underlying layout is incredibly smart and fluid.

The site adapts well to smaller mobile devices

Like many adopting a responsive approach, images were a concern. “We could have thrown together a full-width rotating hero full of dynamic train photography and smiling commuters,” says Browser designer/developer David Bushell. “Instead we created a design that doesn’t rely on raster graphics.”

On the desktop site, more can be seen, but the design is still clean and uncluttered

This, allied to SVG images used for logos and icons, means the site shines on hi-res displays.

Homepage requests/size: 19/389kB mobile, 29/483kB desktop

This showcase was originally published in .net magazine issue 232.

Now read these!