Sparkle vs BLOCS-3 Need Advice

I Need Help
1

Some background: First off, I’m not a designer, and most especially don’t know nor want to learn code.

I cut my web-design teeth on iWeb, tried to learn Freeway Pro, Rapid Weaver and a couple others but never liked nor fully adopted their methodology for building. Eventually settled into WiX but then that whole platform became unstable/unreliable and moved on to Sparkle a few months ago.

For the most part using Sparkle has been OK… with one major exception: Switching breakpoints almost always ends up in disaster. And the documentation on the proper process for designing between device-types is not only confusing, but nobody seems to have a “proper” way to do it in the Sparkle-verse. And I keep reading how Sparkle’s code is messy and is not a truly responsive design app.

Here’s an exact problem: I’m building a page for what they call the WIDE-PC layout/breakpoint. I’ve a few photo-boxes with size, position and drop-shadow settings I like. When I switch to the MOBILE those settings are inappropriate; shadow is too deep, the photo-boxes need to be repositioned… etc. OK, no big deal.

BUT, when I make the changes for MOBILE it screws up the WIDE layout - I can’t keep the settings separate for the breakpoints/device layout!!!

I tried the BLOCS demo a few months ago and felt overwhelmed; the layout/structure to do something very simple is drastically different from Sparkle and I felt it would be re-inventing the wheel to learn a totally new interface.

Now things are at a critical point and I’m totally frustrated with Sparkle’s less-than-obvious methods on how to properly setup between device-types.

My questions are simple (seemingly):

Since I’m a total WYSIWYG kind of guy and “design” visually, not with code or backend CSS rocket-science, would it be worth it to reinvest time in the BLOCS demo to learn how to use it?

Is BLOCS better at making a truly responsive page setup?

Am I going to have the same problem with BLOCS in that device-type settings cannot be separated? (geez, I hope my questions make sense!)

Thanks in advance.

UPDATE: I’ve got a band-aid fix that will work for now to get my project back on-track, but I think I’ll be re-reviewing the demo to see if I can get my head around how BLOCS works.

1 Like
2

HI! First off, I feel you. I too am not a designer, and I came from Muse, which was a WYSIWYG program, and after extensive research, including looking at Sparkle, I landed on Blocs.

Blocs IS a responsive website builder, that is it’s major focus. It is a innately a responsive website program. Its built on the Bootstrap framework. So, its kinda like a UI for using Bootstrap but with no coding necessary (though knowing ‘some-to-more-to-a-lot’ of coding can maximize how you use Blocs).

well…I’d like to offer a soothing response to this challenge…but alas, there is no getting around learning a new program. You can reduce your headache, though, if you surrender to the necessity of learning, and the sooner you do that, the sooner you will become proficient. Blocs is not Sparkle in any way, or inversely, Sparkle is nothing like Blocs, nor is it like the other platforms you mentioned, its built from the ground up to be what it is, and there is intelligence behind how it works. Learning how it works, and you will be much better off.

@Eldar is your source for doing this, with his BlocsMaster videos: https://blocsmaster.com

This forum is awesome, there are several really good experts who also communicate well, and will be a value to you if you decide to learn.

Hope that’s helpful!

4 Likes
3

You raise some good points on the differences between Blocs and Sparkle. Like you, I’ve used both products and I’ve even combined pages from both products into a single website (I’ll explain later).

I actually started Using Sparkle before I switched primarily to Blocs. What I did like about Sparkle was that it was essentially a DTP type of product that offers a blank canvas, giving you the freedom to layout your page however and with whatever you like. However, I soon realised, as you have done, that this undisciplined approach to web design does have its drawbacks - most notably when it comes to designing for multiple breakpoints. Sparkle creates “adaptive” sites as opposed to responsive sites. This means that each breakpoint variant must be designed separately. Although content can be shared across breakpoints and you have the ability to hide or show content on a breakpoint basis, you do have to spend quite a bit of time resizing fonts and placing other elements as you switch from one breakpoint to another.

