Blocs 1.3 review: Web design program executes well on limited ambitions

Technology changes fast on the web. Even if you know the basics, keeping up with the latest additions to tools like CSS or jQuery isn’t always easy.

For web design neophytes—or behind-the-times dinosaurs like me— Blocs offers a great shortcut to construct appealing, up-to-date websites. It deliberately limits its features for simplicity’s sake, but accomplishes its chosen goals with elegance and style.

Lego for the web

Blocs discards the standard Mac UI look and feel, but its muted black-and-gray interface proves clear, usable, and eye-pleasing. Its unorthodox use of the right mouse button—instead of summoning contextual menus, it switches you to a different mode for dropping in page elements—took some getting used to. But Blocs’ initially steep learning curve soon plateaued for me, leaving me feeling confident and (mostly) in control.

Slender vertical stripes mark the three areas of each page you’ll create in Blocs: the header (blue), body (green), and footer (purple). Within each, a single click brings up a library of premade Blocs—rectangular containers that stack atop each other on the page. Each is filled with other page elements (including headers, text, links, and images) that the program dubs Brics. Simple, appealing icons provide clear previews of how each Bloc will look before you add it, and each section offers a pleasant variety of layouts to choose from. The adjacent menu pane lets you tweak options for your site as a whole, the current page, or a selected item.

Blocs intelligently manages many smaller details for you. Changes to the header or footer on one page, or to a color swatch you’ve assigned to multiple elements, automatically appear throughout the site. When you add a new page—each appears in its own tab—it’ll show up in the header’s menu bar unless you tell Blocs otherwise.

You can move each Bloc up or down the stack with menu commands or simple keyboard shortcuts. And you can customize each premade Bloc and all its Brics, editing features or adjusting column widths, by clicking on any element within them. Blocs even offers live previews as you cycle through its various options.

Right-clicking summons a convenient, customizable library of text, image boxes, and other elements that you can left-click to drop straight into your page. The program sometimes feels a bit squirrely as you sort out where to click to correctly select or place an item, but I got the hang of it fairly quickly.

In some cases, changes you make to one element of a Bloc—for example, altering the header text color in one of three identical columns—will ripple out within the rest of that Bloc. However, while you can duplicate any selected Bloc or Bric, changing an attribute in the original won’t affect any of its copies. I also longed for the ability to select, copy, and paste multiple elements, which Blocs currently lacks.

Hitting the “V” key toggles viewing mode, simulating how your site will look and work online. Here, I encountered one of the few glitches I found in Blocs: Some elements occasionally wouldn’t render to the full window width, with slightly funky results. Hitting “V” a few more times always resolved the problem. (Another glitch: In some but not all tests, deleting the header, then clicking on the “click here to add header” option, failed to summon the library of premade Blocs.)

This many options, and no more

Blocs 1.3 comes with a reasonable arsenal of resources to help your site look great. You can easily add to its library of stock photos and background patterns by dragging and dropping images into Blocs from the Finder or a web page. Note that Blocs links those items based on their location when you drop them in. When I moved mine off the desktop, Blocs couldn’t find them. I recommend creating a dedicated folder for project images before you get started.

Blocs also includes a limited but appealing roster of web fonts from Google, plus four different icon sets to adorn your pages. But Blocs won’t let you change those lists to use fonts or icon sets beyond its own lineup.

I also found no easy way to use Blocs to link to files for my site’s visitors to download. In the program’s friendly online help forums, creator Norm Sheeran suggested separately uploading those files to a directory on my server, then pointing Blocs’ links toward their URLs. In future versions, it’d be nice to add files and other resources alongside images as project assets.

Indeed, just when I grew excited about what I could do with Blocs, I often ran headfirst into its limitations. You can specify the precise pixel size of text, for example, but only choose preset options like “small,” “medium,” or “large” for other elements’ size, margins or padding. The jQuery-based animation options for elements also stumped me, and Blocs’ otherwise splendid online documentation offered no help.

I never felt entirely thwarted in my creativity, but I sometimes wished Blocs gave me a little more control. In fairness, Sheeran has laid out an ambitious monthly update schedule on Blocs’ website. If he can meet it, the program will grow even more flexible and full-featured by the end of summer.

Less than six hours after I first launched Blocs, I’d built a slick, appealing four-page site. Once uploaded—Blocs doesn’t offer a built-in FTP client—it looked terrific on my Mac and my iPad, and decent enough on my slender iPhone 5s screen. Blocs vows to create clean code, and while I did see a few mildly ridiculous nests of multiple <div> tags, the results looked reasonably cruft-free and easy to parse.

Bottom line

Perhaps because it chooses and knows its own limits, I liked Blocs in spite of them. It’s lovely to look at and, once mastered, a pleasure to use. For just $10 more, power users can buy its more robust rival Macaw. But regular folks who just want to build a smart site quickly and easily will find Blocs well worth its price tag.