Archive for May, 2009

Business Cards

Tuesday, May 19th, 2009

I got my business cards done through Manitoba’s only London Drugs. It was apparently Clint — the photo-station manager — who printed them up, and he did a good job. The quality is very fine, the margins are where they should be, and they’re all very straight-edged. There’s a bit of a colour bleed, or something, but it’s so small I had to turn the card around just to make sure it wasn’t my eyes doing it. Someone with sharp eyes and a feel for colour will get the distinct impression that the lower left edge of each letter is blue, but it’s not distinct enough to actually see it. In other words, only ninjas would have a problem with this card.

The card itself isn’t printed on card stock; rather, the set was printed as if I got a whole bunch of 2″ x 3.5″ prints. I could probably make 4″ x 6″ business cards, too, but I’m not sure I’m really crazy enough to do that.
So if you flip the card over, it says “FUJIFILM” and “Fujicolour Crystal Archive Paper.”
What does it mean to have them printed as photos? None of those CMYK circles all over the place. The set of 50 cards was $10 ($0.20 each), but cheaper business card retailers can be incredibly hit-or-miss. Also, the first thing I notice is how tremendously black the black is — it really does stand out. I chose a matte surface, so it’s all textured and shiny. The contrast is absolutely perfect.

I love them.

Cozy Cabbage Web Design&Development

Tuesday, May 19th, 2009

It’s a bit of a mouthful, but I’ve finally got my business site up and running! I’ve got to professionalize the language a bit more and add an information form that a customer would fill out, but it’s it’s basically done. I’ll have to check it in IE, again, and maybe end up tweaking a couple styles.

As it is, it took me these past six hours to get it up. The writing actually took a great deal of time — much longer than I thought it would take.
I’m going tomorrow to pick up my business cards, and then I’m going to my old highschool, where I hope a certain teacher there — who taught classes on how to be an entrepreneur — keeps in touch with students starting their small businesses. It would be the perfect opportunity to grow my skills while contributing to the community of small businesses.

I’m starting at the insanely low value of $50/week, with the expectation that I’ll only actually do an hour or two of hard work a day (plus about six hours of random fiddling, plus about eight hours of blogging and socializing, plus about eight hours of sleeping).
From there, once I’ve got a couple clients — enough to keep my fed, — I’ll increase it to $100/week. That should last me for the next couple months, until I’ve learned a good deal more. I can slowly find people who need the bigger jobs, and work with them for a larger sum. I’ll probably need more than a year before I can feel comfortable designing for larger companies.

I spent the last few days reading backlogs of some other blogs. I’m learning more and more, and retaining new ideas. I’ve also realized that a social network is incredibly important. I was reading about whuffie and the soup metric and what companies do and what they should do. I’ve read about marketing, ROI, and just plain love.

So there it all is, layed out:
Mid February, I became a web developer. Tomorrow, that path leads out of the forest and into the wide, wide countryside, and I become a working professional throwing himself into the world.
I had better get to sleep. I’ll need it.

(Crap, do I need a business license? Do I have to charge GST? I do have a lot to research, suddenly.)

Designing a Website, Part 1

Thursday, May 14th, 2009

The design of a website is an amazing thing, so I thought I’d share some of my method when it came to developing my new business site, Cozy Cabbage. It’s not complete, yet, but I’ll link when it’s finished.

The first thing I wanted to talk about was the content.
When I was writing about myself, and about the sites I’ve made, and drawing up what it means for someone to employ me (in a much less hokey-sounding way, of course, than it seems as I write these words right now), I realized I hated to use ‘I’ in my sentence structure. I suppose there was just something a bit too personal, in that; something, also, that might suggest very human flaws. On the other hand, I couldn’t exactly say ‘we’ and ‘our’, because it was only me.
In the end, I settled on using none of that at all, and I realized how fun and challenging it is to write something like that. “My services include–” No, I can’t say ‘my’. I say things like, “Work is done on a weekly basis,” instead of, “I do work on a weekly basis.” This shifts the active noun to the work, instead of to me, which I think really brings it out. It’s one of those things I hadn’t consciously noticed until I did it by accident.

