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

sparkle mac icon
At a Glance
  • River SRL Sparkle

    Macworld Rating

    Sparkle’s another solid entrant in the field of web design programs, with some features its big rivals lack, but it doesn’t quite feel complete yet.

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.

Sparkle user interface

If you’ve used Pages, you’ll feel right at home with Sparkle’s Mac-friendly interface.

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.

Sparkle ready-made items

Sparkle’s ready-made photo galleries, dropdown menus, and other items are easy to customize and style.

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 webfonts

Unlike its rivals, Sparkle offers a huge variety of Google-made webfonts, and lets you add others you’ve downloaded.

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.

Sparkle screen sizes

Sparkle lets you adjust your design for five preset screen sizes, and warns you if a change at one resolution has affected the others.

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.

This story, "Sparkle 1.2.3 review: Mac-friendly web design app needs a bit more luster" was originally published by Macworld.

At a Glance
  • Macworld Rating

    Sparkle’s another solid entrant in the field of web design programs, with some features its big rivals lack, but it doesn’t quite feel complete yet.

    Pros

    • Powerful, easy-to-use layout engine
    • Ability to add your own web fonts
    • Great ideas for supporting responsive design...

    Cons

    • …that don’t always work well in practice
    • Limited ability to fine-tune styling
    • Occasional quirks and glitches
Related: