SiteCrafting, Inc.

gotAPI.com is one of the most useful online resources I've come across, primarily because it places resources spread all over the internet into one simple site. I've been using this for quite some time, and have for the most part I have taken its usefulness for granted. Then it occurred to me that I might not be the only one that could find this tool useful (I know, it was a big 'DUH!' moment). So now I will share this gem with others...

Read more →

In the process of trying to figure out what in the world was wrong with my stylesheet, I went to W3 to validate it (and, although it is irrelevant to this post, I found my problem in a typo. Isn't it always a typo?) Since I am lazy about these kinds of things, I did the validation by direct input rather than finding and uploading the actual file, and something entirely odd happened: the URL bar contained something that looked like a solid black mess. After one forced shutdown due to being worried that something had gone wrong, I copied and pasted the content of the bar into a text document and lo and behold! It was the URL (a 34 000 word one, no less, due to the direct-input validation's method of incorporating all the CSS into the URL) and because of its length, it had wrapped over itself.

Read more →

It's been quiet on the SiteCrafting blog lately, mostly because we've been very busy making websites for out great clients. I've been swamped for the last two weeks with one project, and I know Kevin, Ken, Reena, and... well, everyone has a full load.

My latest few projects have all been sites that have a defined content width, say 850px, but centered in the browser window. The usual way to accomplish centering with CSS is to make the margins of the content to automatically adjust to the window (margin: 0 auto;). Usually, that happens on the specific areas, so if you have three content areas to center, you either need a container for all of those areas, or set margins three times. The first option has problems with backgrounds, and the second results in more code than is needed.

Read more →

I just finished coding a new photography contest application for a client, and our graphic designer alerted me to some weirdness that Safari has with PNG images. To make a long story quite short, Safari doesn't translate PNG colors to match CSS colors reliably; it darkens them just a bit. The details are beyond me, so instead check out this article for those, and you can see an example in this image. The example labeled "Your Version" is the Safari rendering, and the box labeled "Our Version" is the Firefox rendering.

For you, this means that you shouldn't use PNG images where color matching is important, use GIF instead. However, if PNG use becomes more widespread, hopefully the treatment of PNG images by browsers and OSs will become more standard and can replace GIFs - which have fewer colors and larger filesizes.

Some really large forms can be a bit of an eyesore especially to the people filling them out. One thing that always bothered me was how bulbous most textareas had to be just to make enough room for a user to feel they could type what they needed. So I set out to figure a good way to clean up my forms a bit while still allowing the multi-line input of textareas.

Read more →

Last time, I outlined a way to create a simple PHP script timer. I use this timer in many of the projects that I work on, and it's really helpful to nail down trouble spots in scripts. The thing that it lacks, however, is a decent display. When you call the elapsed() function, it only gives you a number. Creating a decent display for each timer call is tedious and boring. So I simplified it. Now, I'm going to extend the existing Timer class and add some new functionality - make it look better and make it easier to call and display the information.

Read more →

One thing that we frequently build in conjunction with new websites is a tool for sending out email newsletters.  For the most part, we stick to XHTML/CSS and try to stay away from using "old" layout techniques (i.e. tables) for the newsletters.  This allows the greatest flexibility between the large number of email clients (e.g. Outlook, AOL, Yahoo!, Eudora, Thunderbird, Pine, etc.).  Businesses love being able to quickly communicate with their customers, and email newsletters are a great way to do this.  But things are changing, and if you use HTML newsletters, you'll need to make some changes too.

Read more →

I ran across a neat article from Sitepoint via Stylegala that you all should read on how to make your HTML 'perfect'. In the world of design, the concept of perfect is non-existant. There is no solution that will work for solving every problem, and there are exceptions to every rule. This article is no different. Read the full article, and then check out my comments.
Read more →

foreach ($left_elements AS $le) {
    ?>
    <table class="leftnav_<?=$le['class']?>">
        <tr>
            <td class="leftnav_<?=$le['class']?>">
                <a href="<?=$le['target']?>" class="<?=$le['theme']?>"><?=$le['name']?></a>
            </td>
        </tr>
    </table>
    <?
}

Nobody wants to see that. Especially not seven different times with seven tiny variants covering seven different if conditions.

Each higher 'class' number is a deeper indentation. Apparently it's necessary for this class identification to be repeated for the table, table cell and link. Converting this to a nested list format (part of my current task) is going to be an adventure.

Well... at least it's indented nicely.

While I was taking some time to evaluate a 3rd-party application for a customer I took a peak at their site's HTML. I was pretty shocked when I found some very strictly organized code that contained gobs of nested tables. At one count I found a structure that was 10 tables deep! I suppose since enjoying creating clean mark-up and mostly table-less designs for the last few years I've forgotten my roots.
Read more →

While I was working on the latest site for Airstream, I came on some extremely weird behavior concerning the navigation. First off, the designers did an extremely good job with the visuals. On the other hand, I had to be really creative to figure out how to make various parts of the site work.

Here's some background for how the navigation was supposed to work: there are five sections to the site, and each section has sub sections that show up in the navigation bar, depending on what your current location is. Navigation and sub-navigation. Also, the navigation area has a graphical background that can't change. Since the PNG spec isn't fully supported by IE yet, we had to go with GIF or JPG graphics.

Here's what it is supposed to look like (and what we ended up with):



Read more →