How much do you worry about height of elements?

[nixnerd]

*Note: I would consider this to be a CSS questions but if a mod feels differently, feel free to move it.

I am very interested in one page site design at the moment. Sure, I usually have a link to the blog or photo gallery in the footer but for the most part, I really like the bulk of the content to be on one page. I like this for several reasons:

1. Very user friendly UI. They just have to scroll.
2. It’s a very logical way to control the story that’s being told.
3. It’s a great format for a linear train of thought. This kind of ties in with #2.
4. It allows for STUNNING imagery as JS plugins can be used to create scroll effects.
5. It speaks to my minimalist nature.
6. It translates to mobile beautifully.
7. There are levels of discovery that cause users to stay on pages longer.
8. It feels very current. Verbose pop-out menus and sub-menus do not.
9. Blogs work great with this format.
10. It allows for infinite scroll which is REALLY hot right now thanks to Pinterest.

Now, please just indulge me on this one. I know that just because its a popular format, doesn’t make it a GOOD format. I get all that but let’s just assume you agree with my 10 reasons.

Here’s the question: How much would you worry about the height of various elements?

It seems to me that in a perfect world, each section of content on a very tall page would fit entirely inside the viewport of whatever device its being viewed on.

To some degree, depending upon the content, this is totally possible. That’s great! Photos, sections with just a little information, contact forms etc all fit very nicely inside the viewport, no matter what size it is. With a little forethought and a few media queries, this is very easy.

However, with some content, not all the elements that go together can fit in the same screen-sized space.

The question is… do I just say “screw it” and let people scroll to see all that needs to be seen? After all, that’s why scrolling exists.

Also, it seems that worrying about device width and height creates WAY too many moving pieces to worry about.

I can see how setting a height on every section, article, div, etc… could create more breakpoints than it fixes.

FYI, I’m all for setting the height of the top section so that you at least control the initial look of your site on all devices. After that… should I just leave well enough alone and build the site without obsessing over the height of containers?

Sorry for the long post.

[noahgelman]

I do not discriminate against any of my containers regardless of their color, gender, age, orientation, or height.

[Alen]

How much would you worry about the height of various elements?

On mobile, a lot.

Think about the target area user has to interact, our fingers are massive and I’m pretty sure you experienced a site that makes clicking on a link/button, while using mobile, extremely frustrating. Add to the fact that some developers think it’s ok to disable zooming.

While, above-the-fold, doesn’t really apply on mobile (since it’s natural to scroll), you still have to think about the performance. Performance is no longer an afterthought, it should be treated as a feature. Due to the fact that Google takes speed into account when ranking, half off your list would go against performance.

Linear single page websites are extremely bad for mobile. Since ALL the content is loaded in one swoop. To deal with this issue, developers would employ progressive enhancement, where you would provide clickable button to the section of content in question, and only request that content if user wants it. When on larger screen, you would use JavaScript to pull in that content, replacing the button/link. I believe Wikipedia does a great job of this. I’m not sure if they use AJAX or if the content collapses and is expended only when clicked on. Anyways…

I’m all for setting the height of the top section so that you at least control the initial look of your site on all devices.

Stop thinking like a print designer. Why do you want all this control?

Let the site live in the wild. You never know what kind of device is accessing it, so defining any boundaries is just asking for trouble.

Think about vertical rhythm, and let the containers contain…

[Author]

Posts