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?

  Quote

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:

  Quote

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!

[z929669]

This can be more specifically addressed after the software update. I personally would like to see a change as well with use of some different standard font flavors for headings as well as heading spacing (above and below). I like this blog reference and will carefully study it when setting up the site typography ... nobody is more anal about this stuff than me, and we have limitations currently because s4n set it up and I only tweaked what I thought were the major changes needed. Currently, there are subtle difs among all headings, but a bit too subtle.

 

For now, I think it is fine, but will make it better after the update once I see what manifests then.

[TechAngel85]

I'm glad I'm not the only one that has noticed this! I thought I was being anal, but it really is hard to separate information on our wiki Guides when you have the entire browser full of text. Things start running together.

[echo451]

Good article. Worth taking the time to read!

[stoppingby4now]

There will also be changes coming down the road with the integration of Zurb Foundation.

[TechAngel85]

Was curious about that because Z mentioned Drupal once in the context of a Guide for FO4. Must been some discussion of this behind the scenes.

[stoppingby4now]

I've been wanting to delve into drupal for the means of providing the actual guides, with queries into mediawiki to get mod information, etc. The wiki, and even semantic mediawiki just isn't meant to handle the kings of things that are needing to be done to support things like packs.

 

EDIT: Corrected my phones autocorrect.

[TechAngel85]

I've used both Drupal and WordPress before. They are both good content management systems with Drupal being more on a technical side and WordPress more on a "anybody can use this" side. My last website was 100% WordPress because I didn't have a lot of time for managing it. I've never dug into creating queries from any sort of database though. It would be interesting to set this up on a VM to play with....I need a vacation to have to time to do everything I want to do...

[TechAngel85]

I've edited the headers on my sandbox to be more in line with how they are typically used within pages and the formatting to match. I'll break down my reasoning and thoughts:

 

• H1 headers have not been used and left for the page name.
• All headers have been given a tiered top-margin with the H2 header having the largest margin and H5 headers having the smallest, but is still a least double the width that is found between normal paragraphs in order to better separate the content.
• Likewise, the font sizes are tiered and a small letter-spacing has been added to better differentiate the headers from the content text.
• The H2 and H3 headers have been given a bottom border to further section off different content with the H3 border being thinner. This makes more sense when you see it used as it is in the ModuleConfig.xml File section of the sandbox page. The H3 header's width has been limited to only 65% of the page width in order to limit the width of the border. This gives it a tiered appearance so readers know the new section is still part of the larger section defined by the H2 header above it. The width should not interfere with the header length because no header should expand that length anyway, and if one does, then a better header title needs to be thought up.

Sandbox: https://wiki.step-project.com/User:TechAngel85/Sandbox2

CSS: https://wiki.step-project.com/User:TechAngel85/temp.css

 

Overall I think the headers are better differentiated and make more sense. The spacing around them is also more optimal for reading. This theme should work for all wiki pages besides more custom pages like the STEP Guide...which has it's own CSS anyway.

[Greg]

I think the H2 heading at the top of the page is a bit odd with the border floating behind the table of contents, and the H3 heading pulls the [EDIT] tag away from the right margin.

[GrantSP]

Perhaps the 65% for the H3 underline could be further reduced to something below 50%?

That way it will more easily be seen as connected to the previous content under the H2 heading.

 

Minor quibble on my part.

[TechAngel85]

  On 12/22/2015 at 6:20 PM, Greg said:

I think the H2 heading at the top of the page is a bit odd with the border floating behind the table of contents, and the H3 heading pulls the [EDIT] tag away from the right margin.

There's nothing that can be done about that because that TOC is more or less floated on the page in that position. The position of the edit is moved due to the smaller width. Nothing that normal users are going to see because most of them don't log onto the wiki. 

 

  On 12/22/2015 at 10:09 PM, GrantSP said:

Perhaps the 65% for the H3 underline could be further reduced to something below 50%?

That way it will more easily be seen as connected to the previous content under the H2 heading.

 

Minor quibble on my part.

I had it at 50% but it looked weird, imo.

[Greg]

  On 12/23/2015 at 5:35 AM, TechAngel85 said:

There's nothing that can be done about that because that TOC is more or less floated on the page in that position. The position of the edit is moved due to the smaller width. Nothing that normal users are going to see because most of them don't log onto the wiki.

Yeah, I think you're right and this is admittedly a minor nitpick. I don't think anything can be done about the h3 width, either. It is theoretically possible to use an h3::after style to overlay a block element on the h3 border so it appears to be narrower than it really is, but this requires using display:block or display:inline-block on h3 and causes more problems than it solves.

[TechAngel85]

I brought the width of the H3 down to 55% as a compromise and I reduced the letter spacing just slightly.

[stoppingby4now]

The letter-spacing is a nice touch, and offers by far the best improvement for reading the actual header.

 

Not going to implement width due to the pulling of the EDIT link along with it.

 

The alterations to the headers I'm just not feeling. There is plenty of space for separation between a header and the content above it, and you're modifications are adding more. I'm sorry, I'm just not seeing the difficulty in identifying the logical separation in the current setup.

 

I've updated the wikidev with the letter-spacing (0.02em) on the header content itself, as well as the borders on h2/h3.

[z929669]

Agree that the letter spacing is a nice touch. Also agree with s4n on the margin spacing around the headers. I am a fan of minimal whitespace below headings (larger for main headings and smaller to absent for minor headings). I like some whitespace above all headings, but not too much, as it wastes real estate. I think the current implementation (now including said letter spacing for headings) actually looks a bit better than the proposed changes:

• Proposed ex2
• Current, ex2 (better, IMHO)

Also, not a huge fan of too many borders on too many headings. I like them on H2 only and very light at that.

 
Editor
The standard format in editor windows can also have some influence on the outcome, particularly when added line breaks exist. Here is how you had the last section:

==Advanced Scripting==
===Conditions===
Conditions are instructions for the FOMOD installer to follow based upon a set state of a specific flag or flags. These conditions can be used for whether or not to display a specific page of the installer to users or whether or not to install specific files or mod options, all based upon the user's selection choices within the FOMOD installer itself.

===Dependancies===



==Troubleshooting==

Tags are case sensitive!
It's important to know that XML tags are case sensitive.





===== NOTES =====

Nothing as of yet...

... but the following is much less wasteful and easier to navigate IMO. I have tried hard to maintain this spacing between paragraphs and headings in the 'edit' formatting throughout the wiki:

==Advanced Scripting==
===Conditions===
Conditions are instructions for the FOMOD installer to follow based upon a set state of a specific flag or flags. These conditions can be used for whether or not to display a specific page of the installer to users or whether or not to install specific files or mod options, all based upon the user's selection choices within the FOMOD installer itself.

===Dependancies===
==Troubleshooting==
Tags are case sensitive!
It's important to know that XML tags are case sensitive.

===== NOTES =====
Nothing as of yet...

Lastly, as I have stated in the STEP Wiki Editing guide ... it is probably best to place any magic words, categories or inline format refs (e.g., CSS) to TOP of page, so that editors can immediately (and consistently) see what specific changes are being made to a particular article without having to scroll down.