The rest of the content is pretty simple: A very brief description of who I am, just in case people want to know. They’re there to find someone to make a webpage for them, so I’ll get right to the details: Samples, to let them know what kind of work I do (nothing great, at the momet — I have to completely redo a site I haven’t touched since last year), then what I’ll do if hired. I’m then adding a longer ‘about’ at the end, which outlines my work ethic and personal co-operation attitudes. There’s a little footer with some legal whatevers. On the top of the page is my logo, title, and three links: The main page, sample sites, and my HTML business card. In place of a contact sheet, I have a buy button. The buy button just won’t do, past this moment. I’ll end up making an actual order form.

On the design end, things were a bit different and mostly mundane. The original idea was to use cabbage and make the site ‘cozy’. I’m not sure how I intended to make it look cozy, but I’ll probably end up trying within the next couple of days. For now, it’s somewhat fresh and not too shabby. The site is very vertical, with improper use of sections below the header, and no sidebar, but I’ll probably get around to that next.
Overall, I just had a bunch of trouble with those floats, which you may have read a few days ago.

Another thing I want to talk about is fluid widths. I haven’t started on grids, yet, but there’s always been something disagreeable with fixed widths. Lately, I’d been keeping my browser at 640 wide, because I can easily set the window to a third or a half of my screen. Once I started looking at all these design blogs, it became quickly apparent that I’d have to switch to 960, though I still have a small horizontal scrollbar.
So I’ve decided that even 800×600 is too large, and it should comfortably fit down to about 300 pixels or so. I end up using variations on max-width and min-width and width percentage, which ends up giving me a great deal of control. If I wanted to use several divs inside each-other, I could even give the box a tremendously flexibly design. I could probaly make it shrink or grow as you increased your browser window. The next step would be to strategically place floats so that you get an extra column if you have a wide enough window. At the moment, you just get some more whitespace, which is always welcome.
I also try to keep my images scaled, because I don’t use full-page zoom, and want to design for others who don’t. The problem with this is images that have percentage width can’t seem to scale with text. I’ve been trying to work my way around it, but I may just have to choose one or the other.I could possibly set a maximum size with an EM-sized div, and then size the actual image with percentage. The max-size on the image, of course, would be set to about 200% of the image’s file dimensions, so it doesn’t become too grainy.

And I haven’t even started on the event layer, or whatever javascripting is called. I’ll also put some server-side stuff in, as well.

I’m researching Python and Django. It looks interesting.

i can has data bonus?

Thursday, May 14th, 2009

I got the following message from Rogers Wireless:

Rogers Service Msg: Reminder! Pls note ur free data bonus ends within 3 days. Hope u enjoyed ur bonus. 4info about data plans see

I can understand when they’re saying things like that to kids with text plans. This is a sometime-expensive mobile internet link; a Blackberry sort of data plan. If, in fact, I had a Blackberry, and subscribed to the plan I have now, I would have gotten this same message.
I think there’s generally a point where you’re taking things a little too far. And that point is back over there a little ways, so…

Not to be too harsh on them: It was sent as a text message, with an obvious limit of 160 characters. I’ll just paste that into twitter…
One Hundred and Fourty-Six, which leaves fourteen characters. So:

Rogers Service Message: Reminder! Please note your free data bonus ends within 3 days. Hope you enjoyed your bonus. 4 info about data plans see

Hey, a lot better! If they took out that ‘within’ and actually managed to tell me exactly when it ends (if I’m downloading several times my monthly allotment in the space of an hour, it’s pretty important to know it down to the hour), that’s a further seven characters. ‘4’ becomes ‘for’, and we still have five, so we can even go all the way and turn ‘3’ into ‘three’, and then add a period at the end.

Rogers Service Message: Reminder! Please note your free data bonus ends three days. Hope you enjoyed your bonus. for info about data plans see

Rogers, there’s a time for professionalism, and a time for txtspk (however it’s spelled). “I’m sending a text message” does not mean “zomg lolzors =3”

That being said:


Tuesday, May 12th, 2009

CSS is usually pretty straight-forward. You can float a few things, and then you do some sort of clearing to get everything else underneath that.

For whatever odd reason, clear wasn’t doing a thing to my layout. I tried putting a bunch of cleared breaks on every second line, and still nothing. I tried putting :after tags in my CSS, and then I created a bunch of containing elements with floats. Eventually, on my last try, it worked.

