Category: Web Design

Posted on
by

I’ve been meaning to write a post about email newsletters that still assume you’re reading on a desktop and send out layouts that rely on a wide screen size and end up with tiny 2-point type on a mobile phone — you know, where most people read their email these days.

Then I stumbled on this usability article by Jakob Nielsen.

From 2012.

It pretty much covers what I would have said, and more. But a decade on, I still get email I can’t read without moving to a bigger screen.

The Time Before Tables

The funny thing is that HTML, by design, already adjusts to different sized displays, windows and terminals. In the very early days, you couldn’t make it not be responsive unless you added a block of pre-formatted text.

Once HTML picked up a little more rendering capability (tables, images and image maps), you had people designing websites who were accustomed to fixed-size media, and the paradigm stuck.

— Build your layout in Photoshop at 800×600, then slice it up into clickable pieces and reassemble the whole thing on a page!
— Wait, now we can aim for 1024×168!
— Oh, hey, we have widescreen now!
— Huh? What do you mean the window isn’t always fullscreen?
— Phones now? Ugh, I’ve gotta make a totally different website!

And so on.

Responsive Styling

These days you can apply relative sizes to everything, and tweak the layout based on the logical screen size instead of physical pixels. (Shout-out to high-definition displays here!) Modern HTML+CSS is amazingly improved in flexibility, and if you plan it right, you can often just rearrange the same page for screens from small cell phone size up to those widescreen monitors. Obviously this depends on what kind of site or application you’re building.

But for email, especially for newsletters, where reading the text is the main point, it should be an obvious choice!

Expanded from this thread on Wandering.shop.

Posted on
by

WP Tavern summarizes the conversation around WordPress losing CMS marketshare for the first time in ages, and what various people have cited as likely causes.

Personally, I’m finding its increasing complexity to be a major frustration.

  • Writing on WordPress has gotten somewhat more complicated.
  • Maintaining a WordPress site has gotten more complicated.
  • Developing for WordPress has gotten more complicated.
  • The resulting page code (including CSS and Javascript) has gotten a lot more complicated. As I’ve noted before, there’s no good reason to require 450K of data to display a 500-word post. Or a single link with a one-sentence comment.

The move towards Gutenberg blocks and full-site editing complicates things on several levels, and feels like an attempt at lock-in as well.

Ironically, I’ve been moving toward Eleventy, which has also been very frustrating…but only in building the layout I want.

On one hand…

  • I have to develop a lot of the components I want from scratch. More than would have thought. Though I suspect there are enough pre-built layouts out there for most people’s use cases.
  • The documentation is sorely lacking. (Eventually I’ll get around to helping with that.)
  • Dynamic features like comments need to be handled by another program.

But on the other…

  • I can fine tune things a lot more easily than fine tuning a WordPress theme.
  • Once I’m done building the layout, adding a new post is almost as easy as it is on WordPress.
  • My actual post content is portable.
  • There’s essentially no attack surface, so if I have a site that’s “done” I can just build it one last time and leave it as-is — and not worry about spam, maintenance or security (beyond general webserver security).
  • I don’t have to send extra JavaScript libraries along with every page, so it can use a tenth of the bandwidth and load faster on slow connections.

With Eleventy, setting up the layout and features has been super complicated…but once it’s set up, it’s smooth, easy to deal with, and does the job well. It’s kind of like running Linux back in the 1990s.

But with WordPress, there’s complexity in every layer.

Sometimes it’s worth it.

Sometimes it’s not.

Posted on
by

For human-readable HTML, I can write:

<a href="https://example.com">Lois Lane</a>

For machine-readable HTML:

<a rel="author" href="https://example.com">Lois Lane</a>

For IndieWeb microformats:

<a class="p-author h-card" href="https://example.com">Lois Lane</a>

But for inline Schema.org I have to write:

<span property="author" typeof="person"><a property="url" href="https://example.com"><span property="name">Lois Lane</span></a>

