Designing apps

  • Revision slug: Apps/Design
  • Revision title: Design
  • Revision id: 354487
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment

Revision Content

These references and guides provide information useful when designing your app and building its user interface.

App design

Design guidelines
Suggestions and guides to help you create an app that's both attractive and easy to use.
Responsive design
Your app should be able to adjust to different display sizes capabilities based on the features available on whatever device it's used on. This guide will help you learn how to do so.
Your app's "elevator pitch"

How would you describe your app to someone if the only time you had was the length of an elevator ride? That's your app's elevator pitch, a brief summary of who your app is for, and why it's useful to them.

Layout and structure

Media queries
One key technology toward responsive design is the media query; media queries let your CSS adapt in many ways to the capabilities of the device being used.
Media queries in JavaScript - window.matchMedia
The DOM provides features that make it possible to test the results of a media query programmatically. This is done using the MediaQueryList interface and its methods and properties.
Flexible boxes
CSS flexible boxes let you configure your app's user interface to automatically adjust the positioning and sizes of elements based on the size and orientation of the display.
Custom elements
A guide to custom x-tag based elements provided to help you create a consistent user interface.

Drawing and animating

CSS transforms
CSS transforms let you rotate, scale, and zoom HTML content, taking advantage of hardware acceleration where available, all without relying on JavaScript code.
CSS transitions
CSS transitions let you animate changes to your CSS. Once a transition effect is configured, changes to your CSS occur over a period of time instead of instantaneously. This makes it possible to easily and efficiently create a wide variety of visual effects in your apps.
CSS animations
CSS animations let you animate changes to your document on a more fundamental level, using keyframes to precisely configure the animation effect. This also lets you create looping animation effects rather than effects that happen just once, as is the case with transitions, all without relying on JavaScript.
HTML canvas
The HTML {{HTMLElement("canvas")}} element provides a 2D graphics workspace for you to draw in. This is extremely useful for many purposes, including 2D games.
WebGL
WebGL is a Web-friendly version of OpenGL ES, which lets your app offer hardware accelerated 3D graphics.
SVG
Scalable Vector Graphics (SVG) is a technology that lets you draw graphics using vectors instead of bitmapped images. This is great for scalability, presenting diagrams and charts, and for high-quality, scalable user interfaces.

View All...

{{AppsLandingRightSide()}}

 

Revision Source

