A Sparkle Wishlist

Sparkle suggestion
1

First, I’d like to say that Sparkle is a very impressive product. I don’t think most people realize just how complex something like this is, and maintaining the pace and stamina of development along with support on a daily basis can’t be easy. Kudos to the development team.

Here a list of missing features that I run into quite frequently, in hopes that the information is useful for the development team. The first 10 may be on the easier side to implement. The last 4 are perhaps more design / development intensive.

  1. Lock option for Layout Blocks
  2. The ability to disable the feature where Layout Blocks automatically move around to make space
  3. When dragging something off the top or bottom edge of the screen, the scrolling is very fast. Yet, at the same time, other users are saying it is very slow. To make this work well for everyone, I think the scroll rate should be sensitive to how far off the screen the item is.
  4. Add “duplicate” to context menu
  5. Add layer movement to context menu (forward, backward, etc)
  6. Add context menu to Layers panel. Should be about the same as context menu in main panel
  7. Option so that delayed animations wait for page load before starting timer ( maybe this is a bug?)
  8. “Reload” button for images, in addition to existing “Replace…” button.
  9. Stronger built-in Pattern support: I get the impression that many of the built-in Patterns are intended to be multiplied with a color. It would be nice if that color could be selected straight from the Styles panel rather than layering a Box on top, setting a blend mode, etc.
  10. Stronger Undo support. At the very least, it we be nice if moving elements could be undone.
  11. Integrated Hype support. IDK what this looks like, but the other guys have it and it sounds nice. I think there are also some strategic benefits to Sparkle as well.
  12. Shared styles for Boxes and perhaps other elements, like there is for Text.
  13. Support for adding things into Boxes, similar to Groups. (The pattern of creating a Group with a Box at the bottom is too common.)
  14. Better navigation for complex pages.

To expand a bit on wish 14: Working with elements on complex pages with lots of layering can get quite confusing. Sparkle could really set itself apart from other products by offering something innovative to address this issue. For example, maybe a 2.5D minimap scrollbar? Or maybe a “wireframe” edit mode that you could quickly toggle?

2 Likes
2

Hello @rick,

thanks for the many suggestions. About things that smell like bugs:

Where/how is this problem visible?

Undo should always undo moving elements. If it doesn’t that’s certainly a bug, but I’m not aware where this is the case. Could you elaborate/clarify?

Thanks.

3

Hi Duncan!

Where/how is this problem visible?

I’ve noticed it when there is something big at the top of the page, like a movie, combined with delayed animations nearby. Here is an example.

Sometimes the letter animations for “Stories,” which should spell out like it is being typed, don’t work correctly. When the issue occurs, they appear all at once, as if the browser suddenly has awoken from loading the video and realizes that all the timers for the letters have expired.

Along similar lines, video with “Start Automatically” checked will also start playing before the page is fully loaded. For example, on this page, the eye wink sometimes happens before the camera image on top is loaded.

Undo should always undo moving elements. If it doesn’t that’s certainly a bug, but I’m not aware where this is the case. Could you elaborate/clarify?

It seems that I can no longer reproduce the scenarios I was experiencing when I wrote this item, even though they were very consistent. (I’ve rebooted Sparkle and my machine since then).

Hope that helps!

1 Like
4

I was never able to trigger the issue with the stories letter animation. It might relate to the exact browser window height (due to “when visible” using that), and to your bandwidth (due to the movie transfer time). Or perhaps something about the exact browser you are using (and if it’s Safari, also the macOS version).

I did see some glitch with the video, but I don’t think what I saw is the video starting before the page is loaded, rather it looked like a the video flickering shortly when the video is in the browser cache. I’m not quite sure how this could be fixed.

5

Thank you for trying to repro animation issue. I agree that a lot of things could be involved and it would be difficult to address without a more consistent repro.

Just for my clarification: Are you saying that delayed animations should not start until the page is fully loaded? I can keep my eyes open for a more consistent example, if this is the case. Otherwise, this is still a feature I would like to see some day (same with video and Lotties).