I have no clue what it was that did it. I removed all those clears everywhere, and took out almost all the floats. It still works. I really haven’t the slightest clue what I ended up doing to fix it all. Maybe the body of the page needs to be in a container?

I originally chalked it up to the Chrome 1 I was using, but then it looked the same way in Firefox.
I guess I’ve still got a lot to learn.

More Twitter?

Monday, May 11th, 2009

“Not again!” you all groan. Well, a couple of you.

I was thinking about URL shortening again, and then I realized that what everyone has been thinking about misses the mark just a little. Sure, you could set up something where you enter your site-admin or an FTP window or whatever, and then edit a file to include one more line, but the odds are it’s not you who’s going to use the service. What if you had a path to your shortening service (.com/shortener.php) that you could give a service like Twitter, and then Twitter could take your long URLs you enter from your mobile device while you’re somewhere doing something that leaves you in no mood to try hacking that into your website first.
What if you could just put into a box on your settings page, and if you happened to tweet a long string it would just use that service, instead of sending it to TinyURL?

If you put it in those terms, your requirements for your shortener change. It must accept a value from a site (probably as a POST variable), maybe check if it’s actually a URL, certainly check if it came from a list of allowed sites (you don’t want some random person throwing spam link into there, to use on other people), write that to an index, generate a new short URL, save that to the index, and then send the result back to the requesting site.

Then that site can put your shortened URL in place of the longer one, and you don’t have to worry about completely-ambiguous URLs; only mostly-ambiguous URLs.
It’ll give you the peace of mind that someone will at least know what site they’re going to, just by looking at the link.

As for the ‘how’: I’ll get to that later. I have to try some things out with PHP, first.

Dissatisfied — for a Better World

Sunday, May 10th, 2009

I’m sure the question has crossed everyone’s mind: What makes a person so special, that they change the world? What do they have that lets them create such amazing things? From Special Relativity to CSS and XHTML, every facet of our lives is inundated with discoveries and constructions made by all sorts of admirable people.
Really, it’s one word: dissatisfaction.

When you’re completely satisfied with your life, you’ll never change. You won’t see anything wrong, and you’ll keep doing as you’re doing. It’s often said that any good artist is never satisfied with their work, and always sees all those tremendous flaws scattered throughout the design. We’d tell Leonardo da Vinci that his paintings are genius, and that he shouldn’t be too hard on himself.
But you know what? If he listened, he’d fail.

And so it is with for the rest of us. If you find anything — the slighest thing — that you don’t like, that just doesn’t work, think of ways you could make it better. In the end, you’ll be left with things like Linux, jQuery, Firefox, a community, and a great feel of self-worth.

I’m writing this partly because I, myself, am fairly satisfied. I’ll nitpick over details of my work, of course, quick to find error in whatever it is I’m working on, but I’ll thoughtlessly twist myself around the W3C specifications and eat plain boiled beans with salt.
When it comes right down to it, I should notice every annoyance the current specifications give me. I should create logs with new ideas for new elements, and new ways to use the old ones. It’s easy to say to oneself that “it’s all been done before,” but it’s just not true. Every day, something new is discovered, and everyday I’ll see something that I could have discovered myself.
I’m reading some old posts from various blogs I’ve recently subscribed to, and I’ve just paused halfway down Johnathon Snook’s article about his Matrix Layouts. He was dissatisfied with the current layout scheme, enough so that he put his mind to creating something better. I wish him all the best.

And so there we are. As a global society, we need to open our eyes and see what it is we’re doing throughout the day. Only we can build something better and more relevant.


Saturday, May 9th, 2009

I’ve finally gained enough inspiration (in the form of inspiration coins or the intanglible inspiration points) and so have created my own little button set. It’s frankly nothing good at all, but it was the first professional-looking set I’ve done, so I’m celebrating by tossing them all up here.

