Building for mobile devices

We are getting better at making the things we build play well with mobile devices (mostly thanks to @Erika) and in a world that is moving more and more towards mobile that is important!

What do we need to do to improve further? Some suggestions:

  1. Decide what screen resolutions are most important.
  2. Settle on a way to test for mobile compatibility.
  3. Write guidelines for developing something new that will play well with mobile.
  4. Get a standard set of logos and favicons.

Other things we should consider? Suggestions for testing methods? Things we need to include in guidelines?

I feel I need to share some of my resources for mobile testing :wink:

  1. As far as screen resolution goes I am sticking to standard with what Bootstrap for Twitter offers, since we are largely using it for our projects. (480px for phones, 760px for tablets, 992px for medium screens and 1200px for large screens). I realize that great variety of screens sizes on devices is rolled out every day, but I find that these screen rsolutions tend to cover most of them.
  2. For testing I use http://quirktools.com/screenfly/ it covers a lot of the resolutions that I develop for.
  3. I think it is a good idea and I can start working on that.
  4. We already have logos, for favicons I use http://fontawesome.io/ , but am thinking of making a custom fontset, which could be used for P2PU icon purposes e.g. donate button icon, logo as an icon,…

I think during our development, we should develop mobile first and tweak for all larger.
For the stuff that is more application wise as oppose to websites, I recommend we look into frameworks like http://ionicframework.com/ or similar…

2 Likes

I’ve started a Google doc that we can use to write down some of the ideas.