0

So, we are building a web app built on Twitter-Bootstrap. We are just about finished with the layout for the desktop-size device. Now we are trying to find the right layout for a mobile device.

The problem we are facing is that we have a bunch of "controls" that we need to incorporate into the page: List of icons needed

You can consider these icons to be in two different groups (ones with the circle border and those without). I'm looking for any resources that explain best practices for fitting a ton of icons in a limited space.

If anyone has any suggestions as to resources or a layout that has worked for them, I would be so grateful!

KJ Price
  • 5,774
  • 3
  • 21
  • 34
  • I think this may be more suited to [ux.stackexchange.com](http://ux.stackexchange.com) – mccannf Jul 30 '14 at 14:25
  • Try incorporating them into a font. – tcooc Jul 30 '14 at 16:11
  • Turning them into a font is pretty simple using icomoon provided you have them available as vectors. It will provide you the ability to load them all with a single small request. And also the flexibility of being able to change their color and size programmatically. https://icomoon.io/ – CChoma Jul 30 '14 at 16:43

1 Answers1

1

If you are using Twitter-Bootstrap and want to create a mobile-specific layout easily, Ratchet could be a good starting point. Mobile Angular UI could be a good reference too.

One posible solution is to use "off-canvas" to put navigation icons in a sidebar that users can toggle on/off, as explained in https://stackoverflow.com/a/20868976/3613158 (that answer provides examples for Bootstrap). That would allow you to put a lot of different icons without filling the screen (when navigation is toggled off). Depending on your particular needs, maybe one group of icons could be permanently in the screen (the "primary" controls) and the others could be put in the off-canvas menu.

P.D.: Maybe you could tag your question with the ratchet-2 tag to attract more experts in mobile layouts + Bootstrap.

Community
  • 1
  • 1
migueltic
  • 671
  • 4
  • 11
  • Wow. Great stuff. I love Ratchet and mobile Angular. I didn't know of either of them. I think that something like off-canvas is exactly what I'm looking for. Thanks migueltic! – KJ Price Jul 30 '14 at 22:08