New Design
As you have probably noticed, things are different now. I have just installed the new custom theme I have been working on for the last four months.
What’s New
- Tips are now interleaved with Articles on the New page, but also formatted to make clear that Articles are more important—everything new is now in date order in one place.
- Tips by topic, for example heavy weather, now display as the full Tip, not just an excerpt, so you can read through quickly without clicking on a new page and then having to go back to the topic.
- There is now an abbreviated table of contents (blue box) under all Articles that lists other Articles on the same topic. Previously this only worked with Online Book chapters.
- If you click on any photo on the site, it will enlarge in a cool lightbox, that can be quickly collapsed with another click, rather than either doing nothing or opening in another window, as before.
- We have implemented a more legible body text font designed for reading large blocks of text on a screen.
- You may notice subtle tweaks to the text and headings spacing to improve legibility—easy to do in the new theme, hard in the old.
- When in an Online Book chapter, clicking on the cover of the book will take you back to the table of contents.
Just The Start
The above is just the start of the improvements that are buzzing about in my head, now that I have got the heavy lifting of building the new theme done:
- A special area that’s branded and designed specifcally for the Adventure 40.
- A redesign of the About page to make it lighter and better.
- A redesign of the page for each Article topic and Online Book table of contents to make them more compact when scrolling through looking for something.
- More improvements to search.
Have ideas for other improvements? Please leave a comment.
Bugs
I have sweated bullets to make this new theme bug free, but the chances that I have actualy swatted all the little blighters are slim to none.
So if you find something that does not work, please leave a comment either on the article with the bug, or on this article.
What Do You Think?
Please have a look around, and then come back here to tell us what you think, both positive and negative, in a comment. We really want to know.
Under The Hood
For those interested, here’s some techie stuff about the new theme:
WordPress
Yes, AAC is built on WordPress, and has been for some 15 years, the open-systems content-management system that powers over 40% of websites in the world.
Why WordPress?
Many reasons, but the most important one is that Phyllis and I don’t want to be internet sharecroppers at the mercy of whoever controls a closed system.
With WordPress we have total control. Heck, a few years ago, we were able to change membership systems without you members even having to change your password or how you pay us.
And the WordPress community is full of thousands of cool motivated people all dedicated to two ideals: retention of content ownership and portability. No lock-in.
Yeah, I’m a bit evangelical about it, most of us in the WordPress world are.
Ground Up
Instead of using a generic theme and building on it, as we have always done in the past, and most all sites on the internet do, I built it from the ground up just for AAC, so it’s smaller and faster.
That said, a big shout out to the many contributors to the WordPress 2024 theme, which was my inspiration, and from which I swiped1 much of the code.
Built For the Future
Our new theme, like 2024, is built on the new Full Site Editing WordPress front end, rather than what we are now calling a classic theme, so it will be:
- Easily upgradable as new features and capabilities are added to WordPress.
- Much easier to tweak and change to make the site ever better.
Assistant Coder
Also a shout out to my assistant coder, ChatGPT-4. Yes, much of the new code that makes all this work was actually written by AI.
Working with the bot was one of the most interesting parts of the project. I learned we need to:
- Clearly understand the structure of the code we want.
- Break the problem down into small functions.
- Understand the programming language being used and clearly specify exactly what we want the code to do and how—this only works if the person using it can already code.
- Be able to read the resulting code to check it.
That said, because I don’t code much and I’m dyslexic, I make a lot of little mistakes when I do, so using the bot was a huge productivity gain for me. For a better coder the gains would be less.
Other stuff:
- ChatGPT-4 (paid) is way, way, better than ChatGPT-3 (free), which is near useless for coding.
- If we use it for research, we have to understand the subject well to phrase the query right and it’s important to verify the bot’s output.
- The bot won’t cite its sources, which makes verification more important and more difficult.
- While the bot is pretty good at coding, it makes nasty and potentially dangerous mistakes when researching—be careful.
- For fun I asked ChatGPT-4 to write a couple of articles. The results were truly terrible and often plain wrong—I’m not fearing for my job yet!
- That’s OK, in fact encouraged, in the open-systems world of WordPress. ↩︎
Congrats! It’s always a good feeling to get something out the door. 2 comments on comments: 1) It used to be possible to click on the word “comments” from the list of articles and go directly to the comments of an article. That was nice. 2) The comments used to change color when I mouse-over’d them, which made it easy for me to see which comments were new when I came back to read additional comments. I miss that feature.
I hope the new theme makes your life easier!
Hi Nathan,
On the first, that’s intentional. The problem was the people would click on that link and start commenting without ever reading the article, which causes all kinds of grief for the moderator…me.
That said maybe what I should do is make the comments number at the top of the post a link, although that will take a bit of messing with the code, anyway I will think about it.
On the second, are you referring to comments you have not read showing in blue? If so, as far as I can see that’s still working but it only shows if there is a new comment since you have been on that page, and even then it’s a bit flaky and always was, because of different browser states, or at least I think that’s what it is.
As far as the new unread comment highlighting, something seems to have changed (as in the highlights are missing, but not always). I tested this with Safari on an iPad, and with my rather restrictive Firefox configuration on Debian 12. Both platforms had the same symptoms. For example, from today, none of the ‘New Site Design’ unread comments are highlighted (and never have been), but the comment ‘… review-of-spade/#comment-309606’ was highlighted (and just now, your reply to that comment).
Note this has always worked for me in past using Firefox. I did notice though that about a month ago?, the first comment I opened from the ‘… /recent-comments/ page (my way following along day to day with what’s new) was not highlighted, but all the other new to me comments were highlighted. As I assumed it was due to my rather strange browser setup, I ignored it. At any rate, thanks for the new site format changes.
Hi Glen,
Thanks for investigating that. I’m not sure what’s going on, but that code was not changed when I changed the theme since it’s java script provided by the plugin we use to replace standard WP comments. The other issue is that that code runs in each user’s browser, so it does tend to be a bit flaky since it depends on what is in each browser’s cache, how long the cache lasts, and who knows what else, so trying to trouble shoot it from here would probably be futile, particularly since I have noticed exactly the behaviour you mentioned several times in the past on my own computer.
The only thing I can suggest is to clear you browser’s cache and all cookies and see if that fixes it.
Also note that you can check for new comments any time using the recent comments link at the bottom of every page, which will always be more reliable than a script running on your browser: https://www.morganscloud.com/recent-comments/
Hi John,
FYI: new comments are now showing in blue for me again, as they used to. No idea if it’s something you did intentionally, side effect of your other improvements to the site, or my browser just decided to show them again. I suspect clearing my cache was the solution, as you suggested below. Regardless, I’m as happy as always to learn from this site, both you and the commenters.
Hi Nathan,
No I have not changed anything. As you say, it was probably clearing the cache, particularly since that code executes in Javascript at the browser level, not on our server.
Hi Nathen,
Just changed it so the comment number at the top of the article is a link to the comments, but not the one on the list of posts. That at least gets people to click on the post title, which reminds them there is an article to read, but saves them from having to scroll all the way through if they have already read it. Seems like a good compromise.
Love it. Thanks! Clicking into the article first is a good compromise.
Yes, I was referring to the unread comments showing in blue. It used to work and it’s not working for me right now (none of the new comments were blue when I came back this afternoon), but I agree that the browser is probably the culprit there.
Awesome! I appreciate the improvements in readability already. One quick note… the “Reply to the comment above” looks a bit odd with different colors, fonts, and spacing, bolding, etc.
Also, on this page at least, if you scroll down the article about half way and then start scrolling back up… the title bar reappears and overlaps article content.
Hi Charlie,
That’s intended behaviour and is the same as the old site. The idea is if you are on a small screen device and want to get to the memory without scrolling for miles it appears 1 second after you start the up scroll.
Hi Again, Charlie,
The screen shot you uploaded is blurry because of the slight transparency of the menu, I think.
Also, comment attached image thumbnails seem to be pretty blurry and unhelpful. You get a nice image when you click on them though!
That’s the same as the old site too. The idea is you see the image and then click if you are interested. If I made them all full size the comment stream would look cluttered and load slowly. If they are blurry that’s because the person who uploaded it only gave us a very small image, so not a lot I can do on that.
Yup, that’s on my list, but thanks.
Congrats on the overhaul and launch! I’m noticing something nice right away here in the comments — the ability to format, embed links, and add images is… new? If so, great! If not, well, I guess I’m not very observant. xD
Here are some initial thoughts — I haven’t kicked the tires very much, or looked at this on a phone; most of my comments have to do with design. Keep or toss …
New design type treatment is really nice, with larger text overall!
Home page “what we do” section especially good, communicates exactly what you’re getting on this website.
Homepage masthead suggestion — what if the 3 links were buttons, equally sized type, with “New content & members” first, then “I’m ready to join”, then “I need to learn more” ? The different sizes of type and button/not-button is kind of confusing, and the “new content” button is off on the left floating by itself. Does that make sense? I’ve attached a quickie mockup of what I mean.
Type hierarchy: I’d also suggest making “Attainable Adventure Cruising” the largest type on the whole page (h1), with “All About You going cruising” (h2) smaller below it … and then “What people say about us” a bit smaller than that (h3). (see attached)
In the Topics list, consider repeating this text after “Recently Updated” — “Articles and chapters that we have recently made meaningful updates and improvements to”. Initially when I saw that link, I wondered if I would not be able to find that content elsewhere, i.e., also within its topic.
The little book icon and highlighting of the Books in the main Topics listing calls them out nicely.
Thanks for the opportunity to comment on the new look and feel! –Carolyn
Hi Carolyn,
Thanks for the thoughts. Great suggestions on the about page and very much in line with my thinking. That page was not changed in the redesign, and is next on my list of project now I have the theme sorted out. And yes, the comments area has not changed, the links and images ability has been there for several years.
One more thing: You may want to adjust margins and spacing on paragraphs here and there. Screenshot from iPhone 11.
Agree with Carolyn and Alex, need margin, and I think maybe a bit more space between headed sections on mobile. I’m on iPhone, Safari. Very nice work overall, seems like it will be well worth the effort far into the future.
Hi Matthew,
I agree, see my comments to Carolyn and Alex.
Hi Carolyn,
I agree, I still need to refine the spacing, particularly on phones. One of the cool things about the latest WP improvements is that it supports automatically scaling fonts, so the heading font gets smaller as viewport narrows without having to use separate CSS for each viewport size (media) as we used to. The downside is that changes the perception of spacing so I need to mess with that more.
Wow, no more CSS media queries, now that’s progress! Good luck with the various minor adjustments, I’m now tempted to try FSE for my next site. WordPress keeps getting better and better.
Hi Carolyn,
We are not there yet because so far the Theme.JSON syntax and interpreter are not fully responsive, so you will still need at least some CSS media queries.
That said, yes, worth giving FSE a go, but only when you have time to dig in, the learning curve is near-vertical and the documentation still leaves much to be desired.
On the other hand, every site you do in a classic theme is one you will want convert later. Also, if you are building with a page builder some time this year will be a good time to get out of that, I think. That said, be aware that I had to write a bunch of code to do stuff you can easily do in a page builder, but the advantage is that the result is way, way lighter. That will change over time as more core blocks are added.
Another option instead of code is to use a really good block plugin like generate blocks which can do anything a page builder can but more efficiently within FSE. I do use GB, for a couple of things, but plan to be out of it in the next year since any of these things outside of core are idiosyncratic and will present issues in the future.
In summary, my goal is to have a site that uses nothing outside of core within six months and with this change I’m 90% of the way there already.
Hi John,
on my phone, there’s apparently zero left margin, both in Brave and Opera mobile.
I can confirm that the percieved legibility has improved – good job on that!
I chuckled at your comments about job safety. As I had explained to some anxious colleagues, I can type the code for free and faster than it would take me to explain to some AI what exactly I need. It’s making all the decisions that is hard and what I charge for, not coding.
Best,
Alex
Hi Alex,
I think there is a .5 rem margin, but I will check. Always a trade off between a nice look and using precious real estate on the screen with white space, but maybe up it to 1 rem.
And on coding I agree. In fact this may even be a job enhancer for good system analysts, less time looking up syntax and more time really thinking about what matters. For me it was great, since I don’t code a lot, before AI I wasted a ton of time looking up syntax and WP functions.
Hi John and all:
Congrats for the improves; nice and easy to read.
Sometimes, I need to print in paper one article, to read it in places where I don’t have Internet access.
What happens, most of the times, when I try to print an article, is that there are some boxes in the beginning of every page (About, New, Books, Topics…) which hidden the first or the two first lines of every page, so I cannot print them.
Is it done intentionally for not allowing printing them? Is it something that can be fixed?
Thanks
Hi José,
No, nothing intentional to stop you printing. This is more a function of how HTML and browsers interact. That might also be the sticky menu. So if you make sure you scroll right up to the top of the screen before printing it may work better. So doing disables the script that displays the sticky menu.
I’m also thinking about disabling the sticky menu on larger screens, which may help.
Hi John:
Yeah that´s it. Couple of scrollings and they disappear,
Thanks
Firefox’s “Reader View” is an easy option if that’s how you want things formatted. It simply displays the page’s body content with all the menus, buttons, etc. stripped out. Rendering engines tend to panic and make weird layout errors when they’re asked to reformat a dynamic web page for hard-copy or PDF.
https://support.mozilla.org/en-US/kb/firefox-reader-view-clutter-free-web-pages
It’s my understanding (although I haven’t tested it exhaustively on AAC) that this should also play well with Pocket for queuing up articles to read offline on your e-reader. https://support.mozilla.org/en-US/kb/getting-started-with-kobo
Hi All,
I have done a temporary fix for the problem of margins on phones, but it turns out that there are some issues in the new FSE WP that make our layout, with a lot of different boxes with different coloured backgrounds, not work great on small screens.
I know how to fix this but it will take a bit of time and experimentation. In the mean time, the temp fix should help a lot.
Thanks for the heads up.
Note, although I have changed the CSS version, you may need to refresh your screen a few times to get the fix to show.
It’s looking pretty damned fine in both Chrome/Blink and Firefox/Gecko on Android 14, and is equally good in Edge/Blink and Firefox/Gecko on Win10 now, in both dark and light modes. The only noticeable glitch, to my eye, is that the line spacing below an H2 or H3 is a little bit compressed relative to the rather large spacing between lines of a paragraph.
Bringing the short tips & tricks into the main feed is a huge improvement. I used to miss most of them until many days or weeks later. Now they’re where they belong. It’ll make for better discussion on them, I’m sure.
Nice work, John.
Hi Matt,
I thanks for checking on all that stuff. There will be further improvements on phones. And yes, I agree on the H2 H3 etc spacing. I had it right and then broke it with another change and did not notice it. The interaction between theme.json (how we do CSS in the WP world these days) and FSE is still a little rough around the edges, so I need to dig in to the former and see what I broke.
Hi John,
After using the new design for a little while, I have but one complaint: on bigger screens there is a lot of “wasted space” left and right, and I think I’d like the actual content to be a bit wider (I tried 800px instead if the 600px you currently have, and I really like it. 1000px is too much.)
Other than that, it looks nice and clean, and I really like the new place for the tips! I often missed them, too.
Hi Emile,
Good point, I have been thinking about that too. I started off with the same width as the old site, just so I did not change too many things at once.
The trade off here is that it’s a hard rule of legible type design that there should not be more than a max of 75 characters on a line, otherwise the eye tends to skip between the lines. As you probably know, this is why magazines and newspapers have columns and of course columns don’t work on screens.
So if we make the text column much wider we will need to up the type size to compensate, and then we will need to scale that for narrower screens. We can do that, but I’m not sure that an even bigger type is desirable considering that we are already at 1.15 REM or 15% over the screen native font size.
That said, at the moment we are at an average of 62 characters per line so I think we could go up to 700 px, but probably not to 800, but I will pay around with both.
Also note that some of the space either side is not wasted in that wide images and also smaller images floating left and right bleed out to the edges of the white background.
Hi Emile,
I just took the text content width to 700 px and the overall to 900 px. That’s giving us ~75 characters/line, so about max for readability. What do you think?
Yeah, it’s much better! Thanks!
I seem to be having a bit of trouble with the search feature. If I tap the magnifying icon, the text box will open up and accept any text I type, but when I tap the search icon again, the text box collapses and no search results show up. I’m on an iPad using Safari with the latest IOS updates.
Hi John,
Just hit return, don’t click on the button again, that just opens the box. And yes, I agree, not intuitive but that’s part of core wordpress, so difficult for me to change, but I will think on it.
Easy peasy. Thanks.
Hi John,
FYI, if I click on the link from the recent comments page, I often don’t end up at the right comment. For example, looking at the 5 most recent comments, Stein’s reply to Jim and Jim’s question to Stein both go to a comment stream between you and Mal. However, the other 3 from Jesse, Jesse and Jim all go to the correct comment. I have noticed in a few instances that it goes to the correct comment then quickly goes to a different one. I have tried this on 2 browsers (chrome and firefox) as well as from a phone.
I think I noticed this starting maybe 2 weeks ago although I have been away a bunch recently so there have been some long periods where I haven’t logged in.
Just trying down most of the comment stream, it seems to be working fine for tips but not for articles. Not sure if this is really the correlation but I got 100% correlation on the ones I tried.
Eric
Hi John, I also experienced needing a meandering path to get my comment to a comment in the correct place. Dick
Hi Eric,
Wow, that’s a weird one. I’m seeing the same thing. What’s happening is that the plugin that we use to provide more comment functionality than standard WP comments is renumbering the comments when it displays them. I will need to report that to the plugin vendor and wait for a fix since I don’t have control of that code. In the mean time I’m thinking about work arounds.
Thanks for the heads up.
HI Eric and Dick,
OK, I have it fixed. It was a problem with displaying all comments on page load, which is non standard behaviour as far as WordPress is concerned and it’s core WordPress that displays the list of recent comments, but a plugin that displays the comments on posts. So they were fighting with each other.
So I switched the plugin to honour wordpress standard pagination which seems to fix it. This does mean that when we scroll to the end of line of comments, on articles with a lot, we will need to click on a load more button, but I like that functionality because it will speed the loading of articles with a lot of comments.
Thanks John, it works as expected now for me.
Eric
Hi Eric,
Good to hear. I have to say I have a love/hate relationship with that plugin. It gives us some good benefits but it’s also horribly complicated and so the biggest source of bugs around here. Kind of analogous to lithium batteries on boats. There are days when I think about going back to vanilla WP comments…the lead acid option!
It’s been about 2 months since the site update. Just wanted to drop by and let you know that it’s really improved usability from my experience. I’m especially enjoying the single thread of articles and tips together. Thanks again for your hard work!
Hi Charlie,
How very kind to take a moment to say that, thank you!