Responsive UI isn't hard. Unless it's a huge table of statistical data which should be easy to consume regardless the size of the screen. Mintos.com statistics section contains quite detailed statistics table about the marketplace's performance. Therefore we created a hybrid solution of fixed-label-column and mobile-cards UI.
There's no single solution for omniscreens
The first requirement was to show all the information no matter what the size of the screen. So on large displays (screen width at least 1200px) the table is visible in full width. And from HTML and CSS point of view there's nothing especial.
Fixed label column
When the screen gets narrower the responsiveness starts to reveal. The first column of the table gets fixed on the left side. And the rest of the table content becomes horizontally scrollable (see the GIF bellow). This is a convenient way to see an overview and then discover the whole data.
Mobile cards
When the screen gets scaled down until the table is not comfortable to read in fixed column mode. We switch the table’s layout to mobile cards UI. Which then can be displayed in single column or in carousel. Like we have done.
Enough with pictures, let's see the code
The demo of responsive table can be seen in action on JS Bin or you can see it live in production. OK let's see the code.
HTML
Here we have created the table using DIVs. Yes, it doesn't follow the principles of semantic markup and the best practices of accessibility. That's something for future improvements.
But what’s done here is:
- A CSS class name is added to headings section so we can hide it based on the browser viewport's width.
- A data-label attribute with corresponding column title is added to each table cells. This attribute is used on mobile cards to label the content of each cell.
And CSS
The default (also a mobile view in this case) contains just a bare minimum of CSS. First we are hiding the .headings section on smaller screens. And secondly we display data-label attribute (related column’s heading title) in front of each cells content, position it left and aligning the content on right.
For medium and large screens the media query kicks in when browser viewport's width is at least 768px wide. After that multiple styling rules are applied:
- Horizontal scroll bar for the container of the table is enabled
- Headings are shown
- Data labels are set to empty strings and hidden
- A fixed width of 1170px is applied to row container with left padding of 160px. This space is reserved for fixed label column
- Table cells are aligned inline
- And finally we apply absolute positioning and left position to the fixed label column
| /* Some CSS reset */ | |
| * { | |
| box-sizing: border-box; | |
| } | |
| /* Base styles to make it look a bit more like table */ | |
| .headings, | |
| .row { | |
| border: 1px solid #ddd; | |
| } | |
| .row { | |
| margin-top: 8px; | |
| padding: 8px; | |
| } | |
| /* Table styles on default aka Small screen */ | |
| .headings { | |
| display: none; | |
| } | |
| .cell { | |
| text-align: right; | |
| } | |
| .cell:before { | |
| content: attr(data-label); | |
| float: left; | |
| } | |
| /* Table styles on Medium and Large screen */ | |
| @media (min-width: 768px) { | |
| .container { | |
| overflow-x: scroll; | |
| overflow-y: hidden; | |
| } | |
| .headings { | |
| display: block; | |
| } | |
| .headings:before, | |
| .headings:after, | |
| .row:before, | |
| .row:after { | |
| content: " "; | |
| display: table; | |
| } | |
| .row-container { | |
| padding-left: 160px; | |
| overflow: hidden; | |
| width: 1170px; | |
| } | |
| .cell { | |
| float: left; | |
| padding: 0 8px; | |
| text-align: left; | |
| width: 9.0909090909%; | |
| } | |
| .cell:before { | |
| display: none; | |
| } | |
| .cell.fixed { | |
| background-color: white; | |
| display: block; | |
| margin-left: -160px; | |
| position: absolute; | |
| text-align: left; | |
| } | |
| .cell.wider { | |
| width: 160px; | |
| } | |
| .row { | |
| border-top: none; | |
| margin-top: 0; | |
| padding: 4px 0; | |
| width: 1170px; | |
| } | |
| } |
Conclusion
So responsive UI is not hard at all. Even if it means to make a big data table to become responsive. Yes, the approach above has it's drawbacks and could be improved from markup semantics and accessibility point of view. But at the same time it's provides web developers with couple of approaches how to build a good user interface and experience no matter what's the screen size.