Child pages
  • Responsive Design Audit
Skip to end of metadata
Go to start of metadata

Usage Stats & Goals

Running a report showing the screen resolution statistics for all desktop and tablet traffic shows that there are very few users using desktops or tablets with less than 1000px widths. We should likely focus our efforts to improve the experience on devices greater than 1000px in width as a first step in improving the responsive design of EDSC. This should cover the common smaller laptops and tablets that seem to suffer from the current layout. Rather than setting arbitrary breakpoints for large desktop/small desktop/tablet etc. we should be letting the elements in question define the breakpoints and address each problem area individually. This will ensure the highest overall usability at any given screen size.

Key Problem Areas

The following areas would benefit most from responsive design improvements. These are the areas that seem to be most negatively affecting usability at smaller desktop and tablet widths. Screenshots are shown at the minimum 1000px width.

Viewport Tag

We’re currently using the following viewport meta tag:

<meta name="viewport" content="width=1280,user-scalable=no">

This tag will trick the users browser to displaying at a width of 1280px and then scale the UI accordingly.

In order to create predictable responsive behavior, we should use the more standard option, setting the content attribute to “width=device-width, initial-scale=1”

  1. Sidebar width restricting map and granule sections



    Adjusting the width of the sidebar would allow an increase in size in both the map and granule sections. This would also allow for greater room to adjust the sizing of both the Log in/Account actions in the upper right, as well as the map actions in the lower right. The sidebar likely can’t be condensed all that much due to the content contained, but any amount would help significantly in creating extra room in the other sections.

  2. Logged out account actions section overlapping map toolbar



    At the minimum screen resolution these two sections begin to overlap. This could be handled in multiple ways.

    • Find an applicable icon to represent the Show Tour button, similar to the Feedback button.

    • Remove the “Earthdata” from the Earthdata Login at smaller screen sizes. Seems like Earthdata is somewhat implied.

    • Bring the Feedback and Show Tour buttons below the Log in button

  3. Wide layout for map toolbar



    The width of the map toolbar causes it to take up a significant horizontal width.

    • Move the non-search actions below the search bar

    • Shift the items in the toolbar to be listed vertically


  4. Map actions with layers options expanded



    When the layers section is expanded, the entire actions toolbar is shifted to the left to accommodate the list. This leaves the granule count tab covered up
    Open the panel above the toolbar so the preceding items are not shifted

    • Open the panel above the toolbar so the preceding items are not shifted

    • Shift the items in the toolbar to be listed vertically

Data Access

  1. Data Access content expands past container



    Wide main content section expands past the width of the screen at 1000px. This hides the step indicators from the user.
    • Add margin to the sides of the container to allow for some spacing around the content as the screen dips below the content width.

    • Possibly change the location of the Step Indicator to the top of a section to create additional space

Order Status

  1. Order Status container expands past container



    Wide main content section expands past the width of the screen at 1000px. 

    • Add margin to the sides of the container to allow for some spacing around the content as the screen dips below the content width.

Download Status & History

  1. Download Status & History container expands past container



    Wide main content section expands past the width of the screen at 1000px.

    • Add margin to the sides of the container to allow for some spacing around the content as the screen dips below the content width.

Proposed Stories

  1. Reduce size of sidebar on Search screen

  2. Adjust sizing/layout of account actions on Search screen

  3. Adjust sizing/layout of map toolbar on Search screen

  4. Adjust sizing/layout of layer options on Search screen

  5. Adjust behavior of main-content section

  • No labels