Layout: Jagged Edge

Today’s update brought minor visual improvements, but one big change.

Over last couple of months we receive a number of questions alike “form’s buttons disappeared, what is happened?” Let’s see how TeamDesk laid out elements on the screen.

Main part of the application’s UI was laid out as a table with one row and two cells: one to hold a sidebar and another to hold the content such as dashboards, views and forms.

The problem is that table cell that holds the content accommodates its width to widest element contained; all contained elements accommodate their width to the width of the cell.

As buttons are centered relatively to content and content is much wider than the viewport, buttons are rendered off the screen. Of course browser displays horizontal scrollbar, but it does not draw enough user attention.

50,1

Now, we got rid of containing table and modified the layout to use viewport’s width if possible.

50,2

Form’s title exceeding viewport width is now cropped. Buttons are centered relative to viewport. Form content and narrow tables are fit to viewport width. Wide tables… oh, let them overflow.

imageDue to this change there is subtle difference in sidebar’s layout. Long view names are now allowed to wrap to the next line. To help user distinguish between multi-line name and next view small circle is displayed before the name. Wherever view has RSS/iCalendar feed, the icon replaces the circle.

Tweet about this on TwitterShare on Facebook0Share on Google+0