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”
Search
- 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.
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
- Wide layout for map toolbar
The width of the map toolbar causes it to take up a significant horizontal width.
- 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
Data Access
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
Order Status container expands past container
Wide main content section expands past the width of the screen at 1000px.
Download Status & History
Download Status & History container expands past container
Wide main content section expands past the width of the screen at 1000px.
Proposed Stories
Reduce size of sidebar on Search screen
Adjust sizing/layout of account actions on Search screen
Adjust sizing/layout of map toolbar on Search screen
Adjust sizing/layout of layer options on Search screen
Adjust behavior of main-content section