A New Trick to Help with Breakpoints - I think

I’m not a design expert so this have already been discussed but…

So far as I’ve been building with Sparkle I’ve had ALL the breakpoints/Device Types selected that I think are important. I’d build in the largest format, WIDE PC, then switch to the other sizes and start resizing/moving/re-arranging etc to fit.

But usually switching to the other device sizes the elements are a big mess and it’s like I’m having to redesign the entire site all over again. But, I think I’ve stumbled onto a quick and easy “fix” for this:

Now I’m only building in WIDE PC device and leaving all others unchecked. I’ll wait until I get to a point where I think it site is finished, THEN I’ll turn on the other device-sizes and instead of a jumbled mess things are mostly exactly where they need to be, just needing resizing for mobile.

This is a major time-saver.

Again I’m new to Sparkle and not an expert designer so maybe this is how things are supposed to be done anyway, but it’s not what I’ve been doing and others seem to be on the previous path, where they’re trying to “build” for every device-size simultaneously.

This is the only major improvement that BLOCS has over Sparkle, is that it automatically makes this resizing for you. But, BLOCS is really hard to learn and I didn’t have time to dig into it. Maybe Sparkle 3 will improve on this workflow.

Hope this helps others.

1 Like

That’s actually what the documentation suggests:

https://sparkleapp.com/docs/devices.html

1 Like

Pfftt… that’s what you get for trying to learn new software on-the-fly. Hopefully others who are also doing it “backwards” will get this and go, “ohhh…yeah!” haha

Well I really really would love for the responsive aspect of Sparkle to be more self explanatory. Unfortunately it’s not right now. We have work to do!

I have done the same mistake! So I feel the pain.
One question, is it possible for sparkle to save all the resizing once a site is done in desktop and after all the changes and resizing for the different devices , and then uncheck the devices to make a major change in desktop or other device? and then add the devices again but retaining the resizing and styles.
My question is from experience, since I needed to make many changes in the 320 device, so I unchecked all the other devices, and when I added them back, all the text styles were resized but not with the size I previously used .
I love the app by the way… and I am also learning to use it just i am learning the hard way :cry:
I have been watching the training videos and read and reread the documentation and this board
Thanks for your help!!

Does your procedure retain all the anchor points in the correct place? Mine ended up a complete mess on mobile devices, especially. And correcting an anchor point for one device alters it for the others. So you can go round in circles. Also, italics fonts need to be resized on the different devices, often with the same problem.

Sounds like @DavidS that you have not set up your font styles to start with allowing you to define them per breakpoint, aka device.

I would recommend you start with the one device first and introduce all your anchor points first and not introduce them randomly per device which sounds what you are doing…

1 Like