Regarding the undo issue: I did run into this again yesterday. It felt like Sparkle was in a state where undo didn’t work for anything-- all I got is an error chirp. It works fine after a restart. If there is something you would like me to try next time I see it, please let me know. I tend to keep Sparkle open for very long periods, and I wonder if it is related.

6

Looks like the Undo menu item is getting disabled. I cant’ figure out why it is happening or how to re-enable it again (aside from restarting).

image
image239×511 60.8 KB

7

This shouldn’t happen but I don’t know what triggers it. If you could figure out in what circumstance undo is disabled that would be super helpful.

8

This is my most desired features “Grouping lock to mobile and desktop as well as hide with toggle hide not on this device ” Group lock device areas so when selecting whole areas to copy to anther webpage or section easily the whole area comes with it. Hiding areas such as a fade for for parts or toggle on or off not to show on this device parts so they do not distract from design.

2 Likes
9

If I’ve understood your wish list correctly, much of what you would like is already available in Sparkle. Grouping is already part of the app. You also have Layout blocks that essentially group whole sections of the page. If you create a mobile version of the page, the layout blocks get transferred to the mobile layout. If you then want to transfer those layout blocks to another project, you can do so with copy and paste. The thing to note is if you want to copy both the desktop and mobile version, your new project should have the mobile device option set up before you copy and paste the block. This will ensure that both layouts get copied. If you don’t do that, only the desktop variant will be copied to the new project and you will have to create the mobile variant again.

You can also use Sparkle’s element hiding option to hide page content that isn’t to be visible on a device variant of the page. It’s the ‘eye’ icon at the top left of the canvas interface.

1 Like
10

I guess was not clear enough I want to completely isolate or hide block layers maybe in a container to hide visible areas or working area between mobile and desktop. And also lock them in place so they do not move this is my biggest peave. to completely hiding to mobile and desktop as well as hide with toggle hide not on this device instead in a container not showing or it is faded with a odd colour and can not be selected for working on without unlocking but can still be selected to copy to a new page. I find parts of desktop just in the way when working on mobile and vise versa

2 Likes
11

This. I have this same complaint. I am so frustrated with this. You get things perfect on the desktop site. Then add the phone site and scale things down to fit and it completely destroys the desktop site. I’ve started from scratch 3 times and am about ready to give up completely. I want my actions on one device layout to be independent of any other. It’s much easier to do 3 different layouts than to struggle with this.

In “Custom Layout” why can’t Sparkle ignore what I do to elements on the phone site in the desktop site?

12

That’s just not how web content works, and doing multiple independent layouts would make the page triplicate in size. While there are some things that should be explained better within Sparkle, it’s also possible to get a handle of how Sparkle does things, and you get the benefits of a fully customizable website that is also efficient.

1 Like
13

Duncan,
Thanks for the feedback, I’ll keep trying to figure it out.

14

@BlackChrome, the best way to understand is to keep the following in mind when creating a Sparkle website…

  • Sparkle is a website development platform that uses fixed-width responsive breakpoints
  • You start creating a Sparkle website with the one Device
  • When adding Device(s) all the content (elements, images, buttons, embed code, etc…) are shared across the Device(s), and of course on the mobile device you will need to adjust the layout, images, text box sizings, and text sizings
  • After adding Device(s) you need to keep this in mind… Adding elements to the mobile Device will have them appear on all other Devices. So you will need to go to all the other Device(s) and hide the introduced elements you introduced on mobile.

To a great extend all elements and Device layouts are independent of each added Device. They share the content originally created, but as you make changes to it they do not alter Device(s) layouts. This can only happen when you have introduced new elements (text, image, buttons, etc, etc…) on a Device(s) and have not hidden them on the other Device(s).

15

I totally agree with @FlaminFig, you might look into the basics of “Responsive Webdesign”, that might help you understand how that works.

16

FlaminFig & MiWe,

I’m familiar with fixed-width breakpoints, I am coming to Sparkle from Adobe Muse. I’ve followed all of those steps, repeatedly.

