Tag resource

Kindle Fire OmniGraffle Stencil

Download Kindle Fire Stencil v1.0

Make sure to download the Droid Font so everything looks accurate.

According to estimates the Kindle Fire has sold around five million units. If you already have an Android app it might be a good time to start thinking about moving it over to the Kindle.

To help you (and myself) start wireframing and prototyping your next Kindle Fire app I created this OmniGraffle stencil. Most of the UI elements I picked are just ones I used when working on apps for the Fire and some I though you might find useful. Please let me know if there are UI elements missing that you think I should add.

Kindle Fire Showing ZekeFranco.com

Setting min-height on Content Populated via JavaScript

It’s pretty annoying when a page loads and the content gets pushed around and container jump in height due to JavaScript, AJAX, JSON and/or Flash content being pulled to a container. This jump can easily be fixed by using the min-height CSS property on the parent container.

Examples where you may want to set min-height

  • Javascript embedded video players such as Brightcove
  • Sidebar widgets, such as recent tweets or last.fm stats
  • Galleries that are pulling in thumbnails from a database, XML, or JSON file via a JavaScript
  • Basically nearly any container that is going to be filled with a relatively small item and you can predict closely what the height of the item will be

So all you need to do is set min-height using CSS on the container.

#container { min-height:125px; }

Note: min-height follows the box model just like height does so when you set a min-height on a container that will not include borders or padding.

Two Simple Solutions for IE6 support

Of coarse IE6 doesn’t support min-height but IE7 and up does. And of coarse Opera, Firefox, Safari and Chrome support min-height.

But it’s a pretty easy fix. IE6 has a bug (surprise) in the way it supports plain old CSS height. Basically it doesn’t respect the set height of a container and will just expand as needed to fit the content. So in IE6 you can just use height as if it were min-height, but you’ll have to set height in your IE6 stylesheet so that you not setting height on modern browsers too. If you aren’t using conditional comments to serve IE6 an separate stylesheet. Then pinch yourself and then try the Dustin Diaz Fast Hack Bad Ass Method instead. (He didn’t officially name the method so I figured I’d make something up for him.)

Setting min-height isn’t Always the Best Solution

No matter which technique you use the most important thing is to let the user know that something is taking place. Something as simple as a animated image indicator such as a spinning wheel can do the trick.

If a primary part of the interface is going to be loaded with a delay for example, over one second then you might want the box to expand (animating the height property or some other effect) once it’s being populated with content to show the user that content is being pulled in. The interface may look broken to a user if there is a 800px tall box sitting there empty for two seconds, even if you have little indicator spinning. In this case you can have a small 200px box with a message such “Content X is loading…” Then before you display the content have the box slide to the proper height and fade in the content.

Another solution for long content area that are being dynamically filled is to have the the request broken up so that you can immediately start pulling in item 1, then item 2, then item 3, etc. The container can just grow as each item is pulled in.

There probably a million other problems that the min-height property isn’t a good fit. But remember if you remember to put the problem before the solution and are willing to do a little user testing the answer will be come clear.