Please note, this is a STATIC archive of website developer.mozilla.org from November 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.
Archive of obsolete content
Your Search Results

    Responsive Web design

    With Web users increasingly using mobile devices to browse Web sites and apps, Web designers and developers need to be sure that their creations look as good and work as well on mobile devices as on traditional desktop computers. Prominent designer Luke Wroblewski advocates designing for "Mobile First", rather than as an afterthought to designing for desktops. Whether you design for mobile devices as a primary target or as a nice extra, you can use the power of CSS to ensure that the same content can be accessed across all hardware platforms, from mobile phones to wide-screen high-resolution displays.

    This approach is known as "responsive Web design". Some of its strategies include:

    • Liquid or fluid layout: Defining all container widths in terms of percentages of the browser viewport, so that they expand and contract as the browser window changes size.
    • Media queries: Invoking different style sheets based on the capabilities of the display being used, such as size, resolution, aspect ratio, and color depth.
    • Fluid images: Setting images to occupy at most the maximum display width.

    Minimum requirements for Firefox Marketplace

    If you submit an app to the Firefox Marketplace for Firefox OS or Firefox for Android, it needs to be responsive to mobile screen sizes and screen pixel densities. Keep in mind that screens start as small as 320px by 480px. Another common pitfall is not recognizing screen density and then not adjusting font sizes and touch targets accordingly. For more information see Marketplace review criteria.

    Resources

    Overviews

    Techniques

    Tools

    Examples

     

    Document Tags and Contributors

    Tags: 
     Contributors to this page: Sheppy, Maaaks, anushbmx, markg, kohei.yoshino, Paul, mhr, jswisher
     Last updated by: Maaaks,