Web App - Set a Max Width or Let it Expand Responsively?

Question

Hopefully this is an easy one.

I'm designing a web app that contains rows of cards you can horizontally scroll, and a sidebar navigation on the left (think: similar to DoorDash).

I notice on my wide desktop Mac (2000px-2200px) the app feels too wide/busy if I design it responsively without a max-width, as it expands the entire width of the viewport.

However, if I set a reasonable max width for the layout (i.e. 1400px) things begin to feel tight and a bit strange on my desktop with all the empty left/right space.

What is best practice here? Is there a correct answer to this? What are the pros and cons of setting a max width or letting it expand responsively?

Thanks!

Answer 1

I don't think it's that simple. In my opinion it depends on several factors, the most important of which are:

• Type of content
• Target user
• Function
• Design elements

Type of content

If the elements are mostly visual, more images and little text, the full width of the screen can be a beneficial factor, reinforcing the gallery feel. For example, the page of an illustrator, photographer or graphic designer.

Dave Murray Illustration

However, if there are images but with abundant text information, or if it's just text, it's convenient to define a maximum width. Forcing the user to read from one side of a screen to the other can be tedious.

User

If the type of user is someone who is looking for something specific on a website, I don't think it's very functional to force them to navigate in a full width of the screen. A website without limits serves to "navigate" the content without specific searches. For example, some pages aimed at children.

mattel.com

Function

If it's a visual information website and returning to the first point, with a predominance of images, the full screen width can be an alternative. I don't see it as very viable for an e-commerce: too much information on each card to expand it across the entire width of the screen.

The exception are stores with a digital showroom such as clothing e-commerce.

levis

Design elements

A full screen width implies the horizontality of the design, even if there is a vertical scroll bar. Consequently, any design element that breaks this horizontality is a negative point. In the description of the question, a left side-bar appears, this conditions the horizontality and therefore the entire design. Personally, I would avoid a fixed side-bar. There are alternatives such as a tool panel, or a hideable-expandable side-bar, which favor the use and total vision of the screen.

On the other hand, there are also resources to make a page with max-width look like a full-width one by intelligently using the backgrounds of each section.

funko.com

moma.org

---

The summary is

Gallery web = full screen width
Informational web = max width

Answer 2

What is best practice here?

A typical solution to this problem is to have both Gallery and List views. Gallery view is preferable when the user already knows what the target looks like and is trying to find similar ones. List view is the next step when the user is already looking at very similar objects and needs to filter out something specific, therefore relying more on textual details.

Is there a correct answer to this?

General UX principles can be applied to the max-width of the page. Content-width is normally restricted so that users do not have to turn their head reading from left to right otherwise it becomes difficult to keep track of the row. In terms of number of objects per row, it is restricted by short-term memory capacity which is seven items (7 +/- 2). To be on the safer side it is 5 items per row.

Leaving the sidebar to absolute left, it should not be an issue to have adequate whitespace between the cards or around them. Flexible measurements such as {margin: 0 8%;} can be used to scale things properly.