2

I am told that the iPhone 6 is 375 pixels in width. When I place an artboard in Axure (or Adobe XD) of 375 pixels, it is larger than the actual phone. Why? Should I design 375 on screen or shrink it to match the actual phone?

  • 5
    Probably the iPhone has smaller pixels than the display you are using to view the artboard. – Glenn Randers-Pehrson Jul 17 '17 at 20:58
  • 3
    The iPhone 6 is 1334px x 750px. Set your artboard to the actual measurements of the iPhone screen and set your resolution to the media you'll be designing for. See paintcodeapp.com/news/iphone-6-screens-demystified and remember iPhone resolution is 326ppi. Default Illustrator file "for screen" is 72 dpi. This is where your weird size came from. – Webster Jul 17 '17 at 21:12
  • Is the problem that you trying to run this on an iPhone via axshare and the format is all wrong? If you are, then are you running it via Safari and then "Adding to the home screen"? There are tricks for running in a browser or running full screen mode on both Android and Safari, let me know what your doing and I'll add an answer. – Metalskin Jul 18 '17 at 5:55
  • I am currently just using it for desktop, at which 375px was too large. I found that 276px, 490px is what gets it to an accurate phone size for desktop. I will need to get it up on the actual phone itself. At this point I wonder what size I should make it? – Eric Jul 19 '17 at 13:53
  • 1
    @Webster Please refrain from answering questions in the comments. I'd upvote that if it were an answer. – Vincent Sep 16 '17 at 7:18
0

The simple answer is in how you generate your HTML or how you publish to Axure Share. The key is in the settings for the generator.

If you choose the menu Publish > More Generators and Configurations... you are given a list of all the generators. By default you have four options:

  • HTML 1
  • Word Doc 1
  • CSV Report 1
  • Print 1

The HTML 1 is the one you wish to edit, do this by double clicking the entry.

This gives you the editor for the generator. The Mobile/Device entry is where you can specify options that create the viewport tag and attributes for the header of your generated HTML. Select the Mobile/Device entry.

The option you need is disabled by default, choose the Include Viewport Tag.

Set the Width to the size of the width of your mock-up. You don't have to use the physical pixel size of the device your using. But it does help if the ratio between height and width match your target device (iOS or Android). You can use the width or the height, I tend to use width, that way it doesn't look too bad on Android and iOS.

Make sure you clear out initial scale, select prevent vertical page scroll and select Hide browser nav. The second last will stop your headings scrolling off the screen, but means you need to manage scrolling in your mockup. The last one is important so that you don't see the nav controls in the browser when you launch it from the home screen.

You can also set the home screen icon. This is really nice for iOS and Android. When you have your mock-up open, choose to bookmark/save to your home screen. When you do this it will use the icon you included.

The iOS Status Bar is worth considering. I sometimes hide it, or set it to black-translucent.

You can try the splash screens, but I never got them working.

Note: Cannot upload images for some reason, will edit with screen shots later

| improve this answer | |
0

Typically in a vector tool like Adobe XD you'll want to design at the "CSS pixels" size of the screen, which really is 375x667 in this case. An iPhone 6 actually has twice that many pixels in each dimension, but they're also half as small — that's what people mean by "2x" DPI. It's usually best to design at the 1x size and let the tool (like XD) scale up the number of pixels automatically as needed when you're exporting PNG assets.

Usually that gets you a pretty close match to the size of elements you see on your screen, and the size of you'd see on your phone if you hold it up next to the screen. It's not a perfect match, however, since the DPI of different computer screens varies a bit — very few screens are a perfect match, or a perfect multiple, of the iPhone's DPI.

Two options for getting the sizes to match better:

  1. Zoom the design tool view in/out until it looks the same size as your physical phone. You won't really lose any fidelity since you're still designing with vectors.
  2. Use on-device preview to preview your design directly on a phone in real time as you work. In Adobe XD, you can easily do this just by plugging your phone into the computer with a USB cable.
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.