Mobile

  • Revision slug: Mobile
  • Revision title: Mobile
  • Revision id: 16705
  • Created:
  • Creator: wbamberg
  • Is current revision? No
  • Comment 2 words added, 3 words removed

Revision Content

Boot to Gecko

Boot to Gecko is an open source mobile operating system which uses Linux and Mozilla's Gecko engine to run a user interface and set of applications written entirely in HTML, CSS and JavaScript.

Read about how to install Boot to Gecko and how to develop apps for it.

Firefox for Android

Firefox for Android is Mozilla's mobile web browser. It's recently been rewritten to use Android's native UI, making it faster, leaner and more responsive. It provides support for powerful APIs to access device capabilities such as the camera and telephony stack.

Read about how to help create Firefox for Android, how to use its device APIs, and how to build mobile add-ons.

Mobile web development

Mobile devices have very different hardware characteristics from desktop or laptop computers, and many of the APIs used to work with them are still in the process of being standardized.

Read about how to develop web sites that look good on mobile devices and take advantage of the new possibilities they offer. Learn how to make sure your web site works well on different browsers.

 

This page provides an overview of some of the main techniques needed to design web sites that work well on mobile devices. If you're looking for information on Mozilla's Boot to Gecko project, see the Boot to Gecko page. Or you might be interested in details about Firefox for Android.

We've organized it into two sections, designing for mobile devices and cross-browser compatibility.

Designing for mobile devices

Mobile devices have quite different hardware characteristics compared with desktop or laptop computers. Their screens are usually smaller, obviously, but they also usually automatically switch the screen orientation between portrait and landscape mode as the user rotates the device. They usually have touch screens for user input. APIs like geolocation or orientation are either not supported on desktops or are much less useful, and these APIs give mobile users new ways to interact with your site.

Working with small screens

Responsive Web Design is a term for a set of techniques that enables your web site to adapt its layout as its viewing environment — most obviously, the size and orientation of the screen — changes. It includes techniques such as:

  • fluid CSS layouts, to make the page adapt smoothly as the browser window size changes
  • the use of media queries to conditionally include CSS rules appropriate for the device screen width and height

The viewport meta tag instructs the browser to display your site at the appropriate scale for the user's device.

Working with touch screens

To use a touch screen you'll need to work with DOM Touch events. You won't be able to use the CSS :hover pseudo-class, and will need to design clickable items like buttons to respect the fact that fingers are fatter than mouse pointers. See this article on designing for touch screens.

You can use the -moz-touch-enabled media query to load different CSS on a touch-enabled device.

Optimizing images

To help users whose devices have low or expensive bandwidth, you can optimize images by loading images appropriate to the device screen size and resolution. You do this in CSS by querying for screen height, width, and pixel ratio.

You can also make use of CSS properties to implement visual effects like gradients and shadows without images.

Mobile APIs

Finally, you can take advantage of the new possibilities offered by mobile devices, such as orientation and geolocation.

Cross-browser development

Write cross-browser code

To create web sites that will work acceptably across different mobile browsers:

  • Try to avoid using browser-specific features, such as vendor-prefixed CSS properties.
  • If you do need to use these features, check whether other browsers implement their own versions of these features, and target them too.
  • For browsers that don't support these features, provide an acceptable fallback.

For example, if you set a gradient as a background for some text using a vendor-prefixed property like -webkit-linear-gradient, it's best to include the other vendor-prefixed versions of the linear-gradient property. If you don't do that, at least make sure that the default background contrasts with the text: that way, the page will at least be usable in a browser which is not targeted by your linear-gradient rule.

See this list of Gecko-specific properties, and this list of WebKit-specific properties, and Peter Beverloo's table of vendor-specific properties.

Using tools like CSS Lint can help find problems like this in code, and preprocessors like SASS and LESS can help you to produce cross-browser code.

Take care with user agent sniffing

It's preferable for web sites to detect specific device features such as screen size and touch screens using the techniques listed above, and adapt themselves accordingly. But sometimes this is impractical, and web sites resort to parsing the browser's user agent string to try to distinguish between desktops, tablets, and phones, to serve different content to each type of device.

If you do this, make sure your algorithm is correct, and you aren't serving the wrong type of content to a device because you don't understand a partcular browser's user agent string. See this guide to using the user agent string to determine device type.

