Pixel area for iPhone?

Question

Hi I want to create content for iPhone (lets say iPhone 11 for example) without any nav bar on it at the bottom (like you get by default on Publish Online for example. I'd set the navigation to swipe horizontally between pages and also have a MENU button to be set to the contents page. As I can't preview on my mobile (without the hasstle of cuploading to a hosting wite that I do not own at the moment) I would visually preview it using Publish Online (although I realise that some interactive features will not work for this preview, like slideshows, scrolling frames etc) but I'd like to actually set the document up at iPhones max pixel area, so when I do export as in5 and view on a mobile that I am utilising the maximum pixel area (height)

Thanks for any help in advance!

Answer 1

Here's an article that might help for determining the dimensions of your layout:

• How do I know which pixel dimensions to use for my mobile layouts?

You might also add proportional scaling. Typically, I would recommend Desktop Scaling/Best Fit in the Advanced section of the Export HTML5 with in5 dialog, but it does disable pinch to zoom. If you'd like users to be able to use pinch to zoom, then try setting the Mobile Device Viewport Zoom to Zoom to Page Width. Here's some more information on Desktop Scaling and the Mobile Device Viewport Zoom. It works a little differently than Desktop Scaling.

• Desktop Scaling
• Mobile Device Viewport Zoom

You can use Presentation Mode to make your content full screen; however, the Fullscreen API is not supported on iOS/Safari, iOS/Chrome and iPad/Chrome.

Also, be aware that Presentation Mode is Pro-level feature and that some Pro and higher level features are limited in demo mode:

• What are the limitations of in5 in Demo mode?

And you are correct. Publish Online and in5 support different features, so testing may yield inaccurate results. Here's more information about the difference between what each supports (the feature comparison chart is especially helpful):

• Publish Online vs. in5 — Digital Publishing from InDesign Compared

Comments

Wow – thorough answer, thanks Myra!

I'm currently using in5 demo mode as I need to demo a project to show my company that win5 will be a great service to use for our clients work, and then actually get them to subscribe. A few questions:

1) With the demo plan if I upload my project to a web hosting site (one that I'd subscribe to) can I preview my content on my mobile and send a URL to my client? or to upload to a hosting site do I need a paid subscription?

2) Say I get the starter plan, can I use a pixel ratio of say 1125 x 2436px (iPhone X) and it will automatically resize to fit the device that it's viewed on (say for example someone is looking on a Galaxy or an iPhone 8)? Is that feature included in the starter plan?

Many thanks for your help

---

Sorry Myra – another question that will help with my design and save wasting time trying to do something that might not be possible.

say I've a multi page Indd file set 1170 x 2532px. I want the viewer to swipe left to go through the pages in chronological order but I also have a menu button taking them to contents.

Like I say I am working to a 2532px height so they will perfectly fill an iPhone 14 scree. On one of  pages, lets say page 4 for example, if there's more content would it be possible for them to scroll down on this page only, like s standard website? but also to swipe left to get to the next page?

Or is it one or the other – either all pages swipe left (horizontal) or just one long page that scrolls down?

Many thanks

Steve

---

Hi Steve,

I'll do my best to answer your questions.

1) With the demo plan if I upload my project to a web hosting site (one that I'd subscribe to) can I preview my content on my mobile and send a URL to my client? or to upload to a hosting site do I need a paid subscription?

You can export with the demo version of in5 and upload it, but the demo version limits some features that you either wouldn't be able to use or could use but only for a few pages. The demo also watermarks images. Here's more info on the limitations of the demo version:

• What are the limitations of in5 in Demo mode?

2) Say I get the starter plan, can I use a pixel ratio of say 1125 x 2436px (iPhone X) and it will automatically resize to fit the device that it's viewed on (say for example someone is looking on a Galaxy or an iPhone 8)? Is that feature included in the starter plan?

Yes, even with a starter plan, you can add proportional scaling when you export either by going to in5 > Export HTML5 with in5... or to in5 > Easy Export Wizard... and clicking the Advanced button, going to the Advanced section of the Export HTML5 with in5 dialog and setting Mobile Device Viewport Zoom and Desktop Scaling to your preferred scaling options.

Here's a chart that includes the features available at the various plan levels:

• Full Plan Comparison

say I've a multi page Indd file set 1170 x 2532px. I want the viewer to swipe left to go through the pages in chronological order but I also have a menu button taking them to contents.

Like I say I am working to a 2532px height so they will perfectly fill an iPhone 14 scree. On one of  pages, lets say page 4 for example, if there's more content would it be possible for them to scroll down on this page only, like s standard website? but also to swipe left to get to the next page?

You can export (in5 > Export HTML5 with in5...) with the page format set to Slider (Horizontal) with Enable Swipe Navigation selected (it's selected by default for this page format) to make the content swipeable left and right.

To accommodate the longer content on page 4 with that swipeable content, you could also do one of the following:

• Add a Scrolling Frame which is an extension from Ajar Productions that you can get for free when you sign up for the newsletter. Once it's installed, you would access it by going to in5 > Interactive Widgets > Scrolling Frames.
• Make a tall page by changing the dimensions of page 4 in InDesign.
• Use the Merge Pages Vertically.jsxbin script (Window > Utilities > Scripts and expand the Application > Ajar Productions directory)

For the last 2 options, you'll find more information on the following page:

• How to Create Long, Scrolling Pages