After doing web development in Blocs for a year, I’m embarking on an extensive new project and thought it would be a good time to re-examine my workflow and see if perhaps it was time to use a new tool kit. Sparkle came to my attention and I was immediately impressed with how simple and elegant the design aspect of the application is. Over the past week that’s turned into being perplexed that Sparkle makes the complicated so much more design friendly than Blocs, but then conversely makes many simple tasks much more complicated or even impossible at this stage of the programs development.
For example, Sparkle allows for a much more fluid design process, making typography, integration and navigation a breeze. Aligned with Sketch, I finally feel like I have a tool set that “thinks” the way I wish to create. Mechanically though, many of the processes I normally integrate into my work (image roll overs, floating and/or conditionally sticky menu options, toggle features etc.) means hacking Sparkle in ways that aren’t effective or don’t work at all.
Any one out there have a past with Blocs that now uses Sparkle?
we do have a huge list of things we’d like to add to Sparkle, but anything you want to suggest is welcome, it helps us improve our list and prioritize what’s already in it. I think I can kind of understand what you ask, but if you want to detail and make examples we’d love it.
It’s been fascinating to prototype identical projects in Blocs and Sparkle. Sparkle allows for a much more rapid development phase and paired with Sketch, it’s so much more fun to design with. But then when it comes to making the website interactive, the opposite is true; Blocs can be awkward, but allows for some really interesting dynamic integrations while I’ve yet to figure out how to do the same in Sparkle.
Here’s what I’ve yet to be able to implement in Sparkle.
conventional image roll-over options
mobile navigation pane that doesn’t require directing the site to a separate page
toggle visibility, which could solve the above issue
Thanks, I’d say we are about 25% done with the grand Sparkle plan, so yeah some things are missing. The Sparkle 3 cycle should address many/most of the things missing for conventional static site design and landing page kind of work.
That said by your description I think a few things are there and you might have missed them.
mobile navigation
Sparkle produces fully responsive websites, so no need to direct to a separate page. In Sparkle this is exposed via the “devices” feature, which is somewhat like breakpoints. They can be intimidating at first, but on the plus side they provide a very predictable behavior of the site.
toggle visibility
If you mean showing or hiding an element on a device, that’s a checkbox in the arrange inspector. If you mean an in-page effect, that’s not currently possible.
variable page menus
To recreate something like that the best way would be scroll-controlled settings. Those are not currently available. You could however probably manage to recreate something like that using the stick to top stacking modes to push away the menu when you reach a certain scroll position. Tricky but possible.
fill boxes with images
Yes it is possible to fill a box with a custom image, but that seems easily findable so I’m guessing you mean something different that I’m missing.
Anyway keep asking and hopefully we can grow Sparkle together.
@Benzo, Hey welcome aboard!
You are going to love Sparkle more and more as time goes on!
About a year and a bit ago I was also trying out Blocs but no matter how hard I wanted to make it happen it frustrated me and in the end I couldn’t get what I really wanted so I went on another hunt and came across Sparkle. My first impressions was I guess I could make basic websites with this, but once I got into it I was totally blown away how Duncan and his Team had put all the “heavy-lifting” in behind an intuitive and well presented UI, and Sparkle still to this day surprises me in the little things I get to find out.
All the things you asked about is doable! Besides conventional image rollover but you can use a button over the image and get the same effect. And to get your drop down navigation working you create “sections” on Sparkle’s left hand-panel and place your pages inside the section.
Admittingly as a web designer I had to rethink the way I went about things but it hasn’t affected my workflow but instead improved on it! I love how I can prototype and get a working wireframes site in front of my clients in no-time, and being able to make changes for them in real-time…
Really appreciate all the feedback @duncan, and I can already see that Sparkle has a bright future ahead. I hope I’m not coming across and complaining, it’s just that the promise of your application inspires me to design gorgeous sites that are more dynamic than what I’ve done in the past. Coupled with Sketch, I’m not at all worried about the design part. In fact I’m eager to start working in Sketch, I’m just skeptical of coming up with an interface design that then Sparkle can’t render as a working website.
Mobile Nav: Sparkle’s integration of responsive design from the desktop perspective is excellent. While Blocs can certainly do responsive design, the current interface doesn’t handle it as well. Ironically the vast majority of sites I’ve reviewed made in Sparkle are not optimized for mobile devices - including yours.
Toggle Visibility: Yes, I did mean an in-page effect activated by a mouse over or click that activates a menu or any section of design whether it be a drop down image/menu, pop up or sliding view on a page.
Sticky or Variable Sidebars: I’ll play with this some more but clearly this is a more advanced option that even in Blocs requires customizing the HTML/CSS/Javascript.
And I figured out the way to fill boxes with images.
Thanks very much for the site examples. Nice to have a collection of work done by what feels like a dedicated community of people supporting Sparkle. It was curious to see how many of the sites you listed were not optimized for mobile devices. Some scaled down to simpler interfaces while others didn’t. But few found unique ways to reinvent the site to maximize how users might interface with it on a phone or tablet.
Currently I’m trying to build a unique way for creatives (mostly those within the independent broadcasting sphere) to build brands, and audience bases with unique online services.
Clearly all of the above are major undertakings with professional designers and back end programmers supplying the meat of what makes these sites best of class, but alas, that’s where I wish to go right now.
One thing about Blocs, Sparkle and other web design apps is that once you get a taste of what you can do, wanting more means having to buckle down and learn HTML/CSS/Javascript on another level.
The Sparkle website is comprised of different source project files, roughly per folder. The home page and store are responsive, we haven’t yet done the documentation and designs section (and a few smaller pages here and there).
Believe me we do feel the pain of this, and the current variable responsiveness state of our site is a mix of dogfooding, reminding ourselves and trying to find the right compromise within Sparkle to build appropriate components and user interface elements. It would be possible with enough time spent, but we’d rather hold our own stuff back even for years in order to get it right.
On a closer look you’ll notice the only two sites listed that were not responsive were the wireframe mockups as that is work in progress. All the other launched websites in the majority have three responsive breakpoints (some have more) for desktop, tablet, and mobile so all good there!
I’m thinking the only way you would not have been served up the mobile/tablet responsive breakpoints is if your browser’s javascript was turned off?
Coming from a mobile-first word all our websites that go out are multi-screen responsive and user-touch-friendly!
The websites you have highlighted are WP / Frameworks and you’re right Sparkle is not in that league, but these websites are a nightmare to maintain and that is where the web has gone - complexity that overwhelms! I have worked with these massive database backends and they are a constant nightmare to maintain and update without conflicting with the plugins where, and that’s not even mentioning the hacking, Sparkle is a dream to work with without all those headaches!
I feel Sparkle is really well suited to the small to medium businesses, entrepreneurs, creatives, hospitality, scientists, etc… which I’m stoked with. I wouldn’t suggest using it for the corporate world because those websites are humungous and complex!
