wanted Wiki Header and Text Whitespace

[TechAngel85]

I know we changed this a while back and it looked good with the header tabs, but now that we're not using them anymore, this needs a revisit.

 

I'd like to see more whitespace applied above the headers. Currently is seems like all headers have the same or about the same amount of whitespace above them. This is not good for readability and separation of information! Each header should have a custom amount of whitespace for it (usually a top margin rather than padding) for readability and flow of information. As I work on the ENB Guide, this has become more and more an apparent issue. Lets visualize! Can you tell me what information belongs to what in this example? Where does the main header start and what information belongs to that header?

Sed ac metus massa.

 

Nullam gravida velit ac purus ultricies, nec rutrum ante porta. Vestibulum ullamcorper sagittis volutpat. Vivamus viverra mauris et neque porta dictum. Phasellus scelerisque eget lacus ac tincidunt. Maecenas finibus diam quis dapibus elementum. Sed ac metus massa. Nunc tincidunt, nulla vitae ultrices porta, massa nibh suscipit lectus, faucibus imperdiet mi velit nec lorem. Donec euismod odio sit amet sollicitudin varius. Etiam a sem quis velit sagittis scelerisque nec sed lectus. Phasellus fringilla rhoncus ex eu posuere.

 

Cras convallis et purus a porta

 

Donec scelerisque fermentum condimentum. Morbi porttitor vehicula magna id molestie. Vivamus aliquet tellus vel nulla tempor, et eleifend tellus hendrerit. Donec tristique blandit semper. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent auctor metus ac erat tempus, id ultrices est dignissim. Cras convallis et purus a porta. Pellentesque gravida massa mattis quam accumsan vestibulum. Donec faucibus augue vel turpis commodo faucibus.

 

Nullam sodales vitae nulla in dapibus

 

Proin in pellentesque ante. Nulla at bibendum ante, vel tincidunt ligula. Vestibulum pulvinar gravida massa, eu fermentum arcu mollis eget. In sem urna, semper at egestas eget, ultricies ac urna. Pellentesque molestie elit non nulla bibendum, sed luctus elit lacinia. Nullam sodales vitae nulla in dapibus. Aliquam nec turpis at sapien venenatis scelerisque. Vestibulum ex ipsum, luctus a neque a, bibendum venenatis urna. Phasellus egestas neque non nisi fringilla semper. Nulla efficitur commodo facilisis. Sed ex felis, iaculis ut porttitor sed, tempus ac odio. Ut volutpat iaculis ligula, tempor venenatis ipsum hendrerit vitae. Aliquam ultricies est erat, a mollis dolor dignissim varius. Nam aliquam purus ut nulla semper pellentesque. Integer et leo magna.

 

Quisque molestie nisi et rhoncus suscipit

 

Vivamus sollicitudin massa id purus eleifend molestie. Curabitur volutpat, libero ac consequat rutrum, turpis magna rhoncus sapien, eu ultrices sapien ligula eget ex. In faucibus ex a massa commodo, nec maximus ante aliquam. Curabitur ex mauris, commodo quis tristique in, porttitor at massa. Donec vitae lacus mattis, placerat arcu id, efficitur augue. Sed urna turpis, vestibulum ac pellentesque a, dignissim in nibh. Integer id enim augue.

 

Suspendisse euismod purus quis est scelerisque, laoreet feugiat lorem luctus. Duis varius vel diam eu sollicitudin. Duis rutrum, odio id mollis ornare, lorem lacus vestibulum leo, eget pulvinar tortor dolor id turpis. Maecenas iaculis varius lorem ultricies finibus. Quisque molestie nisi et rhoncus suscipit. Vivamus tincidunt facilisis orci sed fringilla. Quisque luctus tellus non viverra porta. Nullam vitae risus et odio ornare tincidunt et vel urna. Sed sed felis nec dui gravida varius.

 

 

The answer to that is "no". You have no idea what belongs to what because the spacing is the same. Now again:

Sed ac metus massa.

Nullam gravida velit ac purus ultricies, nec rutrum ante porta. Vestibulum ullamcorper sagittis volutpat. Vivamus viverra mauris et neque porta dictum. Phasellus scelerisque eget lacus ac tincidunt. Maecenas finibus diam quis dapibus elementum. Sed ac metus massa. Nunc tincidunt, nulla vitae ultrices porta, massa nibh suscipit lectus, faucibus imperdiet mi velit nec lorem. Donec euismod odio sit amet sollicitudin varius. Etiam a sem quis velit sagittis scelerisque nec sed lectus. Phasellus fringilla rhoncus ex eu posuere.

 

Cras convallis et purus a porta

 

Donec scelerisque fermentum condimentum. Morbi porttitor vehicula magna id molestie. Vivamus aliquet tellus vel nulla tempor, et eleifend tellus hendrerit. Donec tristique blandit semper. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent auctor metus ac erat tempus, id ultrices est dignissim. Cras convallis et purus a porta. Pellentesque gravida massa mattis quam accumsan vestibulum. Donec faucibus augue vel turpis commodo faucibus.

 

 

 

