Our Mindfly Blog

Give 'Em the Old Razzle Dazzle (Making Buttons in Vector, Opening Argument)

Janae Wiedmaier — Wed, 06 Aug 2008 08:40:00 -0700

Vector. As long as I've used Photoshop (and it's been going on some ten years now), using the vector tool has been the one thing I have avoided. As an artist who never particularly used cell shading, cared much for smooth beautiful lines - okay, not true. Rather, didn't understand smooth, beautiful lines- vector never came into the picture for me. I've had a few moments where I've been coloring a piece of art or trying to add a functional square or circle to an image and accidentally clicked the pen tool or (and this created a panic), the "add vector mask" option, but all of these situations resulted in a frantic spamming of the undo button (or ctrl+Z for all you hot-keyers out there. Better yet, cmnd+z for all you mac users!). I would wipe the sweat off my forehead and go "What in the world did I do?", although, as we like to say... ignorance is bliss and I was very happy to be a blissful, clueless, non-vector user.

I have been well-informed that vectoring in Photoshop is not necessarily the best option. I don't have Illustrator at home to play with, so I just assumed that if I really wanted to use vector, then I'd have to snag myself another program. Oh, what a boring creature I was.

The question that should be coming to your mind now is: Well, why is she talking about vector if she isn't using it? I mean, really, don't blog about things you're ignorant about!

My response: And why not? People blog about things they're ignorant about all the time!

The honest truth of the matter, however, is that I have given up bliss for the world of knowledge and sparkles. Why have I done this? Simple. Karina asked me to make an image for her personal blog, Guts and Garters, in a whimsical (for any of you who follow her on twitter, this should be no surprise as her name is @whimsikay) fashion that I am completely unaccustomed to drawing in. However, my competitive nature coming to the front I decided, what the heck? Give it a try and see what we can do.

The old way of creating smooth, beautiful lines in Photoshop was not amazingly effective or smooth, not to mention time consuming. Looking back, I think this may be another one of those criminal sins that I should be put on trial for along with frames, tables, and photoshop slicing (eviscerating?) web pages. Luckily, although I may not be as cute as Renée Zellweger, I feel that if I were to throw myself at Richard Gere's feet, he'll give me the same glorious speech Roxie got in Chicago:

When you're in trouble, go into your dance
Though you are stiffer than a girder
They let ya get away with a murder
Razzle dazzle 'em
And you've got a romance!

In other words: Go to deviantART, kid, and find yourself a vector tutorial!

You, dear reader, are luckily going to get something even better: a simple tutorial from yours truly.

To start with, open Photoshop. Next, you're going to need to have the following tools ready for use:

The pen tool:	The path selector:	The brush tool:

Make sure your brush tool is set to size three, full hardness, with full opacity and flow like the following:

Now you're ready to get started with vector, and I will be happy to show you how in "Give 'Em an Act That's Unassailable! (Making Buttons in Vector, Cross-Examination)"

