Prototype not scaling to iPhone 6

Axure RP 8
1

I built a prototype using the template for iPhone 5 (320 x 590). I have tried to figure out how to get this to automatically zoom for iPhone 6 to fill the screen. Maybe this isn’t possible. From reading the forums it seems to be possible, but I have tried many options and it doesn’t seem to work. I end up with the prototype filling 2/3 of the screen.

I am very appreciate of any assistance.

Cheers,

John

2

Hi John,
@light_forger posted a solution, you find it in the following thread.
The New iPhone 6 (times x2)

Thanks,
Vikram

2 Likes
3

Hi Vikram,

Thanks for your reply. I saw his post about the resolutions. But, I can’t figure out how to get the prototype to scale on the iPhone 6. I tried changing the device width to 375 and also to 750. But, the interface didn’t automatically scale to fit. I can scale the interface manually, but then it doesn’t work on smaller devices like the iPhone5.

thanks,

John

4

Hi furrylogic, you can use Initial Scale in the mobile/device of the prototype configuration to create a new prototype for iphone 6.

Referring to:
Screen Sizes
iphone 6 is 375px
Your design is 320px wide

375 / 320 = 1.171875

Set the initial scale value to 1.171875 and the prototype will scale up to the width of the iphone 6

Hope this helps

1 Like
5

Hi Stunews,

That does scale it well for the iPhone 6. I removed the Maximum Scale setting to get it to render properly on iPhone 6. This approach makes the layout too large for the iPhone 5, though. I don’t mind having two different URLs for the iPhone 5 and iPhone 6. It would have been nice to have it automatically scale for each device, but this is a usable workaround.

Cheers,

John

6

hey no problems.

Is it scrolling OK? It’s a bit of a hack. The way it scales the height of widgets is also is a little unhelpful, as it wouldn’t do that in the wild, but at least it’s something you can test with…

7

Everything seems to work fine. I quickly tested on an iPhone 6 at normal resolution.

8

Hey all,

It sounds like you found a solution that works for you, but I thought I’d add a little note here. If you didn’t want to use separate URLs you could set up Adaptive View breakpoints: less than or equal to 375 and less than or equal to 320. Sure, you’d have to do some editing, but you’d be able to distribute one URL.

Also the width/height ratio for the iPhone 5 and 6–while not identical–are pretty close. Have you tried setting the viewport tag width to 375 and then clearing the “Initial Scale” field completely–i.e. so it’s blank? Here’s how that might look. Try loading on both devices:

See it live!

Thought it might be helpful!

1 Like
9

Hi All,

Recently someone had asked me how would you design web experiences for iPhone 5/5C/5S, 6, and 6+ at the same time in Axure. I gave it some thought and was able to come up with some solutions. Apologies for the long email and hope some of you find this helpful.

Possible Solutions:

i. Solution 1 (2nd best)

  1. Use Adaptive views with 320x568 as your Base (for 5/5c/5S).
  2. Your 6 view will be at 375x667 and 6+ at 414x736
  3. Your layout in axure will use the same dimensions for the content.
  4. The viewport will be set to device-width with initial scale to 1.0

NOTES: assumption is that you are not dealing with comps/imagery and only vector widgets since pixels are mapped to points 1-to-1.

ii. Solution 2 (best solution if dealing with comps/imagery)

  1. Use adaptive views withe 640x1136 as your Base (for 5/5c/5S)
  2. Your 6 view will be at 750x1334 and 6+ at 818x1472. NOTE that the 6+ content is laid at retina (x2) and not x3 so that in the viewport we can use one factor of scaling across all views.
  3. Your layout in axure will use the same dimension for the content (at retina)
  4. The viewport will be set to device-width but initial scale will be at 0.5 since 2 pixels will fit in 1 point.

NOTES: This will work well for comps and standardizes the scaling factor across all 3 resolutions.

iii. Solution 3 (worst solution because of the amount of rework + no flexibility in varying UX across views)

  1. Don’t use adaptive views. Use a layout of 320x568.
  2. For each of the other two form factors, 6 and 6+, manually recalculate the scaling for the viewport and the resizing of the content. For example

a. if showing on 6:

  • use device-width for viewport
  • set scaling to 375/320 = 1.171875, however if you do 667/568 you get = 1.174295 or different values for width and height. Thus, 568 * 1.171875 (one factor for both width and height) = 666 which is != 667. thus to normalize do 667/1.1.171875 = 569 and resize the content height in the proto from 568 to 569.

b. if showing on 6+

  • use device-width for viewport
  • set scaling to 414/320 = 1.29375, however if you do 736/568 you get = 1.29577 or different values for height and width. Thus, 568 * 1.29375 (one factor for both width and height) = 735 which is != 736. thus to normalize do 736/1.29375 = 569 and resize the content height in the proto from 568 to 569.

