MarkFinkle at 05:02, 20 October 2010

2010-10-20T05:02:01Z

← Older revision		Revision as of 05:02, 20 October 2010
Line 10:		Line 10:

	Here is some example CSS for toggling between large and small screens/densities. As you can see, 400px is used as a cutoff:		Here is some example CSS for toggling between large and small screens/densities. As you can see, 400px is used as a cutoff:
	<pre~~><code~~>		<pre>
	/* high-res screens */		/* high-res screens */
	@media all and (min-device-width: 401px) {		@media all and (min-device-width: 401px) {
Line 26:		Line 26:
	}		}
	}		}
	~~</code>~~</pre>		</pre>

	==Orientation/Rotation==		==Orientation/Rotation==

	The same kind of example, but this time for changing the direction of some UI elements when rotating the screen:		The same kind of example, but this time for changing the direction of some UI elements when rotating the screen:
	<pre~~><code~~>		<pre>
	@media (orientation: landscape) {		@media (orientation: landscape) {
	#panel-controls {		#panel-controls {
Line 47:		Line 47:
	}		}
	}		}
	~~</code>~~</pre>		</pre>

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

	<pre~~><code~~>		<pre>
	#my-hbox {		#my-hbox {
	display: block;		display: block;
	}		}
	~~</code>~~</pre>		</pre>

	When developing add-ons for Fennec, please keep these situations in mind. Use the [http://mxr.mozilla.org/mobile-browser/ Fennec code] as an example of how you can create a great user experience, regardless of screen size or orientation.		When developing add-ons for Fennec, please keep these situations in mind. Use the [http://mxr.mozilla.org/mobile-browser/ Fennec code] as an example of how you can create a great user experience, regardless of screen size or orientation.

MarkFinkle: Created page with '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 amaz…'

2009-09-05T04:21:07Z

Created page with '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 amaz…'

New page

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 [https://developer.mozilla.org/En/CSS/Media_queries 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 [https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions 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:
<pre><code>
/* 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) */
}
}
</code></pre>

==Orientation/Rotation==

The same kind of example, but this time for changing the direction of some UI elements when rotating the screen:
<pre><code>
@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 */
}
}
</code></pre>

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

<pre><code>
#my-hbox {
display: block;
}
</code></pre>

When developing add-ons for Fennec, please keep these situations in mind. Use the [http://mxr.mozilla.org/mobile-browser/ Fennec code] as an example of how you can create a great user experience, regardless of screen size or orientation.

Mobile/Fennec/Extensions/Layout - Revision history

MarkFinkle at 05:02, 20 October 2010

MarkFinkle: Created page with '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 amaz…'