UI/UX Tip 13: Use Horizontal and Vertical Real Estate Effectively

Effectively utilizing horizontal and vertical real property is a way to make sure your website works on today’s devices.

Responsive design is about creating a website that adapts to different screen sizes and devices with an appropriate interface. However, vertical real estate as well horizontal real estate go beyond responsive design.

While responsive design is focused on small screen sizes, horizontal real estate is designed to maximize large screen experience. Horizontal real estate still uses the grid systems that underpin responsive design, but you should extend that grid system to accommodate larger monitors in order to make the most of the screen space available.

Vertical real estate refers to the way we consume content on different devices. This includes scrolling, scanning, and flicking. To maximize the use of the device, this must be done. However, it is about using more space to share your content and story effectively.

You can create amazing experiences by focusing on what real estate you have at your disposal and being creative.

Horizontal Real Estate – Why and How to Make Your Experience span Large Screens

The trend has been to move away from medium-sized screens towards larger screens and high-resolution monitors. W3 Schools reported that 30% of web users use high resolution screens, with many of them using larger monitors. How can we make the most of our horizontal real estate for larger devices?

Too often we only focus on mobile devices. Clients with 30% of their traffic coming from mobile devices have been our experience. It’s important to provide a relevant experience for those users. But what about the 30% who have larger screens/resolutions. We have to make compromises when moving to a smaller screen. Video that plays automatically on a bigger screen or browser window may become a static image on smaller screens. The experience can be altered by adaptive or responsive design. How can we make the most of horizontal real estate when we have more space – a Dell Monitor, a Dell 27-inch iMac monitor or large touch screen? If it is feasible to use, we should consider what other things we could add.

Visuals are easiest to expand across the screen. Text is generally read in shorter lengths so expanding too much of it can make it more difficult to read (see Fresh Consulting portfolio below). You can still use text in blocks if you keep it in blocks.

Horizontal real estate gives you the chance to dramatically expand your experience. Horizontal real estate is a great way to expand your experience on larger devices with higher resolution. How can you ensure that your website makes the most of a large monitor? We often design for smaller screens and forget to consider the limitations.

If you have more real estate, why not use large, beautiful images, patterns or colors that span its width. You can fill it with Portfolio or product pictures. You can show more tiles in a collage. Your video can span the width of your screen for full-screen experience. Just like our eyes can see the world in a panorama, so can your video.

You can make your content stand out and draw attention to it.

Vertical Real estate: No Charge as Long As You Capture Interest

Smaller screen resolutions allow for scanning, scrolling or flicking of the screen. This is common practice. This highlights the importance of vertical real estate. This is in addition to the well-known fact that we scan websites rather than reading them .

Paddy Donnelly writes in the article Life, Below 6oopx about how the notion of “above” derives from print journalism. He also discusses that the purpose above the fold content – a hero image and compelling headline – was intended to encourage the reader to explore further.

Donnelly writes, “Imagine a newspaper that has all its quality content removed from the front page.” How disappointed would it be to find only the remnants in your paper? Your site is the same. When everything is presented to the reader as exceptional quality, once they begin exploring the site, and the rest isn’t up to par, they will be disappointed.

Vertical real estate encourages people to scroll. As long as the content is engaging, captivates interest and connects people with the rest of your experience, the real estate is free. Instead of burying your content, make sure your vertical content is compelling enough to keep people scrolling.

Below is an example of the screen states that we have added to the Washington Federal website. This illustrates how vertically organized content can help to tell the story. Scroll down to learn more about the company.

Washington Federal page was designed to be responsive. No matter what screen size or device the user is using, they will enjoy the same quality experience. The website visuals can be expanded to fill more screen space, such as imagery, map and color sections.

Vertical real estate is not something we should be thinking about. We shouldn’t think about how design choices can encourage users to explore. These are both important considerations for vertical and horizontal real estate.

Screen Real Estate is available for your consideration and investment

This post shows you how to use both vertical and horizontal real estate to create an amazing experience. You can make the most of every pixel you have so users will see more of your content and get to the core of the story without having to break it up into pages.