One thing I’ve still not “figured out” is having files download. Just the other week, I was trying to put that jQuery link in my sidebar, but I wanted it to pop open as you visited the page. I’m a freak for extensibility, and so I set it to open up to an arbitrary amount, and then animate again to the newly-loaded image’s height. The problem is that the image sometimes takes a few seconds to load. I ended up making the animation very slow, to give the download time to finish.
The same sort of thing happened just now, in that button page. I made up a nice little jQuery file to download the button names and paths from an xml file and cycle through them as you clicked the button.
If I used a spritesheet, I don’t suppose I’d have any problem at all, but (silly me!) I just kept them as loose little 40×40 images. When I uploaded the page and tested it, the button didn’t appear to be working. Eventually, after waiting awhile, the next button appeared.
The only thing I could think to do, besides spriting it all, was to shove a little ‘loading’ animation in that I made, and then move the pressed button to download before the unpressed button. This way it’ll queue them up and shove the loading gif in there while you wait. Not exactly perfect, but at least you aren’t left with something that isn’t working.

That reminds me of cufón. Firefox has the unfortunate tendency to not highlight a selected canvas. (I suppose it’s annoying when you’re dragging and dropping on something and the whole box goes all semi-transparent and coloured. But still.) Most people who see cufón used, while themselves using Firefox, believe that you can’t select text.
Others select a bit of text as they read, as a rule to get across those longer lines of text. In that case, they really are losing something.
I find it funny that it inserts a hundred little canvas tags into your document.

One last thing.
I’ve been wanting to start on the site for what I’ve decided will be my company name, Cozy Cabbage Web Design & Development, and yet I’ve ended up spending a couple hours doing buttons, and then making up that webpage.
That page is thrown together, really. I wanted something not-plain in the background, so I whipped up a diagonal stripe, which is probably one of the least-difficult backgrounds to do. I added in a bit of padding, had some headaches here and there, realized I shouldn’t have the body height set to 100%, and later realized I should tweak some of those greys into red.
It has a certain workmanlike feel to it. And really, I could have done anything I wanted, because it was a throwaway test page. Really, the best place to test out new ideas is to create an environment where it doesn’t matter if you make mistakes, and where you don’t have to give a thought about why you need certain design elements. You don’t have to ask yourself, “How does this reflect my brand? Will this style increase the click-through rate? Will people hate me if I use Cufón?”

(ó I’m getting used to it. Usually, those sorts of characters result in a stream of éäàåçêëèïî before I manage to find what I want.)

Business Cards

Tuesday, May 5th, 2009

A couple days ago, I saw two business cards laying on my mom’s desk. One was for a dentist, and the other was from some sort of hair salon. A quick look revealed that the dentist’s business card had a logo with simple shapes and soothing colours, a clean finish, dithered CMYK inks, clean-cut edges, a good weight, and well-positioned elements. The hairstylist’s card, meanwhile, had an unmemorable logo, was printed from a poor-quality printer (which left everything slightly smudged-looking), was printed on tear-along-the-lines printer stock from an office supplies store, and had elements of dissimilar style centered down the card. The images also had pixels sticking out.
It’s tremendous how the fine quality and subtle hues of a professionally-made card set it immediately apart from something home-made. I imagine people forget that their printers might print at 300 dpi, even though their images are saved at 72 dpi. Pixels, JPEG artifacts, and smearing are all things that are completely unacceptable, and which are instantly recognised by a great many people.

I’ve designed a few business cards, each one better than the last — and all of them mediocre at best. I also had the job, once, of designing a little 1-inch-by-3-inch advertisement for the local news pamphlet. It started out fine, and I was left with what I saw as an acceptable product, as I viewed the large text on my thousand-pixel-wide photoshop image. I tried to zoom it down to approximately the size it would end up being, but the program would have trouble rendering the fonts into the space of a few pixels — my screen’s density was just far too low. Even with the chopped up characters, though, I could easily see that the text was far too small, and everything was too squished. I scaled everything up, until it looked fine. I sent it off to print, but when I saw it in the paper a few weeks later the text was still smaller than most of the other ads. I had crammed too much content into too small a space, and I wonder if I had missed an older customer because of that.
Lately, too, I was trying to fix up a couple things on my current client’s business card, and was having trouble showing him how it looked. He had designed it in a portrait view, which means only half of it fit on my screen at any given moment. If I shrank it to half size, at which point it fit, some of the smaller details, such as thin lines, would become anti-aliased or disappear.

I decided, then, that there was no reason I had to use an image-editting program. I could created a page in XHTML and style the elements with CSS.
I started, of course, by creating the area of 3.5″ by 2″ at 72 dpi. I sized everything in ems, so that I can change the size to whatever I want and everything will scale. The text, of course, will scale unendingly. I had an extremely large version of my logo, so I used that in an img element. Background-image wouldn’t work, here, because I wanted to be able to set the width and height.