<p>These references and guides provide information useful when designing your app and building its user interface.</p>
<div class="row topicpage-table">
  <div class="section">
    <h2 class="Documentation" id="Layout" name="Layout">App design</h2>
    <dl>
      <dt>
        <a href="/en-US/docs/Apps/Design/Guidelines" title="/en-US/docs/Apps/Design/Guidelines">Design guidelines</a></dt>
      <dd>
        Suggestions and guides to help you create an app that's both attractive and easy to use.</dd>
      <dt>
        <a href="/en-US/docs/Web_Development/Mobile/Responsive_design" title="/en-US/docs/Web_Development/Mobile/Responsive_design">Responsive design</a></dt>
      <dd>
        Your app should be able to adjust to different display sizes capabilities based on the features available on whatever device it's used on. This guide will help you learn how to do so.</dd>
      <dt>
        <a href="/en-US/docs/Apps/Design/Guidelines/Your_apps_elevator_pitch" title="/en-US/docs/Apps/Design/Guidelines/Your_apps_elevator_pitch">Your app's "elevator pitch"</a></dt>
      <dd>
        <p>How would you describe your app to someone if the only time you had was the length of an elevator ride? That's your app's <a class="external" href="http://en.wikipedia.org/wiki/Elevator_pitch">elevator pitch</a>, a brief summary of who your app is for, and why it's useful to them.</p>
      </dd>
    </dl>
    <h2 class="Documentation" id="Layout" name="Layout">Layout and structure</h2>
    <dl>
      <dt>
        <a href="/en-US/docs/CSS/Media_queries" title="/en-US/docs/CSS/Media_queries">Media queries</a></dt>
      <dd>
        One key technology toward responsive design is the media query; media queries let your CSS adapt in many ways to the capabilities of the device being used.</dd>
      <dt>
        <a href="/en-US/docs/DOM/Using_media_queries_from_code" title="/en-US/docs/DOM/Using_media_queries_from_code">Media queries in JavaScript - window.matchMedia</a></dt>
      <dd>
        The DOM provides features that make it possible to test the results of a media query programmatically. This is done using the <a href="https://developer.mozilla.org/en-US/docs/DOM/MediaQueryList" title="/en-US/docs/DOM/MediaQueryList"><code>MediaQueryList</code></a> interface and its methods and properties.</dd>
      <dt>
        <a href="/en-US/docs/CSS/Using_CSS_flexible_boxes" title="/en-US/docs/CSS/Using_CSS_flexible_boxes">Flexible boxes</a></dt>
      <dd>
        CSS flexible boxes let you configure your app's user interface to automatically adjust the positioning and sizes of elements based on the size and orientation of the display.</dd>
      <dt>
        <a href="/en-US/docs/Apps/Design/Custom_elements" title="/en-US/docs/Apps/Design/Custom_elements">Custom elements</a></dt>
      <dd>
        A guide to custom x-tag based elements provided to help you create a consistent user interface.</dd>
    </dl>
    <h2 class="Documentation" id="Drawing" name="Drawing">Drawing and animating</h2>
    <dl>
      <dt>
        <a href="/en-US/docs/CSS/Tutorials/Using_CSS_transforms" title="/en-US/docs/CSS/Tutorials/Using_CSS_transforms">CSS transforms</a></dt>
      <dd>
        CSS transforms let you rotate, scale, and zoom HTML content, taking advantage of hardware acceleration where available, all without relying on JavaScript code.</dd>
      <dt>
        <a href="/en-US/docs/CSS/CSS_transitions" title="/en-US/docs/CSS/CSS_transitions">CSS transitions</a></dt>
      <dd>
        CSS transitions let you animate changes to your CSS. Once a transition effect is configured, changes to your CSS occur over a period of time instead of instantaneously. This makes it possible to easily and efficiently create a wide variety of visual effects in your apps.</dd>
      <dt>
        <a href="/en-US/docs/CSS/CSS_animations" title="/en-US/docs/CSS/CSS_animations">CSS animations</a></dt>
      <dd>
        CSS animations let you animate changes to your document on a more fundamental level, using keyframes to precisely configure the animation effect. This also lets you create looping animation effects rather than effects that happen just once, as is the case with transitions, all without relying on JavaScript.</dd>
      <dt>
        <a href="/en-US/docs/HTML/Canvas/Tutorial" title="/en-US/docs/HTML/Canvas/Tutorial">HTML canvas</a></dt>
      <dd>
        The HTML {{HTMLElement("canvas")}} element provides a 2D graphics workspace for you to draw in. This is extremely useful for many purposes, including 2D games.</dd>
      <dt>
        <a href="/en-US/docs/WebGL" title="/en-US/docs/WebGL">WebGL</a></dt>
      <dd>
        WebGL is a Web-friendly version of OpenGL ES, which lets your app offer hardware accelerated 3D graphics.</dd>
      <dt>
        <a href="/en-US/docs/SVG" title="/en-US/docs/SVG">SVG</a></dt>
      <dd>
        Scalable Vector Graphics (SVG) is a technology that lets you draw graphics using vectors instead of bitmapped images. This is great for scalability, presenting diagrams and charts, and for high-quality, scalable user interfaces.</dd>
    </dl>
    <p><span class="alllinks"><a href="/en-US/docs/tag/Apps" title="/en-US/docs/tag/CSS">View All...</a></span></p>
  </div>
  <div class="section">
    <p>{{AppsLandingRightSide()}}</p>
  </div>
</div>
<p>&nbsp;</p>
Revert to this revision