Sweet Titles Are (Let's Face It) Totally Sweet

Karina Beattiger — Tue, 05 Aug 2008 08:34:00 -0700

I've gone on record numerous times talking about how much I really don't want to be bothered with learning javascript. As useful, awesome, flexible, etc. as it is, it's a full on programming language that may not be as hardcore as .NET or PHP, but more involved than just knowing CSS. My brain can't take the pressure. Or, at least, so I assumed. Hoped. Whatever.

This is where I digress somewhat...

Among the many benefits of Twitter (stalking, obsessive stalking, and stalker-collecting, to name a few), the best is the ability to find/meet new people and develop a relationship comprised of pixels and shared interests. Mrs. Flinger, a web designer from near-but-not Seattle, is one such conquest. (Look at her blog; is it not keen? Worship the keen.) Through Mrs. Flinger, I hop-skipped-jumped my way through her contacts to find Joelle. Joelle, also known as Tenth Muse (because the other nine are too busy to bother with me, you see), has a website that serves as the inspiration for this post. It's not the color (though the retro look is ridiculously fun!) or the art (I hope that if I ever meet Joelle, she has a bouffant). Rather, what caught my attention is the absolutely fascinating tool-tip hover styles she's got going on all throughout various portions of the site.

My eyes: "...What was that?"
My brain: "Ackgglmurglghaaaaggggh. See, Castle of--"

Must. Have.

However, a glimpse into Firebug's secret stash of codery goodness reveals.... nothing! Bwahaha!

After a brief moment of extreme fail, I sat down at home this weekend and resolved to figure out what was causing such lovely tooltips. WD Weems mentioned javascript, and sure enough, I found this little gem of a script here. Dustin Diaz has been floating around since 2006 and earlier with this fabulous little device, and I never knew. This is a deep blow to my aesthetic-pride.

Sweet Titles is a bit of javascript that basically replaces your normal link tooltip with something that you can style as per your own design. You can, with a little JS know-how (or very good fakery of such), remove the URL in the tooltip, edit the URL, arrange the tooltip so that it follows along with your mouse, and make it so that the tooltip only works on certain items with certain tags.

Is this not the most awesome detail ever?

There are some drawbacks to the script: those who aren't familar with JS may (cough) find themselves at a loss when it comes to making the above edits. The discussion helped me piece together this and that (I spent 2 hours trying to figure out what 'wrap' meant!) and the whole shebang has quite the fan crowd. Of course, anyone turning off javascript on their computers will not see said beautiful new tooltips -- but then, anyone turning off javascript nowadays also probably eats cardboard because it's substantial and sponge-baths in rain water lest the germs building in the water pipes cause a plague of lemur-ism.

Yes, lemur-ism. Monkey-itis. You never know.

As the current script is somewhat old, I have every intention of handing it over to Kyle -- after chasing him down, tying him up, and nagging him long enough to focus on it, of course -- and making him comb over it with the WD Weems eye we all respect (and think rolls at an odd angle now and again). In the meantime, I am implementing it in my personal site as a beta run.

Sweet Titles isn't just another pretty color. It's a very small detail, but it's the kind of detail that pulls a site that much tighter together.

And let's all be honest here... I like bells and whistles.

Attack of the Overkill Solution (Getting Flashy Without Flash)

Kyle Weems — Mon, 04 Aug 2008 08:09:00 -0700

I am at this point strongly annoyed by Flash. No, I'm not referencing Flash Gordon, hero of the eponymous 1930's sci-fi serials. I'm referring to Adobe Flash, the multimedia software. However, the two are closely related in one point: overkill.

In the case of Flash Gordon, episode names like "Captured by Shark Men" and "The Tunnel of Terror" probably bring home the point as to what I mean. Alliteration and aquatic predator men kidnapping ladies is the sort of over-the-top adventure that makes bad sci-fi into good bad sci-fi. Not only do I heartily approve of its existence, I'm overjoyed that it is playing on a continual loop at the nearby sci-fi themed bakery Rocket Donuts. Of course, they've got it muted without subtitles, so it the action can get a bit misleading when Flash and an overweight winged man are wrestling around barechested and smiling a tad too much.

However, with Adobe Flash, I've got a problem with the overkill occuring. Mainly, it's being used too often in websites for all the wrong reasons, and later presenting problems down the road when someone like yours truly has to change a website embedded to hell with goofy flash objects with no source code to work with. In my opinion, using Flash as a solution for a dropdown menu is the equivalent to using a nuclear weapon to stop a sixteen year-old from stealing a car. It's not only a massive case of overkill, it is also going to create way more problems than solutions.

Now, I might be a bit over the top when I compare rich media to weapons of mass destruction, but hyperbole has never stopped me from being right. (Usually, not thinking before I speak prevents me from being right, but in this case I'm pretty sure I've ran this topic through my head enough times prior to starting this discussion.)

What's wrong with using Flash to solve small design challenges? Well, first off, it's almost a given that the editable source file for the Flash movie won't be available when a website's owner gets around to hiring a new designer/developer to tune up their website, meaning you'll get to start from scratch.

For those not familiar with the laws of capitalism, time equals money, so this is a bad thing.

Secondly, embedding Flash objects is the web standards equivalent to comitting seppuku. There's just not a good, clean way to do it. One way or another there's going to be entrails all over the place. This is an acceptable evil for a website that's actually including a movie, game, or highly interactive media-rich project. But for a simple slideshow, it's just creating a mess that will only get worse over time.

Lastly, Flash is notoriously evil when it comes to disrespecting Z-index.

When I say 'disrespect', what I mean is that Flash is dragging Z-index into an alley, robbing it, beating it senseless with a cricket bat, then hiding it in a dumpster.

I for one do not wish to support any violence against CSS styles.

So for every person that makes websites out there, I suggest considering the following when a lightbulb goes off in your head with a specific design and you say "Ooh, I could use Flash."

1. What feature are you using Flash for? If it's something appropriate to the plugin, like a movie or such, then great. If not, then...

2. Is there something else that can do the same job just as well, with less of the headaches Flash introduces?

There's a few dozen occaisons where someone failing to walk through those two questions before making a project that later fell into my lap when Mindfly was tasked with tuning up various sites. I know this, because I've been plagued with malfunctioning (or non-editable) Flash image fade-in slideshows for the past eight months.

In the past, I've had to dig around in dusty servers with a flashlight, looking for the editable movie files, trying to decipher the contents within in the couple cases where I got lucky enough to find them, or recreating the slideshows altogether with new flash movies.

Then I stopped and thought about it for a moment.

In each of these projects, nothing complicated or interactive was going on. There was an image (a banner usually) that would slowly fade from one image to another in a continual loop. It was nothing more than a bit of pleasant presentation, like lights on a christmas tree or red heels on a cute blonde.

So why was I fixing the problem with more flash files, just to have someone in a few years curse my name when they got to work on the project next?

There is something else out there that all the major browsers can use that is perfect for changing images. Javascript. Maybe you've heard of it before.

In particular, Javascript is great with CSS manipulation. And thanks to the advances in CSS over the past decade (despite the glacial crawl of CSS3), there's a style or two that can be used to imitate the fading of one image to another. As Javascript is seperate from the markup, and doesn't require some sort of bizzare, ritualistic embedding, it presents a lot cleaner of a page. And as it isn't compiled, the source can be edited or easily swapped out by future developers.

So down to the meat of the solution.

First and foremost, let's look at what we're trying to accomplish: A fade-in slideshow where a series of images fade between one another in a continual loop. Obviously we'll want an image element to hold the current image in. But how do we transition it to the next image in a fade?

Well, for the standard javascript world (as opposed to the world of propietary MS filters), there's no immediate easy 'fadeToNextImage' function. However, thanks to many different JavaScript libraries out there, there's various animation functions that allow us to transition CSS properties. The world of Javascript libraries can be confusing and scary to non-programmers who start dipping their toe into the pool, but one that I enjoy (and is very clearly documented) is jQuery, which I've recently been converted to.

Why? Well, for one it's compact, and for two it keeps things as simple as possible.

Simple is good.

So what we want is to fade out the image into the next image. The first image can easily be faded by animating a transition of it's CSS opacity property from 1 (fully opaque) to 0 (fully transparent). The trick then is having the next image there to be faded into. In an ideal future we'll be able to affect the foreground and background opacity of an element seperately, at which point we could apply a background-image to the image of the next image in the sequence (CSS is fun, isn't it?). However, in this fallen, modern, CSS 2.1 wold we'll have to use an extra element. The idea solution then is a div, which ideally has been given the same dimensions as the image it's holding. Give the div the new background image, then fade the opacity of the original image. It will look then like you're fading one image directly into another. Then flip the new image to the front and repeat the process.

Easy, right?

Well, before you get all panicked, I've created a nifty example (complete with javascript and ninja!) for you right here.

Go ahead and test in all the major browsers. Thanks to jQuery's nifty animation functions the opacity works the same for all of them (despite Internet Explorer's alternate, proprietary method for setting opacity).

The image urls for the slideshow are stored at the top of the fadein.js file as an array. You can easily replace these with other urls (or add more images to the list) to extend or change the library. For those of you with more confidence with Javascript, there's a number of ways you could supply the array for the URLs, such as an AJAX call. Using CSS selectors, you can change the target of the slideshow function as well, and if you feel up to it, even call for multiple slideshows on the same page. Just remember, you need to target the wrapper, not the image, with the function.

This is just one example of using Javascript for slideshows, of dozens out there. But more importantly, it's an example of not relying on Flash for a solution when a less intensive, less invasive option exists.

Save Flash for the movies, games, and rich web apps. A site with just fancy presentation can be done just as gorgeously without it.

What? Sorry, I was listening to Pandora.

Theresa Carpine — Fri, 01 Aug 2008 09:54:00 -0700

If you walk into the Mindfly design studio—with a snazzy, new desk configuration to maximize workspace and create a more collaborative work environment—and say hello, it might take a moment for anyone to respond. We don’t mean to be rude. We’re all just busy making and running websites. We also have our headphones jammed in our ears and plugged into our computers because we’re listening to Pandora.

Founder Tim Westergren and a group of musicians started the Music Genome Project began back in 2000. The idea was to analyze and classify music based on “melody, harmony and rhythm, to instrumentation, orchestration, arrangement, lyrics, and of course the rich world of singing and vocal harmony” (About the Music Genome Project®). With tens of thousands of artists and song classified, the Pandora radio service was launched in 2005.

Go to Pandora and enter the name of an artist or a song. A radio station is created, selecting other songs with musical attributes similar to your request. You can then further design the station by adding more artists to the mix, and by giving songs a “thumbs up” or “thumbs down” to help Pandora better tailor a station to suit your tastes.

Since it is a free radio service (a paid subscription is also available), there are a couple limitations because of licensing restrictions. It’s currently only available for residents in the United States. You can’t rewind or replay a song, but you can skip or pause music. Pandora is also not allowed to play a particular song or artists on demand. But if you’re just dying to hear a certain song again, they provide quick links to iTunes and Amazon so you can purchase the song or album.

I test the true of the effectiveness of a Pandora station based on how closely it can emulate my iPod playlists. Why not just listen to iTunes then? Because I like the fact that Pandora stations also throw out some music by artists I haven’t heard of, but that they think I’ll like based on my previous requests.

Did You Say Gorillas? (The Stylesheet Circus of phpBB3)

Janae Wiedmaier — Thu, 31 Jul 2008 08:02:00 -0700

This morning, it is my turn to write a blog post. Actually, yesterday was my day to write a blog post but I got "busy". Busy is a combination of a couple things, the first being true and actual work and the other being sheer procrastination. It's not that I don't like to write, mind you! Far be it from me to ever say that sort of blasphemy. I enjoy writing almost as much as I enjoy the sound of my own voice (my friends, I imagine, would tell you that it is definitely a lot as I have a voice that carries like a birds in the morning and can chirp just as vivaciously). The problem is writing about something applicable, current, or useful. On that, I am at a loss.

This would not be the first time that I have been sitting at my computer here, wracking my brain for some sort of miracle problem solving technique. Most of the time, despite the fact that the gears are turning, my face is still blankly staring at the screen and I fear I feel a bit of drool on the corner of my mouth. What does the new girl say that hasn't been said before? Or, how does the new girl expand on something that has been said before but give a new take on it? I don't think that a large cup of tea and another ten minutes is going to help me solve this problem, so I suppose I'll just do what I did with at least ninety percent of my college papers: wing it.

The only real thing that has been on my mind for almost a full week (and the bane of my existence at this time) is also what I've been ~~procrastinating my blog post~~ "busy" working on. This creature is known as the phpBB3 Forum Skin (and yes, it deserves caps). I went to my peers and said that I wanted to ~~rant~~ write about skinning a phpBB3 forum and was basically given the look of "this is your doom" and sent towards another direction. The problem is that when you've been so focused on one thing for a week, you can't help but want to post about why it's taken you a week to focus on this one thing. I feel the need to get it off my chest, anyway.

When I was given the task to skin this forum, I had done some forum skinning before, although it was all done on the Simple Machines Forum as well as internaly rather than skinning by going through the actual code outside of their editting system. I was completely unprepared for what I was about to get myself into. Granted, my co-workers all gave me sympathetic looks and told me that they've had to do the same thing and that it becomes no less time consuming or confusing as you go on. This was not particularly comforting.

After hooking myself up to our test forum, configuring FileZilla, opening up Notepad++ and settling in, I finally decided to open up Windows Explorer and take a look at the theme files. This is the point at which I ask you, dear reader, to be a bit imaginative for my sake. Close your eyes, sit back, and envision the following:

Stepping around the corner, there are three large tents. Each of them has a flashing neon sign above them in bright, vivid colors. In order, they are "Imageset", "Template", and "Theme". You stop for a moment, stare at them, and head towards the Theme tent. There is no one outside but you, however... the minute the flap is pushed back, there is a whirl of color, bright lights, a cheering crowd and... dancing gorillas?

"'Did you say gorillas?'

'I said gooorrrilllass!'"

All right, the last part of that was merely a quote from Mirrormask. However, the feeling I got was not unlike something out of the first couple scenes of that movie (including the part where... well, I won't spoil it for you, but there's some passing out and I did come close to that...) or perhaps the opening sequence of Paprika. In fact, the whole situation was as surreal as the dreamscapes in that movie. However, I digress.

The fact of the matter is that between the fourteen stylesheets that do not seem to be organized in any fashion (that I can tell), how's a girl supposed to find anything? If not for the search function, I would have been stuck in a room with gorillas, all in pink tutus and impossible to tell apart unless you're a vet (or WD Weems, but I would not want to claim that glorious name for myself). To add to the confusion, when you do go in to edit the stylesheets and open the glorious of all web cutting assitants, Firebug, you notice something equally disturbing...

The gorillas are all wearing different shades of pink.

This is to say that when trying to edit the backgrounds on the forum headers on the front page, or the alternating backgrounds throughout the site, or the links... (the list goes on and on and on), it's been overwritten by something on another stylesheet. Its completely plausible to go to colours.css to edit a link color (that, yes, is there already in the stylesheet!) only to find that it's being overwritten by something in content.css. And so, after wandering to content.css to fix it there, it's being overwritten by something in links.css!

Honestly, phpBB is a fantastic, functional, user-friendly forum. That is not to say that it is, necessarily, a design friendly forum.

To get to the meat of the matter, what would I suggest to make this week-long task perhaps cut in half? Simple: A basic structure of css files that do not overlap each other. I would, of course, recommend the standard Mindfly CSS File Setup (tm?) as it is simple to use, easily laid out, and a great way to find exactly what you're looking for on any given page:

Now, I understand that phpBB3 has a lot of different html files that are all put together to form the site, and the way they have their comments laid out on the css pages does help some, but not enough to make anything easy without ctrl+F at your fingertips and a lot of shifting between tabs to find the five places something has been editted.

Time for the ringmaster to tidy up the circus?

Either that, or we may have to get ourselves a vet.

Please Do Not Kick the Leviathan (SEO vs. Design)

Karina Beattiger — Tue, 29 Jul 2008 08:21:00 -0700

This website shows the general statistics for the percentage of users who use the Google search engine versus other "top five" engines. As we've always suspected, Google is the great Leviathan rising out of the deep, lidless eyeball fixed upon all it surveys. No one can escape the Leviathan. No should fear the Leviathan, apparently, because the Leviathan is a helpful beast who wishes only to increase the flow of information in this world.

China notwithstanding.

The road to SEO mastery is a long road, frought with frustration and despair. Aside from the lack of complete rules and regulations, which is done to avoid exploitation, various tricks and work-arounds that legitimate web-designers use (as opposed to, say, spammers) could get your site red-flagged by the great Leviathan, which in and of itself doesn't mean anything. At least until you get too many red flags, in which case it means a great deal.

Unless "red-flags" by itself, is simply a bogeyman in the Leviathan's closet, but that's another post for another day...

WD Weems and I broached this in conversation last week, when we were talking about how to microformat Mindfly's usual calling card on the sites we design. Barest minimum, we have an organization name (org), which also doubles as a full name (fn), and a url. The tag itself tends to look as simple as this: site by Mindfly

The question stemmed from where to put the URL. If we were to look at the tag in markup, it would look something like this (a generality, as sometimes the markup around it will change):

<cite>

site by <a href="http://www.mindfly.com" title="Our Beautiful Design and Development">Mindfly</a>

</cite>

As is easily seen, there's our FN and ORG in Mindfly, but what about URL? Microformatting doesn't look at the addresses written in the markup itself, so this leaves us with a little bit of a quandary. Adding the URL to the cite link would make it entirely too text-heavy, and just adding a URL in place of the rest of it makes it mean less to your average viewer. We're not in it to make them think! At least, not in the distracting, take time out to figure out a website sort of way.

My theory, as posed to Kyle during this discussion, was to place a display: none on a span surrounding the URL we'd add below the "site by Mindfly" bit. This, to me, is not violating any sort of spam rules, since the URL is already in the information (just hidden beneath an anchor link)and is only for the purpose of microformat sniffers, anyway. However, a search on how Google crawls its way through pages revealed a great deal of warnings and speculation and shrug-offs about using such techniques. The conversation went something like this:

Me: "What if we use display:none on the url?"
Him: "Then you get red-flagged by Google for hiding content."
Me: "Does that mean every page with every display:none gets dinged?"
Him: "Yes."
Me: "But we use it all the time for other stuff like js and rollover menus!"
Him: "And we probably get flagged for it."
Me: "That's stupid!"
Him: "Maybe, but it's all because of the spammers."
Me: "Well, fine, if that's the case, we don't use display:none on rollovers and stuff on every page. What's one more?"
Him: "You don't want too many red flags for hiding content, or you'll get dropped from the ranks."
Me: "But we're not hiding content."
Him: "Yes, we are."
Me: "No, we're not! It's right there!"
Him: "It's hiding it and Google will flag it."
Me: "But it's right there. Under the <a> markup. That's technically hidden, for all Google cares, but it's not, because right there is the url for all to see."
Him: "But it's hidden."
Me: "No, it's not! That's STUPID!"
Him: "If you're going to yell, I'm going back over there."

And so on.

I did a little more research on the matter and re-acquainted myself with yet another gem by the great Andy Clark, who is and will remain my benchmark until I get awesome enough to make my own. Unfortunately, a thorough read-up of his microformat examples don't offer any immediate of answer for this quandary.

Therefore, it looks like it's up to me to be awesome.

My thoughts are this: as a web designer, novice though I may be, it's my job to take information, assimilate its use and need, and then arrange it in such a way that provides both interest and functionality to you, the web site viewer. Cluttering up a design or site with too much information (or worse, identical information, such as a link to a site with its url right beside it) is only going to be frustrating for me and annoying for you. So with that said, I think that there's nothing wrong with sprinkling your random hCard with display: none in order to force the information into a agreeable and design-friendly interface.

And I'll hope that the Leviathan that is Google isn't going to be a pain in the CSS about it.

... -kick-

Party Like It's 1996 (Internet Explorer's Addiction to EOT)

