New display options to make your doc stand out

A few months ago, we launched a visual refresh, cleaning up our UI and giving you more space to make. Today we’re releasing two additional features to make your docs leave a good first impression— a centered alignment mode, and a section header that shows your section icon.

Balanced margins for sections

When you look at apps and websites that put reading and writing first, like Medium, the New York Times, or iA writer, you notice most have equal margins on the left and right. In Coda, previously, everything was aligned to the left of the screen. This works well for large tables, but in a doc with a lot of text, it feels a bit lopsided— a tiny left margin and a big right margin.

We’ve now added an option to make a section’s content centered, with even margins. We think this makes Coda feel nicer for all your text-focused doc needs— things like project briefs, meeting notes, or drafts of articles and blog posts.

We know that people use Coda for all kind of things, so we decided to make this an option for each section individually. In a doc with many sections, you might want an Introduction section centered, and a section with a big table to stay wide. We’re starting all your existing sections in what’s now the “Wide” mode, so they’ll look unchanged.

Section headers

Now, when you create a new section, we show the section name and icon at the top. This makes it easy to name your section and add an icon right from the start— no need to re-write the section name into the doc, make it a heading, and then try to keep that in sync with the name that you see in the sidebar.

You’ll see the header for all the new sections you create, and you can also turn it on for existing sections by hovering at the very top of the section. You can always hide the icon or the entire header if your section is better off without.

You’ll also see section headers on mobile, so you can now rename sections and change icons from your phone for the first time.

Getting started

You can configure these features by clicking the new “Options” button at the top of any Coda section, like this—

As always, give it a try and let us know what you think!

23 Likes

Yay for the small things that mean a lot!

6 Likes

@Evan_Brooks1 beautiful, that helps soo much! Thanks :pray:

I also like how the icon is placed outside on the left :ok_hand:t4:

7 Likes

:star_struck: Thanks !

More options for text editing would also be great : bigger font sizes to create more visual contrastes as a priority for me.

You’re the best guys !

4 Likes

This is awesome!, here are my first thoughts:

  • It would be nicer to separate page scroll for tables/boards (improve experience) because they tend to get a lot of horizontal space, it might be nice to have the option to decide whether make those elements full screen or centered.
2 Likes

About the icons, this means a lot, but it would be nice too if we could upload our own icons for sections/pages titles

1 Like

Really appreciate Coda continuing to innovate and make the small tweaks that mean a lot.

One thing I noticed with the new section headers: I have an Automation that emails me a summary page from my doc once a day. Previously, I had simply typed in “Summary” in the Header 1 style, and this was included in the email. I switched over to the new section header and now the header line doesn’t appear in the email. Could this be altered so the header shows up in emails? Thanks!

1 Like

Is document edit related with google docs? could it use something similar to the nice “suggestion” edition mode of google docs?

2 Likes

Awesome, this is some of the stuff that I was wanting in the UI, I can’t wait for a 2 column option in a near future.

3 Likes

This is really really sweet :grin: !
Thank you Codans :+1: :grin: !

2 Likes

This is GREAT. Good thinking. Already using.

Now RTL (Right-to-Left) !!! First with an RTL text column, then with RTL capabilities in sections.

You can reverse the order if it is the easiest path :slightly_smiling_face:

2 Likes

Hi Brian, thanks for the callout. I’ve added to the list to update, so stay tuned.

Alden

1 Like

Thanks Loic_Bronnec! Would definitely want to give you the tools to create more type contrast, if there’s more you can share about what you’d have in mind, would love to hear more about what you have in mind here (or in https://community.coda.io/c/suggestionbox) and will share with the design team!

Thanks Jonathan_Solorzano! We’re certainly thinking about additional alignment and layout options, will forward the feedback to the team.

Hey Brian, thanks again for the note on this. Just a heads up that this issue has been resolved. Cheers!

Alden

Hi Alden — Thanks for being in touch!

I did notice this morning that the header shows up now in the email. However, the icon image (the image to the left of the header on desktop, to the right of the header on mobile) came through as a broken image — there’s a space for it, but the image isn’t resolving. I haven’t done exhaustive tests but I tried on a couple different browsers and operating systems and the image didn’t show up in any of them.

Still something to be worked out or is it just on my end? Thanks!

@alden,

This now appears to be fixed. Working as expected. Thanks!

Yup, this was a bug that slipped through, but it should be fixed now. Sorry about that!

Maybe it’s just me, but the header image seems to be broken again in emails sent from Coda.

@Brian_Seidman - can you drop that as a bug in https://community.coda.io/c/suggestionbox/bugs for our QA team to track. Thanks!