Weekly update – 8 August 2025

[ryan]

This week I’m thrilled to report that we have a new website online. The site was designed by @jploch and @diogo of KONKAT Studio in Hamburg Germany. Here's a short announcement post about it— 

https://processwire.com/blog/posts/processwire-website-redesign/

[adrian]

Hi @ryan - where would you like bugs on the site to be reported - here, or Github, and if the latter do you want them as separate issues, or all lumped together?

[ryan]

@adrian Either is fine, but to start, right here is good. 

[ryan]

Btw, the old site can be accessed just by appending ?oldsite=1 to any URL (temporarily, anyway).

[adrian]

OK - code examples first, just because they caught my eye immediately:

It's missing the closing ")" and I also think it would look cleaner on one line:

<!-- Render simple breadcrumb nav -->
<ul class="breadcrumbs">
  <?= $page->parents->each(
    '<li><a href="{url}">{title}</a>' ?>
</ul>

ie:

<!-- Render simple breadcrumb nav -->
<ul class="breadcrumbs">
  <?= $page->parents->each('<li><a href="{url}">{title}</a>') ?>
</ul>

This won't work because of $p->url in double quotes like that without extra single quotes for href.

// Render primary navigation
foreach($pages->get("/")->children as $p) {
  echo "<a href="$p->url">$p->title</a> ";
}

Missing the semi-colon at the end of the second line:

// Find and list tall buildings
$buildings = $pages->get("/buildings/");
$skyscrapers = $buildings->find("height>1000")
echo $skyscrapers->each("<li>{height}: {title}");

 

[adrian]

This border is making transparent PNGs look weird. Not sure how many are on the site itself, but there are plenty on 3rd party module pages that are impacted by this.

#content-body p>a>img, #content-body p>img {
    border: 1px solid #999;
    border-radius: 10px;
}

 

[monollonom]

Congrats on the launch @ryan and @jploch 🤝 @diogo for the design. I think it’s a great update!

Two small things I noticed regarding the cards:

This has to do with the width of .uk-card-body being 100% combined with a padding. I saw you added a max-width but it would be best to use "box-sizing: border-box" instead, so the padding is included within the 100% width.

Also re:cards, I noticed there was some js to allow to click anywhere on a card to open its link. A nice css trick I learned is to use ::before on the <a> tag to "cover" its parent. In your case you could use this css:

.uk-card .uk-card-body a::before {
  content: "";
  position: absolute;
  inset: 0;
}

This way the <a> covers the card and makes the whole card clickable:

(btw some external link are not working, e.g. Processwire Weekly, there seems to be a slash wrongly added at the beginning of the href)

[ryan]

@monollonom It looks like that width:100%; on the uk-card-body is something I added last minute for some reason, I don't know why. I removed it and it seems to correct that issue that was appearing for "other modules by author" list. Hopefully I didn't break something else by removing it. 🙂

I tried the CSS trick you mentioned (very cool!), but I'll have to return to it when I've got more time. For whatever reason, it added an underline to the text and no amount of text-decoration: none !important; seemed to be able to cancel it. 

@adrian Thanks, code examples fixed. I'll return to the image thing, I may have to cancel that rule for images in the modules directory. 

[monollonom]

7 minutes ago, ryan said:

For whatever reason, it added an underline to the text and no amount of text-decoration: none !important; seemed to be able to cancel it. 

This is the css you want to counter when hovering .uk-card > .uk-card-body > a 🧐

[adrian]

Whitespace issues on mobile, eg:

Way too much between the text and those design thingies:

 

No vertical space between email field and button:



I am sure there are lots more, but you get the idea.

[adrian]

Regarding that image border - it looks bad with some images on the site itself, eg:

Of course these old screenshots also need updating, but I guess that's a task for another day (or 20).

[gRegor]

Love the new look! Congrats!

A couple small things with Javascript disabled: the sections down the page like "Total control over the design" don't show anything in place of those animations. It would be nice to have some static image fallback in that case.

Also in the ProcessWire Weekly subscribe prompt at the bottom, the caret on the button does not appear when JS is off, so it just looks like a form input with a circle next to it.

[Kiwi Chris]

Is there any way to adjust the font size to personal preferences? I'm finding headings way too big on my screen resulting in unnecessary scrolling to read anything.

The animated heading at the top bring back not particularly fond memories of the <blink></blink> tag.

