Frappe Technologies
Screenshot 2023-10-25 at 10.48.41 PM.png
Improving Mobile UI
See how ERPNext is improving on the mobile side.
author

By

Faris Ansari

·

26 July 2016

·

2

min read

Mobile phones have become the primary device for everything. They are being used excessively at work too. Since they are portable, simple tasks can be handled on the go.

ERPNext has always been mobile first. This has helped improve the user experience to cater the significant amount of mobile users.

I have been working to improve the mobile views on ERPNext. Here are some improved elements.

Portal

Mobile view should be what users are already familiar with. In this case, a simple list view.

Figure 1: My Account View Figure 2: Orders View


Dropdown

A dropdown is another simple element which makes for a good user interface.
Earlier, there was a right sidebar with a bunch of options. Now, it's been replaced with a dropdown menu.

Before After
Figure 3: Right Sidebar in website Figure 4: Dropdown in website

The notification sidebar in the desk view has been replaced with a dropdown.

Before After
Figure 5: Notification Sidebar Figure 6: Notification dropdown


Search

Search, one of the most used feature, was hidden inside the sidebar. It's now visible upfront on the navbar.

Before After
Figure 7: Search on left sidebar Figure 8: Search on navbar


Sidebar

The main section was pushed off to the side to reveal the sidebar. Also, the sidebar was rendered separately resulting in redundant elements and duplicate event listeners.

The sidebar is completely removed. The same Desktop sidebar is rendered as a pull out sidebar using CSS hacks!

Before After
Figure 9: Old offcanvas sidebar Figure 10: New reused sidebar


Looking forward to your feedback!


Published by

Faris Ansari

on

26 July 2016
1

Share

Add your comment

Success!

Error

Comments

R
Rob

· 

June 7, 2019

Nice work as well on this sir.

Discussion

image7f7d4e.png

Paul Mugambi

·

3 days

ago

Beautiful read, and an insight into an individual I respect and have learned a lot from. Am inspired to trust the process and never give up.

image4c43d6.png

Anna Dane

·

5 days

ago

I must say this is a really amazing post, and for some of my friends who provide Best British Assignment Help, I must recommend this post to them.

Add your comment

Comment