I’ve been grumbling about all the redundancy in putting multiple sets of metadata on a page: classic meta tags, OpenGraph, Twitter cards, Schema.org, microformats2. So I’ve been looking to consolidate as much as I can.

I thought, Hey, Schema.org has inline markup implementations! I can probably just tag the same elements I used for microformats2!

But there are so many things like author where it wants a multi-part hierarchy when you could easily use a single tag.

At this point the added complexity to the code isn’t worth it. I may as well stick with the JSON-LD lump of text in the header. Heck, the extra spans and divs might actually add up to more bytes than the no-longer-duplicated content.

It’s not actually that much extra space, though, and the site in question generates all the markup from one set of markdown front matter. It just bugs me that to fill in all of them I need multiple copies of everything.

Though it is kind of funny to compare design decisions:

Facebook: We want a single block that can be copied and pasted and all looks the same. We don’t want to reuse existing tags and we don’t care about DRY.

IndieWeb: Invisible metadata inevitably gets out of date, and all this stuff that should already be on the page or in the head anyway, so let’s use what’s there and make it simple to mark up the actual page content.

Schema.org: CATEGORIZE ALLLLL THE THINGS!!!!!

Posted on
by

I’m not ready to give up on the flexibility of WordPress for my main blog yet, but holy crap are these pages heavy. Even with compression. There’s no reason it should take 450K (before compression) and 20 requests to display a 500-word post.

And I don’t even do ads, popups, social sharing buttons or anything else like that.

By contrast, my Les Mis blog, where I post about once a year, is currently generated by Eleventy using a custom minimal theme that only takes around 10K of HTML, 3K CSS, and a third request for the icon. And another 40K for the header font, which I recently set up locally so it no longer has to call out to Google Fonts.

One domain, just four requests, and only 50K for the first hit and 10K for each subsequent page.

Never mind the Gemini version of the blog which is around 2-5K per page and a single request per page!

Compression cuts down on those 500Kb WordPress pages — all the text and code compresses really well so only around 200K bandwidth is needed. But it’s still got multiple JavaScript and CSS requests going on.

I was able to cut it down significantly by switching to a lighter theme and turning on the minimize/combine feature in WP-Optimize so it’s making fewer script calls. But it’s still way bigger than the minimalist setup I have with 11ty.

Some of it is images, though. I still have my latest Flickr posts in the sidebar, and I’m using Jetpack’s related posts feature which includes thumbnails. I could cut out a big chunk by removing those, but I kind of still like the idea of having them in there.

I think I need to take a look at how much extra stuff I really want on this site and rip some of it out. Eventually I’d like to replace all the JetPack features because they just seem to keep adding more scripts. Plus I want an entirely local stats package instead of one that’s offloaded to a third party even if they’re less awful than, say, Google or Facebook.

On the other hand, I want to keep Gravatar on the comments sections (on the older posts where people actually commented) because that’s actually useful to readers as an aid for following a conversation better. But that’s all on top of the base page size.

Originally posted at Wandering.shop

Posted on
by

What’s the minimum viable blog feature set these days?

  • Rich text posts (output; the source can be anything)
  • Titles
  • Permalinks
  • Tags/categories
  • Navigation
  • RSS feed
  • Images hosted locally
  • Media embed (remote or local?)
  • Author info for multi-author blogs

I won’t back down on RSS/Atom, because there’s SO MUCH you and subscribers can do with it.

I also think images should to be built-in and not something you bolt on clumsily afterward.

Not sure if I’d consider comments part of the base level.

What else am I missing?

Candidate Software

Looking for something lighter weight than WordPress.

The last time I tried Plume and WriteFreely, they didn’t support images, though IIRC you could embed remote images in at least one.

Static site generators I’ve tried like Jekyll require you to bolt on separate commenting systems like Disqus, or jump through hoops to roll your own in a way that will re-generate the site when someone comments…and you still have to reinvent spam filtering.