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
  • 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
  • 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
  • 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
  • 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
  • Full labels.
  • Full edit controls.
Medium, width 800-1169px
  • Reduced labels; icon fallbacks.
  • Full edit controls.
Small, width 615-799px
  • Reduced labels; icon fallbacks.
  • Full edit controls.
Extra Small, width <= 614px
  • Reduced labels; icon fallbacks.
  • Full edit controls.
Was this article helpful?
0 out of 0 found this helpful

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