BehindTheRabbit

After a long break, I’m back at work on Sandvox (thanks to an impressive blizzard that hit Rome this week, keeping me at home for many days in a row…).

The long delay was due to my choice of going back to the drawing board: first of all Sandvox 2 is pretty different from Sandvox 1 (mostly in terms of elasticity) and it would be a pity not to consider this increased power. Second, the web has changed a lot in these two years and I had to reconsider a few things. My first design for Sandvox 2 is the blueprint for all following designs, so it needed some particular care. But here we are now, the wait is over.

Hydrogen is – apparently – pretty basic (white background, sans-serif font, just a dark-grey header): don’t get fooled, the devil is in the details. I focused on whitespace, typography, compatibility, flexibility and, mostly, giving content the best presentation possible. Effects (shadows, transitions…) are present but in the most unobtrusive way. This design has to be modern, not to say “look at me, I’m so modern”.

As it is, it’s good for almost anything. Images in single pages with no sidebar are displayed at 900px of width, much more than the usual 640px default, so it’s very good for photography. But I think that its readability makes it a very good start for bloggers too.

But if you have special needs and you know some CSS I think you’ll have a lot of fun customizing it with some code. Since its layout is so simple, few lines will let you change almost anything very easily (colors, headers, backgrounds, typography… it’s like a blank canvas). Soon I’ll post more examples about this in the blog.

In few words, I’m pretty happy about it and I hope you will enjoy it too.

For all its features (which are a lot), take a look at its page.

In an HTML page you can use the <blockquote> tag to give emphasis to a chunk of text: most of the times it is used to display a block of quoted text.

Sandvox 2.1 added a new blockquote object that does just this: it adds a blockquote tag to your page. This block of text is displayed by default as slightly indented text.

All my current designs don’t specify any particular formatting for blockquotes, so the use of this object may be somehow frustrating. I plan to add support for this feature with future updates but – in the meantime – you can add some spice to your blockquotes with few lines of code (general instructions on how to use code injection are here, as usual).

Here are few examples but, of course, you can mix code as you wish and try different combinations.

Example 1

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Light gray background with a left, thick border. The code: – Read more »

Karelia just released Sandvox 2.5 (both via their website and the Mac App Store) with a bunch of new features. Among them:

• Full Lion support: full screen app, auto-save, versions
• A new slide-show object with automatic transitions (very nice and useful for a richer experience – try it with some creativity!)
• Spanish and Italian (yeah!) localization

Sandvox 2.5 requires MacOS X 10.6 or superior. As usual, Sandvox is free for websites up to 5 pages, so there’s no reason not to give it a try.

I released just now a small but critical update to all my themes. With one of the previous updates I broke the “Gallery” feature in Explorer.

The Gallery is that option you can select in photo albums to show up a lightbox slide show instead of redirecting the visitor to single photo pages (see picture).

The update has been sent via e-mail to all the customers who didn’t unsubscribe, so you should receive it in your mailbox in a matter of minutes.

Anyway, as far as I understand, this option is rarely used so most of your websites are safe.

Since this is a frequent request, I wrote a short tutorial on how to use the textures and gradients that come with some BehindTheRabbit designs (like Carbone and Grafite).

• How to use gradients in your Sandvox Design

Sandvox 2 hits the Mac App Store and is priced for a limited time at $49.

If you are planning to move from iWeb (or any other app) to Sandvox, this is definitely the right time to do it.

If you want to have a look first, you can still download the free demo from Karelia (fully functional, up to 5 pages perfectly working for unlimited time) and then move back to the App Store, buying it there.

To infinity and beyond

A few words here.

From time to time it’s necessary to write down something directly in HTML. Usually it isn’t strictly code, it’s just some formatted text that you’ll paste into an HTML editor in WordPress or into a Raw HTML object or page in Sandvox or RapidWeaver. You may prefer to have it directly in HTML because there’s some other ready-made code you need to add somewhere, or because you just want to tweak it more than your favorite platform allows via its default visual editing tools.

HTML code is easy both to learn and to use, but if you’re writing a long text and want to focus just on the creative side for a while, writing and closing tags each time is a waste of keystrokes and concentration. Moreover, if you’re not an HTML expert you probably don’t feel safe in writing code by hand.

John Gruber, the author of Daring Fireball, created a simplified language to be used alongside HTML and called it Markdown. It has been very well received and now a bunch of text editors support it or are even specifically based on it.

Markdown’s syntax is defined just by few characters, in substitution for the most common HTML tags. For example, an h1 header in HTML is written this way:

while in markdown you just need a hash:

– Read more »

One of the most viewed pages in this website is the tutorial to customize styles in Sandvox via CSS injection. The tutorial was written for Sandvox 1 and a few things are changed in Sandvox 2.

The best one is the possibility to inject code directly into the CSS file, saving a few bytes and making things cleaner and easier.

I wrote again the tutorial from scratch and I think it is now even easier to follow, with more examples and few more informations about how code works behind the scenes.

After a couple of weeks of hard work (it took much longer than I thought) today I finally completed this website’s massive redesign. The orginal website was built two years ago and things weren’t all clear at that time; adding things one at a time made the whole site become confuse: it was the time to rethink everything and to go back to the drawing board.

First of all, the whole website runs on WordPress now (previously the blog was on WordPress, the remaing part was built by hand in php). As an obvious effect, the blog has been absorbed by the main site and now they are merged, so there’s no “blog.behindtherabbit.com” anymore (old links will work anyway for a while).

Second, I moved the demo site back to its original position at demo.behindtherabbit.com.

About the internal organization, I decided to hide pages about suspended or discontinued projects (RapidWeaver and WordPress) but you should expect some good news on the WP side sooner or later.

Tutorials are clearly visible on their own page and aren’t scattered anymore inside the blog.

I double checked everything but I’m sure something still needs some tuning: if you find any malfunction please let me know at support [at] behindtherabbit [dot] com (or via twitter @cmgaston).

I hope you’ll like it as I do, happy navigation!