Navigation is currently not optimal using the OpenLucius distribution sites using a regular mobile phone (i.e. Iphone 7 or Samsung S7)
It is expected that 80% of all websites are accessed through mobile phones in 2018. Currently already a majority is mobile access. My persoal experience with many projects is that expecially teams communicate by mobile, not using their laptop. The speed of collaboration requires mobile access and mobile UX to be a priority.
Here are some thoughts:
- Page loading is relatively slow because all background images are also downloaded.
- The top navigation menu icons stay in place in the mobile view. This should better be replaced by/included in a/the mobile menu button (hamburger icon) menu, since the icons are too small for a finger to push. The search icon gets crammed into other icons.
- Alternatively, decrease the amount of icons in the top menu.. See for example the Facebook mobile app, they have one menu botton plus three other icons horizontally, which is the max for easy touching. Openlucius has in total eight icons horizontally.
- At some pages the top menu icons push themselves into an extra row (depending on screen size).
- For easy content creation, mobile themes often use a round 'plus' button at the bottom right corner of the screen in order to add new content. Recommended!
- Remove everywhere all unnecessary padding and margins from the mobile css. Easier to use, cleaner and more space efficient.
- Make the frontpage tabs buttons instead of hardly readable small font links.
- The calendar page is not responsive and the full calendar view is not useful.
- Group navigation menu is too compact for touchscreens, use collapsable mobile menu button.
- Remove button texts everywere to save space..such as at the tasklist page, the action links still show 'Add task list', 'Order task list', 'Add task'. Make the action links menu responsive too, either remove text and leave larger icons or create mobile action menu.
- Most views are not responsive, such as the task list. The table items are partly visible, calendar popup invisible because of low z-index or correct the overflow.
- Help&Feedback popup is not responsive, partly visible.
- Move 'edit profile' link as menu item under the user icon.
- There is no top menu link to the user dashboard?
- Group Task board is not usable for touchscreen. Cannot drag tasks. Maybe use Trello app as an example, they dont use collapsing colums but do drag and drop with automatic horizontal scrolling.
- All node create forms (such as new task) : Make the 'vertical tabs' section a responsive menu button.
- All popups/modals: remove padding and margins.
(I used my own phone Galaxy Note 4 and the Mobile browser emulator Chrome app to test it)
Maybe its a good idea to create native apps using DrupalGap with http://drupalgap.org/
Thank you for this great distribution, respect for the work done!
Comments
Comment #2
joris_luciusHi Yuri, please check out OpenLucius 2.0 (Drupal 9): it's 100% responsive and complies with a lot as you described above, built on Bootstrap 4
7.x is not supported anymore. OpenLucius 2.0 (Drupal 9) is now actively maintained.
So I'm closing this 7.x ticket.