Sunday, May 27, 2012

Graphics for Mobile Apps or Mobile Websites

Recently I started playing with Inkscape.  It's a great FREE software that is similar to CorelDraw or Illustrator.  I've used to create a few simple cliparts.  I've also discovered that inkscape provides a gallery of FREE copyright/royalty free cliparts that people can contribute to or download from.

I'm pretty happy with it, so if anyone wants to explore their graphic artists side, check out their site.

I wanted to share my creations via a mobile app or maybe a mobile website.  And that got my wondering about what size and resolution these cliparts and pictures should be saved at for optimal display and download speed onto a mobile device?  Do I need to save different sizes of each picture to display correctly on my motorola cliq and my samsung galaxy tab?  

So here's some notes (mainly for my own future reference.

  1. I found this article about designing for mobile web to be educational in covering the basics.  It's written in 2008, so maybe there's new stuff to know about html5 and what not.   But I'm sure the basics of mobile web design has not changed.  Summary, keep your SIMPLE and LINEAR.  Not everyone has a 4G or even a 3G connection =P.  http://www.sitepoint.com/designing-for-mobile-web/ 
  2. Both android and ios prefers *.png over *.jpg. However, jpegs are much smaller than png. So for web images, stick with jpegs.  further information found HERE.
  3. For android development worry more about screen densities than screen size when it comes to your bitmaps.  There are 4 screen densities: low, medium, high and extra-high density.  
    • To generate these images, you should start with your raw resource in vector format and generate the images for each density using the following size scale:

No comments:

Post a Comment