It’s live! After years of planning and months of work with our developer, Eli Van Zoeren, we’ve finally pulled back the curtains on our new Internet infrastructure. If you’re reading this in email, head over to the TidBITS Web site to take a look and click around — all 28 years of TidBITS articles and comments are there.
I’d like to explain more about various aspects of the system, since it’s vastly different from the homebrew system that Glenn Fleishman created for TidBITS nearly a decade ago. Yes, it really has been that long.
Most things are better, of course, but we did have to say goodbye to some features that were too confusing, too little used, or too hard to reimplement. And some things are still up in the air — the TidBITS News iOS app, for instance, doesn’t work right now because WordPress puts out a differently formatted RSS feed. Either we’ll figure out how to redo the feed, or Matt Neuburg will figure out how to make it parse the new feed.
First off, if you previously received TidBITS via email, we’ve sent you an email message encouraging you to set a new password and log in to the site. As I noted in “How Accounts Work in the Next-Gen TidBITS Infrastructure” (25 March 2018), it was impossible to bring over passwords due to them being encrypted to protect against hackers.
When you get that email message and click through to change your password, the system will ask for your email address (the one at which you receive TidBITS, if you have several) and send you a reset password link. When you load it, our site will suggest a strong password for you. You can accept it or generate a new one — either way, we strongly recommend that you store it in a password manager like 1Password or LastPass. You have to log in after setting the password.
If you haven’t gotten that email message, or wish to reset your password manually, click Log In in the upper-right corner of the site, click Forgot Password, and enter your email address to start the process of getting a new password.
Once you’re logged in, you should remain logged in until you log out manually.
Thanks to our TidBITS members, whose financial support made this transition possible. Modern Web design and development is expensive, and you can think of the site as costing in the price range of a small car. We’ve been saving for years to pay for this transition, and we need your support more than ever to afford the servers, pay authors, and keep food on the table for our employees.
I emphasize that because a scary change we had to make involved cancelling every automatic membership renewal at eSellerate, our former payment processor. Because eSellerate has been in maintenance mode for years, we felt that it was essential that we switch to a new system. As such, everyone will have to renew manually at their next expiration date, although people who prefer an automatic renewal can sign up for that again.
Our new system relies on the Paid Memberships Pro plug-in for WordPress and uses Stripe for the actual payment processing. We hope that you’ll find the process faster and easier than before. Once you log in to your TidBITS account (you’ll need to request a new password because all old passwords were one-way encrypted), you can see when your membership expires and easily renew or change levels. Paid Memberships Pro will send you email when it’s time to renew.
As before, you need to be logged in to access the membership perks, such as discounts on Mac apps, and to view the site without paid banner ads. To find your full-text RSS feed, log in and click the Account link at the top of the page. On the account page, at the bottom, you’ll find your personalized full-text RSS feed link.
Web Site Design
It’s astonishing how much Web design changes over time. When we designed our previous site, it felt sleek and modern. But now I can barely express how dark, small, and cluttered it looks to me. The old design had been in place for so long that when presbyopia hit my eyes in my mid-40s, I had to bump up the size of my own site in Web browsers so I could read it.
As you can see, we went for a much cleaner layout, with more white space to improve readability. We radically reduced the navigation and console-like graphical trimmings to focus on what’s most important—the content.
You’ll likely notice our new logotype at the top of the home page. Designed by the talented Geoff Allen of the Denver-based design house FUNISOK, the logotype starts with Avant Garde, but Geoff tweaked every letter so, for instance, the first T’s horizontal bar slides into the i’s stylized dot, which is meant to evoke the leaf in the Apple logo. Each letter has both sharp and rounded edges so they flow well together. And we’re using a deep, rich purple to separate the BITS from the Tid, tying the two together with color in the leaf as well. You may also notice the new square favicon, which connects the black T and the purple B.
The site uses the Proxima Nova font for both headlines and body text. Proxima Nova turns out to be wildly popular, although we came to it by way of Avenir Next, which is one of my favorite fonts these days (but isn’t as easily licensed). We played with some alternatives to mix the sans-serif Proxima Nova with a serif font, but nothing grabbed us. Unfortunately, due to font limitations in email, we can’t use Proxima Nova for the issue or for the articles that TidBITS members can receive as we publish them.
At the very top of the page are the most important links and controls: a Search field on the left and a Log In link on the right, plus, when you’re logged in, an Account link for checking and changing your membership information, email address, and so on.
Our previous site devoted a lot of space to sidebar-based navigation, but since our Web stats showed that very few people navigated via the categories, we decided to tuck such things away in menus. There are four top-mounted menus now:
- Weekly Issues: For those who think of TidBITS in weekly terms and want to catch up issue-by-issue, this menu provides one-click access to the past five issues, plus a list of all previous back issues. Issues used to be named along the lines of “TidBITS#1394/13-Nov-2017.” Since that name is used for the Subject line of the email issue too, we’ve moved to a descriptive name like “#1410: Finder freezes, Apple TV 4K HDR, reading on the iPad, TidBITS transition.” As readers had pointed out to us, there was little point in wasting space in the Subject line on the word “TidBITS” since it was in the From line, and date usually matched up with the Date line. We hope the descriptive Subject lines will encourage more people to open the issues.
- Membership: As I’ve said, TidBITS members are the main reason TidBITS exists these days. So we made the membership-related navigation prominent.
- Get TidBITS: We provide TidBITS in a variety of ways, and this menu links to all of them, including the excerpt-only RSS feed for non-members. It also links to our SlackBITS group and to the new TidBITS Talk forum on our Discourse server to make them easier to find and join.
- Categories: Although most people don’t navigate by category, we included this menu partly so someone who’s new to TidBITS can see at a glance the kinds of things we cover. It’s also how you can see the full list of Watchlist items, via the Mac App Updates category link.
At the bottom of the screen, you’ll find more navigation to various administrative pages. Nothing much interesting here, but it’s where everyone is conditioned to look for such info.
Our site has two primary page types: headline pages and article pages. The headline pages include the home page, category pages, issue pages, series pages, and search results, and they all show lists of articles — sorted by date — with short excerpts. Clicking a headline takes you to the full article.
Each entry on a headline page also shows some metadata, including author name, date, and comment count, plus a Listen link if there’s an audio version of the article. The author name is clickable and takes you to a listing for that author. Similarly, clicking the comment count takes you to the bottom of the article to read the comments.
You’ll notice a purple star next to a few articles at the top. They’re “sticky,” which is to say, they sort to the top of the site regardless of date. That’s to keep major articles in the most prominent spot even as we publish less important articles later on.
TidBITS Watchlist: Mac App Updates
In two spots on the home page, under the third article and under the twelfth article, you’ll see a row of six app icons. Clicking one takes you to the Watchlist article about that app’s recent update.
We were surprised at how popular the Watchlist items were in our last reader survey, but since we publish a fair number of them every week, we didn’t want them cluttering the main article list. This row of icons works well for providing some visual interest and, frankly, providing exposure to some of our favorite Mac apps.
Ads and Other Fun Stuff
We do still have ads on the site, but they appear in only two places: between every few articles on most headline pages, and at the end of each article. However, we’ve decided to have some fun with ads, since we were unhappy with how random they’d gotten via Google AdSense on our old site.
Second, we’re exercising more control over what appears. We have banners for our sponsors — Smile and Backblaze — and we have banners for the MacTech Pro events and the ACEs Conference since TidBITS is a media sponsor for both (in part because they’re great — if you’re an Apple professional, we recommend going). And to help our friends who are Take Control authors (and because we have a vested interest in seeing Take Control succeed under Joe Kissell’s leadership), we’ve also put up banners for recent Take Control books.
More interesting, though, are the banners that expose great TidBITS articles from the past that are otherwise buried deep in our archive. To break things up even more, we’ve also generated some banners with Steve Jobs quotes. I’ve been too busy to make many of those, but we hope to generate quite a few of these non-ad banners.
Another goal is to make a bunch of banners that are interactive quiz questions with an HTML5 editor called Hype that’s available in the Setapp subscription service. We have a ton of these from the Mac trivia game show we’ve done at the MacTech Conference for the last few years, and this seems like a fun way to let people test their Mac knowledge.
I say all that in part to suggest that you might want to pay more attention to the banners than you would otherwise. As before, TidBITS members won’t see the paid ads from Smile and Backblaze.
I won’t include a screenshot of an article page, since you’re in one, but I do want to explain some of its elements.
- Featured Images: Most obvious is the fact that some articles now have a photo at the top, with the title and metadata superimposed on the image. The design doesn’t require us to add these, so we’ll be feeling our way into how well they work and how much effort they take for us to find on sites like Pexels, Pixabay, and Unsplash, or how much they cost to commission from our photographer friends. We can even give credit where it’s due in the lower-right corner.
- Social Media Buttons: There are three social media buttons on the left side, which scroll with the article so they’re still accessible once you’re done reading. Honestly, they’re our final attempt to see if social media sharing is worthwhile — we’ll be watching stats to see if they encourage more people to share our articles and generate traffic that way. Note that they are purely local links and have no trackers associated with them!
- HTML Headings: Previously, we had only the concept of bold sub-heads that could lead into a paragraph. No more. We’re using full HTML headings, although I doubt we’ll nest things more than a level or two deep. Along with providing some hierarchy, the headings space out the content more so it’s not so dense.
- Screenshots: Images within an article should be vastly better than on the old site, which downsized everything in non-optimal ways. We can size images directly in WordPress, and if the full image is larger than what appears, you can click it to expand it. Screenshots can even have captions now.
- Related Articles: At the bottom of every article, you’ll see a Read More About This Topic row that contains up to six related articles — click one to read the article. We’re relying on a WordPress plug-in called SearchWP to identify related articles algorithmically, and we can set them manually as well. The images used for related articles should improve over time as we give more articles featured images. Older articles grab the first image, which is often a screenshot so it can look a little odd in this context. If you see a newspaper icon with the TidBITS logo in it, there’s no associated graphic at all.
- Tags and Categories: Also in the Read More area is a collection of blue boxes with text in them. These are the tags and categories associated with the article, and clicking one loads a headline page of matching articles. These will improve over time as we tag new articles and tag more older ones.
For many years now we’ve had what we called ExtraBITS, which were one-paragraph summaries and commentary on articles elsewhere on the Internet. They were a special data format in the old system, which made them annoying to work with on the back end, since we couldn’t do any formatting or even add any links.
We decided to retain the concept of ExtraBITS in the new system, but in a more flexible format. Now they’ll be regular short articles with full formatting and linking possibilities but with a Read Original Article link at the bottom. They’ll still be collected together at the end of the email issue.
The difference between an ExtraBITS item and a short TidBITS article is that an ExtraBITS item keys off an article somewhere else and it encourages the reader to read that other article. In contrast, a standard TidBITS article of whatever length stands alone and doesn’t assume that you’ll need to read something else for the full story.
Article Comments and TidBITS Talk
A significant change is how we’re handling article commenting. Our previous system was lightweight, easy, and hierarchical, but had almost no functionality, so no formatting was possible, it was nearly impossible to quote a previous message, images couldn’t be inserted, and even links were problematic at times.
We decided to go all the way in the other direction with an open-source discussion system called Discourse that’s used by a lot of other sites ranging from BoingBoing to Keyboard Maestro. Created by the guy behind the Stack Overflow family of sites, Discourse’s feature set is astonishing, but that power comes with complexity, so we’re still figuring out how best to configure it and help users.
Comments still appear at the bottom of articles for quick reading, but if you want to participate in the discussion, you’ll end up clicking over to the Discourse server, which is running on an entirely different host for technical reasons. There you have nearly every commenting capability ever conceived. The system will even give you an interactive tour of its features on your first visit.
Discourse does require a login to post, but it supports single sign-on from WordPress, so once you log in to the main TidBITS site, Discourse will either see you as logged in or will log you in with a single click on its Log In button. I don’t want to say much more about Discourse here, since again, I’m still learning how it all works.
There is one big difference between our old system and Discourse, which is that Discourse is intentionally not threaded, for deep philosophical reasons. Since our previous system was, and since our experiments to connect the older imported comments in Discourse to their original articles failed, we imported all the legacy comments into standard WordPress comments, which do support nesting. A small number of articles have both old comments in WordPress and the option of new comments appearing in Discourse; any confusion associated with that will disappear soon as old articles are superseded.
Finally, TidBITS Talk has been a mailing list for its 20-year history, but we’re moving it to Discourse as well. Discourse can be configured to treat a category — of which TidBITS Talk is one — as a mailing list so those who don’t wish to take advantage of the Discourse interface on the Web can still participate via email. I haven’t had time to discuss what’s involved on TidBITS Talk itself, but the Mailman-based mailing list will remain active for a few more weeks.
Email Issue Design and Changes
The other huge change in how we publish TidBITS affects the email issue. Our previous system was a home-brew mashup of MySQL and sendmail, and while it worked fairly well, we often ran into deliverability problems that we couldn’t resolve easily. We’re offloading that work to the SendGrid service now, which we hope will result in fewer issues being marked as spam by overactive spam filters.
In the past, we offered four different editions of TidBITS: full-text and announcement-only versions in both text and HTML format. That was, frankly, kind of nuts, and people would often complain that TidBITS looked lousy on an iPhone because they were still subscribed to the plain text version with its hard-wrapped lines. And even the HTML issue was extremely simple code that didn’t always display well in modern email clients.
My apologies in advance to those who are accustomed to the announcement-only versions of TidBITS, but we’re simplifying everything and offering just one full-text version of TidBITS now. The rationale is that if you want to read TidBITS in email, you can do so in its entirety — the full-text versions were by far the most popular in the old system. If you’re just relying on the email version as a reminder to go to our Web site, you can always click our logotype at the top of the issue or any headline farther down to jump to the site.
There is still a table of contents at the top that theoretically should scroll you to the right spot in the issue. Support for this across email clients is sporadic, though, so it may not work for you.
If you have suggestions for how we could format the issue better for your situation, I’m all ears.
iPhone and iPad Viewing
Right now, over 20% of our Web traffic comes from people on mobile devices, which is impressive considering how bad the previous site was on the iPhone. Plus, Google actively deprecates search results for sites that don’t display well on mobile devices. So an important goal of the redesign was to have a responsive site that reformats smoothly on smaller screens.
I’m pleased to say that the new site does this swimmingly. It’s trickier than it seems, since some page elements can scale, whereas others can’t. The row of Watchlist items goes from a single row of six to three rows of two on the iPhone, for instance, but we might try shrinking them more and going for two rows of three.
The hardest part of the responsive site turned out to be the ad banners, since we’re using 728×90 leaderboard sizes on large screens, but they shrink awkwardly on the iPhone in portrait orientation such that they’re hard to read. Our eventual solution was to provide each 728×90 banner with a 320×100 alternate (another standard ad size) that provides a similar visual impact on a portrait iPhone screen. A CSS media query automatically replaces the larger banner with the smaller one when the screen is under 600 pixels wide.
This replacement happens dynamically, so it’s kind of neat to look at our home page on the iPhone in portrait orientation, see the small banner, flip it to landscape, and watch the large banner appear automatically.
The iPhone in portrait orientation doesn’t have room for the navigation menus at the top, so we put them under a ··· button to the right of the logo. It’s surprisingly effective, and while I hope we can get the TidBITS News app working again, the site is so good in Safari on the iPhone that there’s less need for the standalone app for visual reasons.
Dutch and Japanese Translations
Most people probably don’t realize that we have dedicated volunteers who translate every TidBITS issue into Dutch and Japanese. Relatively little will be changing for the translations — their Web sites are running on our new server, but remain static HTML files.
The Dutch and Japanese mailing lists will be moving from Mailman to SendGrid, and we hope that will be more or less seamless, but it hasn’t happened yet.
Constructive Comments Welcome!
Eli and I have been knee-deep in this redesign for many months, and I’m extremely happy with what we’ve accomplished. That said, I don’t consider the current state of the site to be fixed in stone and I expect that we’ll want to make some tweaks as we hear from readers and get a better feel for the new technologies we’ve deployed.
So feel free to contact me with constructive comments and suggestions. You can always send me email, post a comment in the Site Feedback category in Discourse, or post in the #site-feedback channel in SlackBITS. Twitter and Facebook work too, but honestly, I prefer not to have conversations in proprietary services with troubling business practices.
Thanks for all your support over the years, and I’m looking forward to being able to focus more time on publishing the best possible content for you!