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 5/5s breakpoint (320×568 px) will only let you design within a 320px wide space which is 568 px long.
UXPin has preset breakpoints for:
- iPhone 5/5s (portrait) 320×568 px
- iPhone 5/5s (landscape) 568×320 px
- iPhone 6 (portrait) 375×667 px
- iPhone 6 (landscape) 667×375 px
- iPhone 6 Plus (portrait) 414×736 px
- iPhone 6 Plus (landscape) 736×414 px
- iPad (portrait) 768×1024 px
- iPad (landscape) 1024×768 px
- Android phone (portrait) 360×640 px
- Android phone (landscape) 640×360 px
- Android tablet (portrait) 800×1280 px
- Android tablet (landscape) 1280×800 px
- Standard websites 992 px
- Wide websites 1224 px
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 6 portrait, and one of a custom size.
Look at the right panel of the editor. At the bottom of the “Canvas properties” section, 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 right panel of the editor. 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”.
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 right 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!