Sparkle 1.2.3 review: Mac-friendly web design app needs a bit more luster

In the field of Mac web design programs, River SRL’s Sparkle 1.2.3 ( Mac App Store link) lands between Blocs’ do-it-for-me ease and Macaw’s free-form flexibility. Like a raw gemstone fresh from the mine, Sparkle’s still a bit rocky from some angles. But with a few extra facets, it could really shine.

Plenty of bright ideas

Unlike its Adobe-influenced rivals, Sparkle sticks squarely with a familiar, Pages-like Mac look and feel. What it lacks in style, Sparkle’s interface makes up for in clarity and ease of use.

Like Macaw, Sparkle eschews premade templates. It lets you place text, images, and other page elements wherever you like, aligned with an easily adjusted grid. But Sparkle also offers a library of useful, premade items, including dropdown menus (not yet found in Blocs or Macaw) and a photo gallery viewer. It’s easy to populate and style them however you like—although I did notice that when I resized or repositioned a menu, some items would sometimes spontaneously flip from “visible” to “hidden” without any apparent reason.

I found Sparkle’s layout engine more powerful and pleasant than Macaw’s. I enjoyed its ability to align objects by their midpoints as well as their edges, and to evenly distribute the space between multiple objects. Most importantly, I never felt like I had to fight with it to achieve what I wanted.

I also liked Sparkle’s ability to easily add common elements (a top nav bar with a logo and menu, for example) to every page on your site, just by checking a box in its inspector pane. You can even lock elements to the bottom of your page, lest they otherwise appear at the end of one short page, but in the middle of another, longer one.

And after bemoaning the constrained font selection in Blocs and especially Macaw, I frankly could have hugged the folks behind Sparkle when I discovered its ability to incorporate third-party webfonts.

True, the implementation’s a bit kludgy. To enjoy full font support on every browser, you have to browse for and add three or four different types of files for each font. It’s not always clear when you’ve successfully done so, since the filenames stick around in their respective fields even after you’ve added the font in question. I also couldn’t install one or two of a trial batch of open-source, web-ready sample fonts, and Sparkle didn’t explain what might have been wrong with those files.

Still, I loved that Sparkle had this feature at all. And its ability to add any webfont from Google’s hundreds-strong library won further points with me, even if the interface—mixing those fonts in with whatever system fonts you already have installed, which makes them tougher to find—could use a little work. (Search features help narrow down your font options, provided you know what you’re looking for. And once you’ve found your dream font from that roster, adding it is as easy as checking a box.)

Sparkle’s live preview feature worked well, instantly applying changes made within the program to the page as rendered in my browser. It’ll open your page in Safari, Firefox, and/or Chrome automatically if you have those browsers installed, and give you a local address to preview your work on any device connected to your network.

One section of Sparkle’s online help guide remained unfinished as of my testing, but I found the rest clear and well-written. It helped me get up to speed with the program quickly, and left me with very few questions.

A few lackluster flaws

Sparkle gets so many things right that I found its stumbles surprising. Compared to Macaw and even Blocs, it either lacks or limits your ability to adjust some incredibly basic CSS styles. You won’t find any controls for padding, for instance, and you can only apply and adjust borders on every sides of an object, instead of specifying thicknesses or colors on individual sides.

While you can customize text styles for preexisting tags, or create your own (a definite plus), you can’t create classes for buttons or other elements. Even its text styles don’t include background colors, borders, or text shadows, and there’s no way to edit active, hover, or focus states for anything but buttons or pulldown menus. Like Macaw and Blocs, Sparkle doesn’t yet support rudimentary HTML elements like bullet-pointed lists or tables, and there’s no built-in support for adding your own jQuery or other custom scripting.

Sparkle’s implementation of responsive design—making sure sites adjust to look good on any size screen—seems inspired at first, but quickly starts feeling half-baked.

Unlike Macaw, which lets you specify precise pixel breakpoints, Sparkle offers five convenient preset sizes: widescreen, PC, vertical tablet, and horizontal and vertical phone. You can enable or disable any of those views, and once you’ve established a basic design in one view, Sparkle will do its best to scale it up or down for others. That’s considerate in theory, but leads to incredibly tiny text in practice.

When I started moving elements around at smaller sizes to create a more reader-friendly layout, I often found my original, larger-sized designs changed in strange ways, especially when working with objects I’d pinned to every page. Elements would move to places I hadn’t put them, get grouped in ways I hadn’t intended, or just vanish entirely. Sparkle’s smart enough to warn you when a change made at once size might affect other views, but I wish it would help you avoid those problems altogether.

I found only a few glitches with the program itself during my testing, none serious. Occasionally, background images would become garbled, and the menu to pick and add fonts sometimes slowed down for a few seconds. Beyond that, I can’t quibble with the quality of Sparkle’s coding.

Bottom line

Like Macaw, Sparkle ultimately feels somewhat unfinished. I expect that future versions will add to its already promising roster of features, but the current version lacks the polish that would make it a real jewel.