How can height effect the UX of a responsive site?

Height is often overlooked in small devices. On mobile, it can get pretty long. In the following post, let’s try to address this. 

Almost every new client these days wants a mobile version of their website. When designing responsive sites, we tend to focus a lot on keeping content nicely formatted within all the various screen widths in use today. This makes sense given that horizontal scrolling is not particularly user-friendly, so constraining the design to the browser's viewport width is generally an accepted methodology.

On smaller screens, stacking things into a single column is the go-to move and often, as long as the content stays within the proper width, further thought isn't given to the height of the page. As a result, I've noticed that in my own designs and many out in the wild, mobile page’s length tend to be quite long. This post is a suggestion to keep the height of the browser's viewport in mind as you're designing responsive sites.

Important role played by Media Queries

Media queries are the third pillar in implementation of responsive design. Without media queries, fluid layouts would struggle to adapt to the array of screen sizes on the hundreds of devices out there. Fluid layouts can appear cramped and unreadable on small mobile devices and too large and chunky on big widescreen displays.

Media queries enable us to adapt typography to the size and resolution of the user’s device, making it a powerful tool for crafting the perfect reading experience.

CSS3 media queries, which include the browser width variable, are supported by most modern Web browsers. Mobile and desktop browsers that lack support will present a subpar experience to the user unless we step up and take action.

Let’s look at an example

Google’s Nexus landing page is a pretty typical modern, marketing page. It has a nice, clean design and it’s responsive. You can pull it up on any size screen and it’ll format nicely within the screen's width.

But if you pull it up on your phone, you may notice that it takes quite a bit of scrolling to get through the whole page. On my MacBook, the page was about 4,500 pixels tall - which is about 6 times the viewable height of the browser window. By comparison, on my phone the page was about 6,200 pixels tall - or roughly 10 times it’s viewable height. This is not inherently bad; there’s no design law that states you have to make websites consistently tall across different size devices, but I think it’s an interesting observation to dig deeper into.

So what’s the problem?

Again, I don’t believe that the overall page length itself is inherently problematic. I have noticed though that in many responsive designs, purposeful groupings of content are easy to spot on larger screens, but get muddled when things start to stack on mobile screens. For example, on the Nexus page, the second section groups three hardware features together. On a large-enough screen, you see these three blocks side-by-side and the section often ends up being exactly the height of the browser’s viewable area. On mobile however, you end up only seeing one of the blocks at a time. As you scroll through the page, it’s not obvious that these 3 things were intended to be grouped together - not the end of the world, but not optimal either.

Is there an alternative?

Recently, I’ve been using the height of a devices viewport as a rough guide to help determine how I should lay out content. The intent is to solve the problem I mentioned above where content that is intended to be grouped together can be reasonably viewed at the same time on any device. In the Nexus example, an alternative to their original design might look something like this.

By drastically shrinking the size of the section heading and the thumbnail photos, we are able to fit all the same content from that section into a single viewport. This change by itself might only be a small incremental improvement, but in aggregate I’ve found that following this general guideline leads to layouts that are easier to follow as you scroll through the page on mobile devices.

Stepping back a bit...

There’s nothing special about the design I just showed you. It’s only one of many possible layouts that would have achieved the same goal - keeping the content in a particular section grouped together more obviously. If you decide to use viewport height as a guide for your mobile layouts, you should explore all the different ways you can position content. Depending on the context of your design and the nature of the content, different layouts may work better.