🏊 🌄 👏🏿 Responsive web design and browser height responsiveness 👨🏼‍⚖️ 🔔 🛍️

I know that many will have a question about why this article has such an unusual title. How are “responsive web design” and “browser window height” related? Perhaps this title seems unusual due to the fact that "responsive design" is generally understood to mean designing pages to adjust to the width of the viewport so they look good on different devices. Websites always test by shrinking the browser width and watching what happens. But I've almost never come across some guidelines for testing a project, which say that pages are examined by reducing the height of the browser window. Perhaps you have ever caught yourself thinking: "Should I check pages in browser windows of different heights?" I believe that this should be done, and I'm going to convince everyone of this,who will read this article.

When working on a website, it is not very correct to make certain assumptions without relying on real data. Therefore, it is very important to take responsibility for checking sites in browser windows of different widths and different heights.

Why check pages in browser windows of different heights?

Good question. Before moving on to examples and scenarios for using such checks, I would like to talk about the problems that happen with sites that are not adapted to work in viewpoints of different heights. This will help you better understand what is going on next.

Making the wrong assumptions about how a website will be used is one of the most important factors that negatively affect a web designer's work. For example, it would be wrong to expect the site to be used by expanding the browser to full screen. Instead, you must count on the worst.

Assumptions and Reality The

above is an illustration of my words. In reality, not all users work with browsers the way the designer suggests. I myself have come across sites that look bad in reduced-height browser windows.

Browser developer tools

Resizing the browser vertically isn't the only way to affect the height of the viewport. So, for example, when the developer toolbar is opened, it also takes up some of the vertical space.

The developer toolbar takes up part of the browser window

Opening the developer tools can break the design of your site or shed light on problems that no one expected to appear. The highlighted area of the picture represents the current height of the viewport. Opening the developer tools while viewing the site on a small laptop screen will result in only a small area of the page being visible.

Let's think about one important question: "Is it possible to improve the user experience of the site while viewing it in a small browser window?" I can give a positive answer to this question. I guess the theory is enough for us. Let's learn a "vertical" approach to styling pages.

"Vertical" CSS

Some designers and developers focus on the appearance of the page, which it accepts in windows of different widths. At the same time, they overshadow the study of page behavior in windows of different heights. And this is very important. For example, someone is working on a page design and has been given instructions on how a component should look in browser windows of different widths. What about windows of different heights?

On a large phone, navigational elements fill the available vertical space. On a medium phone, the font size and spacing decreases. On a small phone, there is not enough vertical space to display all elements. Therefore, they are placed in 2 columns.

This figure shows a navigation menu whose appearance adjusts to the height of the viewport. The designer's goal is for the menu to fill all the space available to him. On smaller screens, the font size and spacing between menu items decreases. If the phone screen is very small (for example, like the iPhone 5), items are displayed in two columns. These site use scenarios are often overlooked. As a result, sites either do not adapt at all to work on screens of different heights, or they only optimize them when some site visitor reports a problem.

CSS can help us in adjusting the site to different viewport heights. Namely, we are talking about two main techniques:

Media queries based on the height of the viewport.
The unit of measure related to the viewport.

Media queries that take into account the height of the viewport

As you probably already know, you can use media queries in CSS that take into account the width of the viewport:

@media (min-width: 700px) {
  .element {
    /* do something.. */
  }
}

But media queries that take into account the height of browser windows are much less common:

@media (min-height: 500px) {
  .element {
    /* do something.. */
  }
}

/*  */

@media (orientation: landscape) {
  .element {
    /* do something.. */
  }
}

Units of measurement related to the viewport

Using units of measure that are related to the size of the viewport can help improve the user experience on sites. For example, taking into account the height of the viewport, you can adjust the vertical distance between elements.

.hero__title {
  margin-bottom: calc(10px + 5vh);
}

The taller the browser window, the greater the distance between the elements.

All this may seem like a nice little thing that doesn't really affect anything, but only until you look at a similar page on a large monitor - like a 27-inch iMac display. Then it turns out that the height of the viewport is too high. But we luckily have a way to limit the sizemargin-bottom. This can be done, for example, in the following ways:

Using media queries.
Using CSS comparison functions.

The first method (media query) certainly has better browser support. Its essence is to limit the maximum value margin-bottomin cases where the page is displayed on very large screens.

@media (min-width: 2200px) {
  .hero__title {
    margin-bottom: 40px;
  }
}

The second way is to use a CSS function clamp(). When choosing the values passed to this function, we, in this case, set the minimum indent size, equal to 10px, the maximum - 50px, and the values between these two depend on the size of the browser window.

.hero__title {
  margin-bottom: clamp(10px, 5vh, 40px);
}

If you are interested in this topic, take a look at my articles on units of measurement depending on the size of the page viewport and on CSS functions .

Below we will talk about the different ways you can use vertical media queries.

Examples and scenarios

▍Page elements that overlap when changing the height of the browser window

This example shows a page that has a title and illustration in the top section. The height of this part of the page is 100vhequal to 100% of the height of the viewport.

The top of the page with a height of 100vh

It all looks very good, but only until the height of the browser window decreases. The top of the page is not high enough to accommodate the illustration and text. As a result, elements at the top of the page will overlap the content of other sections of the page.