I suspect it may be mobile first, but if I'm accessing the site it's for documentation, and I'm not going to do that on a phone.

One of the things I've loved about ProcessWire is it's fairly well documented, but if I have to do extra scrolling every time I want to reference docs because everything is so much bigger, that's not helpful.

I realise other people may like the new design, and I don't want to impose my preferences on others, but honestly I can't say I'm comfortable with the new presentation.

Sorry, I know lots of work has gone into this. It's why  I'm asking, following the ProcessWire philosophy of allowing total flexibility, whether actual site visitors themselves can have some option to select default font sizing, so those who like it big can keep it that way, but those who'd like it smaller can have something more to their liking.

[gRegor]

Quote

Sorry, I know lots of work has gone into this. It's why  I'm asking, following the ProcessWire philosophy of allowing total flexibility, whether actual site visitors themselves can have some option to select default font sizing, so those who like it big can keep it that way, but those who'd like it smaller can have something more to their liking.

A fair question to ask. I haven't used the ProcessWire API docs section with the new design extensively yet, but my initial reaction is that it's not too bad. Search is still front and center at the top, and that's usually how I have navigated it, e.g. by searching "mail". I don't find the permalinks for individual items causing much extra scrolling so far, seems comparable (https://processwire.com/api/ref/wire-mail-tools/ vs https://processwire.com/api/ref/wire-mail-tools/?oldsite=1, for example)

There might be a PW way to make it more customizable, but it's also always an option to set up user stylesheets in your browser to tweak the site.

[adrian]

21 minutes ago, Kiwi Chris said:

Is there any way to adjust the font size to personal preferences? I'm finding headings way too big on my screen resulting in unnecessary scrolling to read anything.

The animated heading at the top bring back not particularly fond memories of the <blink></blink> tag.

Gotta admit I feel really strongly about this also. This is my quick hack to find some visual peace on the homepage :)

// Remove all divs whose ID ends with "-animation"
document.querySelectorAll('div[id$="-animation"]').forEach(el => el.remove());

// Remove empty uk-width elements
document.querySelectorAll('[class*="uk-width-"]').forEach(el => {
    if (!el.textContent.trim()) {
        el.remove();
    }
});

// Change all uk-width elements to full-width
document.querySelectorAll('[class*="uk-width-"]').forEach(el => {
    el.className = el.className
        .split(/\s+/)
        .map(cls => cls.startsWith('uk-width-') ? 'uk-width-1-1' : cls)
        .join(' ');
});

// Halve font size of all h1 and h2 elements
document.querySelectorAll('h1, h2').forEach(el => {
    const style = window.getComputedStyle(el);
    const currentSize = parseFloat(style.fontSize);
    el.style.fontSize = (currentSize / 2) + 'px';
});

// Remove max-width on .pw-highly-scalable p elements
document.querySelectorAll('.pw-highly-scalable p').forEach(el => {
    el.style.maxWidth = 'none';
});

 

[gRegor]

In a similar accessibility vein, you might consider supporting prefers-reduced-motion to toggle animated/static content.

[Ivan Gretsky]

Good morning everyone! Congratulations with the new look! This redesign effort is something we've been waiting for a long time!

I am reading the new site from mobile and I rediscover a lot of great content I forgot existed. I think the navigation logic is improved greatly.

Surely, there are visible bugs and glitches here and there. And I didn't see the new site from the desktop yet. But new look is modern and cool.

I remember getting used to the last redesign. It was a pain. We as people have hard times seeing something we love change. But the world has to move on) And I am pretty sure here it is for the good!

Another amazing thing is that an international community-driven team of volunteers has been working on a redesign. This is so cool and I hope to see more of such for PW in every aspect of its development (like in fixing those bugs and glitches)). Great thanks to the volunteers!

[AndZyk]

Congratulations to the new website. 🎉

[markus-th]

I found some issues in the modules directory:

Long Text on a paid module need a bit of a gap.

Also the paid-filter don't work properly, none of @bernhard's modules are shown.

 

[cb2004]

Very very nice. Good work to all involved.

[psy]

A few suggestions on what is a great new theme:

