Compare commits
11
Commits
7ede08fd43
..
main
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
1863efa802 | ||
|
|
153a90fb0a | ||
|
|
0a5d393618 | ||
|
|
532424c953 | ||
|
|
9b5ee21bf7 | ||
|
|
33ad5815a7 | ||
|
|
7a30ee3216 | ||
|
|
88562bd766 | ||
|
|
75d3a12bdc | ||
|
|
f488a6aa54 | ||
|
|
8c135a09c7 |
@@ -0,0 +1,30 @@
|
|||||||
|
main {
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rss-explainer {
|
||||||
|
background: var(--color-bg-alt);
|
||||||
|
padding: 1rem;
|
||||||
|
margin-block: 1rem;
|
||||||
|
border-radius: .5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rss-explainer p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rss-explainer p + p {
|
||||||
|
margin-top: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feed-url {
|
||||||
|
font-family: var(--font-family-code);
|
||||||
|
font-size: .9rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
p:has(small) {
|
||||||
|
display: block;
|
||||||
|
margin: .25rem 0 0 .75rem;
|
||||||
|
color: var(--color-grey);
|
||||||
|
}
|
||||||
@@ -240,6 +240,7 @@ table {
|
|||||||
border-spacing: 0; /* border collapse doesn't play nice with radii */
|
border-spacing: 0; /* border collapse doesn't play nice with radii */
|
||||||
border-radius: .3rem;
|
border-radius: .3rem;
|
||||||
border: thin solid var(--color-pink);
|
border: thin solid var(--color-pink);
|
||||||
|
margin: 1.25rem 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
th {
|
th {
|
||||||
|
|||||||
@@ -66,6 +66,7 @@ export default async function(eleventyConfig) {
|
|||||||
eleventyConfig.addPlugin(feedPlugin, {
|
eleventyConfig.addPlugin(feedPlugin, {
|
||||||
type: "atom", // or "rss", "json"
|
type: "atom", // or "rss", "json"
|
||||||
outputPath: "/feed.xml",
|
outputPath: "/feed.xml",
|
||||||
|
stylesheet: "/feed.xsl",
|
||||||
collection: {
|
collection: {
|
||||||
name: "posts", // iterate over `collections.posts`
|
name: "posts", // iterate over `collections.posts`
|
||||||
limit: 10, // 0 means no limit
|
limit: 10, // 0 means no limit
|
||||||
|
|||||||
Binary file not shown.
|
After Width: | Height: | Size: 3.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 372 KiB |
@@ -0,0 +1,93 @@
|
|||||||
|
---
|
||||||
|
permalink: feed.xsl
|
||||||
|
eleventyExcludeFromCollections: true
|
||||||
|
---
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!--
|
||||||
|
|
||||||
|
# Pretty Atom Feed
|
||||||
|
|
||||||
|
Based on "Pretty RSS Feed": https://github.com/genmon/aboutfeeds/issues/26
|
||||||
|
|
||||||
|
Styles an Atom feed, making it friendly for humans viewers, and adds a link
|
||||||
|
to aboutfeeds.com for new user onboarding. See it in action:
|
||||||
|
|
||||||
|
https://nicolas-hoizey.com/feeds/all.xml
|
||||||
|
|
||||||
|
-->
|
||||||
|
<xsl:stylesheet version="3.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
|
||||||
|
xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||||
|
xmlns:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd">
|
||||||
|
<xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes"/>
|
||||||
|
<xsl:template match="/">
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
|
||||||
|
<head>
|
||||||
|
<title>feed | <xsl:value-of select="atom:feed/atom:title"/></title>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||||
|
<style>{% include "css/main.css" %}</style>
|
||||||
|
<style>{% include "css/feed.css" %}</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
<div class="rss-explainer">
|
||||||
|
<p>
|
||||||
|
<strong>This is a web feed,</strong> also known as an RSS or Atom feed. <strong>Subscribe</strong>
|
||||||
|
by copying the URL below or from the address bar into your newsreader.
|
||||||
|
</p>
|
||||||
|
<p class="feed-url">https://leecat.art/feed.xml</p>
|
||||||
|
<p>
|
||||||
|
Visit <a href="https://aboutfeeds.com">About Feeds</a> to get started with newsreaders and subscribing. It’s free.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<h1>
|
||||||
|
<!-- https://commons.wikimedia.org/wiki/File:Feed-icon.svg -->
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="vertical-align: text-bottom; width: 1.2em; height: 1.2em;" id="RSSicon" viewBox="0 0 256 256" role="presentation">
|
||||||
|
<defs>
|
||||||
|
<linearGradient x1="0.085" y1="0.085" x2="0.915" y2="0.915" id="RSSg">
|
||||||
|
<stop offset="0.0" stop-color="#E3702D"/><stop offset="0.1071" stop-color="#EA7D31"/>
|
||||||
|
<stop offset="0.3503" stop-color="#F69537"/><stop offset="0.5" stop-color="#FB9E3A"/>
|
||||||
|
<stop offset="0.7016" stop-color="#EA7C31"/><stop offset="0.8866" stop-color="#DE642B"/>
|
||||||
|
<stop offset="1.0" stop-color="#D95B29"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<rect width="256" height="256" rx="55" ry="55" x="0" y="0" fill="#CC5D15"/>
|
||||||
|
<rect width="246" height="246" rx="50" ry="50" x="5" y="5" fill="#F49C52"/>
|
||||||
|
<rect width="236" height="236" rx="47" ry="47" x="10" y="10" fill="url(#RSSg)"/>
|
||||||
|
<circle cx="68" cy="189" r="24" fill="#FFF"/>
|
||||||
|
<path d="M160 213h-34a82 82 0 0 0 -82 -82v-34a116 116 0 0 1 116 116z" fill="#FFF"/>
|
||||||
|
<path d="M184 213A140 140 0 0 0 44 73 V 38a175 175 0 0 1 175 175z" fill="#FFF"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
feed preview: <xsl:value-of select="atom:feed/atom:title"/>
|
||||||
|
</h1>
|
||||||
|
<p><xsl:value-of select="atom:feed/atom:description"/></p>
|
||||||
|
<p>This preview only shows titles, but the actual feed contains the full content.</p>
|
||||||
|
<p><a>
|
||||||
|
<xsl:attribute name="href">
|
||||||
|
<xsl:value-of select="/atom:feed/atom:link[not(@rel)]/@href"/>
|
||||||
|
</xsl:attribute>
|
||||||
|
Visit website →
|
||||||
|
</a></p>
|
||||||
|
<h2>recent items</h2>
|
||||||
|
<xsl:apply-templates select="atom:feed/atom:entry" />
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
</xsl:template>
|
||||||
|
<xsl:template match="atom:feed/atom:entry">
|
||||||
|
<div>
|
||||||
|
<h3>
|
||||||
|
<a>
|
||||||
|
<xsl:attribute name="href">
|
||||||
|
<xsl:value-of select="atom:link/@href"/>
|
||||||
|
</xsl:attribute>
|
||||||
|
<xsl:value-of select="atom:title"/>
|
||||||
|
</a>
|
||||||
|
</h3>
|
||||||
|
<p><small>
|
||||||
|
Published: <xsl:value-of select="atom:updated" />
|
||||||
|
</small></p>
|
||||||
|
</div>
|
||||||
|
</xsl:template>
|
||||||
|
</xsl:stylesheet>
|
||||||
@@ -13,7 +13,7 @@ label: contact Lee
|
|||||||
<dt><i aria-hidden="true" class="fa-solid fa-envelope"></i> email</dt>
|
<dt><i aria-hidden="true" class="fa-solid fa-envelope"></i> email</dt>
|
||||||
<dd><a href="mailto:lee.cattarin@gmail.com" target="_blank">lee dot cattarin at gmail dot com</a></dd>
|
<dd><a href="mailto:lee.cattarin@gmail.com" target="_blank">lee dot cattarin at gmail dot com</a></dd>
|
||||||
<dt><i aria-hidden="true" class="fa-brands fa-signal-messenger"></i> signal</dt>
|
<dt><i aria-hidden="true" class="fa-brands fa-signal-messenger"></i> signal</dt>
|
||||||
<dd><a href="https://signal.me/#eu/_-MvyOMcylLFTslDIzJnJkc4Yg1G_hpQt5wf-DVxS0ei4WhimMZLJYd_e28kcNCL">seven seven four, two four nine, zero five eight six</a></dd>
|
<dd><a href="https://signal.me/#eu/QcbGX1oHL3vsByOx8808DRW0g53ehYPfu4tAaXx8-Kl7Qdonj-JM6Z3l-QXcqO_d">inherentlee.13</a></dd>
|
||||||
<dt><i aria-hidden="true" class="fa-solid fa-mobile-retro"></i> text (no phone calls!)</dt>
|
<dt><i aria-hidden="true" class="fa-solid fa-mobile-retro"></i> text (no phone calls!)</dt>
|
||||||
<dd><a href="tel:17742490586">seven seven four, two four nine, zero five eight six</a></dd>
|
<dd><a href="tel:17742490586">seven seven four, two four nine, zero five eight six</a></dd>
|
||||||
<dt><i aria-hidden="true" class="fa-brands fa-discord"></i> discord</dt>
|
<dt><i aria-hidden="true" class="fa-brands fa-discord"></i> discord</dt>
|
||||||
|
|||||||
@@ -6,7 +6,6 @@ image:
|
|||||||
tags:
|
tags:
|
||||||
- reference
|
- reference
|
||||||
- software
|
- software
|
||||||
draft: true
|
|
||||||
---
|
---
|
||||||
|
|
||||||
What CSS would you implement if you had no or very low vision? Recently, a Blind friend wanted to know more about CSS. This is my attempt at a very minimal CSS file that cleans up a few [browser defaults](https://browserdefaultstyles.com/){target="_blank" rel="external"} for a more pleasant browsing experience without needing much if any visual testing.
|
What CSS would you implement if you had no or very low vision? Recently, a Blind friend wanted to know more about CSS. This is my attempt at a very minimal CSS file that cleans up a few [browser defaults](https://browserdefaultstyles.com/){target="_blank" rel="external"} for a more pleasant browsing experience without needing much if any visual testing.
|
||||||
@@ -15,7 +14,7 @@ Want to just see the final stylesheet? [Skip to the end of the page](#result).
|
|||||||
|
|
||||||
## CSS resets
|
## CSS resets
|
||||||
|
|
||||||
Before we start: this isn't a CSS reset. You may want to apply it in concert with one. While writing this, a friend recommended [Josh W. Comeau's CSS Reset](https://www.joshwcomeau.com/css/custom-css-reset/){target="_blank" rel="external"}, which looks largely very solid to me. However, if using that particular reset, I would ***not*** reset default margins (rule 2). They are tremendously useful in this case, where we are unlikely to be setting margins on elements individually. I would, quite specifically, grab his rules 1 (box-sizing model) and 6 (improve media defaults). I also cover the ruleset from "improve media defaults" later under [the images section](#images), with an additional rule.
|
Before we start: this isn't a CSS reset. You may want to apply it in concert with one. While writing this, a friend recommended [Josh W. Comeau's CSS Reset](https://www.joshwcomeau.com/css/custom-css-reset/){target="_blank" rel="external"}, which looks largely very solid to me. However, if using that particular reset, I would ***not*** reset default margins (rule 2). They are tremendously useful in this case, where we are unlikely to be setting margins on elements individually.
|
||||||
|
|
||||||
## color
|
## color
|
||||||
|
|
||||||
@@ -40,7 +39,7 @@ body {
|
|||||||
|
|
||||||
### accents
|
### accents
|
||||||
|
|
||||||
Skip this section and go right to [focus indication](#focus-indication) if you have never had any color vision. If you've previously had color vision, have partial color vision, etc, read on.
|
To skip reading about accent colors, head right to [focus indication](#focus-indication).
|
||||||
|
|
||||||
If you have any opinions about color, you might pick accents. At the simplest level, I'd pick one for light mode and one for dark mode. [XKCD has a color sheet based on a wide survey](https://xkcd.com/color/rgb/){target="_blank" rel="external"} that is potentially useful here. Validate that the color contrast is enough with a tool like [WebAIM's Contrast Checker](https://webaim.org/resources/contrastchecker/){target="_blank" rel="external"}. You might color your headers and links.
|
If you have any opinions about color, you might pick accents. At the simplest level, I'd pick one for light mode and one for dark mode. [XKCD has a color sheet based on a wide survey](https://xkcd.com/color/rgb/){target="_blank" rel="external"} that is potentially useful here. Validate that the color contrast is enough with a tool like [WebAIM's Contrast Checker](https://webaim.org/resources/contrastchecker/){target="_blank" rel="external"}. You might color your headers and links.
|
||||||
|
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
---
|
||||||
|
title: log cabin dishtowels
|
||||||
|
image:
|
||||||
|
src: 2026/log-cabin-dishtowels.jpg
|
||||||
|
alt: "A two image collage. Image one shows 1 dishtowel fully laid out and 2 folded next to the yarn used in them. They are navy blue, yellow, and beige and in the log cabin pattern, which alternates blocks of horizontal and vertical light-dark stripes (light is yellow or beige depending, dark is always navy). They have a fringed hem on two opposing sides. Image 2 is a closeup on the pattern."
|
||||||
|
tags:
|
||||||
|
- gallery
|
||||||
|
- weaving
|
||||||
|
---
|
||||||
|
|
||||||
|
Yarn: [Circulo Anne Weaving Yarn](https://woolery.com/products/circulo-anne-weaving-yarn){target="_blank" rel="external"}.
|
||||||
|
|
||||||
|
3 towels. Woven area roughly 12"x24". Hemstitched.
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
---
|
||||||
|
title: loud table runner
|
||||||
|
image:
|
||||||
|
src: 2026/loud-table-runner.jpg
|
||||||
|
alt: "Folded long piece of fabric on a table. It is randomly mixed magenta, lime green, and wine purple, with occasional stripes of something glittery, fuzzy, or satiny in a variety of complementary colors. The ends have twisted fringe."
|
||||||
|
tags:
|
||||||
|
- gallery
|
||||||
|
- weaving
|
||||||
|
---
|
||||||
|
|
||||||
|
Yarn: [Circulo Natural Cotton Maxcolor 4/6 Yarn](https://woolery.com/products/circulo-natural-cotton-maxcolor-4-6-yarn){target="_blank" rel="external"} with occasional stripes of [Fez Alpa](https://woolery.com/products/feza-alp-premier-yarn){target="_blank" rel="external"}.
|
||||||
|
|
||||||
|
About 11" wide and 5' long including tassels.
|
||||||
@@ -0,0 +1,228 @@
|
|||||||
|
---
|
||||||
|
title: visual site builders and accessibility
|
||||||
|
image:
|
||||||
|
src: 2026/roses.jpg
|
||||||
|
alt: Image unrelated to post. Two peach-colored roses, the farther away one a bit out of focus.
|
||||||
|
tags:
|
||||||
|
- reference
|
||||||
|
- software
|
||||||
|
---
|
||||||
|
|
||||||
|
Recently, I [asked on the Fediverse](https://flipping.rocks/@inherentlee/117037989967706516){target="_blank" rel="external"} about visual/drag-and-drop website builders and got a wealth of answers.
|
||||||
|
|
||||||
|
I want to evaluate based on some accessibility factors:
|
||||||
|
|
||||||
|
1. **Semantic HTML:** how well does the builder adhere to properly formed semantic HTML?
|
||||||
|
1. **Keyboard navigation:** is keyboard focus visible? Can it be customized? (I was going to review skip links, but I'm a half dozen sites in and none have supported them thus far, at least not without entirely custom code)
|
||||||
|
1. **Reading order:** is reading order automatically correct? If not, what does the user have to do to ensure correctness?
|
||||||
|
1. **Text alternatives:** is there support for alt text?
|
||||||
|
1. **Color:** does the builder support light and dark modes? (Note that I am looking for builders for those with no HTML/CSS experience, and "you can customize with CSS" is not acceptable)
|
||||||
|
1. **Other accessibility concerns:** anything else of note?
|
||||||
|
|
||||||
|
I will score **1** (bad), **2** (mixed), or **3** (good). If there is nothing to note for the "other" factor, I will score it as a 2. These scores **will not be weighted** according to priorities, but purely summed for a final ranking.
|
||||||
|
|
||||||
|
There are, of course, many more factors that could be evaluated, but I will be focusing on these high-level ones.
|
||||||
|
|
||||||
|
Want to just see the final ranking? Pop down to the [summary](#summary).
|
||||||
|
|
||||||
|
## Blocs
|
||||||
|
|
||||||
|
[Blocs](https://blocsapp.com/){target="_blank" rel="external"} is a builder for MacOS, iPad, and iPhone. I had trouble getting a template loaded on my iPad, but I reviewed the Blocs website - built with Blocs, of course - for major issues. This is, I would assume, the shiniest version possible.
|
||||||
|
|
||||||
|
| Factor | Notes | Score |
|
||||||
|
|---|---|---|
|
||||||
|
| Semantic HTML | Most major elements missing (no `<main>`, `<header>`, `<footer>`; `<nav>` present for the top nav but not bottom). | 1 |
|
||||||
|
| Keyboard navigation | Custom focus, missing in many areas on the Blocs site and turned off by default in the CSS - not sure if that is for this site or is the standard. The ability to potentially customize focus is interesting. | 1 |
|
||||||
|
| Reading order | Good! Block-based layout helps significantly here I would guess. | 3 |
|
||||||
|
| Text alternatives | Supported. | 3 |
|
||||||
|
| Color | Light and dark modes are possible - [Blocs dark mode documentation](https://help.blocsapp.com/knowledge-base/dark-theme/){target="_blank" rel="external"}. | 3 |
|
||||||
|
| Other | Difficulty with iPad app. | 1 |
|
||||||
|
| | | **12** |
|
||||||
|
|
||||||
|
## Cowsites
|
||||||
|
|
||||||
|
[Cowsites](https://cowsites.net){target="_blank" rel="external"} is a simple site editor with no drag-and-drop elements.
|
||||||
|
|
||||||
|
| Factor | Notes | Score |
|
||||||
|
|---|---|---|
|
||||||
|
| Semantic HTML | Some oddities, like the `<header>` being inside the `<main>` while the `<footer>` was not. Repeated `<h1>`s. | 2 |
|
||||||
|
| Keyboard navigation | Browser default focus outlines. Some clipping of focus outlines. | 2 |
|
||||||
|
| Reading order | Good. Difficult to mess up when there are no drag-and-drop elements. | 3 |
|
||||||
|
| Text alternatives | Both image title and alt can be set in the editor, but don't appear to be surfaced in the actual site. | 1 |
|
||||||
|
| Color | Single color palette. | 1 |
|
||||||
|
| Other | No `lang` attribute set. Gallery page links are three separate links to the same place, with lacking link text for links 2 and 3. | 1 |
|
||||||
|
| | | **10** |
|
||||||
|
|
||||||
|
## Figma Sites
|
||||||
|
|
||||||
|
[Figma Sites](https://www.figma.com/sites/){target="_blank" rel="external"} allows you to turn a Figma design into a functioning website. It offers gen AI features. I tested two themes from Figma Community.
|
||||||
|
|
||||||
|
| Factor | Notes | Score |
|
||||||
|
|---|---|---|
|
||||||
|
| Semantic HTML | Depends *heavily* on developer. One was `<div>`s all the way down, one was built with actual semantic HTML using the "Accessibility" section of one of the sidebars (it allows you to specify the tag a design element corresponds to). Notably, not a lot or a total lack of links? One theme had some `<buttons>`s, the other was littered with click events and `tabindex="0"`. | 1 |
|
||||||
|
| Keyboard navigation | Browser default focus outlines. One template *actually* had a skip link! | 2 |
|
||||||
|
| Reading order | Not clear how order is determined. Potentially partially influenced by order of elements in the sidebar, but one theme tested did not adhere to that and the nav was the last in the reading order despite being top of the sidebar order. I can't publish on the starter plan, so I can't see how my own changes influence the site, but with a well-built theme the organization helps ensure that adding new elements puts them in a reasonable place in the sidebar order. | 2 |
|
||||||
|
| Text alternatives | Supported. | 3 |
|
||||||
|
| Color | Light and dark modes are possible - [Figma variable modes documentation](https://help.figma.com/hc/en-us/articles/15343816063383-Modes-for-variables){target="_blank" rel="external"}. | 3 |
|
||||||
|
| Other | n/a | 2 |
|
||||||
|
| | | **12** |
|
||||||
|
|
||||||
|
## Kiki
|
||||||
|
|
||||||
|
[Kiki](https://tomotama.com/kiki){target="_blank" rel="external"} is a simple site builder with no drag-and-drop elements. You can customize the CSS to your liking. I played with the demo site.
|
||||||
|
|
||||||
|
| Factor | Notes | Score |
|
||||||
|
|---|---|---|
|
||||||
|
| Semantic HTML | It's `<div>`s all the way down. No headers. `<p>` tags used, at least. | 1 |
|
||||||
|
| Keyboard navigation | Browser default focus outlines. Significant focus outline clipping. Should be fixable with CSS... if we wanted to write CSS. | 2 |
|
||||||
|
| Reading order | Good. Difficult to mess up when there are no drag-and-drop elements. | 3 |
|
||||||
|
| Text alternatives | Seemingly not present, though there are no images in the demo site. | 1 |
|
||||||
|
| Color | Since you can write your own CSS, all color is customizable... if we wanted to write CSS. | 1 |
|
||||||
|
| Other | No `lang` attribute set. No `title`. | 1 |
|
||||||
|
| | | **9** |
|
||||||
|
|
||||||
|
## mmm.page
|
||||||
|
|
||||||
|
[mmm.page](https://mmm.page/){target="_blank" rel="external"} is a drag-and-drop builder. The preview doesn't show you a standalone page (it's a page that also has the mmm.page login/signup menu bar), so I looked at a few sites to get a sense for how it worked.
|
||||||
|
|
||||||
|
| Factor | Notes | Score |
|
||||||
|
|---|---|---|
|
||||||
|
| Semantic HTML | While there is a `<main>`, it's otherwise `<div>`s all the way down. Generally no headers, though sites seem to have a visually hidden `<h1>` that matches the site title. `<p>` tags used, at least. | 1 |
|
||||||
|
| Keyboard navigation | Browser default focus outlines. | 2 |
|
||||||
|
| Reading order | Order of elements added determines reading order. | 1 |
|
||||||
|
| Text alternatives | Supported. | 3 |
|
||||||
|
| Color | Single color palette. | 1 |
|
||||||
|
| Other | No `lang` attribute. Preponderance of empty `aria-label`s. | 1 |
|
||||||
|
| | | **9** |
|
||||||
|
|
||||||
|
## Rapidweaver
|
||||||
|
|
||||||
|
[Rapidweaver](https://www.realmacsoftware.com/rapidweaver/){target="_blank" rel="external"} is built exclusively for Mac. Ah, well.
|
||||||
|
|
||||||
|
## Showit
|
||||||
|
|
||||||
|
[Showit](https://showit.com/){target="_blank" rel="external"} is a drag-and-drop builder with a Wordpress backend for content management. I reviewed several different premade themes. Custom CSS is allowed.
|
||||||
|
|
||||||
|
| Factor | Notes | Score |
|
||||||
|
|---|---|---|
|
||||||
|
| Semantic HTML | Depending on theme, *some* landmark tags might be present. One theme reviewed enclosed each individual nav link in a `<nav>` tag. Ew. Text can be set to be wrapped in a variety of tags, including bare `<div>`s. | 1 |
|
||||||
|
| Keyboard navigation | The default CSS reset for Showit removes focus outlines on some elements (form fields and buttons, but not links). In one tested theme, further focus outlines were missing. Browser default focus outlines. Despite detailed ability to customize hover states in-editor, no ability to customize focus states. | 1 |
|
||||||
|
| Reading order | Determined by the user via reordering elements in the sidebar. | 2 |
|
||||||
|
| Text alternatives | Supported. | 3 |
|
||||||
|
| Color | Single color palette. | 1 |
|
||||||
|
| Other | n/a | 2 |
|
||||||
|
| | | **10** |
|
||||||
|
|
||||||
|
## Startup
|
||||||
|
|
||||||
|
[Startup](https://designmodo.com/startup/){target="_blank" rel="external"} is a block-based builder with pre-defined components and less freedom than some others on this list.
|
||||||
|
|
||||||
|
| Factor | Notes | Score |
|
||||||
|
|---|---|---|
|
||||||
|
| Semantic HTML | Pretty good! They've seemingly dropped `<main>` and instead used an array of `<section>`s, but components are automatically associated with `<header>`, `<nav>`, `<footer>`, etc. | 3 |
|
||||||
|
| Keyboard navigation | Browser default focus outlines. | 2 |
|
||||||
|
| Reading order | Very orderly thanks to the strictness of the components - it's one component after another. Moving pieces around within the components maintains correct reading order. | 3 |
|
||||||
|
| Text alternatives | Supported. | 3 |
|
||||||
|
| Color | Per-component color palette. | 1 |
|
||||||
|
| Other | Forms are weak - unlabeled fields and buttons. For a built in search field, I'd expect better. The components by default are *super* animation-heavy and don't respect `prefers-reduced-motion`. | 1 |
|
||||||
|
| | | **13** |
|
||||||
|
|
||||||
|
## Straw.page
|
||||||
|
|
||||||
|
[Straw.Page](https://straw.page/){target="_blank" rel="external"} is a drag-and-drop builder that bills itself as mobile-friendly. I looked at one of the offered themes, intentionally choosing one that should have intuitive reading order (spoiler: didn't matter).
|
||||||
|
|
||||||
|
| Factor | Notes | Score |
|
||||||
|
|---|---|---|
|
||||||
|
| Semantic HTML | It's `<div>`s all the way down. No headers. `<p>` tags used, at least. Lists are just `<p>`s. | 1 |
|
||||||
|
| Keyboard navigation | Focus actively turned off. | 1 |
|
||||||
|
| Reading order | Order of elements added determines reading order. | 1 |
|
||||||
|
| Text alternatives | Not possible. | 1 |
|
||||||
|
| Color | Single color palette. | 1 |
|
||||||
|
| Other | n/a | 2 |
|
||||||
|
| | | **7** |
|
||||||
|
|
||||||
|
## Univer.se
|
||||||
|
|
||||||
|
[Univer.se](https://univer.se/){target="_blank" rel="external"} is a drag-and-drop builder with plenty of premade themes. I reviewed a premade theme to get started.
|
||||||
|
|
||||||
|
| Factor | Notes | Score |
|
||||||
|
|---|---|---|
|
||||||
|
| Semantic HTML | It's `<div>`s all the way down. Headers exist, but there are multiple `<h1>`s and the headers skip levels. `<p>` tags used, at least. | 1 |
|
||||||
|
| Keyboard navigation | Browser default focus outlines. | 2 |
|
||||||
|
| Reading order | Surprisingly intuitive! Univer.se uses a grid-based layout system and that seems to help programmatically determine reading order. | 3 |
|
||||||
|
| Text alternatives | Supported. | 3 |
|
||||||
|
| Color | Single color palette. | 1 |
|
||||||
|
| Other | No `lang` attribute. | 1 |
|
||||||
|
| | | **11** |
|
||||||
|
|
||||||
|
## Webflow
|
||||||
|
|
||||||
|
[Webflow](https://webflow.com/){target="_blank" rel="external"} is a drag-and-drop builder. Currently bottom of my review list due to AI features.
|
||||||
|
|
||||||
|
## Webnode
|
||||||
|
|
||||||
|
[Webnode](https://https://www.webnode.com) is a drag-and-drop builder (with gen AI features). I reviewed a site built in it sent by the recommender as well as one of the premade themes.
|
||||||
|
|
||||||
|
| Factor | Notes | Score |
|
||||||
|
|---|---|---|
|
||||||
|
| Semantic HTML | Properly uses `<header>`, `<nav>`, `<main>`, `<footer>`. Nice. | 3 |
|
||||||
|
| Keyboard navigation | Browser default focus outlines. | 2 |
|
||||||
|
| Reading order | Decent, thanks to a block-based editor. | 3 |
|
||||||
|
| Text alternatives | Supported. | 3 |
|
||||||
|
| Color | Single color palette. | 1 |
|
||||||
|
| Other | n/a | 2 |
|
||||||
|
| | | **14** |
|
||||||
|
|
||||||
|
## Wobble Web
|
||||||
|
|
||||||
|
[Wobble Web](https://wwwobble.org/) is a drag-and-drop editor that allows you to edit the code directly in browser as well. There's no preview site; you can download the code and view it locally or publish it yourself. While there's a lot of flexibility for text styling, it's all tied directly to CSS rules, so you need to know some CSS to be effective.
|
||||||
|
|
||||||
|
| Factor | Notes | Score |
|
||||||
|
|---|---|---|
|
||||||
|
| Semantic HTML | It's `<div>`s all the way down. No headers. `<p>` tags used, at least. | 1 |
|
||||||
|
| Keyboard navigation | Browser default focus outlines. Should be editable with CSS... if we wanted to write CSS. | 2 |
|
||||||
|
| Reading order | Order of elements added determines reading order. | 1 |
|
||||||
|
| Text alternatives | Supported. | 3 |
|
||||||
|
| Color | Single color palette. | 1 |
|
||||||
|
| Other | n/a | 2 |
|
||||||
|
| | | **10** |
|
||||||
|
|
||||||
|
## Wordpress builders
|
||||||
|
|
||||||
|
Gotta dive into Wordpress to explore these and haven't yet.
|
||||||
|
|
||||||
|
### Beaver Builder
|
||||||
|
|
||||||
|
[Beaver Builder](https://www.wpbeaverbuilder.com/){target="_blank" rel="external"}.
|
||||||
|
|
||||||
|
### Divi
|
||||||
|
|
||||||
|
[Divi](https://www.elegantthemes.com/gallery/divi/){target="_blank" rel="external"}.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## summary
|
||||||
|
|
||||||
|
Overall, I explored 11 builders, couldn't test 1 due to OS restrictions, and have 3 left for future review.
|
||||||
|
|
||||||
|
| Builder | Score |
|
||||||
|
|---|---|
|
||||||
|
| Webnode* | 14 |
|
||||||
|
| Figma Sites* | 13 |
|
||||||
|
| Startup | 13 |
|
||||||
|
| Blocs** | 12 |
|
||||||
|
| Univer.se | 11 |
|
||||||
|
| Cowsites | 10 |
|
||||||
|
| Showit | 10 |
|
||||||
|
| Wobble Web | 10 |
|
||||||
|
| Kiki | 9 |
|
||||||
|
| mmm.page | 9 |
|
||||||
|
| Straw.page | 7 |
|
||||||
|
| Rapidweaver | Couldn't test (MacOS only). |
|
||||||
|
| Beaver Builder (Wordpress) | Yet to review. |
|
||||||
|
| Divi (Wordpress) | Yet to review. |
|
||||||
|
| Webflow* | Yet to review. |
|
||||||
|
|
||||||
|
\*Promotes gen AI features.
|
||||||
|
|
||||||
|
\**Usability concerns on iPad.
|
||||||
Reference in New Issue
Block a user