3

I'm currently working on the User Interface design for a responsive mobile app that is being coded using html. This is the first mobile app development project for me as well as my Head of Engineering as well and for various reasons he has chosen to code in html and not code a native android or native iOS app.

My question is: Are there any guidelines for UI design for html based mobile apps? I have gone through Google's Material Design guidelines in detail and use these as far as possible in my design and specifications but this has been unusable for many reasons, some of which are described below:

  1. Material Design uses 'dp' as the unit of measurement but this is not being used in html

  2. Many patterns of usage suggested in Material Design are not readily available in html libraries. Eg, the Floating Action Button plugin is not readily available in html and so there is loss of fidelity between my spec sheets and the final product at the end of each sprint.

Any suggestions for a resource for html based apps from a design perspective would be very very helpful. I have tried Google search a couple of time but come up with nothing concrete.

closed as off-topic by Abektes, Devin, Mayo, JohnGB May 1 '16 at 15:16

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions about Implementation are off-topic because this site is for User Experience design questions, not questions around how to implement these designs. Therefore, questions around the use of programs like Photoshop or languages such as CSS or JavaScript are off topic." – Abektes, Devin, Mayo, JohnGB
If this question can be reworded to fit the rules in the help center, please edit the question.

  • So it's a web app – Insane Apr 30 '16 at 17:49
  • Check ionic or similar frameworks. There are a bunch of. – Alexey Kolchenko Apr 30 '16 at 18:45
  • @Insane yes its web app. – Manjari Sheel May 1 '16 at 11:03
1

Wasn't planning on writing an actual answer, but as my comment got too long I guess I will make it an answer instead.

Guidelines for UI design

In general anything that can be a native app can also be a mobile app. The 'in general' part mostly limited by:

  1. The skill of the developer
  2. That web apps are a bit slower, so making awesome transitions is totally possible, but they end up significantly slowing down low-end mobile devices. In other words: Don't overdo the transitions too much.

So next you have to decide on a style to follow. As you're developing a mobile web application I assume one of the main goals is a natural cross platform experience. In that case the best thing to keep in mind is something that will feel 'right' to the majority, even though it might feel somewhat weird to a subset of users. My personal opinion is that the Material Design spec is an absolutely awesome choice as it's what the majority of users expect (given Android's dominance on the smartphone market) and feels quite okay on iOS (the odd one out is Windows Phone which might get a bit alienated).

Material design

If you do decide to go with Material Design there are a variety of web based implementations of the Material Design spec, the one I would recommend is Google's own Polymer paper elements collection (the other one Google made themselves is Angular Material). Check out the 'demo' links in the left column for the various components for the way they look and just use screenshots of that in your design. This is especially useful as it means the design doesn't get super expensive text anti aliasing (both native apps and web apps can't realistically do the kind of anti aliasing you get in Photoshop) and other similar differences in implementation that will give the implementing developer a headache.

DP vs PX

In some cases you will however find components where there isn't a ready made implementation available. You will indeed then just have to follow the spec directly and leave it up to the developer to implement it by hand. To just answer your DP vs PX question:

When writing CSS, use px wherever dp or sp is stated. Dp only needs to be used in developing for Android.

Source: google.com/design

  • Thank you David --> this helped me clear the logic of using Material Design style for myself and the team. – Manjari Sheel May 1 '16 at 11:07
1

If you are using a tool such as Cordova or Ionic, than you can still use Google's Material Design.

As per the documentation, you should substitute px for dp when developing in css:

A dp is equal to one physical pixel on a screen with a density of 160. To calculate dp:

dp = (width in pixels * 160) / screen density

When writing CSS, use px wherever dp or sp is stated. Dp only needs to be used in developing for Android.

http://www.google.com/design/spec/layout/units-measurements.html#units-measurements-density-independent-pixels-dp-

There is actually a dedicated Material framework for Ionic you might find useful: http://ionicmaterial.com/

Applications made for mobile using html/css/javascript are known as "hybrid" apps. If you use that term while searching you may find more usable answers. Here's an article that contains some helpful links: https://www.smashingmagazine.com/2014/10/providing-a-native-experience-with-web-technologies/

  • Thanks Phillip! I'll need to check with my Engineering Head if he is using Cordova or Ionic. The hybrid app link proved useful! – Manjari Sheel May 1 '16 at 11:05

Not the answer you're looking for? Browse other questions tagged or ask your own question.