This is perfectly OK for someone who is more used to desktop publishing applications and needs the freedom to layout a page as if it was a physical document. In this respect, Sparkle fits the bill admirably. However, in web design, you have to be able to design for devices - not physical publications. That requires some disciplines in how pages are constructed and laid out in order that they can automatically respond to different device screens. Blocs does this because it is built on the bootstrap framework that takes care of most of the device variants. For example, it will maintain font sizes across breakpoints and will reposition elements to better suit different device variants. But, it also has the flexibility for the designer to override the standard behaviour of bootstrap on a breakpoint basis.

Blocs achieves it customisation potential by using “classes”. These are essentially CSS elements that are created in a simple to use logical, graphical editor interface (no coding necessary). Basically, you can create a custom class and apply it to any element in your website. When you switch to other breakpoints you can edit the same custom class to make the element work better at the new breakpoint - maybe reduce font-size, change colours or shadows or change the size of columns rows etc. So, there are a lot of customisation options built into blocs that can all be changed for each breakpoint. Below is an illustration of the 4 tabs of the class editor. As can be seen, almost everything can be customised without having to write a single piece of code.

classEditor
classEditor1800×754 226 KB

There is also the option of adding third-party code (or even your own code). However, unlike Sparkle, you can choose where your code elements go in Blocs (head, foot or body). You can also attach additional style sheets and scripts if you need to. Additionally, you have options such as modals, galleries sliders carousels and a host of third party brics that just drop into the blocs page and work right out of the box.

Out of the two products, I prefer Blocs because it does impose some discipline in the web design process. Sparkle, I occasionally use for creating pages that may cause a bootstrap conflict in Blocs. For example, some third party scripts simply won’t work as expected in Blocs because of conflicts with the bootstrap framework. Therefore, I will create those pages in Sparkle and combine the pages altogether on publishing. These conflicts are few and far between, but they can occur. This isn’t really the fault of blocs, but more to do with the framework blocs is built on.

So, my personal recommendation is to get to know blocs. You can build a fully responsive website simply and quickly just by using the standard pre-built blocs and brics. Once you get to that stage, you can start unleashing the real power of blocs by learning about custom classes. These are not difficult things to learn, but do require a little learning on your part in order to get the best out of the product. Certainly, Blocs has many more features than Sparkle and you won’t have to spend time rearranging and resizing element at different breakpoints. Of course, if you are a pure designer who is more used to graphic design, you may prefer the freedom of layout offered by Sparkle - in fact, some very nice, arty, sites have been created in sparkle. But if you want to incorporate a much wider range of “web-specific” features in your websites, Blocs is the way to go.

4 Likes
4

Agreed, Eldar’s tutorials are a great place to start.

3 Likes
5

Both responses are fantastic and more usable than nearly everything I’ve received from the “other” forum.

Thankfully I don’t need anything flashy or super-special, just a good-looking design that actually works between breakpoints and will incorporate my video teasers in an appropriate method.

Greatly appreciate the depth of information and the thumbs-up that my gut tells me, that Blocs is more developed and better suited to my needs.

I know I can learn it, I was just hoping to not go through that process again. But if I don’t I’ll be fighting what Sparkle can’t do and having to create workarounds (what we do everyday in my world of commercial film) rather than actually creating content.

Thanks again guys; with any luck I’ll be going live with this new project and sharing it with you.

Cheers

1 Like
6

@Producerguy Don’t forget, if you get any teething problems, just post here as often as you need. You will usually get answers very quickly.

1 Like
7

I can’t get back to my edit suite to play with the demo again until Sunday, so I’ll be reviewing the video tutorials and giving myself a boot-camp crash course for the next 3 days.

I’ll definitely hit you guys up with anything my swiss-cheese brain can’t comprehend.

Cheers - and thanks again for the clear advice.

1 Like
8

