Sandvox¶
3538 words on Software
Sandvox is a new and mostly non-technical graphical web site generator for the Mac. It has been released now – after a long planning phase and a beta phase that seemed eternal for those who watched it and were eager to get their hands on the finished product. So despite the application only having been released for a few days, I can write enought about it to justify having a table of contents up front.
History
Sandvox has just been released. So what history is there to tell? I guess things start some years back with Watson, a Mac application that downloaded web content for you and displayed it in a nice Mac window without the hassle of having to fight web pages. It was great but then Apple came and released Sherlock 3 which did pretty much the same things. So it looked like Watson would die – but it didn’t for a long time because Sherlock 3 sucked and Watson didn’t. Nonetheless this was a shock for Dan Wood, the author of Watson. But he didn’t give up and things worked out reasonably well with Watson staying around for long enough to make its users reasonably happy until things like the Dashboard came along.
After selling Watson to Sun and working them for a while Dan together with Terrence Talbot starting coming up with and working on a new idea. And that idea was Sandvox – an easy to use web site creation tool that can generate non-trivial pages which use actual and modern HTML. It took quite some time to get things going and just as Sandvox was starting to shape up to be looked at by the public, Apple released iWeb in January. An application that looks quite similar to Sandvox. So it looked like Dan and Terrence had been ‘Watsoned’ again. And Dan wrote up the whole story back then, which I found a bit heartbreaking.
Beta releases of Sandvox appeared for testing soon after and progress was made. Quickly in some areas and more slowly in others. Until Sandvox was deemed ready for a first release this week. When Terrence and Dan could finally lean back for a second and have a relaxed chat (as observed thanks to iChat’s lack of respect for their privacy).
While Sandvox is mainly the product of Dan and Terrence, a peek in the application’s acknowledgements window and about box reveals that many people whose names sound familiar from the Mac-centric web have helped or contributed in some way. That’s amazing and the community aspect is cool and may even work in Sandvox’ favour.
Disclaimer
Before going on, I think I should mention that I did some work for Sandvox as well. Dan asked for CSS help back in January. And as I thought both CSS and working for his new project are cool, I ‘applied’ and ended up working on the designs.
Just to not give wrong impressions: the majority of designs were done before I started helping. Particularly the really pretty and graphically rich ones like my favourite Grey Leaf. My respect goes to the people who created these and my job mostly consisted of adjusting things to some changes which came to Sandvox after the designs were created – and dealing with the abomination that is Internet Explorer.
So – if you wish – I am biased in favour of Sandvox, so keep that in mind. In addition, Sandvox just isn’t an application for me to use. I’ve been hand writing HTML for more than a decade and feel capable of getting the things I want by just writing them down in a text editor. So usually I wouldn’t write about Sandvox at all as I wouldn’t use it (I’d be working for a computer magazine if I wanted to write about software I don’t use). But as I spent numerous hours using the application and seeing it improve from release to release, what I have to say may be of interest after all.
Usage
First impressions are important. And the first impression Sandvox leaves is that of its web page and its icon. The web page is made with Sandvox itself and thus gives a preview of things to come as well as the reassuring impression that Dan and Terrence are ‘eating their own dogfood’. The icon is pretty as well but – as many icons are these days – too detailed. While being pretty at full size and even prettier at the 200×200 size used on their web page, when shrunk to some tiny size by my Dock it’s just some undefinable brown blob with some blue and blurry red bits.
Using the application is relatively straightforward. But it starts with a minor annoyance: You can’t start editing your site right away but have to name and save its file first. Not good for impulsive testers. I have quit and trashed applications I tried out for less. But once that step is mastered you are ready to go. And in fact you’ll never have to care about saving things after that as Sandvox will save automatically while you’re working. At the left of the large window you get there is a hierarchical ‘source list’ with almost fully drag and droppable contents. Above the source list you have toolbar items to add things to the page.
Making good icons is hard and recognising icons is as well. I still have problems figuring out what each of them does with their various boxes and green pluses. And I really hope that people try those out because there’s real goodness in there – the finer points of which, I fear, may be easy to overlook. So from left to right those icons are for New Page (easy to recognise) with the menu popping up to let you choose a page type, New Pagelet (i.e. a little box within the page, thus the plus icon is even smaller and at the left) again with a menu to list the numerous different pagelet types, New Collection (which is the hierarchical aspect, a folder for which Sandvox will automatically generate an index page as well) again with a menu of the different collection types and Group Selection (which, err groups things, and the point and position of which I fail to see).
Of these the pagelet concept seems to be novel as Karelia claim ‘Pagelet’ to be their trademark. At the end of the day a pagelet is a little page within your page which can contain things like an image, a list of links, your recent flickr photos or anything else really. It’s simple, it’s versatile and it makes pages more interesting.
That gives you basic site management and as extra goodies you get the opportunity to add keywords for each page (which I find quite cool but at the same time geeky and I doubt that it does much good for the site these days) and, crucially, to specify the filename you want for the page. While Sandvox will automatically generate an OK (reasonable but using underscores instead of the more convenient hyphens) file name from the page’s title for you, this gives you the extra freedom to prettify or shorten things. Just the kind of detail I love.
At the top of the window Sandvox has a list of designs. It does the job – possibly with a swishy moving effect – and you probably aren’t going to use it all the time. In fact Sandvox cleverly hides it when you re-open a previously saved file. But that list doesn’t have a scrollbar and thus is a bit of a pain to use – as others have pointed out before me – with those home-grown solutions lacking the usability comforts you’ve come to expect of standard UI elements.
And then there’s the actual editing. You just type whatever you want to write into the web page. That’s it. In fact Sandvox is just using WebKit – the engine also powering Safari – for this, so you are essentially working on the real, live web page not on some preview. While this is technically cool, I suspect that most of the usability problems in Sandvox will be caused by this fact. Sometimes there are glitches in WebKit’s editing behaviour and you may end up in odd situations where it’s hard to see what’s going on and unwanted things may happen. The highlighting of selections and the text boxes you are working with could also be better (i.e. be adjusted to be visible against the text and background colours)
The only exception to that direct editing are the places – typically in page titles – where special graphical effects are applied to the text. In those places Sandvox will render the text with the effect into an image which will only appear in its full beauty when you have finished editing that text field.
Another part of the UI which offers you a number of options for your pages – and is essential to configure pagelets is the Inspector window. Thanks to my tiny 12″ screen I cannot use that window without covering some other part of the Sandvox window in the process. To be honest I find that window to be quite a pain. And for sure some less obtrusive (and more difficult to implement) solution would make me much more happy here.
In total I’d say the interface could do with more finish. People say that iWeb can rotate and crop images in place. That’s just very neat. And things like this which require a lot of fiddling and polish are probably exactly the thing which require a big team and money to go into a project and which we are unlikely to see in smaller products.
So these are the basics. There are of course many other things in the application, but it’s much more instructive to try them out than to describe them in many words. I haven’t covered the setting up of the file upload which is technically cool as it can use FTP, SFTP or WebDAV but the UI of which still needs some polish and keeps driving me mad. Then there’s a media browser to give you convenient access to your iApp photos and music, to your films (if you have a lot of time) and your Safari links (without any filtering or automatically finding webloc and other bookmark files on your drives). I find the browser a bit awkward and less convenient than just dragging things in from the Finder or iPhoto say. The fact that filter fields don’t work (on my system) doesn’t help.
Technicalities
It’s behind the scenes where Sandvox really shines. The pages it generates are XHTML strict (with the application being designed in a way that the page type is changed to an appropriate lower level if any of the page’s components requires that for some reason). There’s even a menu item that lets you validate pages right there – for those who absolutely have to know.
Intuitively I find this totally unremarkable. In fact, I keep thinking that it should be harder to generate unbalanced tag soup in code than it should be to generate proper HTML. Software doesn’t do typos. But I learned LaTeX first and HTML later on, so I’ve always considered HTML to be trivial. The reality of software generated HTML usually proves me wrong on that assumption. How many applications have you seen that are reasonably user friendly, reasonably flexible, support different looks and produce valid HTML nonetheless? Very few, if any, I’d guess. And it looks like Sandvox fills that niche quite nicely.
So the output is great. And the application itself? It’s one of those applications that makes use of many of the things OS X.4 offers. Starting from being a Universal binary and using CoreData for storing its files. To implementing most of its features like page types, data sources or pagelet types in plugins and allowing third party plugins as well. To using Quartz Composer for generating slickly (and sometimes just distractingly) prettified graphics to replace the text for things like heading. To using WebKit for all the HTML work. And none of these seems to be tacked on just for the technologies’ sake but because they make the application more useful. In fact, the only thing that’s underrepresented is Spotlight. While Sandvox includes an importer to index the contents of Sandvox files, Sandvox could be a bit smarter and actually select the relevant text on the relevant page when a file is opened (as Preview or Rechnungs Checker do). I could also imagine some Spotlight goodness being helpful in the media browser to locate additional image, music, film or bookmark files.
Extendability
As mentioned above, Sandvox is highly extendable. This is an area where there’s a lot of potential for Sandvox to be used and abused. Designs, page styles and pagelets are all implemented as plugins. And plugins, particularly those for pagelets aren’t that hard to make! Starting from the existing plugins for services like delicious it should be fairly straightforward to make a plugin of your own. [Developer Guide]
If you’re more ambitious you can try to make a page style of your own or to create a design of your own. Expect making a design to end up being more tricky than you expected because the power of Sandvox to use or not use things like sidebars or pagelets really limits the designer’s freedom. On the other hand – and I am quite tempted to do that – nobody forces you to support a sidebar or pagelets in your design. You could just hide those elements and be done with it.
That, of course, is a tricky point which I assume will make the Karelia guys smile and cringe at the same time: You’ll have the power to make Sandvox do pretty much anything you want… but this also means we may end up seeing a number of ‘unfinished’ designs which simply don’t support all of Sandvox’ features and will make things look bad when switching from another design to them. No risk, no fun – as they say.
I started looking into making my own Sandvox plugin. Read about it.
Designs
The trick for the various designs is that there is no trick. The HTML will be reliably the same on all pages that are generated and within the limits which are more or less precisely outlined by the design spec designers can throw whatever CSS they like at the pages. Sounds a bit like the CSS garden at first.
But it’s much more challenging. While the CSS garden is mostly a jerking ground for graphics people, Sandvox adds a non-trivial structural component to the game. In the CSS garden everybody provides a style sheet to style the very same well-defined page with plenty of specific ids in it to make the various elements unique. With that kind of predictable and rich structure you can even do interesting horizontal layouts. In Sandvox, on the other hand, the key elements of the page are explicitly marked as well but the actual content you have can differ vastly from page to page. That makes the game a lot more challenging.
While working on those things, I really grew to love and hate many of the layouts. To get interesting and cool effects, they’ll be full of clever positioning tricks. And being full of clever positioning tricks also means being full of breakage when viewed in Internet Explorer. Which in turn means a lot of headache and hideous CSS tricks to make things degrade gracefully. If I could remember my nightmares I’m sure there’d be plenty of * html, other stars and slashes, greater thans and PNG files in there. And while I’ve always known that Internet Explorer is a POS, I’m even more convinced of that by now. How can a software company, the richest software company in the world mind you, make a piece of software that manages to render the very same web page differently in every major revision I bothered to look at (5, 5.5, 6, 7β)? And, frankly, what I’ve seen of IE7 so far makes me hope that they either work very hard on it or replace its codebase with Mozilla’s or just stick with IE6. Because in its current state it just gives you yet another degree of bugginess that only solves a few of IE6’s problems but is nowhere close to rendering web pages in a way that is similar to what Mozilla or WebKit do. If this isn’t improved before the final release, it will be bad news for people who actually want to create web sites and nerve wrecking but financially rewarding for the people who specialise on fiddling with things until it works.
Oh, and did I mention that many of the designs that come with Sandvox really shine? You have pretty ones and simple ones. Some of those graphics are really cool. And the cooler they are the more pain you can expect to be behind them and the the more you can expect them to look different in Internet Explorer. While a lot of effort has been made to ensure that things look similar everywhere, a number of differences persist. For example IE/Win’s ignorance of PNG transparency makes a number of effects less stunning in that browser. Particularly the graphical replacement titles cannot be seen in that browser because of the shortcoming. A real shame for the people using it.
iWeb
With iWeb coming along as Sandvox’ Sherlock 3, I feel that I have to mention it at least. Both iWeb and Sandvox superficially aim for the same user base and they both do similar things. But they do them in vastly different ways.
My summary of a comparison of both would be to say that if more flexibility and prettiness of your pages’ look are your main concern and things like accessibility, good URLs or small/reasonable file sizes don’t matter to you, then iWeb should be fine for you. At least if you are paying for a .Mac account, that is. If you don’t have a .Mac account, iWeb may start looking a bit uncomfortable, though, and Sandvox with its wide range of upload options will look good. The same holds if you want good URLs and accessible HTML.
In short, I think Sandvox kicks iWeb’s ass for technical reasons alone. But I also see that many people just won’t care. Tricky.
Strengths
To summarise, Sandvox is reasonably easy to use, it comes with pretty designs, generates technically good pages and will upload them to many different servers. As a bonus it can be extended by plugins. And even if you don’t have the programming or CSS skills that are needed to make them, there may be some plugins available on the web at some stage to extend Sandvox’ features.
Weaknesses
Let me be frank here: Sandvox’ version number now is 1.0. And while many of the problems from the beta versions have been ironed out, they are not all gone. Just try dragging a few dozen photos onto Sandvox to see less than stellar performance or watch the publishing of a site to get the impression it could be faster. I hope most of these problems will be solved – it’s worth reporting them if you see some. Dan and Terrence have returned to working mode and doing their best to work on the feedback as it seems.
My other pet peeve about Sandvox as it comes today is its approach to documentation. While the included QuickStart readme file is OK, I really dislike the User Guide menu item requiring me to be online to be useful and then presenting me some ugly wiki page. That’s not the kind of polish I expected. Particularly for an application that revolves around pretty web designs.
Of course there are plenty of other details that I‘d like to see changed or solved. For example a design currently can’t interact with the user (to give a choice of colours, say, or allow the setting of the background graphics). I think that would vastly improve the abilites of the designs. Also, I can’t use Sandvox to make my favourite type of photo album . And generally I find that making a simple photo album – honestly the task that I’m mostly interested in for Sandvox – is by far too slow and difficult.
Goodies
There are numerous bits of niftyness in Sandvox which shouldn’t go unmentioned. Be sure to try making a link to a page that is present in Sandvox itself. You’ll be able to do some funky drag and drop then:
I also like the nicely interactive web integration in the registration dialogue which lets you do everything you need to do in place. Similarly, the Send Feedback command in the help menu gives you a nice window that makes it easy for you to send helpful feedback.
So go and give it a test ride now… but wait for another update or two for full enjoyment.