I just made a quick new, generic version from scratch and things seem to be working as they should. I thought my bg svgs would be a problem but they scale down just fine. I think my culprit is these layout blocks. They are causing chaos when I move things in one layout and then switch to the other.

I had odd gallery caption issues that went away when I trashed and re-did them all, I suspect starting from scratch again, after the updates and NOT using layout blocks is the way to go.

Thank you all for input, I very much appreciate it. I’ll keep trying.

1 Like
17

Yes Layout Blocks at times can do funny things, but please, if that is the issue please let @duncan know by explaining (possibly through a screencast) and sending across your project file.

Also sometimes if you have introduced elements on the mobile Device and hidden them on the other Devices it is well worth checking if on the other Devices the elements are not enormous. At times they can have strange things happen if they are enormous in size.

18

Will do. I’ll keep you all updated as I finish/hit another wall.

19

Hi @BlackChrome,
I suspect many feel your frustration on getting the layouts to coordinate properly. But I’ve found Layout Blocks to be indispensable. It took some patience and testing but now I prefer them for their convenience and ease. Through Trial-and-Error (thus, maybe erroneous) I came up with four tips and developed a series of associated steps for my own work.

(FYI: I’ve not watched the video on Layout Blocks yet because it came well after I began using them. It may include more accurate/better tips.)

Tip 1: Layout Blocks (LoB) have a hierarchy that can be seen in the Layers. A new LoB enters as top layer and pushes existing LoBs down. The hierarchy is relative to the TOP edge (I believe), meaning LoBs can overlap without automatic repositioning as long as the top remains below a higher level LoB.

Tip 2: Dragging to resize and reposition moves lower Layout Blocks. However, entering numbers in the Inspector minimises impact on other blocks. That means, a LoB’s position and height can be adjusted without moving those lower in the page, within some limits (see Tip 1).

Tip 3: Having ‘perfected’ a page, ASSUME the blocks could reposition. Prepare for it by recording LoB’s locations/heights. If needed, repositioning happens quickly by entering numbers in the Inspector (see Tip 2).

Tip 4: LoBs are mostly independent across Custom sizes UNTIL you exceed a limit.
–I’m still learning some of the exact limits but they include
a) changing hierarchical order (planned or not),
b) adding/altering a multi-paged element (Footer sizes or “move with bottom” are my usual culprits),
c) dragging to change the size, and
d) probably a few more.

With these tips, I adopted a stepwise strategy that lessens and usually (mostly) eliminates the frustrations around layouts and break points. It’s become an “Aw, man” and no longer an “Oh! Sh**!!” :wink:

  1. Create a page of whichever size (usually the one most users will encounter)
    a) Note relative sizes and positions of key elements
    –Easiest to open Preview on the target device and/or adjust width of Safari to the target size.
    b) Note the Layout Block’s pixel locations and heights
    –This is KEY when using Layout Blocks especially because they occasionally move.
  2. Convert the page to the other Custom sizes
  3. For each Custom, position elements, adjust fonts, alter sizes, etc.
    a) Repeat 1.b) for each
  4. Return to the template page; use the notes to reposition LoBs (if needed)
  5. Duplicate the page. All Custom sizes are created too.
    a) Now, when you change an element in one Custom, it is correctly altered on the others
    b) HOWEVER, changing an LoB position or size does NOT change it on the other Customs (unless you hit a limit) and may need to adjust LoBs on each Custom (see Tip 4).
  6. Confirm the positions of LoBs on all Customs whenever an LoB is altered.

And I saw in the latest update that popups can now be embedded within Layout Blocks (or something like that). I think Blocks will become even more powerful. (But I need to figure out what exactly this means. :slight_smile:)

Keep at it. Sparkle’s development has been fabulous and with added features regularly. Duncan et al. are highly responsive to suggestions with clear rationale for why “yea/nay.”

Hope the building continues well.

1 Like
20

Regarding tips 2 and 3: If we simply had a “Lock” option for layout blocks like other elements, it would alleviate a lot of this frustration.