Responsive Dropbox
One of the larger projects I’ve been working on for the past several months has been tackling the responsive design for Dropbox web as part of the overall visual refresh that the design systems team is working on.Dropbox web hasn’t traditionally been responsive and has relied on a separate mobile site which has not seen major updates for several years. While the recently-launched refresh of the main Dropbox file browsing experience didn’t take responsiveness into account for the initial release, we knew it was something we wanted to develop in order to make the Dropbox web experience usable and accessible across devices (and different window sizes).
Where things landed
One of the main challenges was finding a graceful way of adjusting the current “three column” layout (i.e. side navigation, content, and contextual actions) to be usable on smaller viewports, which ended up requiring shifting to a two column (navigation and content) layout for tablet sizing with contextual actions moved to an overflow menu, and a single column (content only) for phones.Embedding contextual actions in an overflow menu located in each table cell also served as a simple solution for working around the reliance on exposing actions such as sharing or selection on hover on the current Dropbox web experience, which isn’t a viable interaction with touch.
But where could this potentially go?
The longer term vision for responsive Dropbox web revolves around rethinking layout across all viewport sizes in order to provide a more consistent and better optimized experience for a larger number of devices. While still early and likely to change as we get further feedback from users, we’ve received initial feedback that users would like the ability to optimize for seeing more of their content and would like a way to collapse Side Navigation or Contextual Actions, so providing a simple way to show and hide these columns seemed worth exploring across devices and viewport sizes.On larger viewports, layout would still support displaying Side Navigation, Content, and Contextual Actions simultaneously, but would allow users to toggle between condensed views. This scales down to tablet and phone sizing fairly gracefully and generally simplifies shiftingbetween viewport sizes while allowing for increased consistency both visually and in terms of interactions.
