Patterns & Best Practices
-
Vertical Bar Charts
Submitted by @ireneros, on 06-03-2014When using bar charts in portrait mode, stack your bar chart bars vertically.
-
Use Vertical Scrolling
Submitted by @ireneros, on 06-04-2014When creating interfaces that don't fit in their entirety on the screen, enable vertical scrolling instead of horizontal scrolling.
-
Stack Table Cells
Submitted by @ireneros, on 06-04-2014When needing to display tables that have more than a couple of columns consider stacking cells vertically within each row.
-
Carousel Instead of Tabs
Submitted by @ireneros, on 06-04-2014When 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 Screen
Submitted by @ireneros, on 06-09-2014When displaying information on touch, designate an area on screen that will update accordingly.
-
Use Touch Zones
Submitted by @ireneros, on 06-09-2014When displaying a lot of data points that are hoverable/touchable, consider using defined touch zones instead.
Example Gallery
These patterns are generated based on the examples in our gallery! See them here and submit your own.
Additional Resources
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.
About
To learn more about this project, see our about page.