This article describes some tips when using HTML objects that are displayed on iOS devices.
Automatically Sizing HTML Objects for iOS Devices
Resolutions of iOS devices with Retina and non-Retina displays are very different and require some planning when displaying HTML content.
For example: Original iPads had a display of 1024 x 768 pixels at 132 ppi. Retina Display iPads have a resolution of 2048 x 1536 pixels at 264 ppi. When creating HTML objects for original iPads, the rule was to create objects at 1024 x 768 to cover the whole screen. It would be reasonable to think that when displaying HTML objects on a Retina Display iPad, you would create objects at 2048 x 1536 pixels.
Due to how web view is implemented on the iPad, this is not the case.
The reality is the following:
- You still create HTML objects at 1024 x 768 pixels to cover the whole iPad screen
- Images referenced in the HTML should have an original size of 2048 x 1536 pixels
- You should display the image in the HTML object at 1024 x 768 but the full resolution of the image will be used for display
1. Draw a frame on the InDesign layout.
2. With the frame selected, go to the Mag+ Objects panel and set the Object Type to "HTML".
3. Check the box next to "Scale Contents to Fit Block".
4. Save your document and review it on a Review Device to be sure it displays properly.
Note: In order to review your document, you must set up a Reviewer device and configure the Mag+ Settings panel in InDesign. For more information, read the articles in the section "Reviewing Your Current Design."Manually Sizing HTML Objects for non-Retina iOS Devices
1. Measure the size of the HTML frame (in pixels) in the Mag+ InDesign template.
2. Multiply the size of the object by 1.83 to get the size necessary for HTML objects to display correctly on a non-Retina iOS device.
For example: a 558 x 419 px frame multiplied by 1.83 results in 1024 x 768 px.
Manually Sizing HTML Objects for Retina Display iOS Devices
1. Measure the size of the HTML frame (in pixels) in the Mag+ InDesign template.
2. Multiply the size of the object by 1.83 to get the size necessary for HTML size attributes that will fill the frame.
For example: a 558 x 419 px frame multiplied by 1.83 results in1024 x 768 px.
3. Save all original referenced images at 264 ppi.
4. When using an IMG tag to fill the frame, use the size in Step Two for the HTML Width and Height attributes.
For example: <img src="assets/2048x1536.jpg" width="1024" height="768"/>
The high resolution version of your image will show and still fit within your HTML frame.
URL Links in HTML Objects on iOS Devices
When linking to another web site in an HTML object (i.e. an HTML ad that links to a company’s web site) the default behavior is to have the referenced URL open in the same box created for the HTML object. To have the URL open in the in-app browser, follow these steps.
1. Find the URL referenced in the original HTML.
For example: <a href="http://www.magplus.com">Mag+</a>
2. Add "openwindow-" before the URL to force it to open in an in-app browser.
For example: <a href="openwindow-http://www.magplus.com">Mag+</a>
0 Comments