Launched: Design updates for your beautiful docs

News from Coda
1

We were excited to give you the sneak preview and are returning with great news – most of these features have launched, including the new typography!

Stay tuned for updates on the left-hand page navigation menu, and let us know what you think of the changes.

We’re excited to give you the sneak preview on some upcoming design updates in Coda to respond to your feedback and make your docs more beautiful.

:bulb: Here’s what to expect:

Lights, camera, collaboration.

Docs will get a collaborative boost with more visually effective reaction buttons to increase interactivity. We give that a :+1:.

Reaction buttons.gif

There’s a new button on the block.

We’re making buttons more rectangular across Coda to bring balance to your docs. Rectangular buttons will allow you to uniformly stack or or align your buttons side-by-side.

New buttons.gif

Dressed to im…press.

We’re dressing up buttons and links to make them even more press-able. You’ll notice a shadow effect on buttons and link cards in your docs and an updated animation when they are pressed. This will include more prominent icons to display subpages at the top of a page, so your teammates won’t be able to resist the opportunity to click into your writeup’s subpage.

Pressable buttons.gif

Typography for teams.

We’re making changes to our typography, so all docs will look the same no matter what platform your team is using to access Coda. This will include some of your requests, such as font changes and built-in spacing to paragraphs and headings to make it easier to create well-structured team hubs, write-ups, or whatever your team needs to build your business.

It’s time for spring cleaning.

We are refreshing the left-hand page navigation menu to keep your docs as clean as your closet (or as clean as you wish your closet was). We’re adding a new background to the page list and adjusting the spacing between pages to give your docs a more lightweight feel. This will help you focus on what’s most important – your page content.

At Coda, we want to keep up with imaginations as big as yours. These updates are our next step in making your design wishes a reality. Keep an eye out for these enhancements coming your way in the next few months.

37 Likes
2

Smart. Thank you to the Codans for this!

4 Likes
3

Amazing! Thank you :slight_smile:

[Buttons] are back

2 Likes
4

Wow! Loooking forward to seeing these changes!

1 Like
5

Did I read custom fonts?

2 Likes
6

Hi @Lars_Hofstetter - Custom fonts aren’t part of this particular release. We’re updating the core Coda typography so that docs look the same regardless of browser or operating system. But, we’ve heard the custom fonts feedback several times and continue to explore!

5 Likes
7

Cant wait for all these design updates!

@Jasmine_Jones1 and @Andrew_Stinger - Since design updates are in discussion, might you throw this one towards the team??

8

Since the Left Page navigation page is mentioned, I wanted to see what people think of the ‘hide page’ feature?

Is it preferable to have the unhide page buttons nested in a submenu? Or would having the toggle directly at the bottom be a better experience?

It’s the only option in the submenu it’s currently in so I’m curious if I’m the only one who finds it (mildly) troublesome to use.

With my doc, to keep it tidy, I have just a select number of pages available that other people to view, and then hide the pages where I keep my underlying data tables and notes. Hence I’m a pretty big power user of the button.

1 Like
9

Great news! Specially the shadows & animations in the buttons to make them more intuitive and clickable. It’ll help a lot with user adoption of non-tech-savvy users!

Let’s hope this is a step towards custom fonts in the future. It’s not necessary for internal docs, but published docs will profit greatly from this.

10

I doubt that these announced changes will bring any improvements… In my opinion, the spacing between page titles is perfectly fine as it is, and a background color (or gray shading) for the navigation panel is completely unnecessary unless you really want to emulate the ugliness of Evernote’s or Nimbus Note’s left sidebar. I can only hope that such “improvement” will be optional to turn off - unless, of course, it’s solved as discreetly as in Notion.
The small font size and tight arrangement of page titles in Notion’s navigation panel were among the reasons I switched to Coda.

For me a really useful feature would be a collapse-all feature that would allow collapsing all currently open page branches with one click.

5 Likes
11

This is an extremely welcome improvement!

1 Like
12

As you make those changes, can we please align those designs too? (inpage formulas, inpage buttons, inpage select controls)

image

13

When showing subpages on your page, we now have a new button. On a PC that looks nice, in particular small and medium size. On Android, the only real option is medium, because small looks very cluttered and large is …wel, really large.
So medium seems to be the way to go for many docs, but, these new buttons take up so much space on our relatively small android screens, that you see a lot less links to subpages than previously. Perhaps you can adjust these button type links to takeup a little bit less vertical space?

4 Likes
14

This is essential. I’m glad it’s coming.

2 Likes
15

Glad for the new updates to buttons! Please also consider toggling off the autoresize of buttons:

On the first button version in coda it was possible to add blank spaces in the button label or even dynamically change their label via formula.

I use widely buttons and the auto shrink has messed up my previously well aligned and uniform button console

image
image1920×1439 101 KB

When the label text changes now also the button size is changing and blank spaces left in the formula aren’t working anymore.

image
image1549×1338 88.8 KB

3 Likes
16

I also vote for more visual flexibility and grid-alignment canvas formatting.

For now, @GiacomoPasini you can try to use different spaces like fixed-wight space, thin-space, etc. which has helped us change the size of the buttons. Absolutely not ideal and still the document can’t look properly structured and aligned, but is a short-term solution.

17

Are all Codan’s using 5k screens because for most non-MAC users Coda keeps taking a LOT of space. With these updates it seems that everything gets even spacier. Now my use of coda is at 75% Chrome zoom and even less buttons fit on the canvas fixed width and even less columns (with buttons) fit on a canvas.

2 Likes
18

Dear @Stefan_Stoyanov,

I am not a Mac user (Linux) and a bit surprised to understand that how the visualisation differ even between operation systems.

Thanks sharing this information, as it is an eye opener for me

19

I am not an expert in screens and UI, but I am a user of Windows, Mac and occasionally Linux. The first 2 I use on daily basis and it seems like it has to do with the hardware, but also how fonts are rendered, as well as the pixel density and resolution. Mac, of course, is nicer and on a FHD IPS 15.6" HP ProBook I can see as much as on 11" Macbook. I also use 27" iMac and 34" FHD IPS LG pro screen. On the 34" I have Coda on 75% because otherwise it’s scaring me; when I switch between other tabs it feels like it’s going to blowup the screen :smiley: And on the canvas… I feel like I work on my iPhone mini - that’s the visual space on 100% zoom. I tried 100% zoom again after this announcement and on the 34" screen it felt like I am back in time on Windows 95 on SVGA 800 × 600 screen :man_facepalming:

1 Like
20

i agree

the coda layout needs SERIOUS refactoring.

at 100% the text is HUGE and there very little room for information content.

so users switch to 75% to get smaller text

but

then the usable width is reduced. the amount of blank real estate on left and right is HUGE.

the modal dialogs, embedded canvas formulas, charts and multi-column canvas layouts are still too narrow.

i get over this by creating one-row tables and extending the column widths. (switching off column headers and grid lines). but this TRICKERY is awkward and dont scale to fit different screen dimensions.

i think we are moving in the right directionn with this update. but only by degrees

max

5 Likes