Test on multiple browsers

Test your web site on multiple browsers. This means testing on multiple platforms — at least iOS and Android.

Revision Source

<h2><a href="/en/Mozilla/Boot_to_Gecko" title="Boot to Gecko">Boot to Gecko</a></h2>
<p>Boot to Gecko is an open source mobile operating system which uses Linux and Mozilla's Gecko engine to run a user interface and set of applications written entirely in HTML, CSS and JavaScript.<br> <br> Read about how to install Boot to Gecko and how to develop apps for it.</p>
<h2><a href="/en/Mozilla/Firefox_for_Android" title="https://developer.mozilla.org/en/Mozilla/Firefox_for_Android">Firefox for Android</a></h2>
<p>Firefox for Android is Mozilla's mobile web browser. It's recently been rewritten to use Android's native UI, making it faster, leaner and more responsive. It provides support for powerful APIs to access device capabilities such as the camera and telephony stack.<br> <br> Read about how to help create Firefox for Android, how to use its device APIs, and how to build mobile add-ons.</p>
<h2><a href="/en/Mobile/Mobile_Web_Development" title="https://developer.mozilla.org/en/Mobile/Mobile_Web_Development">Mobile web development</a></h2>
<p>Mobile devices have very different hardware characteristics from desktop or laptop computers, and many of the APIs used to work with them are still in the process of being standardized.<br> <br> Read about how to develop web sites that look good on mobile devices and take advantage of the new possibilities they offer. Learn how to make sure your web site works well on different browsers.</p>
<p> </p>
<p>This page provides an overview of some of the main techniques needed to design web sites that work well on mobile devices. If you're looking for information on Mozilla's Boot to Gecko project, see the <a href="/en/Mozilla/Boot_to_Gecko" title="Boot to Gecko">Boot to Gecko</a> page. Or you might be interested in details about <a href="/en/Mozilla/Firefox_for_Android" title="Firefox for Android">Firefox for Android</a>.</p>
<p>We've organized it into two sections, <a href="#Designing_for_mobile_devices">designing for mobile devices</a> and <a href="#Cross-browser_development">cross-browser compatibility</a>.</p>
<h2>Designing for mobile devices</h2>
<p>Mobile devices have quite different hardware characteristics compared with desktop or laptop computers. Their screens are usually smaller, obviously, but they also usually automatically switch the screen orientation between portrait and landscape mode as the user rotates the device. They usually have touch screens for user input. APIs like geolocation or orientation are either not supported on desktops or are much less useful, and these APIs give mobile users new ways to interact with your site.</p>
<h3>Working with small screens</h3>
<p><a href="/en/Web_Development/Responsive_Web_design" title="en/Web_Development/Responsive_Web_design">Responsive Web Design</a> is a term for a set of techniques that enables your web site to adapt its layout as its viewing environment — most obviously, the size and orientation of the screen — changes. It includes techniques such as:</p>
<ul> <li>fluid CSS layouts, to make the page adapt smoothly as the browser window size changes</li> <li>the use of <a href="/en/CSS/Media_queries" title="en/CSS/Media_queries">media queries</a> to conditionally include CSS rules appropriate for the device screen <a href="/en/CSS/Media_queries#width" title="en/CSS/Media_queries#width">width</a> and <a href="/en/CSS/Media_queries#height" title="en/CSS/Media_queries#height">height</a></li>
</ul>
<p>The <a href="/en/Mobile/Viewport_meta_tag" title="en/Mobile/Viewport_meta_tag">viewport meta tag</a> instructs the browser to display your site at the appropriate scale for the user's device.</p>
<h3>Working with touch screens</h3>
<p>To use a touch screen you'll need to work with <a href="/en/DOM/Touch_events" title="en/DOM/Touch_events">DOM Touch events</a>. You won't be able to use the <a href="/En/CSS/:hover" title="En/CSS/:hover">CSS :hover</a> pseudo-class, and will need to design clickable items like buttons to respect the fact that fingers are fatter than mouse pointers. See this article on <a class="external" href="http://www.whatcreative.co.uk/blog/tips/designing-for-touch-screen/">designing for touch screens</a>.</p>
<p>You can use the <a href="/en/CSS/Media_queries#-moz-touch-enabled" title="en/CSS/Media_queries#-moz-touch-enabled">-moz-touch-enabled</a> media query to load different CSS on a touch-enabled device.</p>
<h3>Optimizing images</h3>
<p>To help users whose devices have low or expensive bandwidth, you can optimize images by loading images appropriate to the device screen size and resolution. You do this in CSS by querying for screen <a href="/en/CSS/Media_queries#height" title="en/CSS/Media_queries#height">height</a>, <a href="/en/CSS/Media_queries#width" title="en/CSS/Media_queries#width">width</a>, and <a href="/en/CSS/Media_queries#-moz-device-pixel-ratio" title="en/CSS/Media_queries#-moz-device-pixel-ratio">pixel ratio</a>.</p>
<p>You can also make use of CSS properties to implement visual effects like <a href="/en/CSS/Using_CSS_gradients" title="en/CSS/Using_CSS_gradients">gradients</a> and <a href="/En/CSS/Box-shadow" title="En/CSS/Box-shadow">shadows</a> without images.</p>
<h3>Mobile APIs</h3>
<p>Finally, you can take advantage of the new possibilities offered by mobile devices, such as <a href="/en/Detecting_device_orientation" title="en/Detecting_device_orientation">orientation</a> and <a href="/En/Using_geolocation" title="En/Using_geolocation">geolocation</a>.</p>
<h2>Cross-browser development</h2>
<h3>Write cross-browser code</h3>
<p>To create web sites that will work acceptably across different mobile browsers:</p>
<ul> <li>Try to avoid using browser-specific features, such as vendor-prefixed CSS properties.</li> <li>If you do need to use these features, check whether other browsers implement their own versions of these features, and target them too.</li> <li>For browsers that don't support these features, provide an acceptable fallback.</li>
</ul>
<p>For example, if you set a gradient as a background for some text using a vendor-prefixed property like <code>-webkit-linear-gradient</code>, it's best to include the other vendor-prefixed versions of the <a href="/en/CSS/linear-gradient" title="en/CSS/linear-gradient">linear-gradient</a> property. If you don't do that, at least make sure that the default background contrasts with the text: that way, the page will at least be usable in a browser which is not targeted by your <code>linear-gradient</code> rule.</p>
<p>See this <a href="/en/CSS/CSS_Reference/Mozilla_Extensions" title="en/CSS/CSS_Reference/Mozilla_Extensions">list of Gecko-specific properties</a>, and this list of <a href="/en/CSS/CSS_Reference/Webkit_Extensions" title="en/CSS/CSS_Reference/Webkit_Extensions">WebKit-specific properties</a>, and Peter Beverloo's <a class="external" href="http://peter.sh/experiments/vendor-prefixed-css-property-overview/">table of vendor-specific properties</a>.</p>
<p>Using tools like <a class="external" href="http://csslint.net/">CSS Lint</a> can help find problems like this in code, and preprocessors like <a class="external" href="http://sass-lang.com/">SASS</a> and <a class="external" href="http://lesscss.org/">LESS</a> can help you to produce cross-browser code.</p>
<h3>Take care with user agent sniffing</h3>
<p>It's preferable for web sites to detect specific device features such as screen size and touch screens using the techniques listed above, and adapt themselves accordingly. But sometimes this is impractical, and web sites resort to parsing the browser's user agent string to try to distinguish between desktops, tablets, and phones, to serve different content to each type of device.</p>
<p>If you do this, make sure your algorithm is correct, and you aren't serving the wrong type of content to a device because you don't understand a partcular browser's user agent string. See this <a href="/en/Browser_detection_using_the_user_agent#Mobile.2C_Tablet_or_Desktop" title="browser detection using the user agent">guide to using the user agent string to determine device type</a>.</p>
<h3>Test on multiple browsers</h3>
<p>Test your web site on multiple browsers. This means testing on multiple platforms — at least iOS and Android.</p>
<ul> <li>test mobile Safari on the iPhone using the <a class="link-https" href="https://developer.apple.com/devcenter/ios/index.action">iOS simulator</a></li> <li>test Opera and Firefox using the <a class="link-https" href="https://developer.android.com/sdk/index.html">Android SDK</a>. See these additional instructions for <a class="link-https" href="https://wiki.mozilla.org/Mobile/Fennec/Android/Emulator">running Firefox for Android using the Android emulator</a>.</li>
</ul>
Revert to this revision