Kyle Weems — Mon, 28 Jul 2008 08:09:00 -0700

1996 wasn't a horrible year. Mind you, it wasn't terribly amazing, but it wasn't awful. I'd been out of high school for a year, the Super Nintendo was still dominating my video game hobby, and Trainspotting was out in theaters.

For those of you that didn't see it, Trainspotting is the story of "A group of disaffected Scottish youths turn to heroin to escape the banalities of modern-day existence." (IMDb summary) It has a great bit involving a dead baby climbing on a ceiling and cranking its neck around to stare at one of the characters. It also has Ewan McGregor, albeit a strung-out-on-drugs version of him.

I can't help but feel that twelve years later, Microsoft is still escaping the banality of modern-day life with some sort of chemical aid. In 1996, both Internet Explorer and Netscape Navigator introduced support for embedded fonts to their browsers, presenting the early form of the @font-face rule I spoke about last week. The problem was they each went a different route with it, so the whole modern web of awesome typography we were promised never happened. Netscape did one thing, and Microsoft decided to go with EOT fonts. The problem was that the EOT format was proprietary to Microsoft, and to convert fonts to the format you had to use their WEFT tool, which exists only on Windows.

Guess how many designers make use of Windows on a regular basis? I do, but according to the amount of Apple laptops at the last web-thingy conference I went to I'm in the minority.

