Category: Web Design

Posted on
by

Since I started converting parts of my website to use 11ty as a static site generator, I’ve been able to automatically generate tag and category pages that are *just there* as plain html files. And since they’re plain HTML, the old local site search engine I have on there still finds all the Eleventy-generated pages. And again since it’s all static, it doesn’t go down when the database does (which has been happening on an annoyingly frequent basis lately).

And this would be perfect if I was using a single Eleventy instance to build the entire site, but I’m not. I’ve got separate instances building the Les Misérables blog, the reviews, the tech tips, the creative writing collection, and so on, plus I have this WordPress blog and a bunch of hand-coded HTML from the old days.

Which leads to a few problems:

  1. Tags are per-section, not universal.
  2. The site search, which indexes html files on the server, sees everything except the WordPress posts, and the WordPress search *only* sees the WordPress posts.

Some ideas I’ve had to combine the tag pages:

  • Rebuild everything in a single Eleventy instance with a deeper hierarchy. Upside: Still static pages for everything except WordPress. Downside: Time-consuming, still leaves the main blog separate.
  • Write a post-build script that combines all the the tag pages from each subsite. Upside: Same. Downside: Need to either run on the server or make sure my local copies of the *other* subsites are current.
  • Write a server-side page that combines the backend HTML pages into a dynamic frontend for only the tag being viewed. Upside: simple. Downside: tag pages now depend on PHP.
  • Write some client-side JavaScript for the tag pages that will check whether other subsites have tag pages, and add those to the end of the list in a “See also…” section. Upside: simple, and the “local” tag pages are still usable as long as I make sure the script doesn’t block anything. I could even have it check the other static subsites first and then check the blog, so if the blog times out I still display everything else. Downside: requires JavaScript and additional network requests. But as long as I stick to vanilla JS, I can make it pretty small.

And for unifying the search:

  • Write a post-site-indexing script that adds the WordPress posts to the index. Could be done with direct DB access.
  • Write a pre-site-indexing script that generates a bunch of files for it to index. Seems like overkill.
  • Update the search code to send the same search terms to WordPress and combine the results.
  • Use a new search engine that indexes the served pages instead of the files on the server.
  • Point the search box at a remote search engine like Googl…yeah, never mind.

I haven’t settled on anything. I’m just kind of writing down ideas in public. If you have any suggestions, please let me know!

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

In response to girrodocus’s question: #PersonalWebsite creators… what’s your rationale for deciding when to use a subdomain or a subdirectory?

I usually prefer to put sections in subdirectories. That makes it possible to make the entire site portable (depending on authoring tools, anyway). Ideally, I want something that could be zipped up and moved. Or sent to Archive Team. (One of the downsides of dynamic site generators is that you can’t do this.)

When I use subdomains, it’s typically because I want some sort of isolation between the content, or the server apps, etc. But in those cases I’m as likely to use another domain entirely.

I put my main blog in a subdirectory (/journal), but if I set up my own git repository or something like that, I’d probably put it in a subdomain.

That said, I’m currently trying to sort out what I want to keep at the domain I’ve had for the last 20 years and what to move to my IndieWeb identity site.

IndieWeb and Identity

It took 4 or 5 years from me discovering IndieWeb to actually building support into my website(s), because Hyperborea.org, named after a fictional place, felt like a digital home, but not an identity. So I set up KVibber.com as my digital identity instead.

I’ve been considering several approaches:

  • New stuff on KVibber, leave old stuff where it is.
  • Professional stuff on KVibber, fun stuff on Hyperborea.
  • Original work on KVibber, fandom stuff on Hyperborea.

I might move my scenic and nature photos over to KVibber but leave the funny and comic-con photos on Hyperborea, or move my tech articles over but leave the personal posts.

I’m also planning to put together a light microblog, probably on KVibber, to be the canonical location for short posts on Mastodon/Twitter/etc that I want to keep, but don’t feel big enough for a full blog entry. That’ll probably go on KVibber, even though it’ll blur the pro/fun and original/fan distinctions.

Originally on Wandering.shop (and a followup post).

Update September 2022: I guess I’ve tabled the whole question at this point. For now, I’m just using KVibber as a profile page and putting everything else on Hyperborea, like I was doing before.

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.

Posted on
by

I use extensive filters on Gmail to categorize mail the way I want. I pre-filter some things to look at later, prioritize some lists (like allergy or uptime alerts), and pre-categorize things that I may want to file away after looking at them.

The problem is, I can only change filters on the desktop site. When I’m reading on my phone, I need to remind myself not to archive or delete messages that I want to start filtering.

It occurred to me: I can label those messages “Change Filter.” I could even do it right away – there’s a “Manage labels” option on the Android app!

Nope!

I can’t add labels in the app, just change the download and notification settings for each.

So, website then…

Except I can’t get at the full Gmail website on my phone. Or my tablet. Google insists on showing a stripped-down mobile site, which has even fewer capabilities than the app.

I can’t fault them for starting with the mobile site. It is helpful to focus on the features that work best on small touchscreens, under-powered processors, and high-latency, low-bandwidth networks, and can be done by someone on the go, rather than someone sitting at a keyboard with a big screen and a mouse.

But if someone wants to use the functionality you’ve left out, and is willing to slog through the desktop site on their phone or tablet, you should at least let them get at it!

In this case I waited until I could log in on a desktop, then added the label. But not everyone with a phone has a desktop or a laptop. And as the balance keeps shifting towards phones as people’s primary internet access device, that’s going to be more and more common.