Page template allows long titles to bleed down into content area

[ferdnyc]

Screenshot pretty much says it all.

[ferdnyc]

Actually, there's a lot of box-model horribleness going on in narrower browser widths:

[ncalteen]

Eesh yeah that's not wonderful. I will work on making this more (correctly) responsive

[ncalteen]

I just pushed some updates and deployed a new version to GitHub Pages. Please take a look and let me know if you see any areas for improvement :)

[ferdnyc]

@ncalteen Things look a lot better now, definitely. But if I can make a couple of suggestions...

Center-justified text

I see the text-center class has been added to all of the headings. While centered headings are fine, center-justified multi-line runs of text tend to be a chore to read (due to the eye having to track to a different starting point for each line), so text-align: center is especially not-great for wrapped headings.

And the thing is, text-align: center isn't even needed to center the headings themselves -- the CSS grid does that already. So the text-align center class only affects headings when they wrap. It's the difference between these two layouts:

Personally I find the heading in the second one easier to read. (And as the "What is IssueOps?" heading shows, the centering of non-wrapped headings isn't affected.)

Document structure

I didn't look at the page source originally, but now that I do... it appears that every "paragraph" in the document is inside a <span> tag? That's... REALLY strange, and if it was true in the earlier revision, is the most likely source of the previous overlapping-text problem.

It also has accessibility implications. It's no accident I put "paragraph" in quotes above. Much like faking headings with styled <div> or <p> tags causes accessibility problems, faking paragraphs in the way they're faked in these docs can cause similar problems.

WebAIM's "Designing for Screen Reader Compatibility" explains how various structural elements are used by assistive technologies.

For headings, it explains:

Another way to get an overall impression of a page's content is to jump from heading to heading. Users can hear an outline of the page's main ideas, then backtrack to read the parts they are most interested in. The main drawback to this technique is that it relies on headings—which too many pages lack. See http://webaim.org/techniques/semanticstructure/.

Implication: Authors should organize content with headings. To the extent possible, the headings should represent an accurate outline of the content.

The situation is similar for paragraphs:

Users can jump from paragraph to paragraph, listening to the first sentence or two before moving on to the next paragraph. This technique resembles the way visual users explore the page before focusing on an area of interest. Users can also jump from element to element, such as <div> tags, links, form elements, list items, or other units of content.

Implication: When possible, place the distinguishing information of a paragraph in the first sentence.

If a document doesn't have paragraphs, and only "fakes" the separation of various pieces of content into paragraph-like blocks using text spans, a screen reader has no way of detecting those separations, and the entire page text (or at least, the text under each heading) looks like one long, run-together paragraph.

Paragraphs should use <p> tags, not <span> tags.

[ncalteen]

Thank you for the deep-dive @ferdnyc! This really helps :) As I'm sure you can imagine, frontend development is not something I spend a ton of time on, so this is very educational. I've gone ahead and implemented the changes you suggested. If you see any other areas of improvement, please keep me posted!