As you can see, we have just installed a new site design, the product of two years of thinking, investigating and building.
Our goals for the new site are:
- Light and fast, at least for a membership site, which, by definition, must carry a lot of code.
- Easy to find and access our over 1000 articles.
- Easy to navigate both on small (phones) and large screen devices.
- Clean and modern looking, with just what you need to see and nothing else.
- Keep the higher power of the internet happy: i.e. Google Page Rank. Most of our new members originally find us through search, and almost none via social media.
- Easier for us to maintain.
The old site, despite the partial look and feel redesign we did last winter, was kind of like an old boat that had been cruising for 10 years without being cleaned out. Building the new site was like taking everything out, throwing it on the wharf, and then only putting back what is really useful.
We also repowered (to belabour the boat metaphor) by ditching the template and framework we have used for the past 10 years in favour of a new one that complies with WordPress standards—the content management system that powers this site, and over a third of the internet.
We were also able to ditch a bunch of third-party plugins in favour of using WordPress core features that have become available since our last major redesign five years ago.
These changes will, at least once we get everything debugged, make the new site easer to maintain and more reliable—the old site was getting pretty shaky and it frequently broke when WordPress was upgraded.
The Good News
It’s All About The Menu
The menu is pared down to just four options and a search icon, but still provides easy ways to drill down to what you want to find. And it is now sticky, so it stays at the top of the screen as you scroll down—should help particularly on small screen devices that are easy to get lost on.
You Always Know Where You Are
You can also see at a glance where you are and how you got there, as well as all of the related information to whatever you are reading, using the breadcrumbs that appear in the menu when you have drilled down from the top menu items.
And if the article you are reading is part of an Online Book, the cover automatically appears.
What’s Next
And at the bottom of each article, there are “next article” and “previous article” links that key off the primary topic that the article is under. Right now this only works for Online Books (like the old site) but we will be expanding the feature to cover other topics and books.
Books are Topics
On the old site, Online Books and Topics were two different things handled by different code and stored differently—caused us endless headaches. Now Online Books are simply topics with a cover image and logical ordering. An architecture that’s way easier to maintain and that will support other features in the future.
Logical Order
We can now, behind the scenes, change the order of posts within any topic to be logical, rather than just ascending or descending date order. On the old system we were only able to do that for Online Books. That said, we still have some work to do to sort all the topics in the most optimal way.
The Bad News
Bugs & Confusion
All that said about the advances, I pretty much guarantee there will be bugs, as well as things that are not as intuitive as we hope, so you can do us a huge favour by reporting either in the comments to this article.
That said, before you do, please take a moment to reflect on whether or not the problem is in fact real, or just a function of being different from what you are used to.
Broken Links
The fundamental changes to the way the site works have resulted in changes to a bunch of page addresses, so you may hit one or more broken links, particularly when following a link in an old comment or the Further Reading links on articles. We should have that fixed in about a week.
Not Done Yet
We still have two major projects that we hope to get done this winter:
- Change to a new and faster cloud-based server optimized for member sites that should provide both a big increase in speed and allow us to add further features (like the new comment system) that result in high loads on our current server.
- Get rid of the third-party page builder that we now use for things like the About page, and replace it with new WordPress core functions.
Comments
Please tell us what you think, and don’t forget to report any problems or usability issues, other than broken links for the first week.
Love it! Thanks for the update.
Looks great!
Nice work!
Wow, looks great, cool modern theme. And even the comment and subscription function is fully available again – thanks for all your effort!
What I am missing is the link to the comments at the beginning of an article – not a big deal, and probably intentional anyway, I’m just mentioning in case it has been “forgotten” by chance.
Found a glitch – in the books overview at the non-members frontpage there is a spurious element without valid image or link embedded, see screenshot.
The “noscript” element for these links should be checked, the code seems not legit (lots of “amp;”), but really not a big deal imho.
Thanks. That’s the damned page builder we have been using. The thing is the bane of my life. So I think I will just put the time into replacing it with WP blocks, now we have that ability in core.
Hi Ernest,
Glad it looks good to you. The number of comments show on the post lists (topics) but not the actual article. That is the way the theme is coded. I guess I could change that, but given that shows on the topics, and at the bottom of the article I’m not sure it’s worth it.
I like the new design, but, given the paucity of fast internet here in rural Nova Scotia (fibre optic access is going to arrive when we move back aboard the boat!), the first thing I notice is that the site is visibly faster loading than before, so clearly you’ve been busy with the code equivalent of a reaming tool. Very good!
Hi Marc,
Good to hear. Actually right now the page size is a little bigger, due to some inefficient font use, but the code execution wait time is lower. Both should get better when we move to a better server and I do some more tuning.
That’s on the Firefox browser desktop. I’ll get back to you with an impression how it runs on a Chrome-browser Android tablet, which is how I read the site in the bunk. I used to find minor discrepancies in the past between the two “experiences”, but nothing truly busted.
Looks fantastic. Really clean and much easier to read.
Kudos John and Phyllis!
Hi, looks nice!
Two requests, though:
1) Is it possible to get the “Back to top” arrow or similar to the bottom of each page?
2) Duplicating the links to next/previous article at the very bottom of the page, below the comments would be nice.
Actually, that that would render 1) pretty much unnecessary, because when reading through an online book, I at least read through all the comments prior to moving to next page (thence the need to go back up to find the link).
Hi Vesa,
Thanks for the thoughts.
I guess I can’t see a use for a back to top arrow now, given that the menu is sticky. The point being that there is now nothing at the top that you can’t access from the sticky menu that’s always there. So, for example, if you get half way through an article and get bored with it, you can just bail out on the sticky menu. Am I missing something?
I hear you on the duplicate link, but on the other hand there is always a worry of confusion when we duplicate something in an interface, this would be particularly an issues on a post with no, or few, comments.
I thought about it over night, and I’m thinking I might add a “Return to top of comments” link at the bottom. That would solve your issue and be useful to those who want to start a new thread rather than reply to a comment.
That would actually be very useful – and solve the issue I clumsily described. And solve it in a better way than I suggested 🙂
Hi Christopher,
This is a hard trade off. I very carefully designed it so that on a smaller phone (I used an iPhone 8 to test) the top menu was on one line, but clearly if you increase the font size from standard, that will break. But, if I make the menu buttons small so they stay on one line when you enlarge, then they will be too small to read or click on for those who use default font sizes.
The other problem is that if I make the buttons smaller Google will flag us for not being mobile friendly just because the buttons are too small and can’t be easily tapped with a finger which kills our page rank.
Yup, it’s a thing: https://search.google.com/test/mobile-friendly
The only other way around this is to kill the sticky menu on mobile, but that has much worse usability issues because people get lost easily enough on small screens as it is.
I guess the other thing I could do, and maybe the best fix, is to increase the font size on mobile.
Bottom line, this stuff has more design tradeoffs than sailboats!
Hi Christoper,
I played around with this on my phone and ipad last night and I’m thinking that just increasing the font size a tad might be the best bet.
Hi John and Phyllis,
I have a problem with scrolling on the new site: I have my mouse set to scroll a whole screen (in addition to using Page Down and the Space Bar), which previously worked fine.
Unfortunately, the page header obscures multiple lines when scrolling. The problem is greatest with Firefox and least with Chrome (both with text zoom enabled), but both show the problem.
Is it possible to engineer the scrolling to exclude the header?
Sorry for my lack of testing: the problem was specific to the use of the Zoom Page WE-extension with the Text zoom option. The new layout negates (for me) the need to use the Text instead of the Full zoom option; the Full zoom option scrolls correctly.
Hi Carl,
Good to hear you got it sorted. The sticky menu and scroll logic is from the base theme, which is one of the most popular in the WordPress space with a several hundred thousand installed base, so probably not a good idea for me to go messing with it.
To be honest, I didn’t really notice it. I’m here for the content and usually I only notice the design/interface is when it annoys or confuses me.
Hi Jo,
Well that’s probably the best news!
Hi, a quick one: is this how the layout is supposed to render on 1440 wide laptop screen, or is my setup doing something funny?
Hi Petri,
Yes, that looks about right. The comment area has an added margin, except on phones, by design. Is there a problem?
Not really, it just looks a bit sparse on wider screens. But this can be worked around easily. I just open a new instance of firefox, and adjust it’s window narrower, and put there both MC and newly revised m.facebook.com . They both look better on that narrow window. Also, reply font is a tad small for my screen (this is 14″) but that is easily fixed with ctrl +. Cheers.
Hi Again Petri,
I took some of the padding out on larger screens. More readable I think. Thanks for the heads up.
Also took the text up to 16px.
I am using Windows 10 on a PC. When I am on the “New” page I find I cannot reach the bottom of the page to get to New Comments in the bottom menu. As soon as I reach it the page loads a whole new load of items so the menu bar moves down out of sight again. This happens no matter how many times I try. I believe this is only an issue on the “New” page. Otherwise I love the new look!
Does this on the iPad too
Hi Philip and John,
This is intended behaviour and called infinite scrolling. Works great on things like online books because you don’t have to page through the chapters, they just load automatically as you get close to the bottom. That said, you make a good point since on the new page you end up scrolling through everything we have ever posted. Over 1000 posts! For the moment, just go to any post and scroll down to the bottom. Also, you could bookmark the comments page in your browser. I will look at the best way to fix this and still keep infinite scrolling.
Hi John and Philip,
I added some code to remove that feature from the new page only. Should fix the issue, but tell me if not, or I broke something else!
Looks great!