Hi @Producerguy, just seen this, and like one of the previous comments, I jumped ship from Adobe Muse, and in that jump tried out various web design programmes, Sparkle and Everweb being the 2 main ones. At the time, they both had huge limitations on getting really simple stuff done, then I stumbled upon Blocs.
Although completely different to Muse to use (Hey, I’m a poet!), the initial hard work of learning and just playing with it over a couple of weeks - along with searching on this forum, where there’s some fantastically helpful people - really paid off.
I’m only a part time web-designer, but I’m using it for all of my sites now. Everything I’ve done had been rock-solid and just works nicely at all breakpoints. And now having Volt CMS working alongside, it’s become a very powerful tool indeed.
My advice would be to make the jump, put on your learning hat while just simply fiddling about, and enjoy it. Making websites has now become something I enjoy more than any other aspect of the graphic design malarkey now.
Good luck.

9

Same here. I tried Sparkle but found it too cumbersome to create a website for different devices. As you said… design something, switch to another breakpoint and start all over again. Not for me. I used RW for a couple of years, but I find that even more complicated than blocs. I got around using it, designed my wife’s website using RW, but ended up paying a lot of money for 3rd party stacks. And there are tons!

I came to a point where using RW didn’t feel like a good way to design a website. Change something, preview, change back, preview… blocs makes this so much easier. While it might not have the design approach that Sparkle offers, it’s still much more flexible than RW.

If you ask me, buy Blocs, invest in @Eldar’s Tutorials (or start watching the free ones on his YouTube channel), even get @Jannis Volt CMS and Blog Solution if you see the need for it, and you’ll be at a fraction of what you need to pay should you want to use RW for your work.

Blocs has a different approach, but once you get used to it, you don’t want to use anything else, especially if you’re not code savvy at all. You can get great results with Blocs on it’s own, even without the use of classes. Worthwhile to learn how to work with classes though.

Just saying.

5 Likes
10

I’ve never used Sparkle, so I cannot offer any comment on that point but I did use RW for a few years and agree with your points. It was an endless round of expensive stacks and horribly slow page previews. I lived with the frustration while only running a couple sites for myself, but felt it wasn’t viable over the longterm when building sites for clients, due to the excessive time it was taking to build sites.

Blocs by itself can do an awful lot and if you need a CMS Volt is improving all the time, plus it’s a one time licence to use on as many sites as you like. After building a website for a client I record a quick two minute video tutorial of their own site showing how it works and that is generally all that is needed.

3 Likes
11

Again I really appreciate all the responses, it’s been far more useful and detailed than what I’ve ever gotten from Sparkle forum.

Getting this project website up is of paramount importance, and I’m under the gun with time. I’ve got to get this up and running by midweek no matter what so the investors can sink their teeth into it and see what we’re doing.

I’ve only got two methods: either create workarounds in Sparkle, which basically means building two sites, one for desktop and one for mobile and just get it published or, take the time to learn Blocs and rebuild it ground-up. Thankfully there are no special elements to it, I just need it to look good throughout the break points.

I’ve been watching Eldar’s tutorials but I’ve realized what the fastest way for me to learn is going to be…

If you guys are willing to chime-in I’ll post screenshots of the current build in Sparkle on Sunday, then you guys can tell me what Blocs are required to rebuild the existing design structure.

Once I get my head around the basics my learning curve will be shortened exponentially and I can probably get this done in time.

Re-watching the tutorials has proven to me that Blocs is without question far more well-developed and has an actual structure that will keep things in line as I rebuild.

Could I build the two site versions in Sparkle and just get it done? Of course. But I’d rather invest that time into learning this new platform and getting it done right. I sure as hell don’t want to have to update two sites every time I make a change. If there’s one thing I can’t afford it’s wasted time.

1 Like
12

This is one of the most responsive and helpful communities you will find. I‘m sure people are willing to help with suggestions, maybe even with a Blocs project to share with you and the community to get you up and running in no time.

3 Likes
13

I’m learning that about this forum; it’s becoming a main reason to dive into Blocs.

1 Like
14

Can’t wait, need to get feedback from you guys to make sure I can actually do what I want with Blocs - without becoming a code-monkey:

Here’s a screenshot from my current Sparkle build (not yet published).

There are two “simple” things that kept me from building in Blocs previously because I couldn’t figure out how. And no, I didn’t engage the forum back then; didn’t want to waste anyone’s time with stupid newbie questions.

  1. The full-width box with the red motorcycle up top. The 'bike actually fades in from left-to-right and stays in position. (I made that box “full” because the animation doesn’t look good with a hard-edge where it makes its fade-in.)

