Patterns & Best Practices
Vertical Bar ChartsSubmitted by @ireneros, on 06-03-2014
When using bar charts in portrait mode, stack your bar chart bars vertically.
Use Vertical ScrollingSubmitted by @ireneros, on 06-04-2014
When creating interfaces that don't fit in their entirety on the screen, enable vertical scrolling instead of horizontal scrolling.
Stack Table CellsSubmitted by @ireneros, on 06-04-2014
When needing to display tables that have more than a couple of columns consider stacking cells vertically within each row.
Carousel Instead of TabsSubmitted by @ireneros, on 06-04-2014
When allowing users to switch between different displays, instead of using tabs (which require a lot of horizontal space,) consider using a carousel with next and previous buttons.
Fix Tooltips to Area of ScreenSubmitted by @ireneros, on 06-09-2014
When displaying information on touch, designate an area on screen that will update accordingly.
Use Touch ZonesSubmitted by @ireneros, on 06-09-2014
When displaying a lot of data points that are hoverable/touchable, consider using defined touch zones instead.
These patterns are generated based on the examples in our gallery! See them here and submit your own.
Looking for additional resources? See our growing list here. Have resources you'd like to suggest? Tweet at @ireneros or submit a ticket on Github.
To learn more about this project, see our about page.