BehindTheRabbit

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!

The upgrade to Lion brought me a very unpleasant surprise: few days before my vacation the demo site was unexplainably broken with Safari 5.1. I double-checked the script and I was absolutely sure it was fine (actually it is the script for style-switching) but I didn’t have the time to manage the situation. I’m still on vacation but today I decided to take a look again to find out what was going wrong and I eventually found the bug (Safari 5.1 doesn’t properly recognize the “disabled” property for alternate stylesheets).

A step in the right direction, but still I wasn’t able to fix it; thanks God, someone did.

Now the demo site should work fine with Safari 5.1 for Lion and other browsers too, hopefully.

[Update - 2011-09-17] – I wasn’t satisfied with the fix, it isn’t good enough so I reverted to the old, static demo site. I moved it back to the original URI at http://demo.behindtherabbit.com/.

This is a brief update before I leave for my definitely well-deserved summer vacations

• Support is not guaranteed until September 1st; I’ll check my e-mail from time to time, but my possibility to reply and solve problems will be impaired.
• All my designs are created from scratch for Sandvox 2 and all of them support hierarchical menus, as well as other Sandvox 2 features.
• No design supports the “blockquote” object: maybe in September I’ll release an update to add this feature. This is the only thing that is missing.
• Demo site is broken if browsed from Lion’s Safari 5.1. I won’t fix this because the code is correct and I really hope that Apple releases an update ASAP. In the meantime, if you installed Lion, you need to use Firefox or Chrome to check the demos. Sorry about that.

See you in September!

The most common support request so far is: “How do I activate hierarchical menus?”. This is very common and it means that something is wrong, so I’ll try to explain at my best what’s going on and how to manage this situation.

First of all, you don’t need to activate hierarchical menus: they are active by default.

If you don’t see them, you need to discover why, following these steps:

1. Check that your page is intended to be shown in a hierarchical menus. Your page has to be hierarchically nested: – Read more »

This post on the other blog of mine can be useful for Sandvox users who are wondering if they can improve their skills and how (and if it’s worth the effort).

Just a few thoughts.

With the release of Lake and Blue Raymond for Sandvox 2 I completed the upgrade to all my current designs (Roseto is discontinued and will now available for free, but only for Sandvox 1).

The only issue, I had with the two columns layout of Blue Raymond. I’ve never been really convinced it was a perfect solution (it would have been better if the user have had more control about it) and when a couple of issues witht he new format came up I decided to drop it.

You can put the two columns back with some code, but it’s up to you if and when. For example, they fit properly in large text single pages with no sidebar (and they are terrible in collections). In case, just try this (with Page Code Injection):

With Lake things were easier and the end user shouldn’t notice any particular difference other than the enhancements due to the update (hierarchical menus and so on).

That’s it, now my goal is to step up to the next level, I’m studying a couple of interesting things that you will appreciate.

Orange Rabbit was one of my first designs; soon I added the instructions to change the default orange color to whatever color you’d like. The word “Orange” in its name was proper, but somehow misleading.

The new, Sandvox-2 ready version of this design is ready and I decided to drop the “Orange” name to better describe what it really is. This new version, which is now called Simple Rabbit, comes in four basic variations (orange, green, red, blue) but, as usual, you can change the default color with just one line of code.

What I like most of this theme is that you can change color on single pages too (using Page Code Injection instead of Site Code Injection), which is a super-easy and fast way to differentiate sections in your website. Blog? Pink. FAQ? Dark brown. Contacts? Banana yellow. Well, it’s up to you what color to choose…

Simple Rabbit adds support for new features like hierarchical menus, but is different from Orange Rabbit just in one thing: I increased a little bit the default font size (it was around 11px). Nowadays, monitors are either very large or very small and 11px are too low for both.

I released yesterday Sugar 2.0, the second design (with Carbone) made fully compatible with Sandvox 2. As usual, you will find both the new version and the old designs for Sandvox 1.6. And as usual the new design includes in one only package all its four variations (read the previous post if you’re updating an old design or you may find yourself with both versions installed).

What’s new? Almost the same things you can find on Carbone:

• CCS3 Transitions: shadows, borders, opacity effects when rolling over a sitemap item, a photo-grid thumbnail and the navigation arrows.
• CSS3 form styling: forms have rounded corners, a dark grey background and a brand new button with a background gradient – and it works in IE too!
• Hierarchical menus: menu items are now block and not inline elements.
• A new print.css file: sidebar is not printed, typography and margins are improved and next to each link you can see the URI between parenthesis at a smaller font size.
• Checked on IE9 and Chrome, gracefully degrading for old browsers, more polished code and so on.

Sugar is ready for the new demo site as well, so you can have a look here. Next one is Grafite, so stay tuned.

With Sandvox 1, to have four variations of a Design (for example Sugar) you needed four distinct files, one for each variation; you used to see four different choices in the design chooser as well. One lovely feature of Sandvox 2 is the ability to “group” variations in the chooser uncluttering the interface. You still have four designs, but they are “joined” together and you can collapse or expand the collection.

Even better, Sandvox-2-only designs can be embedded altogether in just one file. Four variations? One file. Ten variations? One file. Twenty? One. There could be a little problem though, when you update your old, Sandvox-1 design with a brand new version for Sandvox 2. Technically, you should just double-click the new file in the Finder and Sandvox will install it, overwriting the old version (and deleting it).

But what happens when you update the just released Sugar with a double click? You used to have four files (default, red, orange, green), now you have one. Well, the default file is overwritten, the other ones are not. So this is what you get inside your ~/Library/Application Support/Sandvox folder: – Read more »

One of the most boring things to do (after you spent hours or days coding) is to prepare a fake demo website for a new design. They are all alike, with only slight differences the user doesn’t even notice.

And they are boring for the user too because the main goal of a demo site is not just to show how a design looks (a few pics would do the job) but also to show the differences between designs or various flavours of the same design.

Problem solved.

Now there’s only one website and you can switch design on the fly with just one click. Only Sandvox 2 designs will be shown there, old designs still have their old, specific demo sites, one each, accessible from their own pages.

Even if there’s only one design (Carbone) at this time, you can already try because it comes in six variations – and you have them all in there.

I had to postpone the work on Sugar a little bit, but I think it was the right time to do this (I was thinking about it since the very beginning…).

Technical details, for geek’s eyes only: I created a very basic Sandvox site, then I modified by hand the HTML to add the switchbar, the alternate styles (one for each design), a javascript and a css file (all via php include); drop-down menus are entirely done with CSS (no JQuery here); the switcher js is an old script I’ve had on my Mac for years – I don’t even remember where I found it – and uses a cookie to store the last design you selected.

• Try it now!