Responsive Design - TeraLogics/TotalBriecall GitHub Wiki

Our Approach

We use the Bootstrap grid layout to design responsive interfaces for desktop and mobile clients. The Bootstrap grid system uses CSS classes to break the page into columns, and will resize and shift the columns depending on the device and screen size. We align content to the grid by placing it inside HTML containers (div, span, etc.) which can then be drawn specifically for the end user's device. In our application, three recall cards are displayed horizontally on a desktop, two across on a tablet, and only one per row on a mobile device. We have created a single display that dynamically responds to the user's screen so that they can quickly and easily access the displayed data on the device of their choice.

Target Devices

  • Desktop/Laptop Computer
  • 1920 x 1080 - 22" display
  • 1920 x 1080 - 16" display
  • 1600 x 900 - 14" display
  • Tablet
  • 2048 x 1536 - 9.7" display
  • Phone
  • 1920 x 1080 - 5.5" display
  • 1920 x 1080 - 5" display

Screenshots of Responsive Design

We targeted 3 types of users, desktop/laptop, tablet and mobile phone. Our goal was to make the application adapt to each screen size and accept both mouse and touch inputs.

Multiple screen sizes