Disclaimer: This is not an authoritative source on HyperText Markup Language, HTML, Cascading Style Sheets, CSS or Javascript, JS. I suggest Mozilla Web Docs for web technology documentation. Please excuse any intentional attempts at comedy.
Why Another Heckin' Website?
Modelling a website is no mean feat, and it's often useful to go back and check the html spec from time to time as it updates. This is especially important when you're going for an informative tone. This site seeks to model a text heavy informative website (like a blog) while also utilizing much of the current available HTML features. We'll also create a small but sensible set of styling instructions in CSS and a couple of handy but optional JS features.
Section Headings: A Modest Proposal
Headings are shamelessly abused by most modern websites. Beyond usage in an article tag, They should follow their natural ordering and group information based on their labels. They shouldn't be used for emphasis, or for rhetorical conversations with the reader, instead they should give the reader an idea of the content to follow.
Not only will using relevant headers help your readers follow the content of your page, but it might stop you from abusing data related tags like the ones to follow.
Data Organization
While you can deliver text in easy to digest chunks, HTML provides several tags that can provide comparisons, lists and other information. Not only can you provide this information in a uniform matter, you can do so without adding extra accessibility overhead.
Tables
For instance, let's say you want to measure this website against some other well respected peers? A table can provide that information at a glance. Well respected peers in this case includes several profanity laced tirades about minimalist website design that for better or worse inspired this project. Peruse at your own discretion.
| Websites | Requests1 | Media? | Tables? | Forms? |
|---|---|---|---|---|
| 1000+ kB | N/A | N/A | YES | |
| M***** F****** Website | ~22 kB | NO | NO | NO |
| Better M***** F****** Website | ~22 kB | NO | NO | NO |
| The Best M***** F****** Website | ~110 kB | YES | NO | NO |
| A Pretty Heckin' Website | ~122 kB2 | YES | YES | YES |
1As measured by a generated Chromium Lighthouse tool report. | ||||
2Excluding Youtube embed. | ||||
Lists
Whereas tables are ideal for comparisons, lists are good condensing repetitive or related data. While this can be convenient in cutting down paragraphs into more digestible content, they should be used judiciously. As a general rule of thumb, lists over five items should either be refactored into nested lists, or refactored into separate lists.
For example, the many features of A Pretty Heckin' Website might become unwieldy if we placed them in a single line, but by nesting lists the user can more efficiently skim the information provided. Nesting should be styled with increasingly shrinking fronts to remind the writer to that deeply nested information might as well be inaccessible. Much like headings, keep these items short and leave your sentences in paragraphs.
This site made with...
- Superior CSS
-
Lightweight
- under 250 lines
- Responsive
- Broadly compatible
- Built with Sass
-
Lightweight
- Honorable HTML
- Semantic
- Built for default accessibility
- Comprehensive
- features most HTML tags
- Semantic
- Judicious JS
- Adds Non-critical Functionality
Other Informational Widgets
These next few widgets are special in that they are not supported in Internet Explorer. IE compatibility isn't as big a concern as it was in the past, but you never know, so keep compatibility in mind and don't lock any core functionality behind these features.
Details
The details1 tag is a handy way to implement footnotes and other non-critical data that doesn't merit an aside bubble. Even when used with IE the summary and content will still be available, so compatibility is a minor concern employing the details element.
1
You can use details when you don't think it's necessary for the reader to get all the details.
Meter
Meters can be used to represent gauges. For example, Lighthouse, a browser accessibility tool, grades this website:
Lighthouse Score
100 Score
100 Score
100 Score
100 Score
37 Score
A Pretty Heckin' website also was graded highly for mobile screens as well.
Progress
Progress tags create progress bars, useful for showing numeric information that indicate progress. In other words, it is a gauge that is expected to fill one way (from zero to one).
The above bar measures your progress on the page, you are Not Supported - Javascript is Disabled % through this page.
Forms are Fundamental
It's hard to think of a website that doesn't contain a form. Even if your content is a canon of theological theses, you're at least going to want to get users to subscribe to your newsletter. Most important considerations are to keep it simple, even if you're running frameworks on top of frameworks, your forms are going to boil down to something like the one below.
Interactive elements are also very important styling opportunities. Beyond tweaks to font size and padding for legibility, box shadows are an effective way to highlight the special nature of the input boxes. Animation allows inputs and buttons to indicate hover and focus without jarring color transitions.
Form
Form Submission
Form Not Submitted
Media, Images and other pretty things
I didn't kill my wife! Also something about web design!
Media is also another concern in modern design. Videos should be responsively sized for both desktop and mobile. Size and compression is a consideration. We can also embed, if we are concerned with hosting video.
A lot of the same advice goes for images, with an added emphasis on size. Most modern browsers support internet optimized image formats like webp and avif, which can be substantially smaller than conventional formats.
Even accounting for the tables and forms, we're still looking at less than 500 lines of CSS. That's with extensive font integration, media responsiveness and accounting for a majority of the elements that exist within the HTML spec.
Pretty Heckin' Website is not a satire
Every website should look like this, and any which do not conform should be removed from the internet with extreme prejudice. But on a more serious note, minding these standard HTML patterns can help make your webpages more accessible and functional. This site can also be used to measure CSS designs with by modifying the div and div#flexRows to be assigned to create columns and rows respectively. Since you've already seen it in the superior form, you can compare and see where the prospective layout may falter.
Epilogue
Inspired by the brilliant pages The Best M*****F****** Website, Better M*****F****** Website and M*****F****** Website. Beyond being entertaining reads, they offer some sage advice about webpage design. Even if they have never heard of a table.
Built using SASS for CSS, the font LEMONMILK and resources hosted and shared by Mozilla.
Hosted by Github Pages.