Mobile/Fennec/Extensions/Layout

Designing a portable application to run on many different mobile devices is a challenge. Screen sizes and pixel densities are different, making it difficult to create single amazing layout. In addition, mobile devices can change screen orientation, from portrait to landscape and back again.

Layout support in XUL and media query support in CSS really do the heavy lifting. The Fennec UI is the same on all supported devices, but there are some layout constraints and CSS rules that can morph the UI as the screen changes. Here are some of the ways to do it:

• Use physical dimensions whenever possible. Padding and margins are set using millimeters, not pixels. This minimizes the need for special rules for every different screen size and pixel density. Also, the UI is designed for touch, and the current design size for a touchable UI element is ~7.5mm. Your finger doesn't change sizes to match the screen.
• Use CSS media queries to switch between screen sizes and pixel densities. Large sized images can be used on large screens/densities, while smaller images can be used on smaller screens/densities. The result should be an image that is roughly the same physical size on either device.
• Use CSS media queries and XUL box rules to flow the UI when the device is rotated. A toolbar that works well vertically in landscape orientation, probably needs to flow horizontally in portrait orientation. It's all about maximizing the usable space.

Screen Size

Here is some example CSS for toggling between large and small screens/densities. As you can see, 400px is used as a cutoff:

/* high-res screens */
@media all and (min-device-width: 401px) {
  toolbarbutton {
    min-width: 64px !important; /* primary button size (match image pixels)*/
    min-height: 64px !important; /* primary button size (match image pixels) */
  }
}

/* low-res screens */
@media all and (max-device-width: 400px) {
  toolbarbutton {
    min-width: 36px !important; /* primary button size (match image pixels) */
    min-height: 36px !important; /* primary button size (match image pixels) */
  }
}

Orientation/Rotation

The same kind of example, but this time for changing the direction of some UI elements when rotating the screen:

@media (orientation: landscape) {
  #panel-controls {
    -moz-box-orient: vertical;
    -moz-box-ordinal-group: 1; /* move to left of screen */
    -moz-box-pack: end; /* force children to align to bottom of screen */
  }
}

@media (orientation: portrait) {
  #panel-controls {
    -moz-box-orient: horizontal;
    -moz-box-ordinal-group: 1000; /* move to the bottom of the screen */
    -moz-box-pack: start; /* force children to align to left of screen */
  }
}

Fennec also uses the XUL <hbox> wrapping to allow elements to flow into multiple rows if there is not enough space to hold them in a single row:

#my-hbox {
  display: block;
}

When developing add-ons for Fennec, please keep these situations in mind. Use the Fennec code as an example of how you can create a great user experience, regardless of screen size or orientation.