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.
Adding a Breakpoint
In this tutorial, we’ll design two wireframes: iPhone Xs and a custom size. In the Properties Panel, click Add new adaptive version and choose your breakpoint.
Copying Content between Breakpoints
If you want to add another adaptive version, there's an option to copy all elements from already existing breakpoints. All you have to do is check the checkbox and choose the breakpoint you want to copy your content from in the dropdown.
All elements will appear in the new breakpoint. However, their size will not adjusted to the new breakpoint yet — resize them manually to fit the canvas.
Every new breakpoint will have a tab right above the canvas and you can switch between them.
Use the Preview mode to display and view designs together and see how they adapt to different screen resolutions. In the preview mode, you can switch between different resolutions in the drop-down list right next to the sitemap at the top left 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.
Previewing on Mobile
When designing for mobile it's best to install the UXPin Mirror on your iOS or Android device and scan the QR code directly from the Editor to open the prototype on your device.
If you don’t have a mobile device at hand, you can 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.
You can remove a breakpoints in its Properties Panel. You’ll see its name and a trash icon next to it.
Deleting a breakpoint removes it from all pages of your prototype.