Designing a responsive website doesn’t mean you have to do several separate projects and switch between them to show how your site will behave in different screen resolutions. In UXPin it’s possible to simulate responsiveness in one prototype!
An adaptive breakpoint is a defined browser’s width that allows for different layouts to appear when the browser is within the declared width.
In consequence, a breakpoint influences the size of canvas you design in. For instance, iPhone Xs breakpoint (375 x 812 px) will only let you design within a375px wide space which is 812 px long.
UXPin has preset breakpoints for:
- HD websites 1920 px
- Standard websites 992 px
- Wide websites 1224 px
- iPhone Xs 375 x 812 px
- iPhone Xs 414 x 896 px
- iPhone 8 375 x 667 px
- iPhone 8 Plus 414 x 736 px
- iPhone SE 320 x 568 px
- iPad 768×1024 px
- iPad Pro 10.5” 834 x 1112 px
- iPad Pro 11” 834 x 1194 px
- iPad Pro 12.9” 1024 X 1366 px
- Apple Watch 38mm 272 x 340 px
- Apple Watch 40mm 324 x 394 px
- Apple Watch 42mm 312 x 390 px
- Apple Watch 44mm 368 x 448 px
- Apple TV 1920 x 1080 px
- Android phone 360×640 px
- Pixel 2 411 x 731 px
- Pixel 2 XL 411 x 823
- Galaxy S9 360 x 740
- Nexus 7 600 x 1280
- Nexus 10 800 x 1280
You can also define your own custom breakpoints for any resolution you might need.
In this tutorial, we’ll design two wireframes: one for iPhone Xs, and one of a custom size.
Look at the right panel of the editor. At the bottom of the Canvas size section in the Properties Panel, you’ll see a button Add new adaptive version. Click it, pick an appropriate breakpoint from a dropdown list and click ‘Add breakpoint’.
Next, put some elements on the canvas and adjust their size to the breakpoint you have chosen.
Now, I’d like to create a new custom breakpoint, but I don’t want to work on my design from scratch. There’s a small trick that we can use!
Click the ‘Add new adaptive version’ button in the Properties Panel. Pick ‘custom size’ from the dropdown. Next, define its size and name. Last but not least, check ‘I want to copy all elements from’ option and pick the breakpoint from which the content should be copied.
You’ll see that all elements you have used in iPhone breakpoint appear in a custom breakpoint. Their size is not adjusted to the new breakpoint yet, so just resize them manually to fit the canvas.
Once adaptive breakpoints are set up, you will see their corresponding tabs right above the canvas. You can use them to switch between particular views in the editor.
The best way to display designs together and see how they adapt to different screen resolutions is to use the ‘Preview’ feature. The preview button is placed above your breakpoint tabs.
In the preview mode, you can switch between different resolutions manually – just click the drop down near the sitemap at the right top corner of the preview. The ‘Auto set breakpoints’ mode is enabled by default and it helps to simulate how your design adapts to different browser sizes.
Obviously, if you’re designing a mobile app, you can open the preview link on your mobile device without any trouble and test it in a “natural environment”. You can also install the UXPin Mirror on your iOS or Android device and scan a QR code to open the prototype.
If you don’t have a mobile device at hand, you can easily add a device frame to your prototype in the preview. In the Share menu, you can also choose whether to show the device frame when sharing a preview link.
If you decide you don’t need a particular breakpoint, you can remove it. Just click the tab with your breakpoint. In the Properties Panel, you’ll see its name and a trash icon next to it. But be careful — once you delete a breakpoint, it will be deleted from all pages of your prototype.
Ready to try it in UXPin? Log in to the app!