Perhaps someone would like to have a look and give their opinion on my slight layout tweaks - it’s been slow going, I’ve bounced it off some friends and coworkers and I figure, the more the merrier.
Any opinions and input are welcome. I’ve been reading a book on Japanese layout design that’s given me some new ideas so I’ve been developing a layout where every decision is motivated by some underlying idea about what I’d like my website to be. This new header signifies the semantic nature of my website - written not in machine-parseable language, but poetic human grammar. So no header and menu, but a sentence. The dashed line is more functional and I don’t know if I’m happy with it yet. A dashed line, semi-permeable, between the journey (navigation) and destination (the content of the page), signifying journey and destination being different but still linked. No journey without destination, and vice versa.
Clarity and usability are very important to me so I’m looking for a way to get some of these ideas into my layout without compromising either - I’m not convinced of any of it yet, so new ideas are also welcome!
The current design feels a bit busy at the top (at least in comparison). Having the header and menu links together and the same size, with the divider, makes it all feel a bit calmer imo. I like the colour accent on the ‘p’ too!
Your experimental design is a lot more economical with the space; if that’s partially what you are going for, then you’re succeeding. The divider is definitely helping to visually separate the header from the content. If it feels off, I’d experiment with wider dashes, or possibly just a horizontal rule, see if any of those fit better.
I especially like that you still found a way to keep the Easter egg in the header. It’s a little more subtle, but it’s still there, even if it’s in another shape.
Are you interested in mobile/responsive design feedback? The only thing I noticed is that on mobile (or zoomed in) the page requires horizontal scrolling, at least for me.
Have to find a way to vary the dashing with CSS that isn’t some weird hack… I feel like a longer dash would look nice. Maybe go so far as to just put in some text dashes.
That zoom thing on mobile has been a bit of an issue over the years. My particular mobile browser likes this setting but then it’s been a while since it got any updates. Worth looking into the viewport metatag again, I guess.
While this should work, and you’re welcome to ask for coding help if it keeps not working for any reason, another option you can try is clamp(). Has the same function as the media query there, but maybe it’ll play nicer with the rest of your code? It’s at least worth playing with, if the queries keep being mean.