Supposedly 5/6/6+ have aspect ratio of 16:9 but as you can see from above there are small differences. If you are comfortable with 1px gaps, simply use the existing content at 320x568 and 1.171875 scaling factor for 6 and 1.29375 for 6+. Please check the math since I am only human :slight_smile:

If your head has not exploded yet, links for resolution and screen sizes:
The Ultimate Guide To iPhone Resolutions
iOS Resolution Reference - iPad, iPhone, and iPod Touch resolution, aspect ratios, icons sizes, and much more for iOS6 and iOS7. Just added iPhone 6 and iPhone 6+, Apple Watch coming soon

light_forger

11 Likes
10

Hi Svet - thanks, this is exactly what I was asking about at the training that you were part of in November in Chicago.

1 Like
11

That’s an incredible amount of detail. Thanks, Svetlin.

Firstly, do you often get the requirement to produce a prototype that works for each of these devices? Maintaining/iterating these designs must be difficult, or do you work in one design and then create the remainder of the views when you have locked the layout down?

Secondly, do you often find that layout differs between these 3 views you describe for iphone?
I tend to just do one layout for phones, with the assumption is that it will be converted by the developers into percentages, and applied to the range of phone devices as indicated by the breakpoints.
If there’s a requirement to generate a prototype for a specific device I have a way of doing this, but I don’t worry about the retina vs non-retina rendering of images - for me, that’s for the live implementation, and something for the dev team to figure out :slight_smile:

1 Like
12

Hey Jkania and Stuart,

Jkania, no problem. Thank you for attending the workshop. You can see how this explanation would have easily taken another 30 minutes to explain :slight_smile:

Stu, I am assuming all the inquiries are pointed to me.

  1. It varies by project really. Often times, I work on native apps which better yield to having separate prototypes (separate .rps) rather than one adaptive one. Since many of these are of very high interactive fidelity, having the separate prototypes is an added bonus: easier to iterate without fearing things breaking.

  2. As for the 3 different views, I find that the larger resolutions allow for different interactions and more UI details to be shown. A simple example is comparing the Facebook experience on iPhone 5 and say Android Galaxy. All OS-specific chrome aside, the Galaxy provides much more detail in your News feed. At my current employer, I typically design similarly to you: one breakpoint, but that’s not to say that there are opportunities for adding value in the other breakpoints.

In regards to the images, it really will vary by company culture and its workflow process. Often times I am responsible for visual design, but in other teams/companies that is handled by separate teams. I have known UX colleagues to refactor their prototypes with comps and adding hotspots as a separate iteration of the design process. Nonetheless, knowing about pixel density and retina is key for every UXer doing mobile work :slight_smile:

light_forger

1 Like
13

This information has worked brilliantly to get my prototypes looking wonderfully sharp on the iPhones, but dare I ask if there’s a way I can use the same prototype and have it export to scale correctly on Android phones? Using the settings above it gets close, but doesn’t scale quite right.

1 Like
14

Hey rknickme,

Technically you can but you will most likely have to some extra work since the aspect ratios an iPhone and Android won’t probably match (can’t simply use the same scaling factor for width and height).

you will need to do some manual resizing of content on at least one dimension (width or height). Read my comments for solution 3 in post 01-26-2015, 08:14 AM.

Also check out stunews’ answers here: Scaling issue on mobile

light_forger

1 Like
15

This sounds like a feature request opportunity for BETA RP 8. Anyone know how to do that. Make a feature request? I am using BETA 8 and it is nice, but I am thinking of all kinds of additions that would make our designs even more useful in prototype.

16

If you specifically want to make a feature request for the 8.0 beta, you can make a post in the relevant 8.0 beta subforum that contains the details of your request. If you add “Feature Request” to the title then that will help it to stand out more among the bugs and other posts that are in the 8.0 forum. There is also a “Feature Request” subforum that you can post to, and our product management team checks that as well.

1 Like
17

Fantastic! Thanks.

18

I followed the viewport scaling suggestions as mentioned above and in Axure Share app my wireframe built to 320px wide does scale to 414px…however I notice that there is a horizontal scroll that is activated when it should not be. It seems that the empty space to the right of the initial design is still there even though it’s scaled. Any suggestions?

19

Hi guys/girls
been a while since I’ve done this, and I’m having a brain freeze - can’t get my responsive prototype (320 breakpoint) to work on my iPhone 6, I keep getting the desktop version!

I’ve tried setting width to ‘device-width’ and initial scale to 1.171875, and I’ve tried setting width to 375 and leaving initial scale blank, and nothing seems to work.

Anyone any ideas? Beats the hell out of me why Axure doesn’t just have radio buttons for popular phone models and you just select the one you want to export the prototype for - would save a ton of faffing around… TIA

1 Like
20

Hi,
What approach you are using? Mobile first or Desktop first.
I think you are using Desktop approach. Need to check the Base and Where you are inheriting from.

Thanks,
Vikram