Passenger Focus: responsive images done right

By published

This responsive website for UK rail and bus passengers is a great example of a site that works well on hi-res displays. Paul Lloyd looks under the hood.

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

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

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!

Creative Bloq Staff

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began over a decade ago. The current website team consists of five people: Editor Kerrie Hughes, Deputy Editor Rosie Hilder, Deals Editor Beren Neale, Senior News Editor Daniel Piper, and Staff Writer Amelia Bamsey. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq. 
Topics
Web design

Related articles