Beckism.com

I created the design that became my new Mac software blog Tagamac by accident. I was in between web design clients, but had just bought a new font (Estilo) and wanted to play around with it. I started messing around in Photoshop and pretty soon I had a mockup image that was quite intriguing. Aside from Estilo, which just oozes personality, I had come up with a border that was a lot different from any of my previous designs: it extended a little over halfway across the from both sides, but didn’t go all the way across. The top and bottom complemented, but didn’t complete each other.

I had to create the HTML just to see if I could. This would not be a difficult design with tables, of course; heck, I could have Photoshop figure out how it wanted to break it up for that. Divs, however, were another matter. After fighting the good fight, I have a method that I think is pretty slick. In fact, the only thing I regret is that I had to use a pixel fixed width; the squishy fixed width that I’m using for the Idol Bat, One Crayon, and this site could play no part (it’s squishy because it’s in ems; if you resize the text, the width of the page will grow to keep the line lengths similar).

I doubt other people will have quite the same fixation with asymmetrical designs, but I figured I’d outline how I achieved the Tagamac design here. If you want to see exactly how it’s done you can of course check out the source.

The problem I ran up against was not getting the middle main area looking good, but making the borders I’d created extend to the edges of the screen. I solved my problem by using two main header divs and two footer divs. Each div is 50% the width of the screen. For the headers, the left header has a background image along the bottom for the border; for the footers, it’s the right footer. Then each of the header divs has a content div. The content divs are each half the width of the whole page (which is 800px), have an ‘auto’ outer margin, and contain images that hide the background in the parent divs.

And voilá: an asymmetrical page! Of course, the header and the footer have to be broken in half (so there can’t be anything that spans them) and the page width is a fixed pixel width, but overall I’m pretty happy with it. Asymmetry is a relatively easy way to make websites that stand out (from my standard designs, if nothing else).

Let me just say that Transmit 3 from Panic Software is a wonderful program, and my current favorite FTP program. The one thing that has been marring its beauty for me was my inability to navigate through directories or transfer files using the keyboard.

I’m a big fan of keyboard navigation. I’m still something of a novice at it in many ways, but now that I’m doing a lot more coding I’ve been forced to find the hotkeys and shortcuts that I didn’t bother to learn before (thank goodness for KeyCue). In fact, the only thing really standing in my way when it came to Website Coding Keyboard Nirvana was my reliance on the mouse in Transmit.

But it finally pissed me off so bad that I took the time to sit down and whang at my keyboard until I hit something that worked.

Here’s the the secret: cmd-↓ (command + down arrow). This one simple shortcut transfers files, opens directories, and improves your chances with beautiful women. It really is a miracle worker.

Now perhaps for the hard-core keyboard navigators among us this shortcut is all too obvious. It turns out that it’s an Apple standard; cmd-↑ and cmd-↓ can also be used to navigate through the Finder. I’m sure the real mice-burners are laughing at me, but it just wasn’t a shortcut that I was familiar with. I’m used to using cmd-O in the Finder, and to be honest I’ve never taken the time to learn its keyboard navigation secrets because I got hooked on Path Finder’s excellent shelf system before I started really making an effort to navigate using only the keyboard.

In any case, when I went looking for the shortcut in Fetch I discovered what is possibly the worst decision next to leaving any reference to the shortcut out of the program entirely: the only place where I can find it mentioned is in the preferences.

That’s right. It’s not in the documentation. It’s not in the menus. It’s in ten point font in the preferences. I ask you: who looks in the preferences for a keyboard shortcut? Sure, if the program allows you to create your own (Transmit doesn’t). But normally? Panic, where’s the excellent interface love that is so evident throughout the rest of the program?

In any case, I can at last navigate through Transmit without leaving the keyboard, which, despite my recent trackball purchase, is bound to make my wrists that much happier, not to mention speeding things up.

Now if only there were a standard shortcut for switching between tabs, my life would truly be perfect.

I recently landed a web design client who has a website that needs a little sprucing up, an entirely new admin backend that can be administrated by real people, and a lot of code updating. Its code is hideous; completely non-XHTML compliant with capitalized tags scattered everywhere, some pages are seas of Word-generated HTML (which is the worst nightmare of any decent web designer), and it’s otherwise just pretty hideous.

Fortunately for me, I have a lovely utility called TextSoap Deluxe. TextSoap has any number of ways to clean text, and one of its nicest ones is the ability to create a custom cleaner based off of regex rules, which will then churn through a chunk of text and do things to it. Of course, I knew very little regex at the time, but after a few hours sitting down with the excellent Regular-Expressions.info tutorial and doing a bit of trial and error in TextSoap I was able to create a cleaner that at least simplifies my life by lowercasing the things that need lowercasing (among a few other things). If you use TextSoap and want to see what I’ve done, I’ve posted an early version of the cleaner in the TextSoap forums: XHTML Cleaner for TextSoap.

I’ve been designing websites for years, but I still run across things that baffle me, particularly when it comes to programming sites cross-platform.

Take for instance a bug in WebKit, which powers browsers such as Apple’s Safari and OmniWeb that I discovered while designing the current template for Beckism.com. The short version is that if a background image is attached to a child div but is wider than the parent div (in pixels) it will wrap around into the parent div. Want the longer version? Read on.

In designing the new Beckism.com site them, I wanted to maintain my old look (green header that wrapped around into a right sidebar that stretched all the way down the page) while fixing a number of cross-browser display bugs and general friendliness issues. The main problem is that it is very difficult to stretch a sidebar div to match the height of the main content div. My original solution was to have a fixed pixel width sidebar, and then use a background image attached to the main wrapper div to color it all the way down.

This was an unacceptable solution for the redesign for one reason: I didn’t want a fixed pixel width sidebar. Since designing the new Idol Bat theme, with its em-based widths and ability to scale (hover over the top right tab to get flash controls, including scaling controls), I’ve decided that, where possible, flexible em-widths are definitely the way to go. They scale fantastically well, the text at any size is situated in about the same place, and they just feel cleaner.

The trouble is that an em-width could be any number of different pixel widths based on a viewer’s preferences. Although much more friendly for the end-user, they are hell from the standpoint of graphic design. Sadly, after messing around with any number of solutions, it seemed that the image background was the only viable, cross-browser solution.

So I figured why not just use a background image that’s needlessly wide? This would allow me to have variable width sidebars while leveraging the same workaround as the first version.

So I whipped out an image that was 1 pixel by 1000 pixels and tried it out. Worked perfectly for every browser except for Safari, which looked something like this:

With a little experimenting, I discovered that in WebKit, if a background image of a child div has a pixel width that is wider than the pixel width of the wrapping div, it wraps around. This is very strange, and threw a bit of a kink in my plans. The WebKit bug meant that I was not only constrained by one variable width, but by two. Grah!

My compromise, for lack of a better solution, was to use an image background that was wide enough that it was unlikely the sidebar would ever grow that big (unless a user has an exceptionally high-resolution monitor) but not wide enough that it was likely to exceed the total width of the main div (ended up being 500 pixels).

Now I can only hope that no one runs into problems; it’s highly unlikely, of course, but I’m still cursing CSS and the browsers for not providing any sort of reliable height controls.