the singularity of being and nothingness
Web Design
On Becoming a Better Web Designer – 7th Detour
Aug 19th
Okay, I'm going to take a bit of a detour here from the "series-in-a-series" that I've been doing to quickly blog about an invaluable CSS trick that every designer needs to use as often as possible.
So here's the scenario: You have a blog that's going to have pictures in it. The thing is, you want to be able to float the images either to the right or to the left with some margins applied. Oh yeah, you also want to have, say, seven different border-color options. And did I forget to mention that you also want different padding between the image and border?
What to do, what to do? When I first started, I would have sat down and mapped out a class for each "scenario." For example, for the left-blue-2px-bordered option, I would have created something like "img.leftbluetwoborder." While this will, of course, work, it's not usable. Who can remember "leftbluetwoborder", not to mention the 23 other similarly named classes? So what's the alternative to this terrible mess?
Enter what I call "class overloading." What is this? Simply, it is applying more than one class to whatever you're applying classes to. So if I have an image with "class='myimage'", with More >
Quick-'n-Dirty Thumbnail Image Sizing
Aug 12th
Okay, so at some point as a web designer you're going to come across a project where you have to design some kind of gallery with image thumbnails.
In an ideal world (e.g., Photoshop), all of the thumbnails will be precisely the same size, so plugging them into nice little skins (the "pretty" that you put around them) is cake. Unfortunately, the real world ain't like that. In the real world, you have hundreds of thumbnails to deal with, none of which will probably ever be exactly the same size.
Now, of course, the thumbnail skins still have to work. So what should you do?
The first thing to NOT do is hard-code the "width" and "height" attributes of the <img> tag. Super bad idea. Okay, not a TERRIBLE idea, but it will inevitably lead to some funny looking thumbnails as the img tag will stretch or shrink your image to fit these values.
So what's the alternative? Well, ideally, you'd be using Coldfusion 8 and could use the super-cool built-in image manipulation tools to properly scale and crop every image to be the same size. Ah, but we're not in an ideal world!
The second alterative I've found that works to a limited More >
Killer Free Icons
Jul 22nd
Just a quick note: dryicons.com has updated their free icon gallery with some new icon sets, bringing the total to a whopping 16! I've used their icons extensively in a few projects and have been quite pleased.
You are checking them out now.
Share this: On Becoming a Better Web Designer, 6(b)
Jul 16th
Pop Quiz!!! What's the worst possible thing that can happen to your freelance project? Okay, besides not getting paid for all your hard work, what's the worst thing that can happen?
I know there's some out there that will say the answer is that they will not get enough inspiration for the project, and will burn out on an only marginally interesting design. Others might swear that the answer is that they'll overbid the project and feel guilt about over-charging their client. These people are crazy, by the way.
Seriously, though, the real answer is scope creep. What, exactly, am I talking about?
First, let's lay down a definition. While I'm sure many will disagree, this is how I define scope: "A description of all deliverable products, including their requirements and features." Pretty simple, really–it's an outline of the project, from start to finish, that defines what things are going to be produced for the client, down to the level of specific product features and functionality.
So yeah, this seems simple enough, but the truth is far from that. Why? Well, there are a few reasons. First, alot of inquiries to my site look like this: "I need a blog. How much do you More >
On Becoming a Better Web Designer, 6(a)
Jul 13th
So you've refined your HTML and CSS skills. Excellent. You've become a master of all things Adobe. Perfect. You can code a custom blog in your sleep (and have the code snippets to prove it). Good for you.
So what's next? Well, unless you code only for the sheer enjoyment and self-actualization of it, you're going to want to make money. And making money will require clients, and clients require BEING EXTREMELY CAREFUL!
What do I mean? Well, when I started freelancing, I was incredibly naive about customer relations and managing my projects. I quoted low (had to get the deal, right?) then killed myself to get the under-bidded job done on the ridiculously tight timeframe that I agreed to.
I have learned some hard lessons about customer and project management, but they are crucial to becoming a more professional web designer AND getting what you're worth as a designer for the work you do. So over the next few installments of this series, I'm going to be reflecting on some of the lessons I have learned–and am still learning!–that will hopefully help you in your customer managment.
Tip #1: Realistic Bidding
Okay, so it's common for those just starting out with freelancing More >
On Becoming a Better Web Designer: Default CSS
Jul 5th
When I got into web design, table-based design was already anathema. So for me, CSS was the most natural thing–it was the ONLY thing I knew. CSS made sense to me, and I really liked how I could granularly control the behavior of everything that I slapped on a web page.
One downside to this, however, is that I went a bit overboard. To get this control, I went with what I thought was the best route–uniquely class EVERYTHING. This, of course, led to bloated stylesheets and difficult to maintain code.
My problem? I failed to take advantage of default element CSS behavior. What do I mean? Well, consider the <h1> tag. By default, this tag is a block level element which means it will take its own "line" and force content which follows it to appear below. The same is true with the <p> tag. So what's the point? Well, let's say we use good semantics and have our page title be wrapped in <h1> tags. If we simply use the default behavior, the title of the page will be separated from any content that follows it–that makes sense, so why not use it?
And <p> tags? As most are aware, More >
Woot! My CSS-Gallery is Online!
Jun 19th
I am extremely proud to present my very own CSS Gallery, CSS Imagine. For those who have been following my blog the last couple weeks, you'll recall me alluding to this very special day. Well, it's finally here and I am very, very, very excited!
Please take a second and check it out. If you're a designer, or just know of a killer site that needs to be on CSS Imagine, please take just a moment and submit it. Also, please let me know your feedback–I am incredibly anxious to hear people's responses to this gallery and some of the functionality that I have built in.
So yeah, check it out, and be sure to follow CSS Imagine on Twitter and ScrnShots too!
Share this: On Becoming a Better Web Designer, in 4-D!
Jun 17th
Just over a month ago, I blogged about the benefits of unobtrusive JavaScript, and how it helps not only produce standards-compliant HTML and CSS, but additionally creates a framework for creating applications that is extensible and reusable.
In this installment of this series, I would like to build on this idea a bit. As you delve into unobtrusive JavaScript, you will soon learn that generifying your JavaScript functions becomes unavoidable. Yes, I said "generifying." Let me explain.
Using inline JavaScript usually means one of two things: A.) you have a one-off function that you need to fire, and you just want to get something working NOW. Or B.) you've not really investigated unobtrusive JavaScript very thoroughly, and are content with using inline calls for even the most complicated functions.
If A.) is the scenario, as your application grows and you need more functionality from your JavaScript, life is going to suck very quickly because you're going to have to do a lot of backtracking to catch up all those inline calls to match any changes you've made to accomodate new functionality. And if you're one of the B.)'ers, you'll have to do what the A.)'s are stuck doing, plus you'll have some major More >
Coming Soon…Very Soon!
Jun 10th
Remember the CSS Gallery I wrote about a while ago? Yes, the one that I'm building? Well, IT'S ALMOST DONE!!
I am incredibly excited. The design, I feel, really came together, and the final result is something simple and sleek, but still (at least IMO) memorable.
One of the most exciting things about this project for me is that it's allowed me to flex some ColdFusion 8 muscles–muscles that I have had not yet really had a chance to use until now.
What kind of features are there going to be? I'm glad you asked!
On the client side, I completely Web 2.0-ified the site submission process. When you click "Submit", instead of getting redirected to a form page, I'm using Thickbox to present the form. The form itself is pretty sweet, too. First, there's a fairly interesting hint tool that I developed. But the power of the form is that not only does it check the XHTML and CSS validation on the site you enter while you're finishing up the form, but even the form submission itself is AJAXed. No stupid submit and refresh here!
Once a site submission is approved and live, each site will have comments attached, as well as a rating mechanism. As More >
On Becoming a Better Web Designer, Part Third
May 12th
As I dive deeper into web design, the more I realize how critically important it is to learn from others. By this, I'm not simply talking about using others' advice for coding best practices, nor even about–gasp!–stealing code.
What I mean by "learning from others" is to begin to develop a perspective of others' work that truly values and prizes their talents.
After all, let's be serious: web designers are a conceited bunch. We like to roll out designs and have others laud us with praises about how cool the site looks, how well it functions, whatever. But what do we do when we look at others' work?
I know my first reaction is to critique. "Well," I think to myself, "if I had designed this site (imagine me puffing a giant pipe while wearing a hideously ostentatious robe), I would have done this…" Or, "This site could be SO much better if only they had done that ['that' being understood as what I would have done, obviously]." Am I right? I know I am, because I am one of the most self-deprecating web designers out there, and I do it constantly.
However, this is a tremendously difficult way to function. Not only it More >