On top of the same box on the far right are 3 elements: The background photo, show logo and text box.
I could NOT figure out how to replicate this layout and behavior.

  1. The 3-photo section below the red bike. Each “section” is the background photo, a horizontal box, a vertical box (orange) with opacity pulled back, the text box and the arrow which is an active navigation button.
    Again, I could not figure out how to lay-in all those elements into a “BRIC” the way it’s shown here - and stay in-place during break-point rearranging.

My inability to replicate this layout/functionality is what kept me from using Blocs.

Whoever can help me with this I’ll give free access to features in the show that only Kickstarter backers will get. (Trying to find some way to say “thanks” for the assist.)

BPTV 1
BPTV 11470×2085 921 KB

15

So you guys can get a flavor for what we’re doing, here’s the first teaser:

https://vimeo.com/468666463

16

Damn, that video makes me want to buy a bike again…

All of this should be doable with blocs. Just the part with the orange boxes might need some margin work with classes. I’m currently on a holiday with no access to blocs, so I can’t try to figure that out or post an example, but I’m sure someone else will. @Eldar to the rescue? :slight_smile:

17

I think my path is clear: even if I can’t replicate the current design precisely in Blocs it’s time to abandon a platform that’s clearly lacking internal structure and not truly “responsive”.
So I’m purchasing a copy this weekend and continuing the training until I get get back to my edit suite Sunday.

And thanks for the feedback @pumpkin, your response is exactly the type of excitement I want the rest of the world to have when watching our new show. That we touched your pleasure-button for having a 'bike is awesome. Cheers.

18

The basic structure is quite simple. The topmost area is a navigation bloc. Simply add your logo, change the background colour and you’re good to go.

The next bloc down is a standard 1-column bloc containing a video bric. When the bric is placed, simply point it to your video file (either a local video file or a youtube/vimeo file)

The motorcycle bloc is a standard 2-column bloc with the the leftmost column set to something like 9 columns and the rightmost bloc set to 3 columns. The motorcycle image is placed in the left column. In the right column add an image bric for the logo followed by a text bric underneath. Set the text font and make it white. Select the text you want displayed in red and wrap in a span. With the span selected, create a custom class named red-text and set the text to the colour red. The image can be set as a background to the column using another custom class. In my example, I used a plain background colour. The layout will look something like this:

Screenshot 2020-10-16 at 02.06.41
Screenshot 2020-10-16 at 02.06.413508×1230 390 KB

The animation of the motorcycle image is set by selecting the image, and setting the animation as shown below.

Screenshot 2020-10-16 at 01.05.01

Because the animation has been set to move in from the left, it will start from the left edge of the browser, so no need to have anything extended beyond the page width. If the animation starts too quickly, just set a longer delay. I’ve attached an example blocs file so you can see how it works.

The three image bloc can be made with a 3 column bloc. The only issue you will have here is that Blocs isn’t a graphics application - it’s not designed for drawing. Therefore, its best to make your images, with their rectangles, in an image editing app. Furthermore, you could also add your text and icon to the image. Here is an example:

meet the team
meet the team442×719 65.5 KB

This will allow the image to be placed in one of the three columns. If you need to make these into links, just make the image itself into a link. WHY? because at the smaller breakpoints, the icon or text may be difficult to target on smaller screens. By making the whole image into a link, it won’t matter where in the image a stubby finger may tap. Doing it this way also ensures that everything will scale at each breakpoint without having to worry about custom classes to move text and icons around the page.

The footer is very easy to make. The shadow text can be applied using a custom class. With text selected, change the shadow settings to suit. When you switch to other breakpoints, you can adjust the settings to better suit that particular breakpoint - it won’t affect the settings on other breakpoints.

bike-sample.bloc (2.9 MB)

4 Likes
19

Much appreciated for the breakdown. Will test and apply.

20

If you want. I’ll be very happy to create the home page template for you if you need something done quickly (like this weekend). All you would have to do is replace the images and text with your own. This will give you the opportunity of seeing how the elements have been set up and what custom classes do etc.

4 Likes