We won't even go into how poor of a UI WEFT has. That's just icing on the cake.

Fast forward to 2008. Netscape Navigator has sunk to a peaceful oblivion beneath the waves of all dead software, and IE's market domination is slowly being chipped away by Firefox, Opera, and Safari (Too slowly, at that. Stop using IE, people!) After a large knockdown brawl with developers reacting very poorly to their plans for a new metatag, Microsoft decides that maybe they made a mistake and announces that they're going to embrace web standards. Honest. Really.

Well, maybe not. Like any junkie trying to kick the habit, Microsoft can't seem to drop its drug of choice (which is either being a total wanker or failing to embrace other people's standards, take your pick.) Last Monday, a mere four hours after my post about @font-face and my hopes that IE8 would embrace the W3C standards for the rule (which, as described by the CSS3 Web Fonts module currently includes the format() identifier and OpenType/TrueType support), Microsoft announced that they in fact were-- drumroll please-- encouraging others to embrace THEIR standard (which they've decided to open up), EOT.

Just to clarify, they're asking the rest of the industry to apply the brakes, make a u-turn, and join them in the direction they're going.

This is not, pardon me for saying so, "embracing Web Standards^tm." Quite the opposite. Now, it's all and good for them to encourage people to use a standard that they've kept proprietary forever and are just now opening up, but we'll add some qualifiers on there. At the moment, the only way to convert to EOT is WEFT, a hard-to-use tool that exists only on Windows, generates non-compliant code, and was last updated in 2003.

I think Microsoft its well past time for an intervention. Obviously, despite their own declaration this very year, they can't just seem to kick the habit of pushing their own path on others instead of embracing what's already out there. Their bully tactics may have worked on PC software, but on the web it's been proven time and again that the more Microsoft moves in their own direction, the more they lose ground.

How much longer until IE starts seeing dead babies on the ceiling? Perhaps it's already started to happen. Consider if you will, the source code of the example page Microsoft gives in their post encouraging EOT use. It's a standards compliance nightmare. Never mind the fact that the post's author says the example site was designed to only be viewed in full screen mode at 1400 x 900 resolution... This is the person Microsoft chose to champion embracing their standard? Wow. I'm speechless.

My hopes for Internet Explorer 8 just dipped a bit.

Is your website ADA-compliant?

Theresa Carpine — Thu, 24 Jul 2008 08:57:00 -0700

It’s always a bit confusing when I try to explain exactly what I do at Mindfly. I work for a web design and development company, but I don’t actually do web design or development. Mostly I write. I write a little of this and a little of that. So when it falls on me to write a Mindfly blog post, the writing part is easy. But making it connect to, you know, web stuff…that’s a little trickier for me.

At a recent family gathering, my mother was trying to explain what I do exactly (“she works for a web design and development company, but doesn’t actually do web design or development”) to my uncle, who also happens to be in the web biz for a public school district. He mentioned to her that their district website was being overhauled to make it ADA-compliant. And I don’t mean making a dentist-friendly website.

The Americans with Disabilities Act was passed by the United States Congress in 1990 to ensure “access to employment, state and local government programs and services, access to places of public accommodations, transportation, non-profits service providers and telecommunications” for people with disabilities. Websites of state and local governments fall in the category of “public services” under Title II of the ADA, which means that extra steps have to be taken to ensure that people with disabilities can still access the resources of those websites.

For example, a person with impaired or limited vision might use a screen reader program, which speaks the text on a website for the visitor. But a screen reader can’t read an image, so an ADA-compliant website should include an “alt” tag in the HTML code with a brief and meaningful description of the image.

Unlike government agencies, creating a website that is accessible for people with disabilities is not a requirement for private or business websites, but you could be discounting a population of potential customers that can’t access your site. If you’d like some more tips for making an ADA-compliant website, check out Website Accessibility Under Title II of the ADA, which describes some of the issues, solutions and other considerations that web designers and developers may want to account for when creating a website.

Wrapping Your Head Around Divs

Janae Wiedmaier — Wed, 23 Jul 2008 08:30:00 -0700

Okay, so maybe I lied. Sometimes you have to do that to keep your pride in check after all, and if I were to add any more deadly sins to my list of web creation perhaps, maybe, if I dug deep enough... I did use tables for things that perhaps, maybe, if I dug deep enough... they shouldn't be used for. Like a teensy-weensy bit of design. Okay, what it really comes down to is those Photoshop layouts that I mentioned? Where they compress a whole bunch of images into a website for you by slicing up your largely created image into teensy-weensy (yes, I like this phrase) ones? Yeah, that's all done through tables. I consider it my redeeming quality that I did not actually put the website together and let Photoshop do it for me. The non-redeeming quality is, again, that I actually made them in Photoshop.

I'm sure that my previously stated god, Div, will forgive me. After all, Div is far more forgiving than Table, I have found. The truth of the matter is that once you wrap your head around it, Divs are beyond forgiving, they're ridiculous (or as we like to say in my circle, redonkulous). The unfortunate thing is that you do, indeed, have to wrap your head around them.

In my time of editting forums, blogs (like Blogger and Livejournal), and websites, I had definitely seen divs in use. The thing is, seeing a div and understanding what it does are two different things. I'm sure some witty person thought div for division or divide or divider or some such, but that doesn't mean that those of us staring at it for the first time after only being familiar with, yes my pride goes down the tube here, frames and tables even knew what it meant in the first place. I will be the first to admit that I had no idea.

Luckily, websites like W3Schools exist and once I got pointed towards it by my friends on del.icio.us, I began to feel like perhaps I ~~did~~ do have what it takes to be a web designer and cutter.

So, the question still remains: What is a div and how do I wrap my head around them? Andy Clarke has pointed me to the answer in his book, Transcending CSS: The Fine Art of Web Design, and it's really quite simple: Div gets you out of the box.

Unlike tables, which have to be laid out with such precision that they could be a playing card statue that topples at any sign of wind, divs allow a more flexible layout and the ability to move things around in places that a table can't comprehend. Going from an absolute structure to a relative structure is a freeing sort of feeling, and there is definitely a sense of power when you huff on your card castle and are then able to rebuild it in a way that air doesn't hurt it but rather keeps it hovering as if held up by magic. Divs can be below, above, around, beside, and between other divs. They can really go anywhere, hold anything, and be more stable than a mountain of playing cards.

The problem with this is, like trying to understand any god, one has to expand one's brain to believe in magic.

Creature Feature: WTF? (WhatTheFont? Makes Life Worth Living)

Karina Beattiger — Tue, 22 Jul 2008 08:21:00 -0700

On the heels of WD Weems' lovingly crafted dissertation on fonts, I thought it might be time for another Creature Feature. The caveat to this blog post title is the same one we have to apply to every Creature Feature: "when it works". I first ran across WhatTheFont? when I was temping for a summer at a company that turns school- and company-written packets of dead trees into serviceable handbooks. We all remember getting the school handbooks/calendars every September, right? Those were the days -- never in my life have I seen so much wasted paper since. Anyway... The problem with mailed-in copies of hastily stapled manuscripts (aside from the obvious) is that we had to scan it and turn it into a Real Document(tm). Sometimes this involved font editing. We were unequivocally not allowed to change the font in any way -- what we got is what we got, period.

Enter WhatTheFont?. The first I heard of it, I was looking over my then-boss' shoulder as he matched a font for me, and in the fifteen-some-oddshortened tabs on his task bar, I saw something that looked like "WhatTheF...". Knowing my department's propensity for inappropriate humor (we were the nightshift, don't judge me!), I casually asked if he was involved in some sort of 12-year-old BNet kiddie AOL chat-group -- hint: WTF? doesn't, in fact, stand for "Where's the Fire?", and B.Net kiddies are the type of (usually young) wanna-be scripters who hack their way into Diablo battlenet to max out their character stats and gold for the ultimate in godliness while saying things like "lol nub" and "rofl kild u with my awsum sord", but I digress. The answer, however, was slightly less and yet alternatively even more exciting: WhatTheFont? The answer to all things font-puzzling.

Well, not all things. When you don't know what a font is, and you need to match it, you can either be a total hardcore font-freak and leaf through your entire bookshelf of font books and tab through your 10gigs of fonts on your computer, or you can hit up WhatTheFont? first. The way this program works is thusly:

First, scan or take a screenshot of the font in question, or if it's on a website, link the URL. The image can't be too big, just take a sentence snippet -- 50 characters or less. Upload it into the website at http://www.myfonts.com/WhatTheFont/ and you will probably, but not always, get a screen that asks you to match certain characters taken from the image with their actual letters. You'll note that in severe cases -- much like the font used below in WD Weems' example -- it will read several characters at once as one full character. This can be a hassle, as it then makes it almost impossible to identify. (The fix to this requires a little time: in a paint program or Photoshop-like program of choice, single out various characters by drawing blank spaces around them to make them more readily identifiable as characters.)

Meanwhile, after entering the characters as requested, hit Search and you'll have one of two options: either scroll through the list of close fonts to find the one that matches yours, or take it to the WhatTheFont? Forums, where, as they say, a plethora of white-robed font-fanatics will be happy to help you in your search for font-perfection.

As written by Cameron Fraser -- a bloke who has something to do with the whole WhatTheFont? experience, I think -- good searching tips include:

The number of characters in your scanned image makes a significant difference in the accuracy of the search results.
- Max components (characters): 50
- If you are identifying a font that is very similar to others:
  - use as many characters as possible or a total of 25 and;
  - use characters that are unique to this font
If possible, space the characters apart more than normal
Max image size is 400,000 pixels (width x height)
- ideal max. size of file containing NO descenders:
  1666 x 120 pixels
- ideal max. size of file containing descenders:
  1250 x 160 pixels
Scan images at 300 dpi
Best file format: Tiff, Grayscale, 300 dpi

The nice thing about the readily available font list is that you have the option of keeping your sample characters static on the screen as you scroll down. This cuts down on the back-and-forth comparison usually required of matching fonts. You know what I'm talking about: Scroll up, stare hard, note the little squiggle on the Q, scroll down and hope you don't forget that the squiggle kicks up at the left corner and not down and out at the right. (Ever wonder how people manage to ever get their faces straight when they're leafing through the pages and pages of individual features often given to crime victims for indentification? By the third page, a young man with a wide, flat nose has morphed into a pixy girl with an upturned nose and beetled-temples in my head, and the whole episode becomes a wash. Do they have WhatTheFace?)

The not-so-nice thing is that sometimes, on particularly complex fonts like Kyle's, WhatTheFont? and it's sister site, Identifont, can have problems discerning the difference between characters. This means that a trip to the forum will take slightly more time, but inevitably pay off. (By the way, a trip to the forum told me Kyle's font is called feast of Flesh -- mmmm, nummy!)

Et voila, if all goes right with the world, you have your font, which you can then search for at WhatTheFont?'s parent site (and buy) or, if you're like me, realize you already own the dang thing and had you spend two years cycling through all of your fonts in the first place, you could have found it on your own (what's wrong with you, anyway, too good for a little hard work and manual comparison? think of what your mother would say...)

What the font, anyway.

The Good Side and Bad Side of @Font-Face

Kyle Weems — Mon, 21 Jul 2008 08:03:00 -0700

The new Batman movie, Dark Knight, clocks in at about two and a half hours. This is not an insignificant investment of time. I tell you this because I'm going to recommend that you go view it, and you might want to spare your bladder by not acquiring the theater's sixty-four ounce soda to enjoy while watching the movie. One of the characters in the film is DA Harvey Dent, who most Batman fans will know is fated to eventually become the villanous Two-Face.

The CSS rule @font-face, like Two-Face, has a good side and a bad side, and to a lot of people it's a coin toss as to which side is going to win out. The rule presents a lot of potential for embedding fonts on web pages, allowing page authors to include more than the small subset of "web safe fonts" to be used as text without the need to be converted into a space-wasting, time-consuming, non-dynamic graphic. Furthermore, it will be faster and smoother than current bandaid measures like sIFR (which is a wonderful make-do measure, but hardly a permanent solution).

However, there's a lot of current and future problems with the rule. First, it's currently only implemented in Safari and (surprise!) Internet Explorer. And of course, they're using it differently. Firefox will support the feature with version 3.1, and Opera's announced that it'll be supporting it in the near future, but there's a lot of controversy on whether the rule will even be genuinely usable due to a number of copyright issues that could be spawned by developers making the fonts inadvertantly accessible for download.

Despite these pitfalls, I'm hopeful that @font-face will help usher in an era of web pages that don't all use Verdana, Georgia, or Helvetica as their base fonts, and where every exotic font header is an image.

Unlike the controversy, using @font-face is simple enough, as I'll show below. (Disclaimer: The following examples make use of the font "Feast of Flesh" from http://www.blambot.com/, a source of free and professional fonts, and are copyrighted by Nate Piekos. The free fonts, like Feast of Flesh, are free to use for non-proft use or independant comics only.)

Before a font can be used by CSS, the font needs to be declared via @font-face as follows:

@font-face { font-family: font-name-goes-here; src: url(url-goes-here) format("truetype");}

After this is done, you can then give any element the font lie so: E {font-family: font-name-goes-here;}, with E representing the selector and font-name-goes-here matching the name you declared for the font in the @font-face rule. Here is an example of this rule in effect (as of the time of this writing this example is only viewable in Safari unless of course you've got it installed on your computer).

Internet Explorer also uses @font-face (in fact, it had it well before Safari), but as of IE7 doesn't use True Type Fonts like Safari does (and presumedly Firefox and Opera will). There's some hope that IE8 will switch to TTF, but for now Internet Explorer is instead using the misleadingly named Embedded Open Type fonts. Does this mean that we can't get IE to use our beautiful TTF fonts?

Not quite.

Although it's not exactly user friendly, Microsoft has provided a TTF > EOF converter, called WEFT. There's a tutorial for it here, which is significantly more useful than the 'wizard' that allegedly helps you through the program. Once you've had the font converted to EOF format, you can then link to it in a style almost identical to that used by Safari:

@font-face { font-family: font-name-goes-here; src: url(url-goes-here); }

The only real change is the lack of the format part of the src property. Making use of the font after it's been linked is identical to the method used by Safari. Here's an example of a page that's been prepared with both font methods, and therefore the font works for both Safari and Internet Explorer.

@font-face is certainly going to help spice up websites in the near future, but I think the jury is still out as to how much and how often, due to a number of copyright issues with fonts. Perhaps techniques can be developed to somehow protect the TTF files while still letting them be used by the font-face rule. Regardless, can we please see less of Helvetica?

Div and CSS: Hello To the Gods of Web Design

Janae Wiedmaier — Fri, 18 Jul 2008 14:06:00 -0700

Looking back at K's first post (And I refer to her affectionately as K for Karina, which is most confusing since we also have Kyle), I have to admit that I have never been a tables addict. Unfortunately, I have been many other things. My own web design, the majority of which happened in highschool and the first two years of college, a lifetime ago really, had far worse implications and applications I'm afraid.

The first sin was frames. After all, in 1999, how did you separate a website out if you didn't use frames? Especially when your experience with web design was not in notepad but rather in the amazing FrontPage. Looking back at all those scrollbars makes me feel more than a bit ill, and I'll continue explaining once I come back from the restroom. Please excuse me for a moment.

-Insert Dramatic Pause Here-

All right, as I get seated... if frames weren't bad enough, my sense of color style was. For a modern woman (girl at that time, I suppose), you'd think I'd have moved past the rainbow colors of the 80's and into the 1990's. Or perhaps have been looking forward to Y2K and the turn of the millenium. Instead, my genre of a fancy webpage could be explained in the following terms: Flashy, Fabulous, Framy, and Forever. That last one due to the load times it would take for each image on the page.

Unfortunately, my next fatal sin is far worse. This can be explained in simple terms as well: Adobe Photoshop. I don't know how many people have ever designed a web page in Photoshop. I'm sure that it's what most designers use. However, it's one thing to design in Photoshop and another completely to use the slicing tool and turn it all into an even bigger forever. Yes, again I am referring to load times. If I thought that frames and flashy images were heavy on my little 56K modem, then I should have considered how a site created completely by images would react.

That's two deadly sins so far, my friends. Luckily, it seems I have found the light. And this is the god Div and his beautiful wife CSS.

Perhaps bowing down and worshiping them for rescuing me from myself is a bit extreme, but I still feel like I should do so nonetheless. Unfortunately, wrapping my head around divs, wrappers, padding, margin, and all of that was a learning curve of all learning curves. For someone who had come from a completely visual way of web design to going to notepad and building a site from the ground up, I have to admit that it was a challenge. Probably the biggest challenge of my life so far. I am happy to say that I feel I have succeeded.

So, here I am at Mindfly with my new gods. We're chillin', having a good ol' time.

Hello, friends, my name is Janae Wiedmaier and I worship Div and CSS. Hopefully they will help me stay on the straight and narrow.

Washington State Destination Based Sales Tax

Rusty Swayne — Fri, 18 Jul 2008 00:49:00 -0700

The newly approved destination based sales tax (Substitute Senate Bill 5089 - Streamlined Sales Tax) in Washington State has been causing a lot of headaches for the small e-commerce store owner. Basically this law forces every Washington State business that sells products online to tax orders made by customers within Washington State at the tax rate at the delivery address rather than that of the originating store.

Small businesses that are simply selling a handful of products online as a way to subsidize their bricks and mortar retail may even have second thoughts about whether or not the added administration is worth even keeping their sites running let alone spend additional moneys to get their once correctly working website retrofitted to lookup the appropriate sale tax rate.

However, all is not doom and gloom as the state did at least provide the Washington Sales Tax Rate Library which allows for you to quickly develop what they call a "rate lookup service." I posted an example of the rate lookup service I wrote today. It basically consists of a REST call that returns an xml response (they have a text response option) that gets parsed and returned.

If you are interested in the code:

Full source and example .aspx page

Binary only

Design Columns: Part III (or. Ninjas in My Sock Drawer!)

Karina Beattiger — Mon, 07 Jul 2008 12:21:00 -0700

I suppose it's always a good excuse to say, "I'm sorry I didn't get this up sooner, we've been really, very busy, you see, and my skills were needed to, you know, make money." Now that I've said that, it's time to skip right to the meat of the matter! In this case, the content of a website and how it applies with design columns. For anyone who forgot what we were doing, it's all right. Take a moment. Re-engage. Breathe. Are you ready? There's no preface today, instead we're getting right to work.

Unfortunately -- as if life weren't confusing enough -- this is where you start to run into varying opinions. There's a million of them and all of them are right, wrong, and generally comprised of "meh". In short: make your own opinions, but follow along with mine for now.

To catch-up: We've made our design columns, 4 of them to the page, with 15px gutters. Now on to the Mindfly Ninja Experience!

The Client: The ninja brigade that secretly lives in Mindfly's server room. (Don't ask how, the thing's a coffin.)
The Need: A website that shares information about the ninja brigade and offers a section to sell ninja brigade merchandise.
Your Job: Make it work.

I like to begin with the branding, otherwise known as the header. Open up your tutorial PSD (or file type of choice) and make sure your guidelines are on. The branding is, as you well know, an important tool of a website: it's usually the first thing your viewer sees and should contain the immediate impressions of your site/business/etc. In this case, ours is about the ninja brigade, and so we want shapes, text and fluff that strongly speaks about our cause. (I won't get into the mechanics of web design; we'll be focusing specifically on how to make it work with columns.)

Heather is a proponent of everything remaining specifically in columns, lining up exactly, but I come from the school of tweaking. For the purposes of this tutorial, I'll endeavor to make just about everything fit specifially in columns, but the branding is one of those places where a little "extra" won't go amiss. If you don't have very specific gutters between elements in the header, it's okay, just use your best judgement and try to at least keep it close.

If you click on the image at right, you can see what I mean. See how the corners of the full sign (red arrow) are outside the boundaries and into the gutters? But the inside of the sign (green arrow) is within bounds? That's all right. Ideally, we're not going to be so cluttered that it matters. However do keep in mind that you don't want anything only making it part of the way into another column, unless there will be nothing else on that line. When it comes to graphics, go all the way into the next column if you need to. If you want to go the far right of the page and place some text that is right-aligned, you can do that! Just tuck it up against the gutter (not in the gutter). The branding is the most flexible, so fill it up all you like. Just make sure that the clear and important elements are safely within columns.

Now, using this basic theory, fill in your branding with whatever you think it needs: logo, h1 (title), possibly an h2 if you need a tagline, and so forth. Go on, make it pretty. I won't tell anyone. Check out the header here and look at all the arrows: you should be able to tell where I placed elements and how they fit into the columns.

It's a bit of a skimpy header, I admit, but for now, we're going for low-key. That's what ninjas are, right?

I tend to like moving on to the navigation immediately after. Your mileage may vary, but for now, that's what we'll do. Here's where the columns start getting a little more structured. Remember that we said we want the navigation on the left, so I'm going to use the ready-made block to designate how I lay out my links. Here's a tip: if a design element is in the background (i.e. a square block behind something like text or an image), it can but shouldn't always break the column. You're going to have to be the best judge of what works and doesn't. Since we're keeping it short and sweet, I won't get too fancy at all. Scope the brief navigation menu and look at the arrows to see how things fit. You'll notice that the text inside does not actually span across the entirey of the column (purple arrow). That's because I decided to make the background span it instead, and we don't want our text to be nudging up the boundary of the border, right? There's extra guides in that screenshot for that reason. (I'll remove them for the following screenshots.)

In order to skim over the content (don't really do this), I'll just be throwing things up on the page and putting arrows where necessary to draw your attention to how they span. I'm going to gloss over the actual contents for the sake of keeping an already long post short. A little of this, a little of tha t, the middle bits, too, toss in the arrows to show the full thing, and we have a very thin website built inside columns. Check it out on the left (hard to miss, yeah?) Click on it to see the full scope of the proof. Is it not nifty? Truly, we are gifted to have such ninjas amongst us.

I know, I know, it's not the most beautiful thing you've ever seen, but I'm just glad I got it out finally!

The idea, of course, is that the columns so described makes the content flow that much easier, and aside from a vaguely gushy part in the middle (Ninja Andy Clarke is such a diva), I'd say it gets the point across.

Memo: Don't ever do tutorials before a rush of work again. Ever. Seriously. Without vowels, even. Srsly.

Name That File; The Camelback Method

Heather Alvis — Thu, 19 Jun 2008 10:40:00 -0700

When using a content manager of any sort, clients are able to upload PDFs and images at will. This is a great freedom that most small business owners are searching for. Clients want to be able to edit content, add photos, and create links to external sites or PDFs. Any good content manager will allow for this. In the years that I've been working with clients, I've noticed a common problem, however, with filenames. Therefore, we have a recommendation that all of our clients use a simple naming scheme within their uploads to maintain organiziation and to minimize problems with broken images and/or javascript errors due to poor filenames.

The method is called camelbacking. Example of camelback filenames are as follows: nelsonsMarketInterior.jpg, fruitTrees.jpg, appleOrchardsPortlandOr.jpg, and jennieNelson080208.jpg.

There are a few simple rules to follow:

no spaces
no punctuation ( . ! # () * ' " )
minimal dashes and underscores
first letter lowercase and subsequent first letters Capitalized
keep it short but descriptive

Oftentimes, programs like Microsoft Word give a default filename that matches the first sentence or title of a document. Please keep a folder on your computer where you can rename these files just for the web using this camelbacking method. Once you get multiple images and files, you'll notice that using this along with a standard naming convention (using Sm for "small" and Bg for "background" for example), will help immensely with file organization.