Nullam sodales vitae nulla in dapibus

 

Proin in pellentesque ante. Nulla at bibendum ante, vel tincidunt ligula. Vestibulum pulvinar gravida massa, eu fermentum arcu mollis eget. In sem urna, semper at egestas eget, ultricies ac urna. Pellentesque molestie elit non nulla bibendum, sed luctus elit lacinia. Nullam sodales vitae nulla in dapibus. Aliquam nec turpis at sapien venenatis scelerisque. Vestibulum ex ipsum, luctus a neque a, bibendum venenatis urna. Phasellus egestas neque non nisi fringilla semper. Nulla efficitur commodo facilisis. Sed ex felis, iaculis ut porttitor sed, tempus ac odio. Ut volutpat iaculis ligula, tempor venenatis ipsum hendrerit vitae. Aliquam ultricies est erat, a mollis dolor dignissim varius. Nam aliquam purus ut nulla semper pellentesque. Integer et leo magna.

 

 

 

Quisque molestie nisi et rhoncus suscipit

 

Vivamus sollicitudin massa id purus eleifend molestie. Curabitur volutpat, libero ac consequat rutrum, turpis magna rhoncus sapien, eu ultrices sapien ligula eget ex. In faucibus ex a massa commodo, nec maximus ante aliquam. Curabitur ex mauris, commodo quis tristique in, porttitor at massa. Donec vitae lacus mattis, placerat arcu id, efficitur augue. Sed urna turpis, vestibulum ac pellentesque a, dignissim in nibh. Integer id enim augue.

Suspendisse euismod purus quis est scelerisque, laoreet feugiat lorem luctus. Duis varius vel diam eu sollicitudin. Duis rutrum, odio id mollis ornare, lorem lacus vestibulum leo, eget pulvinar tortor dolor id turpis. Maecenas iaculis varius lorem ultricies finibus. Quisque molestie nisi et rhoncus suscipit. Vivamus tincidunt facilisis orci sed fringilla. Quisque luctus tellus non viverra porta. Nullam vitae risus et odio ornare tincidunt et vel urna. Sed sed felis nec dui gravida varius.

 

 

Is that better? Most likely, you said "yes". There is now a separation of the headers and the information. It's easily understandable at a glance what information belongs to which headers even though you can't read anything. Now go look at the ENB Guide and tell which example we have. The only indication of what belongs to what on that our Guides are the size of the headers and that's all. Yes, the spacing is a bit different, but it's so subtle that it's barely noticable.

 

If you think I'm nuts, just Google "Web design and whitespace" and be flooded with articles all saying the same thing about whitespace:

https://uxmyths.com/post/2059998441/myth-28-white-space-is-wasted-space

https://webdesign.tutsplus.com/articles/using-white-space-or-negative-space-in-your-designs--webdesign-3401

https://www.seguetech.com/blog/2013/03/20/why-whitespace-important-web-design

https://blog.teamtreehouse.com/white-space-in-web-design-what-it-is-and-why-you-should-use-it

 

 

Solution?

 

First read this: https://www.smashingmagazine.com/2009/08/typographic-design-survey-best-practices-from-the-best-blogs/ It's very informative and accurate, imo. Did you notice how easy it was to read and scan or was it so easy that you missed it?

 

The main headers on the pages, which for us that is Header 2, should have the largest top margin (whitespace). Header 3 should be smaller, header 4 smaller yet, header 5 is usually around your text size so no need to edit that one. For example, we could use

• Header 2 - top margin=40px
• Header 3 - top margin=30px
• Header 4 - top margin=20px

I'm sure you can come up with something that looks nice, but is more readable than it is now.

 

Now...I need coffee!

[TechAngel85]

CSS extension is going away so it's placement in the document is neither here nor there at this point. Also the spacing in the document is for my own benefit since it's not final and a lot more will be added into those sections. It's not ready for the public yet, so take any line breaks with a grain of salt. In fact, you probably shouldn't be looking too far into any of it right now. With the syntax highlighting coming soon, it will probably all change anyway.

 

I'm glad everyone at least liked the letter spacing. I was trying to give the headers a bit more of a distinguished look and that was the most minimal change I could think of.

[z929669]

Yeah, that makes sense then ... was taking advantage of a "teaching moment" on syntax in editor for those of us that maintain articles.

 

I definitely don't dislike your changes, and it could be argued that your modified headings are 'better' than the current implementation. It comes down to user preference in the end, so I leave the final design to s4n in the context of his new skin implementation.

[TechAngel85]

Is there a reason the H5 header has an underline decoration when none of the other headers have this?

 

Viewing it on this guide: https://wiki.step-project.com/Guide:NVIDIA_Inspector#Advanced_Settings ...it seems off. It's drawing more attention to itself than the H4 and H3 headers above it, which shouldn't be the case.

[GrantSP]

Where are the definitions of those elements stored? I'd like to know a little more about that too.

[z929669]

The site css on the server houses those elements. Skip H5 if you don't like it and use H6. The underlines serve a purpose in various guides.