Skip to main content

Content & Media

Many screens require you to provide the content. Some screens and features do not require additional content and rely solely on the information provided in the apps configuration file. For generalized content, HTML is best. The combination of HTML optimized for mobile and strategic settings for each screen such as "preventScrolling" helps app owners realize professional results.

Content Format

For format of the content depends on the type of screen. Some content types are obvious, some are less so. Audio and Video content is especially difficult. Becuase of the large number of video and audio formats, and the support for those media types on a particular device, it can get confusing and sometimes frustrating when designing your application. Generally speaking, it's best to use .MP3 files for audio, .MOV files for video, and .PDF or .HTML files for textual and graphically rich content. Word™, Excel™, PowerPoint™, and various other audio and video formats may render nicely in the device but are less reliable.

Content Locations

Content and media files can be included in your project or they can come from a remote data source or your website or another website (with the owners permission). Copyright infringement is illegal and you should never put yourself at risk by "borrowing" a movie, song, or document from a URL. Even worse, don't put your client at risk by using content and media in an app you're being paid to create if you don't have the right to use it.

When using file names, use the file name only, without any path information. Example: myVideo.mov is correct and BT_Videos/myVideo.mov or BT_Videos/myVideoFolder/myVideo.mov is incorrect. When using URL's for content files, use the complete URL like: http://www.example.com/videos/myVideo.mov. File URL's CANNOT CONTAIN SPACES. This means http://www.example.com/videos/my cool video.mov will not work because the name of the movie (my cool video.png) contains spaces.

If you're including content in your project they need to be added to the appropriate folder. Open your project in Xcode or Android Studio then drag them into the appropriate folder. The example on the right shows Xcode for iOS. You can drag an entire directory into the project to help keep yourself organized. Most developers keep their app's content on their hard-drive in one folder. Their folders sometimes contains sub-folders. Next, after downloading the source-code for their project they drag these folders into Xcode or Android Studio. This approach allows them to easily add content assets to their project each time they download the source-code.

Formatting HTML for Mobile

There are lots of approaches and opinions about the best way to author HTML content for mobile. The challenge is authoring content that is both lightweight (small file size), and useful. The best design and approach will ultimately depend on your goals and objectives. Here are some references to get you started.

Common Screen Dimensions

iPhone / iPod Touch: 320 x 480

iPad: 768 x 1024

Motorola Droid: 320 x 480

HTC Desire: 320 x 480

References

Mobile App Design Trends

Mobile Safari Supported Meta Tags

Mobile in the real word