Website Layouts

Vertical vs. Horizontal

For those following trends in website design, you may have noticed the growing popularity of horizontal layouts among top designers. After seeing a photographer’s website with the horizontal layout, I knew that it was right direction for my site. It is a great option for designers, artists and photographers looking to showcase their work. However, it is not appropriate for all sites; in fact, most websites really should utilize vertical layouts. I’ll cover some of the pros and cons of each.

Horizontal Website Layouts

Pros

When your target audience primarily views your site on mobile devices, it is physically easier to scroll from side to side rather than up and down. Ease aside, the main benefit is visual if your content is image-based. In the early versions of my main website, I tried various Lightbox-type galleries. All utilized square thumbnails to cleanly organize the images. I found that I was not satisfied with these gallery options because the full image is only viewed if the user opens the Lightbox by clicking on a thumbnail. However, since my full images vary in size and proportions, it was difficult to design a layout maintaining clean lines and visual continuity. With a horizontal layout I could set consistent heights on my images and allow the proportions to dictate the widths for a beautiful and clean design. (Note: Some of my paintings are much wider than then are tall, so I dictated the width to fit small screens. With this, a few images are shorter in height. Since most of the images are the same height, the overall appearance is still fairly clean.)

Image Gallery Example

Vertical Layout Example

Horizontal Layout Example

Cons

First and foremost, horizontal layouts are not ideal for websites with a lot of written content. It requires strategic design to organize the content so that each individual container of text can be viewed within the screen without scrolling. The viewer shouldn’t have to scroll side to side to read a paragraph nor should they have to scroll up and down and to the side. This is largely a problem on phones. If a container is wider than the screen of a tablet, it is too wide in general; columns or containers of text that are too wide can be difficult to read. This is because the eye has to travel further from the end of one line to the beginning of the next, often causing the reader to loose his or her place.

Secondly, there are design elements we take for granted in vertical layouts that are not as easy to implement in horizontal layouts. The traditional computer mouse only scrolls up and down. This means that any viewer with a traditional mouse has to scroll a horizontal site by moving the scrollbar with his or her mouse. While there are some methods, mostly scripts, to force a vertical scroll into a horizontal scroll, many do not work across all browsers. On mobile devices, this is not an issue at all, so if your target audience primarily uses mobile devices, this may not be a concern for you.

Another element we take for granted is the anchor link or internal link. Anchor links are designed to look only at the Y axis, or height, on the page. Different containers within a page of a horizontal layout begin at the same height, so anchor links do not appear to work. I have found one method which requires the containers to be coded as a unordered list. It seems to work well, but the unordered list structure may not work with every force scrolling option. I’ve seen a few sites with horizontal layouts where the developer(s) seem to have found solutions that address both issues, but the information on how to do it is not widely available at this time.

Vertical Website Layouts

Pros

Vertical layouts are standard. Even individuals that rarely visit the internet have a good idea of what to expect and how to navigate a vertical site. If they have trouble navigating your vertical site, it may be an issue of how you designed it. For instance, I came across one website recently where most of the navigation was located under a link titled “Site Map” in the menu. Not only was it an improper use of the term, but it was not intuitive as a source for user navigation. Getting back to the point, vertical layouts are intuitive.

In addition, vertical layouts are ideal for text, tables, and Lightbox styled image galleries. You have no height limitations, and width limitations are only a factor when considering smaller screen sizes such as phones. Anchor links and scrolling work as expected with no additional backend coding.

Cons

Horizontal layouts automatically create a unique user experience since they are not common. With vertical sites, you must rely on other design elements and content to stand out from crowd. The only other downside to a vertical layout is as described earlier, when your content is primarily images of varying sizes such as a portfolio.

Conclusion

For most people and companies, vertical sites are most effective. If you are considering a horizontal site, there are some actions you should take before making your decision.

  1. Identify your target audience. If your target audience primarily use desktops and/or spend very little time on the internet, you should probably use a vertical layout. If your target audience is younger and more tech savvy, move on to #2.
  2. Study existing horizontal websites to determine what you like and don’t like, what works and doesn’t work.
  3. Evaluate your content and consider the most effective way to present it taking into consideration what you learned through #2.
  4. If you are still considering a horizontal site, mock up a few different pages with varying amounts of content and types of content. Present it to a few friends or coworkers for user experience feedback.

Though I designed my main website without understanding the setbacks, I would have still chosen a horizontal layout. Understanding the nuances in advance would have saved me time in the development and set expectations appropriately. As I have been meeting with clients and potential employers, I realized that this a topic I continually address in my conversations. I figured that more of you may benefit from this information.

*I wanted to add another note regarding horizontal sites. The Horizontal Way has featured many horizontal sites which I reviewed in the process of building mine. If you look through them, you will see some of the pros and cons I’ve addressed in this article. You will also notice that several of the websites have gone back to a vertical layout. While I stayed with the horizontal layout for over a year and half, I learned that I did not have the time nor the desire to keep up with browser updates and their affects on my site. For that reason, I have moved to WordPress utilizing a vertical layout. Thankfully, there are a lot of amazing developers of templates and plugins to build a unique and functional site.