The logo is too large, it takes up almost the entire screen at 4k. Don't even want to think about what a mobile screen thinks of that. In general you've pushed anything remotely resembling actual content off the screen by both the logo and the silly stock photo, reducing the site's usefulness. This is particularly true of the menu placement. This "push actual content off the screen" junk also likely leads to high bounce.
For example on my media center (4k, 200%/32px/winV+Large)
https://cutcodedown.com/for_others/ingo/images/LogoTooBig.jpgThat's NOT good design. Even when we get to the tagline and menu:
https://cutcodedown.com/for_others/ingo/images/ContentTooBig.jpgThere's a near useless amount of information present because of the absurdly large fonts and restricted width. Even on the subpages where it's smaller, it's too bloody big.
As I'm a large font user -- the target audience of EM -- your content is crammed into a narrow column because (I think, not looking at code yet) you've likely misxed pixels and EM for your layout. If you're gonna EM, you need to EM everything, not just the font size. Otherwise the font grows for users like myself, but gets crammed into a layout too small for it.
Also not wild about the duplicate menu. A "back to top" link would provide more useful functionality (especially if you know a few "tricks") without duplicating the same content twice.
And pet peeve? I hate largeCap's that are larger than two line-heights.
Popping the bonnet to have a look at how it's put together, you're reasonably clean but could use some trimming and semantic adjustments.
1) Not one legitimate UA gives a flying purple fish about the author or copyright meta. Don't even waste your time.
2) I would suggest losing the ".0" on the viewport meta, and adding height=device-height. Whilst the latter is not official, some devices -- android tablets prior to Lollipop will still lie about their width when rotated into landscape aspect. (Like my old 8" tablet)
3) using HTTP-equiv for those properties is "too late" in the process for some UA's. I would suggest getting those out of the markup and into the HTTP headers since headers are sent before content, and are used to determine if those caching values should be used BEFORE wasting bandwidth on data. Any HTTP protocol settings involving caching should be in the HTTP header, not the HTML <head>. Be it via .htacccess, your server's .ini files, or using a back-end language like php to header() them in.
4) Your stylesheet link lacks a media target, even though you named it "screen". Good naming, but missing attribute. I would add media="screen,projection,tv" to it. Yes, HTML 5 Validation will complain about the latter two values, **** 'em. A lot of kiosks and consoles still need to be told those so they don't apply their own rules over the layout (Opera on the Wiiu for example). This is part of why the validation tool whilst still useful, is utterly meaningless in terms of ACTUALLY meeting validation. Too many ignorant BS changes of late to HTML are destroying why many parts of the language exists in the first place.
It's almost as if the folks at WhatWG were and remain utterly unqualified to have made HTML 4 Strict's successor!5) Your H1 lacks TEXT. Just because it should be the logo doesn't mean you omit it having text, since it ends up a empty heading for search, screen readers, braille readers, etc, etc. You don't want the text for screen media targets, hide it with CSS.
(and not display:none/visibility:hidden since search engines ignore text set to that)6) What's with the DIV for nothing inside the H1?
7) You've got a LOT of pointless classes on paragraphs.
8) you've got paragraphs around non-paragraph content. Someone's name and a date are not "complete thoughts comprised of one or more sentences"
9) What makes a picture of some bottles a "mathematical or scientific figure?". It's a plate image, just use the IMG tag without FIGURE.
10) You've got a whole slew of "rel for nothing" as well. Moreso the value of "tag" makes no sense since that's for links on the CURRENT page, not links to other pages on the site. Aka href="#top" would use rel="tag", but serves no real purpose since UA's have been smart enough to figure that out on their own for decades.
That said you used rel="bookmark" perfectly -- as those are (or should be) canonical links to the articles / posts you've summarized.
11) the classes span inside some of those <p> for nothing are wasteful and pointless, particularly when those date's should be in TIME tags, so reverse the order. Honestly, those whole things are "heading" so either wrap them in <header> or move them into your H3 inside <small> for de-emphasis.
12) As much as I dislike them, UA's are starting to use HTML 5 structural tags (only took 12 years). As such I'd get NAV around your two menu, add <header>, <footer>, and <main> to the page, etc, etc. I'm not happy about it, but it's what the world expects. Yes, this contradicts my prior writings on the topic from years past. That's the web for you, it's an ever-changing target.
The way you're styling it has issues.
1) As I suspected you've got a PX width with EM fonts, specifically that max-width:800px;. when the auto-enlarge of the text occurs the max-width doesn't grow with it.
2) You also don't seem to be using a reset which is causing all sorts of funky spacing issues.
3) Inline images or fonts as base64 or SVG is just wasting bandwidth and removing parallelization. Your file counts on every page are so low, that you're actually taking longer to load because of it. Admittedly, it's all so tiny it still loads quick (for me at least), but it's NOT a good habit to get into unless you really need those images to load whilst the rest of it is still loading; typically the realm of things like JavaScript loaders, not conventional pages.
Yes, keeping the number of separate files low is important, but you can take it too far since parallel downloads can oft be faster than loading a single big file. Your site is 4 files, and browsers can download up to 8 files in parallel. Getting the SVG and base64 png out of the CSS would/should actually load faster.
Remember, your first eight are "free".
And in all but the rarest of cases, people telling you to base64 things into the CSS are talking out their arse, particularly since you enlarge the file a minimum of 1/4 the size since you're converting 8 bit data to six bits, then sending it in a 8 bit namespace. You're not saving bandwidth by making the file bigger.
Also doing so artificially limited you to WOFF, when you should consider deploying both WOFF and WOFF2, since the latter has even smaller files.
4) You should also use more condensed properties in your CSS. Instead of:
border-left: 4px solid;
border-color: #903;
padding-top: 1em;
padding-left: 1em;
margin-left: 1em;
padding-right: 1em;
You could have said:
border-left: 4px solid #903;
padding:1em 1em 0 1em;
margin-left:1em;
I also see some REM in there... given that they don't scale with the current font, I advise against their use. Some like 'em, some don't. I am decidedly amongst the Nancy Reagan crowd: Just say no.
5) making the flow text larger than 1EM in most cases is trash. Setting it to 1.5em on BODY is a huge mistake from a usability perspective as then your flow is too large for the largest of displays. (again, see my screenshots)
... and that's mostly just the homepage.
Tell you what, this is so simple I'll give it a rewrite to try and fix the various issues. May take some sylistic liberties to shoe-horn it into being more accessible / useful.
Let's start by cleaning up the markup:
<!DOCTYPE html><html lang="nl"><head><meta charset="utf-8">
<meta
name="viewport"
content="width=device-width,height=device-height,initial-scale=1"
>
<meta
name="description"
content="Moaneschien, Een kleine brouwerij in een garage, vlak bij het centrum van Enschede, waar 'bier anno nu' gebrouwen wordt."
>
<link
rel="stylesheet"
href="/assets/moaneschien_screen.css"
media="screen,projection,tv"
>
<title>
Moaneschien, bierbrouwerij
</title>
</head><body>
<header id="top">
<h1><a href="/">Moaneschien</a></h1>
<nav>
<ul>
<li><a href="/bieren/">Bieren</a></li>
<li><a href="/nieuws/">Nieuws</a></li>
<li><a href="/blog/">Blog</a></li>
<li><a href="/brouwerij/">Brouwerij</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</nav>
<div class="homeBanner">
<p>
Een kleine brouwerij in een garage, vlak bij het centrum van Enschede, waar "bier anno nu" gebrouwen wordt.
</p>
<!-- .homeBanner --></div>
</header>
<main>
<section>
<h2>
Gist en elektriciteit?<br>
<small>Ingo Janssen: <time>8 oktober 2020</time></small>
</h2>
<p>
Elektriciteit uit gist, kan dat? Recent kwam ik een artikel tegen over het opslaan van energie uit 'groene' energiebronnen die niet altijd beschikbaar zijn. Denk aan windmolens als het wel of niet waait of zonnecellen in het donker. De standaardoplossing is een batterij. Een andere mogelijkheid is ...
</p>
<div class="readMore">
Lees "<a href="/blog/gist-en-elektriciteit/" rel="bookmark">Gist en elektriciteit?</a>" verder --->
<!-- .readMore --></div>
</section><section>
<h2>Vorige</h2>
<h3>
Online festival<br>
<small>Ingo Janssen: <time>09 mei 2020</time></small>
</h3>
<p>
Het eerste online bier festival, georganiseerd door <a href="https://www.rigtersbier.nl/">Rigters Bier</a> en Moaneschien is er bij.
</p><p>
Eerste Pinksterdag, 31 mei 2020 @ <a href="https://www.onlinebeerfest.com/">onlinebeerfest.com</a>
</p>
<div class="readMore">
Permalink: <a href="/nieuws/20200509/" rel="bookmark">Online Festival</a>
<!-- .readMore --></div>
<h3>
Vijf Jaar<br>
<small>Ingo Janssen: <time>02 mei 2020</time></small>
</h3>
<p>
Vijf jaar. Da's lang geleden. Vijf jaar voor het bouwen van een brouwerij. D'r is heel wat sores voorbij gekomen.
</p>
<div class="readMore">
Lees "<a href="/blog/vijf-jaar/" rel="bookmark">Vijf Jaar</a>" verder --->
<!-- .readMore --></div>
<h3>
De Naam<br>
<small>Ingo Janssen: <time>24 april 2020</time></small>
</h3>
<p>
Vanwaar de naam, is een vraag die ik krijg. Is het van "moonshine"?
</p>
<div class="readMore">
Lees "<a href="/blog/naam/" rel="bookmark">De Naam</a>" verder --->
<!-- .readMore --></div>
<h3>
Bier, het Ambacht<br>
<small>Ingo Janssen: <time><time>12 oktober 2019</time></small>
</h3>
<p>
Ambachtelijk gebrouwen bier, ambachtelijke brouwerij. Ambacht is niet exact gedefinieerd, zoals altijd is er meer grijs dan zwart en wit. Hoe ziet het grijs er uit? Een kleine verkenning en hoe het brouwen daar in staat.
</p>
<div class="readMore">
Lees "<a href="/blog/ambacht/" rel="bookmark">Bier, het Ambacht</a>" verder --->
<!-- .readMore --></div>
<h3>
In den beginne<br>
<small>Ingo Janssen: <time>23 april 2015</time></small>
</h3>
<p>
Het was ergens in september 1977 of '78, ik moest op school een spreekbeurt houden en had, heel stoer, het thema bier gekozen. Dan moet er ook maar gebrouwen worden, was het commentaar, om het verhaal wat meer "inhoud" te geven. Er werd in die tijd iets anders tegen alcohol aangekeken.
</p>
<div class="readMore">
Lees "<a href="/blog/begin" rel="bookmark">In den beginne</a>" verder --->
</p>
<!-- .readMore --></div>
</section>
</main>
<footer>
<a href="#top"><span>Back To Top</span></a>
</footer>
</body></html>Is roughly how I'd approach a page like that. Not sure how/where I'd place the plate image as yet since it seems unrelated to the content. Shaves about a fifth of the size off it.
(though admittedly 300 bytes of that shrinkage came from converting tabs to spaces and making the indents make more sense)When/if I have time later I'll belt out some CSS to go with that. [/code]
