I found my solution here:
So until Sparkle can actually create a fully, clean/separate design between breakpoints this is the only way to make everything fully independent from each other’s device settings.
SEO implications aside, this is the most logical and elegant solution - for now.
@producerguyaz, What are you trying to achieve? Your text is shared across all the devices but if you want to make styling totally independent per device then that styled image we talked about… you remove it by unticking “Arrange / Show on this device” and in place create your image for mobile with that different style you mentioned. Once done you need to go back to your desktop device and click on the mobile image you just created (it will show up on the desktop device) and do the same thing - unticking “Arrange / Show on this device”. That way you can make your mobile device look totally different in layout and style to your desktop device.
No need for re-directs.
Maybe this can further help - https://sparkleapp.com/docs/devices.html
And maybe this - https://youtu.be/Bj3fpBHLJeQ
Appreciate the suggestions, but the only way I can accomplish what I want within Sparkle is a completely separate sub-site. I’m hoping V3 makes this easier/simpler.
I reread your suggestion I must have misunderstood it before. This solution might exactly solve my problem. unfortunately I can’t get to my system until Sunday to test it but this might just save me from having to duplicate work.
That feature show on this device and how it works is confusing on its face, I’m going to have to play with it more to fully understand it.
Nope, it definitely doesn’t work the way described. The design settings remain connected and don’t stay separated at all.
I think I’ve finally run up against the wall of what Sparkle is incapable of, which means a major work-around or, rebuilding it elsewhere. Too much work just to get something simple done, but it’s not acting “responsive” it’s just scaling between breakpoints. Not the same thing and it’s becoming glaringly obvious.
What doesn’t work as describe? And described where?
Look at my earlier posts in this thread; I’m taking too much time trying to figure this out. I need to get back to creating content not finding workarounds.
@producerguyaz I too am a content creator. And as content creators we have to build for the device, not the breakpoint, where we make money. For you it’s desktop and for me it’s mobile (iPhones/iPads). That means you design, build, and publish for desktop before you ever look at any other device. Once that’s done you can go back to the others.
I build websites for myself and clients, but I don’t make money off websites. I make my money creating content. For me a website is wrapping/packaging to tell a story with content.
There is great confusion between breakpoints and devices and Sparkle adds to the confusion because it’s mixes devices and breakpoints. A single device has multiple breakpoints. To see this in action, open a website in Safari and load the Develop Menu Responsive Design Mode. What you see is icons of devices. Click on a device, multiple times, and you rotate through the breakpoints each device can display.
But there is more to the story. With Apple’s recent devices and the current version of Safari (iOS and iPadOS 14), Safari chooses the breakpoint for how the user is viewing content, regardless of how the site is designed or how the web server offers it. Safari does this on device with Machine Learning. This is most evident on the iPad Pro.
Sparkle’s great strength of designing for breakpoints is marred by its workflow implementation. What we designers need is the ability to have at least one other breakpoint show side-by-side with whichever breakpoint we are currently building. A a reference, in Apple’s Final Cut Pro X I can view multiple camera angles simultaneously. Toggling between breakpoint views in Sparkle disrupts the creative process.
So the takeaway is to design websites that will forcibly display different per device we have to incur the extra workload to build separate websites. We can then use Sparkle to target breakpoints.
Settings such as drop shadows and animation apply the same to all device types that you have active.
Option 1
Keep your design choices subtle and test them by previewing each device until you are satisfied across the board of devices that you are using.
Option 2
Design for one device type, hide those elements on your other device types and create new ones with the styling that you want and hide those on the other device types.
You can shorten the ‘create new ones’ with some clever copy and paste/hide on this device combinations. Once the penny drops, it becomes a very fast process.
What I have come to learn is that Sparkle is at best a “flexible” designer, not “responsive”. And there is a massive difference.
When Sparkle adjusts for a breakpoint all it does is scale up or down, it does not actually realign, automatically resize or repost text content period which is why you have to physically rebuild it for each break point.
I made the switch to Sparkle from WiX because for whatever reason the technology and wix became unreliable and therefore unusable. I never really had to concern myself with so-called breakpoints because the web interface design took care of that on the back end. You could easily preview between both and their software made all those changes in the background.
So when I started using Sparkle and had to manually deal with these breakpoints and having now used other tools to redesign my site it is obvious what the true difference is. And Sparkle should not be ever be considered “responsive”, not in its current version.
Not being a code monkey I had an expert take a look at the code in Sparkle from my only published site, and he showed me the difference between what Sparkle creates and what other builders create. Sparkles’ code is a mess.
If all I had to concern myself with was a desktop site then Sparkle would be the absolute perfect tool, hands down. There’d be no competition. But I’d be a fool to only build a desktop site.
Sparkle sure turned out to be a Godsend for getting away from WiX, but going forward there are other tools that actually do the job a responsive builder and that’s where I’m going.
I hope development continues and hope version 3 is everything we all hope it will be.
Sorry your expert friend is wrong.
There’s lots of prejudice among web coders against visual website builders, mostly due to frontpage and similar tools (20 years ago). Happy to be challenged about Sparkle’s code.
You don’t need to justify your choices anyway, there’s many tools for many needs.
@producerguyaz, I understand each to their own, but having been in the web design game for now a very long time and fully being aware of the difference between fixed width (Sparkle) and fluid width design (mostly using bootstrap) I can say that Sparkle has a fairly good footing!
I also was annal about code in my earlier days until I got that even Google went against their own guidelines in that if you had a table generated site you will be handicapped - well I have come across many in the last three years and that is not the case! So what is perfect code? And then compare Sparkle’s code against Squarespace and even WordPress with the convoluted plugins and in my eyes that is an absolute mess! And then we have the issue of the software guesstimating how tablet and mobile should look and that also comes across as a mess with text hardly legible in most of the cases! 
I know Sparkle hasn’t work for you but your take on it is harsh, knowing that the big corporate players are also using fixed width design to create their websites allowing them greater control over the layout per breakpoint instead of the software guesstimating it!
We have been taught the faster the better - just pump them out! The web is looking full of boxed-styled websites because the software is doing most of the work for us designers - just a lazy take on crafting a website nowadays… so bagging out a platform that allows for website craftsmanship is NOT COOL!
Us designers are here to bring life to a clients’ visions and I for one will use a platform that will allow that instead of a “fast spit me it out platform” that confines and restricts me into box styles parameters being far from creative, and instead pumping out a commodity!!!
I have been reading these ongoing discussions here on the Sparkle community … about whether Sparkle being a “responsive” or “not responsive” website builder.
I didn’t feel like joining, because honestly, I thought it was becoming increasingly tiring …
Often because people use the term “responsive” in the wrong way. It has been explained here many times before – by various community members – what “responsive” actually means. Thank you for that.
But these discussions seem to be endless.
I am not a “code expert” at all, I just know a little bit about HTML code from my early days with Adobe GoLive. Sparkle’s code is very well structured, in my humble opinion, compared to the mess that other software creates.
Yes, with Sparkle you have to rearrange your website for a different device size.
But … that is actually the strength of Sparkle and the beauty of Sparkle … because it gives us freedom!!!
You can use other tools, yes, they do it all “automatically” and “fluid”. But then, that’s exactly how your website looks … “automatically generated” like millions of indistinguishable websites out there. Nothing wrong with that. But that’s not what I am looking for …
So yes, Sparkle isn’t for everybody … and it doesn’t have to be. But for some of us, it is a marvellous and helpful tool to build creative websites.
Gotta apologize to all, my frustration with trying to get things working right has overflowed. The closer I get to my deadline the more frantic my mind gets.
Sparkle works the way my swiss-cheese brains works; I can literally build a page precisely the way I see it in my mind with almost no limitation. The biggest issue I’m having is not clearly understanding HOW to make the WIDE and MOBILE pages behave and look properly.
The whole concept that you design for one, adjust the other and not affect the original never seems to work as described.
My primary site - which is not published yet - looks fantastic, exactly the way I want it. But it’s the translation to MOBILE that always trips me up.
For now if I have to build two completely different sites as described in this earlier thread, so be it. I’m wasting more time trying to rebuild it elsewhere. (ugh)
I’m sure when I get this figured out I’ll be sharing what I’ve learned, just gotta get there.
If you’ve got it right for wide can you then go to mobile and build it just the way you want? What you do with the mobile version shouldn’t affect the wide??
I’ve found you only strike trouble if you start copy and pasting and such, but it all seems to come good if you just work with what Sparkle gives you as the mobile version and just tweak what’s there to the way you want it. More major changes in the mobile version can do some weird stuff but if you take it bit by bit it is as Duncan would say MANAGEABLE???
It’s not quite as simple as that, otherwise I wouldn’t be so frustrated. You can size/move elements without issue, mostly, but “effects” such as drop-shadows and outer lines are where things get dicey, and that’s the major issue.
If I want text and other elements to have totally separate settings between breakpoints then I have to build a sub-site. Otherwise drop-shadow settings for WIDE are totally inappropriate for MOBILE. It’s all covered in previous posts. Right now I have to figure out the best workaround for all this and fast.
Yeah I don’t use special effects but with text if necessary I change size etc to what looks okay on mobile and do the button on the text style that makes it the mobile version, and I think one time I was wrangling a drop shadow and I just adjusted it for mobile, but hey maybe that affected the desktop drop shadow like you say, anyway I dropped it, but can’t you hide Sparkle’s mobile drop shadow and make a new thing in mobile and hide the mobile thing in the wide page?? I haven’t bothered with all that but from what everyone says that’s what you do, and I suppose you could hide everything and make a new mobile page as long as you hide all the new mobile stuff in the wide page?? You would probably want to jump to and fro all the time to keep track of what you are hiding and not hiding.
Found my solution - and no, it’s not for everyone nor is it the supposed “right” way to handle this. But based on Sparkles’ current limitations it’s the best for now. And surprisingly it’s elegantly simple.
(FYI: The current version of Firefox for Android is horrible and never displays properly, even “big brand” sites. I’ve been testing on Chrome and on another phone Safari.)
Keep in mind I have very specific needs for my site/s:
The issues that had to be overcome:
The elegant solution: Build ONLY for WIDE-PC and nothing else, publish that way. Right, that goes against all the advice and even the instructions for Sparkle. But the results are absolutely perfect.
What happens is the browsers (current versions of all) automatically scale to fit the screen. No wasted edge-space on left-right.
I have two types of videos I use in my design:
Using this eliminates the problem of effects not staying separated between breakpoints and keeps every page at it’s fullest width regardless of device type.
For me this is the perfect solution, and works elegantly with Sparkles “flexible-size” coding rather than having elements pushed all around like in BLOCS.
Now I’ll just have to hope browser tech doesn’t change drastically in the next few months before I can hire a real code-monkey to take over web duties. (whew… sighs of relief)
extremely helpful.