1. Similar to @adrian, I have an issue with font size on larger screens. I have a wide screen and the site smacked me in the face when I visited this morning. Recommend adding css something like: 

   :is(header, main, footer) {
      width: min(80%, 100ch);
      margin-inline: auto;
   }

   
   or adding a class to the header, main and footer components. The text was far too big to read and much of the important above the fold content fell below the the fold. Same for every other page I visited.
   
   In additon, use CSS to clamp the font-size to a min, preferred, max size rather than a fixed 14vw. https://developer.mozilla.org/en-US/docs/Web/CSS/clamp
    
2. Absolutely agree with @gRegor about reduced motion. This should be in the CSS, eg:

   /* Remove all animations and transitions for people that prefer not to see them */
   @media (prefers-reduced-motion: reduce) {
       * {
           animation-duration: 0.01ms !important;
           animation-iteration-count: 1 !important;
           transition-duration: 0.01ms !important;
           scroll-behavior: auto !important;
       }
   }

    
3. Add CSS "text-wrap: balance" to headings and "text-wrap: pretty;" to long content, eg paragraphs, list items, blockquotes, etc. It has good support on modern browsers and makes a difference in appearance and readability. https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap

Keep up the good work

[ryan]

Just want to mention that none of us here is the audience for the homepage. It's for people that are not yet familiar with ProcessWire or just learning about it. Some will be developers, some won't. The animations are there to communicate ProcessWire concepts in a memorable way, for people that don't already know these things about ProcessWire. But we are the audience for most of the rest of the site, such as sections of the site like the API references and modules directory. So if you don't like animations, don't worry because we aren't adding them elsewhere in the site, but they are an important part of what the homepage is there to communicate. 

Quote

Long Text on a paid module need a bit of a gap.

Fixed, thanks. 

Quote

Also the paid-filter don't work properly, none of @bernhard's modules are shown.

I looked into this, and actually it is working, but is being affected by a feature in the new directory. The new modules directory doesn't show modules that are missing a README/description, or have one that's too short to be useful to anyone. Though they should still appear on the author's page and in search, etc. They just won't appear on the modules homepage. I looked at some of Bernhard's modules and that appears to be what the issue is (example). The directory shows an alert to communicate what the issue is. 

@bernhard Can you add README files to your repos for the files? There should be enough info there for people to get to know what the module does and to decide whether they want to download/install it, like a couple paragraphs or more. I probably have a few of my own modules that I need to add more info to as well. 

Quote

Add CSS "text-wrap: balance" to headings and "text-wrap: pretty;" to long content, eg paragraphs, list items, blockquotes, etc. 

While I'm not seeing "pretty" change anything, I do like what the "balance" option is doing. I went ahead and added both though. 

Quote

Way too much between the text and those design thingies:

I like how it is here, as there's no chance of visually mixing up which graphic goes with which text. But that's what your screenshot did, taking the text from one concept, and the graphic from another. 🙂  I'll pass along to the designers to see what they think though.

Quote

No vertical space between email field and button:

Fixed, thanks. 

 

[monollonom]

20 minutes ago, ryan said:

I looked at some of Bernhard's modules and that appears to be what the issue is (example).

Quick css fix for the misaligned "Project" button:

Add <button> to your css selector:

.pw-module-primary-actions a, .pw-module-primary-actions button { }

Another note: on the homepage you should add the width and height attributes on the slideshow’s images (maybe even a background-color?) so there’s no layout shift when loading the page:

Also I think you could echo the logo’s svgs using file_get_contents to avoid the empty spot like in my screenshot.

Lastly I would also advice to respect "prefers-reduced-motion: reduce" for the lottie animations (and have a fallback svg image in case there’s no javascript). It’s quite easy to do by setting the autoplay option using "window.matchMedia('(prefers-reduced-motion: reduce)').matches".

[adrian]

2 hours ago, ryan said:

I like how it is here, as there's no chance of visually mixing up which graphic goes with which text. But that's what your screenshot did, taking the text from one concept, and the graphic from another. 🙂  I'll pass along to the designers to see what they think though.

Maybe on smaller screens when it's one column, the animations should always end up below the text they are related to?

[adrian]

2 hours ago, ryan said:

The animations are there to communicate ProcessWire concepts in a memorable way, for people that don't already know these things about ProcessWire.

Unfortunately, IMHO the only animation that conveys anything is maybe the one for "Total control over the design". The rest just don't provide any meaning to me.

In general animations on websites don't engage me, they distract me from learning what I am there to learn.

But maybe I am in the minority, which is fine :)