Pinch/zoom (opens in new tab) is a mobile design agency led by renowned mobile expert Brian Fling (opens in new tab), and has a remarkable site that performs along the x-axis, the web’s less trodden path, on wide displays.
The design uses CSS columns, which can be difficult in responsive design to control the presence of a horizontal scrollbar, but pinch/zoom prevails and elegantly addresses the problem with some vertical responsive craftiness. The content has space to sing while the navigation, which works effortlessly in small or large viewports, sits out of the way and is only triggered on clicking the pinch/zoom logo.
On small devices, the dynamic shifts to traverse the more familiar y-axis. It’s clearly a considered decision: the wide viewport accommodates multiple columns and the horizontal layout seamlessly, but smaller viewports unable to handle several columns would offer a disjointed reading experience.
Often you’ll find websites that take this approach are open to experimentation, but it can often battle with our inbuilt habits. Pinch/zoom manages to step up to the challenge and produce something that feels solid and intuitive against the odds.
This showcase was originally published in .net magazine (opens in new tab) issue 243.
Like this? Read these!
- 10 responsive agency websites (opens in new tab) to inspire you
- Great examples of doodle art (opens in new tab)
- Brilliant Wordpress tutorial (opens in new tab) selection
Have you seen a good example of website navigation (opens in new tab) recently? Let us know about it in the comments box below!
