Responsive web design as coined by Ethan Marcotte has many merits. The design of a responsive page automatically adapts the layout and structure to different screen sizes ranging from small smartphones over tablets to large screen displays.
When content is always visible within the horizontal width of the screen (typically in a one-column layout om phones), the user doesn't have to extensively zoom in and out, and pan and scroll around to see all content, which is generally a good thing.
A problem with responsive: You can't see the full picture
However, something valuable is missing with responsive design on phones: The ability to quickly get an overview and jump to content on further down a long scrolling page with lots of stacked content.
On phones, responsive design can feel like standing on the top of a mountain yet only being able to enjoy the scenic view through a narrow letterbox. You want to get a richer picture, but you simply can't due to the small screen. Instead you scroll frantically up and down to orientate and find what you need.
Foundations for good responsive design
There are a host of techniques and best practices for providing users with a better overview on responsive sites when using a smartphone, such as:
- Proper information architecture
(content is categorized and structured in way that is meaningful to the audience) - Efficient navigation
(links and other means of finding your way round is readily available and has understandable labeling) - Reflow of content to show the most important first
- Widgets like:
- Tabs
(related sections are placed next to each other can be viewed in any order) - Carousels
(content items are viewed one at at time and paged horizontally) - Accordions and collapsible panels
(sections on the same page can be dynamically opened and closed in the vertical axis)
- Tabs
This is all well and good, and should be the foundation of any responsive website design. Nonetheless, something is still missing…
The idea: Simple zoomable responsive mobile pages without using JavaScript
An idea has been lingering in my head for some time: What if you – on phones – literally could zoom out to see the responsive pages "from a distance" with better overview?
The general idea goes like this:
- Preserve the narrow width column of mobile responsive design which already fits to a phone screen (without horizontal scrolling)
- Make the page significantly wider to provide a "zoom context"
- Let the user navigate the page with vertically scrolling and standard gestures on smartphones for zooming: Double-tap and pinching
And all of this with only HTML and CSS, that is, without turning to JavaScript.
The first experimental prototype
So, let's try this idea in a prototype. First the simple skeleton:
<html>
<head>
...
<meta name="viewport" content="width=device-width, initial-scale=1.0">
...
</head>
<body>
<main class="zoom-wrapper">
<div class="content">
<h1>Looooooooooong vertically scrolling pages on mobile</h1>
<p>Mollit sunt Lorem est anim eu qui mollit cillum consequat dolore ad. Consectetur excepteur excepteur aute commodo ex officia et Lorem dolor eu ullamco pariatur incididunt qui. Mollit anim ex mollit ipsum adipisicing laborum officia velit non esse exercitation.
</p>
... a LOT more content here ...
</div>
</main>
</body>
</html>
The trick here is to make the .content exactly the width of the viewport, i.e. 100vw and the .zoom-wrapper quite wider, e.g. 400vw to provide a "zoom factor":
/* CSS */
...
.zoom-wrapper {
width: 400vw;
}
.content {
width: 100vw;
}
...
Which gives this layout (when zoomed out):
Body copy might not be legible, but you still get a fairly good understanding of the contents through visually distinct elements like headings, imagery, colors, formatting like bullet lists etc.
The resulting prototype 1 looks like so:
Prototype 1 Try it on your smartphone and zoom with pinch/double-tap.
When the user zooms out by double-tapping or pinching, the content is flushed along the left edge. This is to provide "an anchor" for vertically scrolling through the content. This isn't the prettiest in terms of asthetics compared to a column centered horizontally on the page, however, I will ignore that aspect in my walkthrough and focus on core interaction design and usability.
The drawbacks
Apart from being a bit unconventional and perhaps thus initially odd to understand or discover, the design of prototype 1 has two major drawbacks:
- If the user zooms in somewhere on the
.zoom-wrapperoutside.contentthe he/she might easily get lost in a "sea of white". - When the content is visible and the user is scrolling down, there might be a bit of unintended sideways scrolling thus entering the "zoom context", which again might lead to confusion and an unpleasant experience.
Prototype 2: Backgrounds to help orientating
To alleviate drawback 1 above we could give the "zoom context" some background color and graphics to aid the user navigating. Something like this:
/* CSS */
...
.zoom-wrapper {
width: 400vw;
background: url("../graphics/zoom-out-backdrop.png"), linear-gradient(to bottom right, #fff, #6f42c1);
background-position-x: 100vw; /* give the background a horizontal offset from the left edge. */
}
.content {
width: 100vw;
background: white;
}
...
Thus, prototype 2 looks like this:
Prototype 2 – with backgrounds on phones
You could of course use any kind of background that differs from the content. However, the idea here is for the arrow pattern to guide the user towards the content, and for the diagonal gradient to provide a sense of position in the X-Y coordinate space. A bit like the children's game of hide the object/warmer-colder.
All of these background shenanigans are obviously only mere workarounds/hacks to mitigate the major drawback of the vast uninhabited "zoom context" space only used during zoom operations but lingering around all the time.
However, let's leave that for a moment and turn to drawback 2 as listed above: The unintended sideways scrolling.
This one's tricky. I have tried to apply the CSS construct of scroll-snap to the .content column – the idea being to provide some kind of sticky vertical "fence" towards the "zoom context" – guarding against unintended horizontal wandering off track. Scroll snapping is originally intended for things like horizontal image carousels.
While the idea might work, I haven't been able to create a prototype with any useful results.
Prototype 3: Position sticky
But, wait, speaking of sticky... How about CSS position: sticky, could that work to solve both drawbacks in one go?
The idea goes like this: Setting .content to sticky, would prevent it from being zoomed (scrolled) horizontally of out view when "entering" the "zoom context".
HEUREKA! I finally got it to work... – in only two browsers, though – more on that in a moment.
So, with this HTML:
...
<body>
<main class="zoom-wrapper">
<div class="content sticky">
<!-- Content goes here... -->
</div>
</main>
</body>
...
And this styling:
/* CSS */
.zoom-wrapper {
width: 400vw;
/* I have removed the background workaround from prototype 2 since they are no longer needed - at least on select browsers... */
}
.content {
width: 100vw;
left: 0; /* to provide a sticky 'anchor' when scrolling sideways */
}
.sticky {
position: -webkit-sticky;
position: sticky; /* this is the 'magic' preventing users to zoom 'off track' */
}
...we get prototype 3 below. Here, no matter where on the page you zoom (on .content or outside), only the content is zoomed, not the context. Furthermore, since .content sticks in view on horizontal scroll, you don't accidentally leave the content sideways – thus alleviating both major drawbacks listed above.
There's a BIG caveat, though: browser support – or lack thereof. On Android, the prototype ONLY works as intended in Firefox mobile (I have Firefox 62 on an Android 8 smartphone). On iPhone I have only tested briefly and it works in Safari (at least on iOS11 and 12).
Prototype 3:
Prototype 3 Please note: According to my testing it ONLY works as intended in Firefox mobile on Android and Safari on newest iPhones.
On screens bigger than typical smartphones, we should probably "turn off" our zoom construct since here the user can see more of the content at once and has other means of zooming in the browser:
/* CSS - "turning off" the zoom construct on bigger screens */
@media screen and (min-width: 768px) {
.zoom-wrapper {
width: initial;
}
.content {
width: 768px;
margin: 0 auto;
}
}
In real life scenarios, you would most likely have a more complex (multi-column) layout on bigger screens (above e.g. 768px wide), but for the sake of experiment, I have kept things simple. Nonetheless, a more complex desktop layout should work perfectly fine with this zoom interaction concept, since it's only applied on the narrower phone screens.
Wrapping up
I'm glad you made it with me here to the end of this small exploratory journey... While I succeeded in making a working prototype, the fact that it only works in two browsers, namely Safari and Firefox (I also tested in Chrome, Edge, Opera and Samsung Internet on mobile to no avail), makes it unsuited for production work. Also, while Safari does, Firefox doesn't seem to support the handy one-finger double-tap to zoom, where content can automatically zoom to browser viewport width. In Firefox you are stuck with two-finger pinch-zooming, which is a bit of hit'n'miss in making the content fit the browser width.
All of these technical implementation details aside, since this zoom interaction would be a bit of a novel way to interact with responsive pages on mobile, it would probably take some time for users to learn and adapt.
Nonetheless, I believe such explorations are worthwhile, since this is the only way we can discover the next best practice UX patterns providing users with better experiences.