-
-
Notifications
You must be signed in to change notification settings - Fork 3.1k
Description
I've noticed that there are a couple of issues (one still open) regarding the responsiveness of the CMS. I've reviewed the existing collections page and have some suggestions on fixing the layout to improve the experience of using the CMS on a mobile.
Page switcher
The default screen you land on in the CMS would be the Contents page and listing, on desktop you have a main navigation in the header that allows you to switch between Contents, Media library and Workflow. This pattern won't work on a mobile so I suggest the introduction of a simple page switcher that only shows the name of the current page/view you are on and once you click this you get a list of options to change page (see below).
If this were to be implemented it would cause a potential issue with the media library as this loads as a modal/popup on desktop. I think it would make sense to implement a route for the media library for mobile view.
Account menu
There are a few links that can be consolidated into a single menu that would be displayed when the avatar is clicked, this allows for a clean header without losing any functionality (see below).
Sidebar and collection view
The main issue on mobile is the sidebar and collection listing, this is what renders the CMS unusable on mobile devices. A breakdown of change suggestions are below:
- Remove sidebar completely
- Introduce a new change collections link
- I've removed the search but not entirely sure how I feel about limiting functionality on mobile but to make it usable for the time being it could be removed with a view to be re implemented in the future.
Quick add
I suggest introducing a floating action button to replace the quick add button in the header, this is a recognised pattern and again it would free up space in the header (see below).
You can see a working prototype of my suggestions here: https://bit.ly/2Z3MDTL
I appreciate this is quite a lot of changes but it would only impact the CMS on screens less than 768px. I'd be really keen to get your thoughts on these suggestions, I think they could be broken down into smaller issues and I would be more than happy to actually develop some of these solutions if you were to be happy with them.
If anything doesn't quite make sense or if you want to hear more of my reasoning for certain decisions then please let me know!