Creating HTML articles for AEM Mobile

To create the source HTML files for your articles, you can use a CMS system such as Adobe Experience Manager or use any tool—Dreamweaver, CMS, or HTML editor. We recommend that you use Cascading Style Sheets (CSS) to create reflowable content for tablets and phones of different sizes.

For a deeper dive, see these video recordings from Adobe MAX 2015 sessions:

How to Smartly Utilize HTML

Optimizing Your Interactive HTML Content

Use the HTML Article Packager to create article files for HTML content. When you drag the folder containing your HTML files onto the Article Packager icon, the utility creates a required manifest.xml file and compresses the files into an article file that you can upload.

To download the HTML Article Packager, see Installation and setup for AEM Mobile.

Adobe Experience Manager (AEM) authoring

Configuring AEM to work with AEM Mobile

Third-party CMS systems

• Integrating with CMS: Drupal and WordPress (video)
  
• WordPress (developed by Studio Mercury)
• Drupal (developed by DPCI)

• WoodWing Inception
• Storied

HTML content that performs well in desktop browsers may not perform as well on mobile devices. When creating HTML articles, do the following:

• Optimize images for mobile devices. A 12000x8000-pixel image with 300 dpi takes longer to process than an 800x600 image with 72 dpi. Avoid using needlessly large images to save space and improve performance.
• Optimize video and audio files to reduce size and improve performance.
• Simplify your code for mobile browsers, and test.

For details, see Optimizing content for AEM Mobile apps.

You can reference fonts that are uploaded to the app from HTML articles. By referencing fonts that are uploaded in the app, you improve article download speed and performance.

By default, tapping a non-interactive area displays the navigation bars in viewers, and swiping navigates to the next or previous article or page. In HTML articles, the viewers do not display the navigation bars for known interactive HTML elements such as: <a/>, <video/>, <audio/>, <textarea/>, <input/>, and <button/>. Tapping on other elements displays the navigation bars.

For more control over handling gestures in advanced interactive content such as games or slideshows, use the custom HTML Gesture APIs.

By using the HTML Gesture APIs, you can help ensure a good user experience for more advanced interactive HTML elements. For example, if you have a full-screen slideshow, you can customize the experience to allow users to swipe to the next article on the last slide. If you have an HTML puzzle, you can set it up so that tapping the canvas displays the navigation bars while tapping a puzzle piece does not display the navigation bars.

Note that relinquishCurrentGesture() is not supported in Windows apps. All other gestures are supported in all platforms.

See the example file for details (English only).

If you are using Adobe Muse to create HTML articles, it's recommended that you add the Gestures API to your Muse project. Bates Creative created a mucow for this purpose. The code and instructions are found here:

AEM Mobile Gestures API for Adobe Muse