Index Card Design v2

The good news today is it looks just like yesterday. Behind the scenes we use now a plain HTML table, but bigger than what meets the eye. Our structure is a 5 x 5 table. The blog text editor has no table support, so take this ASCII art:

A1 | B1  C1  D1 | E1
---+------------+---

A2 | B2  C2  D2 | E2
A3 | B3  C3  D3 | E3
A4 | B4  C4  D4 | E4
A4 | B4  C4  D4 | E4
A4 | B4  C4  D4 | E4
A4 | B4  C4  D4 | E4
---+------------+---
A5 | B5  C5  D5 | E5

The cells B3,C2,D3 and C2,C2,C4 are the red cross, just 2px thick. The outer cells are the gray background. This allows to let elements appear on hover at just the right place (above a column, left of a row, etc). The title of the card is in D2, the left column in B4 and the main content in D4. To make the columns lineup nicely, the row nr. 4 is repeated for each content row.

Here is a screen shot of today:

This experiment shows, even a lot of content, like a full recipe (lamb with tomato) can fit in.

Initial Screen Design for Desktop Size Monitors

Working on screen design for a desktop size monitor. Should work in a browser. Expect at least 800 px wide. Hey, that would even work on an iPad or similar tablet. Instead of labeling anything, the text now speaks for itself. We have just two columns, in semantic web speak the relations and the objects. But who cares. Next is dealing with the extreme cases:

• Very long titles (view, edit)
• Very long relation names
• Showing inverse relations
• Starring and un-starring of relations
• Very long object names
• Very many relations
• Very many objects
• Special way to view, edit the type or types of an item?
• Showing the direction of a relation