How do I set the “base” values to be a 320 breakpoint?
When I set the adaptive views to . . .
Base > 1024 > 1200
my breakpoints fall . . .
320 screen resolution > 1024 content
1024 screen resolution > 320 content
1200 resolution > 1200 content
Example: http://share.axure.com/K4A1EH
Seems I need to tell Axure that the “base” is 320 somehow… but how?
Thanks for any clarification. Driving me crazy!
Hello KaraIA,
You need to do 2 things:
Create your starting content at 320 pixels wide. The Base point is not explicitly created like the other breakpoints. It is automatically assigned based on your originating design.
For the next breakpoints, do the following
Breakpoint 1 triggered at 1024 (with parent Base): Set the width to be >= 321 pixels e.g., 321 <= Breakpoint 1 <= 1024
Breakpoint 2 triggered at 1200 (with parent Breakpoint 2): Set the width to be >= 1025 pixels e.g. 1025 <= Breakpoint 2 <= 1200 (technically infinity since you have not given it an upper bound)
Hope this helps you out!
light_forger
Ah, this did it! Thank you! I was just pulling in the defaults without thinking about what they meant.
Just wanted to post up this example of “mobile first” as described in this thread.
Preview
320BaseAdaptive.rp (49.5 KB)
Hey! I really have troubles with those adaptative views. Having set the views for Mobile First or not, it doesn,t change anything : my iPhone and iPad don’t show me the right views when I look at the prototype on them.
I tried this example Paul posted and it doesn’t work better…
Anybody could help me?
Thanks,
Pass
I’ve been brushing up on my Axure skills lately and have been enjoying some of the newer features, especially the adaptive capabilities. While it’s not perfect, it provides more than enough fidelity to get the UX closer to “good.” 
I like the “mobile first” approach and have found the sample .rp files very helpful. However, one thing I’ve found quite annoying is that the break points are often set so that the page content is obscured as the browser window width decreases or increases. I understand that generally the page is viewed in the context of the device but it seems inelegant. I took the mobile first sample and modified the break points so that content is never obscured by the browser window. There are some additional details included in the .rp.
Adaptive_Mobile-First.rp (53.6 KB)
Lastly, I also had the problem of the page not responding to different view ports. The fix was listed in an earlier post but under Publish > Generate HTML > Mobile/Device set the Initial Scale to 1.0. That fixed it for me.
If the prototype is built Mobile First, there seems to be a problem “Adding” content as the screen size increases. The Unplace From View function is dependent on removing content as the screen size decreases. But with mobile first you start with the least amount of content possible and then add additional supporting content as the screen get larger. Am I missing something obvious?
Hello partners
It is my first contribution and I would like it to revise, I manage several resolutions in accordance with international standards, I hope you like it.
PRUEBA RESPONSIVE DESIGN.rp (205 KB)
Hi all
There have been some really helpful contributions here that have definitely moved my project on, but I’m struggling when trying to view through axshare on an iPhone 6s using the default Safari browser - it just won’t use the base layout, and often seems happy to scale up to the widest one.
Usually I have started with a desktop layout and then scaled down to mobile, this is the first time I’ve started the project the other way round.
So I’m thinking it’s an iPhone problem not necessarily an Axure one, but how can I solve for it? We want to predominantly preview using the iphone, and it’s not defaulting to the right view.
Attached the file I’ve been testing with.
Mobile-first-test.rp (60.9 KB)
Hi tomharle,
Hmm, the output base view from your RP file is correctly loading on our iPhones and various mobile devices, all under 533 pixels wide. Would you mind sharing the exact Axure Share URL you’re using? Were there any changes made since your last project upload? It looks as if the prototype associated with this RP is password protected. Testing the exact URL may be a good next step.
Next, I’d want to make sure that the output sitemap is fully closed out when you’re viewing, instead of simply minimized. From the RP 7 output, tapping the “x” icon in the sitemap would be needed as opposed to tapping the minus (-) symbol.
In addition, can you post a screenshot that shows what you’re seeing on your mobile browser? It sounds as if the rendering is inconsistent, sometimes showing the 533 view and other times showing the 960 view. Are you able to reproduce these in a consistent way?
Let me know what you find!
Thanks Alex, it was the sitemap I think. Seems to work fine now. So simple!
For future reference? Does the way the sitemap collapses to minimized view do something to the way the iPhone browser sets its viewport size?
Hi Tom,
That’s correct–in 7.0, the minimized sitemap can still contribute to the reported width, but the view that’s presented in the output isn’t consistent or something that can be reliably adapted across devices. And so, for version 7.0, if you’d like to view the mobile prototype with an accessible sitemap, minimized, viewing through the Axure Share app may be the route to take:
https://www.axure.com/support/reference/axure-share-mobile-app
Version 8.0 accommodates this workflow a little better and in a more consistent manner. You can feel free to test this out by downloading 8.0, which can be installed in parallel with 7.0, and upload the project to Axure Share from there. Viewing the Axure Share prototype, uploaded from 8.0, will present the expected view while the minimized sitemap is still accessible.
Hope this helps!