The Newwwyear Design
Published 6 years, 10 months pastWell, here it is — the first new design for meyerweb since February 2005 (yes, almost 13 years). It isn’t 100% complete, since I still want to tweak the navigation and pieces of the footer, but it’s well past the minimum-viable threshold.
My core goal was to make the site, particularly blog posts, more readable and inviting. I think I achieved that, and I hope you agree. The design should be more responsive-friendly than before, and I think all my flex and grid uses are progressively enhanced. I do still need to better optimize my use of images, something I hope to start working on this week.
Things I particularly like about the design, in no particular order:
- The viewport-height-scaled masthead, using a minimum height of
20vh. Makes it beautifully responsive, always allowing at least 80% of the viewport’s height to be given over to content, without requiring media queries. - The “CSS” and “HTML” side labels I added to properly classed
preelements. (For an example, see this recent post.) - The fading horizontal separators I created with sized linear gradients, to stand in for horizontal rules. See, for example, between post content and metadata, or underneath the navlinks up top of the page. I first did this over at An Event Apart last year, and liked them a lot. I may start decorating them further, which multiple backgrounds make easy, but for now I’m sticking with the simple separators.
- Using string-based
grid-template-areasvalues to rearrange the footer at mobile sizes, and also to make the rare sidebar-bearing pages (such as those relating to S5) more robust.
There are (many) other touches throughout, but those are some high points.
As promised, I did livestream most of the process, and archived copies of those streams are available as a YouTube playlist for those who might be interested. I absolutely acknowledge that for most people, nine hours of screencasting overlaid with rambling monologue would be very much like watching paint dry in a hothouse, but as Abraham Lincoln once said: for those who like this sort of thing, this is the sort of thing they like.
I was surprised to discover how darned easy it is to livestream. I know we live in an age of digital wonders, but I had somehow gotten it into my head that streaming required dedicated hardware and gigabit upstream connections. Nope: my five megabit upstream was sufficient to stream my desktop in HD (or close to it) and all I needed to broadcast was encoding software (I used OBS) and a private key from YouTube, which was trivial to obtain. The only hardware I needed was the laptop itself. Having a Røde Podcaster for a microphone was certainly helpful, but I could’ve managed without it.
(I did have a bit of weirdness where OBS stopped recognizing my laptop’s camera after my initial tests, but before I went live, so I wasn’t able to put up a window showing me while I typed. Not exactly a big loss there. Otherwise, everything seemed to go just fine.)
My thanks to everyone who hung out in the chat room as I livestreamed. I loved all the questions and suggestions — some of which made their way into the final design. And extra thanks to Jen Simmons, who lit the fire that got me moving on this. I enjoyed the whole process, and it felt like a great way to close the books on 2017.
Comments (14)
Pingback ::
A Round-Up of 2017 Round-Ups - ..:: WEB Aholic ::..
[…] Read More […]
Having trouble reading that small of type – did you make it smaller for a reason (perhaps my memory is faulty but it sure seems more difficult to read for me now). Seems like you’ve got plenty of white space to increase it a little if it makes sense to you.
I don’t know why the type looks smaller to you, dj—the font is literally set to be bigger than browser standard:
I seem to recall you had the same complaint about the previous design, which was also not set to be particularly small. Any chance you have user style sheets hanging around that interact badly with my site?
I agree with DJ, the typeface could use a small bump in size, and I wouldn’t even mind a p+p{margin-top: some-larger-value;}. Overall looks great though!!
Loving the viewport-height-scaled masthead. Might have to try that out myself.
Thanks, Ian! Check out the masthead text sizing as well: used a
calc()to give it an em-based floor and then a vh-based scale-up, based on a suggestion by Martijn Cuppens (see https://twitter.com/Martijn_Cuppens/status/944595750889185280).Looks great! :)
Thanks, Sam!
Eric… sorry, not trying to be a noodge; but, this is definitely smaller than it has been for the years that I’ve been reading you. Fonts and type size seem so capricious to me that I don’t profess to understand them. I know that once when I asked for advice about printing some lengthy articles I was advised that Georgia was used in printing because it was smaller – perhaps that’s it??? Also just read an article (location escapes me now) advised using pt instead of px for fonts for similar reasons – don’t remember anything about em’s or 5 being said. Sorry, can’t add anything to the solution except to point out that it’s definitely there [Latest Firefox, Wind 10]
Oh, can add that I just tried it in IE side by side and it does render slightly larger in IE! If that makes any sense to you. (Still could be larger however for a desktop screen)
No noodging taken, dj! I’m just trying to figure out why a font that’s literally bigger than browser default looks smaller to y’all (Mike V. included). I wonder if this has anything to do with serifs versus sans-serifs—I’m no expert on typographic perception myself, so I’m mostly guessing here, but maybe serifs just look smaller? Or maybe Cambria has a smaller x-height? Interesting. I’ll make a note to dig further, do some tests.
Eric… I didn’t see your last part of your response until today. Now that you mention it, I probably did comment about the size of the font on the last design.
I look at probably 20 or so blogs routinely every am – you and MA.TT have the same font size and are the smallest of all of them and difficult to read. Today, I grabbed 4 of the blogs still on the screen when I hit yours and opened them all on the same screen to get an actual comparison. I took a screen print so you could see how small yours is compared to others. Unfortunately, I don’t see any method of attaching something to the comment or an email. I’ve got it if you’d like to see it.
In the effort, I discovered that Chris Coyier actually uses your font size IF the screen is set for the size of a phone. Perhaps that is what you are doing. In fact, if I read your blog on my small phone screen it is more toward the size I expect. As I remember, after one of his many iterations of themes, Chris’s font size dropped dramatically and I commented on that too. Within a week me made several enhancements not only to the size but also honed on on a font that was more readable. I do notice now that he alters font size at several breakpoints. Others, I notice, don’t have breakpoints but use a size more readable on desktop screens.
I admit, I don’t have young eyes anymore and I wouldn’t be noodging like this–usually if the author doesn’t see a problem I just let it go–but, I see that you’ve written several posts and seem concerned about accessibility a lot. It just seems to me that simple font size is up there at the top of the accessibility list [unless phone-only is what you are going for, of course]
[I almost forgot – no, emptying the cache is one of the first things I’ve learned to do when I see something that others do not; so, don’t think there are any left over scripts interfering. Thanks for your efforts]
I’d love to see the screenshots, dj. Feel free to email me at eric @ meyerweb.com.
Hi, Eric,
I just came back to add your RSS feed to my reader again.
One thing I noted when coming to this side using my web browser was a Mixed Content warning.
I was about to comment.
Maybe you can use Screaming Frog to get an overview about where there are references to update? It is free-of-charge for up to 1000 URLs if I am not mistaken.
Looks great so far!
Hey André, the mixed-content warning is pretty much because all my old posts with images used HTTP for the
srcvalues instead of HTTPS. I plan to fix that as soon as I can find the time to do a full DB backup and then an SQL find-and-replace, but until then, sadly, there will be warnings on some pages.