Designing Elytra for macOS Big Sur – Part 1

Big Sur has been the biggest change to macOS since I started using it back during the OS X 10.6 (Snow Leopard) days. We’ve gone from the “hyper aqua” to the subdued and flatter aqua look and finally into the iOS-esque Big Sur design language.

In part 1, we’ll go through the app’s interface from top to bottom, left to right. So as is the case, let’s begin with the toolbar.

Toolbars

In Big Sur, Apple has completely changed the toolbar, not only in terms of its visual design, but also how it behaves, its sizing, allowing content to flow under it (just like iOS’ Navigation Bars), monochrome icons and sticky sections.

macOS Big Sur - Photos.app in the foregroup, Mail.app in the background

The new toolbars in some contexts are even invisible. They are part of the content as seen in Photos.app.

Here’s a quick comparison between Elytra for macOS Catalina and macOS Big Sur.

Top: Elytra running on macOS Catalina. Bottom: Elytra running on macOS Big Sur

I’ve included fullscreen screenshots on purpose, because Big Sur really enables deferring all UI real-estate to the content if you so desire. In Elytra’s case, an app for reading written content, this was a default choice.

Big Sur also enables pinned or sticky sections for the toolbar, so each vertical column of the app has its own set of actions. While v2.1.3 (first version, odd, I know!) shipped with the toolbar items as you can see, they are definitely set to change in an upcoming release to bring more powerful features to the app.

With macOS taking care of so many things for me, Mac Catalyst became the obvious choice for Elytra right from the get go.

The Sidebar

Full height column, translucent materials, collapsible sections,searchbars, automatic light and dark states; I could keep going on. The new frameworks supplied by Apple to compose such sidebars have been the best thing since their Compositional Layouts framework. And the new sidebars rely on this Compositional Layouts framework to enable a lot of these things automatically.

They are however not without their faults. They do lack some features which native AppKit apps have but I’m sure they’ll all arrive in due time as Apple Engineers continue to reduce the gap between macOS and iOS, or I switch to using SwiftUI and everything renders natively per host OS.

Articles List

This was a tricky one to get right. Up until late October, this is how the Articles List looked
Elytra's original interface with incorrect styling for the Article's list

There are a few reasons why this is completely wrong on macOS.

The list item completely ignores the new insets which native apps on Big Sur use.
The list ignores the additional padding required by such lists.
The list also ignores the inter-cell padding.

All of this is noted by Apple in the “What’s new in macOS” HIG document.

By using Apple’s supplied values, we get a list which is much more comfortable to read and glance at.

Elytra's UI with corrected styling for the Article's list

So even if you’re using Mac Catalyst to bring your iPadOS App to macOS, I urge you spend some time studying the HIG (and not just read it) so you’re familiar with what your users are going to expect from your app.

The Article Reader

This is what you’re here for. This is why I built Elytra. The article reader in Elytra renders all text using Apple’s TextKit framework, all images directly supplied to UIImageView subclasses, most videos directly supplied to the AVPlayerView, and all code rendered just like text.

Groups of consecutively appearing images are converted into horizontally scrolling galleries with page counters.

Customisation of the reader view by setting up your preferences for font-size, line-spacing, separate header and paragraph fonts.

It’s all there, it all works just as you have come to expect coming from the iOS and iPadOS apps. But it wasn’t as simple as enabling the magical “Optimise for Mac” option in Xcode.

To make sure things work correctly on both iOS and macOS, I had to redo a few bits of the rendering engine to make sure text renders sharp on modern Macs and renders exactly as one would expect it to.

Here’s how the Scale Interface to match iPad variant looked:

Elytra's UI with the Scale interface option enabled

Everything was tiny. Everything looked off. Nothing looked like it it deserved to be on macOS. When working on the macOS Catalina build, I used a small hack to scale all type by 1.3x and even that didn’t look all that great.

So to make sure everything is up to the mark and deserving of the Mac-assed Mac App title, I reworked a good chunk of the rendering engine which also ended up benefiting the iOS and iPadOS apps by improving the rendering performance.

My iPhone 12 first impressions article in Elytra on macOS Big Sur

I also took the opportunity to enable better rendering for CJK and Indic languages.

In part 1, we looked at the app from a distance, assessed it from left-to-right, went over each column and briefly discussed each section. In part 2, I hope to dig into some technical details of bringing an iPadOS App to macOS via Catalyst.

14/11/2020

Elytra is now available for macOS Big Sur

Elytra is now available on the Mac App Store.

It’s finally happened. It took 3 years and I hope it was worth the wait.

Elytra running on a Macbook in Dark Mode

Elytra for macOS brings the same native rendering performance you have come to know and love on iOS and iPad OS.