While I was designing my business card, I kept an eye open for lessons. When I started arranging the company name, the tagline, my name, and the contact information within a series of header elements, I quickly realized the pixelated structure of importance denoted by h1, h2, h3, h4, h5, and h6. I’ve always known about them, of course, and used them in my pages, but it wasn’t really until this moment that I truly understood their importance in communicating to the user which piece of information is given priority.
When I saw this, a couple questions came floating along: Which is the most important? My company’s name, obviously. But what about my tagline? Is that more important than my name and job title, or less? Is it alright to decrease the font size of my tagline to keep it the same width as the company’s name, or would that send the message that it’s less important?
Even then, that’s just one facet; The shape and position will also draw certain suggestions around them. I haven’t really played with fonts as much, this early in my career, but I’ve seen how others use them. You can use a font to emphasize an element at the same time as you make it smaller, which helps with positioning. I think that’s one thing that drew me to design: You have such a tremendous range of completely different attributes that you can apply to each element, and each one has the power to change the perception of that element. What you’re left with is the equivalent of tossing spices into a soup: Too much and the soup can’t be tasted through the spice, while too little leaves the soup bland. A tremendous difference is found between cooks who know how to spice their food and cooks who don’t.

I like the spacing on the card, but there was a moment where I decided the city/province/country just wasn’t important enough for the card. I did keep the city and province, but stuffed it in the corner. I find it actually helps balance the elements a bit, too.
Other than that, there were the tricks of getting everything to line up how you want. I saw that my text naturally flowed around the shape of my image, so I kept those nestled.

And now I’ll try to use what I made in that twitter post a few days back:
My very own business card, fitted with hCard.

Full-page zoom

Sunday, May 3rd, 2009

I was designing a site in my free time, and I ran into an issue with the first images I put in. I hadn’t set the height anywhere, but they were bigger than they should be. I had to manually give them a smaller size, to make them fit.
As it turned out, I wasn’t using my computer, and so I was using the portable Google Chrome 2.0 from my flash drive. I usually use 1.0 at home, so I can be sure that what is seen by my browser is what will be seen by other users of chrome (2.0 only has a couple tenths of a percent, right now). I got it for my flash drive because I wanted to see the newer features, and because I could keep several different versions.

In 2.0, as well as in most other browsers, a full-page zoom is used. That means everything is resized, including images, even if you don’t use ems in your styles.
What that also does, however, is increase background images and other things that can’t stand the stretching. This laptop has nothing but paint, so I had to hand-draw a horrible dither pattern instead of using an alpha gradient. because the dither is made of individual pixels, any stretching (and thus blurring) is incredibly noticeable.
It’s good to increase pictures and elements (things get squished, otherwise), but one might make an exception when it comes to background images. For an example, I once had a largish image in the background of a sidebar, so that someone with a larger text size would see more of the image. If full-page zoomed, all they would get is a pixelated, smaller image.
Borders, as well, tend to be made for specific widths. Here it’s a bit more acceptable, because a continuous pattern isn’t lost by a bit of scrunching, and most borders use a gradient that suits a smoothing filter just fine.

In certain cases, though, there must be a way to disallow an image from being full-page zoomed. The only reason the full-page zoom is there, of course, is that a great many developers don’t have either the resources or the skill to size everything in ems instead of px, which constitutes a failing on the developer’s part. Browsers add full-page zoom because they found it’s needed and that a lot of people don’t allow it in their code.
And I don’t blame them. What we need, though is some form of opt-out option. If the problem is that people usually don’t do something, fix that, but then let the people who do do something to do something to make things the way they should be.

In that light, I’m going to have a look to see if there’s any way I can disallow full-page zoom on certain elements. At worst, I suppose I could disable it for the page, but I always size with ems, anyway, so that would be fine.

On a final note, I think the best idea is to set your browser’s text size the way you want it, so that things are initially rendered at the size you want. That way, you don’t need zoom.
(The problem with that, of course, is that you get the effect of your default level being like a non-full-page zoomed with the non-em-sized images being far too small. I guess it’s a matter of delicate balance.)