Launched: Redesigned doc header & tool bar to make more space for your doc

A few weeks ago we asked for feedback on a new doc header and toolbar for Coda. Thanks to your input, we’re excited to begin rolling out this new experience for all people who use Coda today!

After spending a lot of the past 18 months improving the visual design of Coda—everything from redesigning card views, to enabling cover images, to tweaks to make it easier to use tables, and custom chart colors—we realized we had the opportunity to create more space for your doc content and save your mouse a lot of miles traveled while editing your docs.

The new in-line text formatting toolbar frees-up the valuable top of the page real estate to allow for full edge-to-edge cover photos, and more space for more of your doc content without scrolling.

The new toolbar only shows-up when you select text to format, and saves your mouse the journey back-and-forth from the top of the page. (Of course, you can always use /keyboard shortcuts to format text as well). If you want to open the formatting toolbar without selecting text, just press ⌘ on a Mac, or Ctrl on a PC.

An added bonus: In some instances, like open row modals, the old formatting menu at the top of the page wasn’t accessible to apply formatting. By bringing text formatting in-line, you can apply text formatting just about anywhere!

In-line formatting

We’ve also made it easier to format larger sections of text. You can still highlight entire paragraphs and apply editing, but now you can also click the 3-dot ‘kebab’ menu to the left of any paragraph to open the paragraph styling options. This should save you the time it takes to highlight (and scroll) to select large portions of text if you’d like to change them to lists, pull quotes, etc.

One thing we heard from your feedback was that it was difficult to find the Undo and Redo options. You can still find these options in the menu that appears when you hover over your doc title in the upper left of the page (the same place where you can access version history, printing options, etc.). Undo and redo can also still be accessed via keyboard shortcuts:

  • On a PC: Ctrl + Z for undo; Ctrl + Shift + Z for redo
  • On a Mac: ⌘ + Z for undo; ⌘ + ⇧+ Z for redo

Looking for a summary of how to access the various text options in Coda? Check out this resource in our help center.

Thank you again for your awesome Beta feedback, and we look forward to saving your mouse some journeys, and giving up some product real estate to make space for more of what matters—your doc!

28 Likes

The buried lede: Coda 2021 Goals!

That was nice to see :wink:

:pray: Thank you for continuing to make Coda more powerful and beautiful :muscle:t3::rose:

4 Likes

Nice update! And I hope we will see some improvements in the embedded documents layout too :wink:

I found a little maybe improment that could be applied to the formatting menu. On this screenshot it is covered by the menu on the left.

2 Likes

Hi Stefan, I believe we fixed that issue last week. If you reload your document, do you still see that happening?

1 Like

Thanks, its a great feature!

3 Likes

This is a great, but I think there’s a slightly annoying unintended consequence (bug?): The floating tool bar disappears immediately after I select something from one of its menus, e.g. if I select a red font colour from the “Colour and Highlights” menu. So if I also originally wanted to add, say, a blue highlight to the same text, I need to hit command again to invoke the bar, and go back again to the Colour and Highlights menu… more mouse mileage and more clicking !

3 Likes

Still the ame, Fortes. I created the doc after the update as well.

1 Like

How do I go back to having a regular toolbar? Having it pop up is really annoying.

Love having the toolbar hidden for the times I’m sharing my screen with clients- looks far more professional- and the contextual tools are very well designed and executed. It’s quality UI for sure.

I’m not sure that it’s worth the frustration on the UX side, however, and I want to share why so this doesn’t sound like the typical “change is bad” comment about a feature change.

When I’m frequently making formatting changes to a document, it’s convenient when the controls are in a predictable location and only take a click or two to activate the function I need. An extra step alone is not concerning if I only needed to make changes here and there, but frequently? Yeah, it’s a bit annoying. But add to that the extra moment it takes to find the function I want because it’s moving to various places around the screen? Surprisingly wildly frustrating. Fitts’s Law needs an addendum for buttons that move.

I do like the new controls, don’t get me wrong, but I’d really like the ability to temporarily re-affix the full toolbar for frequent edits. I realize that in the moment, users may feel that the cleaner look may not be enough of a gain to take this extra step before a presentation. Users are lazy, and few would actually take the extra time to do this every time they share their screen, rendering any sort of toggle a largely unused feature- but for the users that care more about the functionality than the aesthetics, even an option buried in the page settings would be enough.

To add to the frustration- for the last few days, I thought my browser had just started displaying the page incorrectly without the toolbar. I opened Coda in a different browser, toolbar was still gone. Scoured the settings multiple times looking for how to turn it back on, because I assumed I had accidentally turned it off with some custom keystroke- because all of this seemed more feasible than removing a frequently used page element with no notice (or maybe one that was easily missed). Searched for it a few times with no luck, until I found the article by Evan Brooks on the design process involved- which wouldn’t load correctly in Firefox, so I had to open up the backup browser again- and finally landed here. I love that you’re making improvements, but I’m sure a lot of other users are somewhere between mystified and frustrated, and haven’t searched for it in the right way to find out what happened.

PS- double clicking on a word and then dragging to select several whole words seems to be in every other text editor I use, and I attempt it embarrassingly frequently because I forget that it’s not a feature here. I wouldn’t mind if that got added to the backlog either.

1 Like

Adding some feedback for consideration.

I’m not a fan of inline toolbars. Why? I rarely use them to change selected text, preferring to use shortcuts. Instead I use a toolbar to check on text “state”, answering the question of: What styles are currently applied to where I’m typing? When a toolbar is hidden inline I typically have to take additional clicks (or worse clicks and drags) to get at that information. I prefer the predicability of a static toolbar fixed to the top of my scroll window when I can direct a quick glance.

My specific frustrations with this change is seeing what heading style is currently applied. It can be confusing when adding a section to an existing doc to figure out what heading I should be using. Often I can only see 1 heading and I’m unsure what heading it is: Is that an h2 or a bolded h3? I used to be able to navigate the cursor to the particular heading and check, but now I have to highlight a section of text from the heading and find the header icon when it shows up.

Granted this isn’t a large frustration, but I am running into it a lot. Perhaps there’s some design solution outside of the “toolbar realm” that can provide me with specific heading information.

Long story short, this very well could be a quirk of how I use editors and toolbars, but figured I’d comment and find out.