Submit a request
Submit a request

Responsive Design in the Author API

Author API is built to be responsive within its container dimensions, to smoothly adjust to various screen shapes and sizes on a range of devices. The user interface automatically responds to the initial container size as well as resize events to make use of the available screen space.

The user interface breakpoints (size boundaries that trigger a change in the information display) are designed for a large width of 1170px and above, a medium width of 800-1169px, a small width of 615-799px, and an extra small width of 614px and below. The examples below demonstrate the changes at each breakpoint.

 

Large, width >= 1170px
item-list-large.png
  • Full labels, icons and navigation.
  • Item list with separated metadata column; show updated time for Items.
  • Separated fields for browsing, content search, and Tag lookup.
Medium, width 800-1169px
item-list-medium.png
  • Reduced labels; icon fallbacks.
  • Item list with separated metadata column; hide updated time for Items.
  • Separated field for Tag hierarchy search.
  • Compated search menu for browsing, content search, and Tag lookup.
Small, width 615-799px
item-list-small.png
  • Even fewer labels; more icon fallbacks.
  • Item list with separated metadata column; hide updated time for Items.
  • Separated field for Tag hierarchy search, taking up whole row.
  • Compact search menu for browsing, content search, and Tag lookup.
Extra Small, width <= 614px
item-list-extra-small.png
  • Minimal labels; icon fallbacks.
  • Single column with inline metadata; no updated time for Items.
  • Separated field for Tag hierarchy search, taking up whole row.
  • Compact search menu for browsing, content search, and Tag lookup.
Large, width >= 1170px
item-edit-large.png
  • Full labels.
  • Full edit controls.
Medium, width 800-1169px
item-edit-medium.png
  • Reduced labels; icon fallbacks.
  • Full edit controls.
Small, width 615-799px
item-edit-small.png
  • Reduced labels; icon fallbacks.
  • Full edit controls.
Extra Small, width <= 614px
item-edit-extra-small.png
  • Reduced labels; icon fallbacks.
  • Full edit controls.

Did you arrive here by accident? If so, learn more about Learnosity by clicking here.