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.
In some cases, you can use Adobe Muse to create the initial HTML articles. However, in most cases, advanced HTML knowledge is required to modify the HTML articles for use with AEM Mobile.
Create HTML articles video
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.
Download and install the HTML Article Packager.
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.
Shared fonts used in HTML articles are supported only in mobile apps, not in Desktop Web Viewer. To make fonts available in Desktop Web Viewer, you can either include the fonts in the HTML article, or you can use APIs to make them available through shared content.
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: