Launched: Design updates for your beautiful docs

:point_up_2: This !

… As I can only agree here :pensive: … Displaying stuff/Arranging the canvas (and others) to my wish/need on my 15’’ MacBook Pro is a bit difficult :pensive:
At least, it requires me too much thinking, trials and errors, to try and find the right balance between visual design and functionality…

when smart phones first came out i was running a software firm that extended our ui to support mobile and tablets.

but our engineers all had HUGE big monitors on their desk, so we’re used to a particular ui canvas space.

so, we took two measures to improve our ui “diversity”…

  • we used our own software for all our internal ops wherever possible (eating our own dogfood)
  • every friday NOBODY was allowed to use their desk systems for anything but code editing, so everyone had to work on mobiles and tablets.

how they complained and whined about how hard it was to do this and that due to the clunky ui !

and how QUICKLY the ui improved to fix those hundreds of little annoyances !

so CODANS, please diversify your own setup so you feel the same pain the rest of us feel dur to your ui shortcomings.

max

5 Likes

@Xyzor_Max
That’s your personal view. “Huge” is relative. For me, on my 27" Retina iMac, 110% zoom is optimal for Coda (and definitely not huge). On my 15" MacBook Pro Retina, however, Coda pages are displayed optimally at 100% zoom for me.
Font size is globally set to “Large”.

1 Like

@Michael_Singer ,

i concede your point.

for me the number of rows i can see on the screen at one time is the essential thing.

so for me coda has way to much wasted space between rows. and it’s even worse on the mobile version where, ironically, there is way less space to waste.

the team at Fibery.io has a well defined metric for this called Informatuon Density. so they adjust the appearance of tables, boards, cards, galleries, timelines and forms to maxamise this without causing clutter. Notion scores highly for this metric for its tables but not its other views. Coda scores low for all its views on desktop, and even lower for its mobile UI.

so it may be a personal preference to some extent for documents, but for useful ‘applications’ like dashboards, data entry/editing and reporting, the Information Density is a fairly good objective measurement that is not based on personal asthetic preference.

like everything in life… its a balance

max

4 Likes

Not sure what you mean by “wasted space between rows”. So, this is about tables in table view, isn’t it? Well, the height of a row depends on the cell with the largest content. A certain padding for the cells serves the readability and can hardly be restricted. So I can’t see any waste of space here.

i do not agree

you need to consider information density as a broad concept
it does not only apply to tables, but to all display paradigms
including fighter jet cockpits, nuclear powerstation controls, air traffic controls etc

it is possible to increase information density while still having maximal clarity and good asthetics

i suspect we are not discussing the same topic,
so i will leave it there and agree to disagree

respect
max

4 Likes

I totally agree with @Xyzor_Max. Working on other devices than web is not good at all. And even working with a web browser on a large screen monitor is not optimal because of the limited amount of space for everything.

Compared to Notion for example, it’s very hard to make good looking and vell functioning dashboards. Making more than two rows for most content is pretty much out of the question. At least not with the standard width. It’s miles easier to get the same functionality as well as prettier pages with Notion.

2 Likes

That’s how different views can be. For me, layout, font size and handling of space was exactly why I switched from Notion to Coda.

I can understand that. But for some purposes it’s hard to build the pages with the layout you envision. It would be helpful with a compact version, or perhaps just the possibility of using a small font size with less margins of spacings on certain things, instead of just normal and large.

Hi everyone, commenting to let you know most of these features have launched, with the left-hand page navigation menu update in the pipeline. Let us know what you think!

6 Likes

This is great. The font is the same (or at least much closer to) the old one from a few years back. Much more ‘personality’. I love it.

2 Likes

I like these improvements a lot.
Two exceptions, as I’ve mentioned elsewhere:

  1. I find the typography of the page title a bit too bold, I would prefer font weight 700 (instead of the current 800).
  2. The possibility to create a line break within a paragraph is missing.

Anyway, I can say that working with Docs and Pages is much more enjoyable now (at least for me). When creating information, the structure now happens as you write, without having to do that manually as before.

6 Likes

I really liked the changes. The typography turned out great. The highlight is the thinner and clearer table headers

6 Likes

Good work with the recent changes! It seems a little faster as well if I’m not mistaking?

I hope you don’t change the spacing between the menu items, I think it’s perfect as it is. However, it would be nice if a “Collaps all” button would be added and if branches of subpages would open not only by clicking on the chevron icon, but also by clicking on the parent page name.

Docs should be much more responsive.

I believe that many complaints from users regarding design result from the fact that Coda has so far paid far too little attention to responsiveness. A web application needs to adapt fluidly to the device being used and its screen dimensions, just like a website, and Coda currently does far too little of that.

5 Likes

In general things are definitely improving, but one continued pain point for me is any time I need to break out of the context of headings and paragraphs. I’m often setting up “scorecards” for lack of a better word, i.e. heading (text, bolded) + line break + metric (H1), at the top of pages and the default and un-customizable padding around H1-H3 makes it really awkward and ugly.

To offer a solution, all I need for my specific use case is a big font size that isn’t a heading – add no padding and omit from the page’s outline.

Hi everyone, thank you for all for the feedback about the new typography. We are excited to make an update that will allow you to choose between line break sizes:

On the canvas:

  • Enter → hard line break (unchanged)
  • Shift + Enter → soft line break (new behavior)

In a cell:

  • Enter → submit (unchanged)
  • Shift + Enter → hard line break (unchanged)
  • Option (Mac) or Alt (PC) + Enter → soft line break (new behavior)

Now, you can use these to create the desired spacing in your beautiful docs. Thank you again for the feedback and for being a Maker!

9 Likes

Thank you so much for the reimplementation of line breaks!

1 Like

Q: Is there a way to easily remove soft and hard line breaks?