Web Dev Tutorials: Macaw & Breakpoints
Macaw & Breakpoints
We’ve talked about Macaw, the design oriented Web Development software, for quite a few times. As I’ve stated in the past, Macaw sometimes feels incomplete. One of the things, the main focus of todays post, that Macaw falls short of is auto resizing your project for multiple different breakpoints.
Getting Started
Of course no matter how hard you search you will see tutorials on resizing normal web pages built through pure HTML. So how do you go about guessing what page sizes to use? You don’t have to because I’m going to tell you! First off, the breakpoints editor is in the top right hand corner of the workspace. Here’s a close-up.
We are going to focus on a few different key break points. Whether you use the built in test browser or your normal web browser you will see the key differences in each sizing change. By default our breakpoint will be 1200px. What we are going to do is change our main default point and add some more. Our main break points will be :
- 1920px
- 1720px
- 1550px
- 1366px
- 1280px
- 950px
- 750px
- 650px
- 540px
- 425px****
Now this is where things will get tedious. 1920px is your primary focus until you are finished placing all materials (text, photos, social badges, etc.). After you are all set with your main breakpoint, you will have to now edit the placements of your project assets as each will shift in different ways depending on the breakpoint.
Our second most important breakpoint will be the 425px. This is because this is our mobile screen breakpoint (I’ve tested this mainly on iPhones). You will have to test out stretching your assets off-screen for this one as well. The workspace for the 425px screen does not seem to be the “true workspace” and requires you to move things around and even off screen in order to make it fit.
After you’ve tested and made sure your website functions on all platforms, you’re all set!
**video tut coming soon**
Originally published at The Rantula.