All of this has been possible because of Apple’s Mac Catalyst system which has been significantly improved on Big Sur, since its debut on macOS Catalina.

Your subscription will carry forward to the macOS App as well, no separate purchase or subscription will be necessary. (You can also take this opportunity to take advantage of the special pricing I have going on for Diwali)

I’ll be sharing a deep-dive into the design decisions for Elytra, but for now, I hope you enjoy the release.

As always, Happy Reading!

PS: A small update for iOS and iPadOS has also been released, so be sure to grab that from the App Store as well.

12/11/2020

New Code Theme

As part of the v2.0 release cycle, I’ve been working on a macOS/UIKit inspired code theme. In this post, I’m sharing what I have come up with so far inviting feedback and suggestions for changes.

The colours are platform specific, so they will be slightly different across iOS/iPadOS, macOS and the Web. Work on the web part is pending but it’ll look mostly similar to the macOS screenshots.

macOS

On macOS, the colours will respect platform specific accessibility features like enhanced contrast, and light & dark modes.

The new Elytra Code theme on macOS

All colours are taken directly from the system provided semantic colours with some alpha tweaks in places where it makes sense.

iOS

The story is similar on iOS just like macOS. System provided semantic colours are used throughout.

The new Elytra Code theme on macOS

Across the board, I quite like how this is rendering. It’s softer on the eyes too, and if you didn’t notice, the code blocks no longer use the Menlo typeface at a static 16pt. It’ll now scale dynamically to your font-preference, system sizing or custom, using the SF Monospaced typeface from Apple.

In a future update, I’ll look into embedding additional Monospaced fonts suited for viewing code (my current favourite being Fira Code).

I’ll share additional screenshots on Twitter as I go along tweaking and optimising the code.

Technical

So let’s get into the technical details of this for those of your interested.

Here is an excerpt of what the original css structure looked like.

.hljs {
	color:#333;
	background:#ffffff
}

.hljs-comment,.hljs-quote {
	color:#998;
	font-style:italic
}

.hljs-keyword,.hljs-selector-tag,.hljs-subst {
	color:#333;
	font-weight:bold
}

This is from the light theme of my CodeParser. This CSS file is imported by the Class, parsed and processed to convert those hex values into their respective UIColor counterparts and then used in Attributed Strings.

So to make this existing system use semantic system colours included making some trivial changes to my code base, starting with the CSS file which now looks like this:

.hljs {
	color:*labelColor;
	background:*systemBackgroundColor
}
.hljs-comment,.hljs-quote {
	color:*systemPinkColor#.75;
	font-style:italic
}
.hljs-keyword,.hljs-selector-tag,.hljs-subst {
	color:*labelColor;
	font-weight:bold
}

I’m now directly using the semantic colour names, prepending it with an asterisk to denote a semantic color name, and followed by a pound with the alpha component.

As you can imagine, parsing the above is pretty trivial, so is detecting if it should use the semantic name using -[UIColor performSelector] or the method from my HEX to UIColor category.

Once all of this is wired up, the information is assigned to ranges in the Attributed String the same way as it did before with no changes to that part of the code.

With this new system in place, I can use any of the semantic colours exposed by the host OS, of pure hex values or a combination of both in the same file which makes this solution very versatile and light weight.

Here’s a reference to Apple’s documentation regarding the various semantic colours and their respective RGB values in Dark and Light modes.

I’ll be publishing the iOS Beta including this change shortly to TestFlight. Do try it and send me your feedback.

10/09/2020

Elytra & Big Sur

It’s been some time since I posted an update here and since I was gathering some screenshots of my progress on the Mac Catalyst app, I thought I would share my progress here as well for everyone to check out.

Hello, Big Sur

As noted in my previous post (WWDC20 and Elytra), I mentioned I’d release two separate builds, one for Catalina and another for Big Sur. But looking at how much better the app is using new technologies released this year, the plans have changed a bit. There won’t be a Catalina build, not anytime soon anyways. However, here’s an early look at the work in progress app running on Big Sur:

The app is probably only 50% done. There a lot of tweaks and adjustments that need to be precisely made so that the app feels native to macOS Big Sur. It is still missing critical features like Importing & Exporting OPML files and managing your Subscriptions.

So I’d definitely tag this as Alpha for now. Once I determine it has all the necessary features from its iOS and Web counterparts, I’ll tag a beta pipeline and figure out a way to introduce it to testers. So if you’re interested in helping me test the macOS App, have Big Sur running on one of your computers, send me DM on Twitter or email me. Also send in any feedback or features you’d like to see in the macOS app.

Happy Reading!

28/08/2020

Elytra Blog

The simple RSS Reader. This blog publishes release notes, engineering and design details.