Decreasing the height of the browser window breaks the design.

Notice how the images overlap with the section of the page below the top of the page. This is due to the fact that they do not have enough space. Let's take a look at the code for this example.

Here's the markup:

<div class="hero">
  <div class="hero__wrapper">
    <div class="hero__content"><!-- content --></div>
    <img class="hero__thumb" src="figure.png" alt="" />
  </div>
</div>

Here are the styles:

.hero {
  height: 100vh;
}

.hero__thumb {
  flex: 0 0 550px;
  width: 550px;
}

Let's consider several options for solving such problems:

You can give the image fixed dimensions (properties widthand height), not just its width ( width). The lack of property heightis one of the reasons for our problem.
You can apply the property to the top section of the page height: 100vhonly if the height of the viewport is larger 700px(of course, the specific values used in the media query will vary depending on your situation).

You can combine both of these approaches and get a more reliable solution to such problems:

.hero__thumb {
  width: 400px;
  height: 300px;
  object-fit: contain; /*     */
}

@media (min-height: 700px) {
  .hero {
    height: 100vh;
  }
}

So we decided that "vertical" media queries are a stable and useful mechanism. But using a value 100vhis a risky business, because even if you can limit the size of the image, it may happen that the size of the text cannot be limited. For example, if the text in the top section of the page turns out to be longer, then we will face a new variant of the problem we are already familiar with.

Text overlaps a section of the site where it shouldn't be.

To fix this problem, you canheightuse a propertyinstead of apropertymin-height. With this approach, if the contents of a section are larger than it can contain, its size will increase and its contents will not cover the next section.

@media (min-height: 700px) {
  .hero {
    min-height: 100vh;
  }
}

▍Fixed page title

There is nothing wrong with the page title staying in one place when scrolling. But you need to make sure that this title has a fixed position only if there is enough vertical space on the screen.

Fixed page title

This shows the site being viewed in landscape mode. Note that the heading takes up too much vertical space. Is it important to the user? In most cases, no. But you can improve the user experience of working with the site by resorting to the following media query:

@media (min-height: 700px) {
  .site-header {
    /* position: fixed  position: sticky */
  }
}

With this approach in landscape mode, the title will not be fixed.

▍Hiding items that are less important than others

I noticed this on Twitter's navigation menu. Namely, we are talking about a combination of "vertical" media queries and the Priority + pattern .

Selected items will be hidden if they run out of space.

When the height of the viewport changes, less important items (menu itemsBookmarksandLists) become sub-itemsMore. This is a good example of the use of "vertical" media queries.

.nav__item--secondary {
  display: none;
}

@media (min-height: 700px) {
  .nav__item--secondary {
    display: block;
  }
}

And here is my tweet analyzing the application of this approach on Twitter.

▍Navigation and changing the height of the viewport

The next example is related to the previous one. There is a vertical navigation bar (sidebar, sidebar). If the height of the viewport is small, you can slightly reduce the vertical distance between the navigation elements, which will slightly improve the appearance of the page.

Spacing between elements and height of the viewport

Here are the styles for this example:

.nav__item {
  padding-top: 4px;
  padding-bottom: 4px;
}

@media (min-height: 700px) {
  .nav__item {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

And here you can watch a video for it.

In addition, it can be noted that in such a situation, the font size can also be modified, which, when the height of the browser window is reduced, will give even more room for elements.

▍ Page top section and viewport height

The top section of the page needs some free vertical space to give it some "air". The dimensions of this space may depend on the height of the viewport.

The higher the page, the more "air".

This is how the styles for this example look like:

.hero {
  padding-top: 24px;
  padding-bottom: 24px;
}

@media (min-height: 700px) {
  .hero {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

▍Modal components

As you may already know, modal components are expected to be at least horizontally centered. But you may need to align such an element vertically. This is possible, but it gets in the way of changing the amount of data output by such elements.

If the modal contains the correct amount of data, then it looks very good as shown below.

Correct modal

Here are the styles for this element:

.modal__body {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
}

But if more text needs to be displayed in the same element, everything will not be so good. Namely, the element will fill the screen vertically and the user will not be able to scroll through its contents.

Modal Element Too Tall

This problem occurs for the following reasons:

The modal has no height specified.
The element is centered vertically (this will speed up the problem).

Here is the CSS that addresses these issues:

.modal__body {
  position: absolute;
  left: 50%;
  top: 3rem;
  transform: translateX(-50%);
  width: 500px;
  min-height: 200px;
  max-height: 500px;
  overflow-y: auto;
}

@media (min-height: 700px) {
  .modal__body {
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

Note that properties min-heightand are used here min-width. The first is to make the element look good even when it displays short text. And the second allows you to limit its height to a given value instead of giving it a constant height.

Modal element suitable for displaying long texts

Outcome

When designing websites taking into account the experience that users will get from working with them, it is best to build their design based on the width and height of the browser window. It may seem strange to someone testing pages in windows of different heights, but such testing justifies itself. Here I talked about the importance of a "vertical" approach to site design, how to design pages in order to display them correctly in viewports of different heights, and looked at examples. I hope you find all this useful.

Are you paying attention to how the web pages you create look in browser windows of different heights?

Responsive web design and browser height responsiveness