Web designNew work

Passenger Focus: responsive images done right

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

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!

Log in to Creative Bloq with your preferred social network to comment

OR

Log in with your Creative Bloq account

site stat collection