Posts tagged Web Design

Using CSS selectors is not a difficult skill–all of us who use CSS use selectors on every line of code that we write. However, as not as many know, there are more exotic selectors available.

Blah blah blah. You can read all about CSS selectors at W3, and I don't want to rehash what has already been fully documented. So instead, let me go a different direction.

Why, you might ask, would I possibly want or need to use a fancy CSS selector like ":first-child" or something more granular like an attribute selector (a[href="http://askaninja.com"])?

Well, maybe you'll never want or need to. If you have the luxury of coding everything you do from scratch, you'll probably find little use for these. However, most of us do not have ideal circumstances like this.

Consider this: Where I work, we are using an enterprise information management software for our employee intranet. While the product itself is quite powerful, whoever built the layouts and templates that come boxed with the products are certifiable idiots. Strewn across hundreds of layout files in obscure, inaccessible (well, at least to me…) folders are inumerable styles, both external and inline, that handle the "design" of this product.

Over the last several weeks, I've seen my blog readership increase signficantly. I am extremely grateful for the kind words that people have shared with me, and of course, for everyone who follows my ramblings about web design.

During this time, I've had several readers contact me, seeking advice about how to get more into web design, how to improve their skills, etc. I am extremely humbled that anyone would seek my advice on this, and I have done my best to provide the best suggestions I can. So now, let me distill down some of the things I've said.

I don't want to get overly Dr. Phil-ish on this, but I think the psychology of the web designer is a crucial component to be becoming better. What does this mean? Well, I continually advocate that one of the best ways to become a better designer is to live in the billion-and-three design galleries that are out there. Let me diverge for a second and shamelessly plug my own — css-imagine.com. There, I'm done :).

In all seriousness, I believe that examining and learning from the design of others is a great way to improve. First, by doing this, you begin to More >

One question among a million has plagued humanity for thousands of years, and still remains without an answer.No, it's not theological, and it has nothing to do with chickens and their alleged eggs.Rather. it is the question of whether you should bid out your next job based on number of hours or a project basis.

This question is tricky, and I know every designer has a lot of different opinions about the subject.And in all fairness, all sides probably have a legitimate argument.So instead of arguing for a particular perspective, I'm going to simply explain my own view.

From the moment I began freelancing, I have always quoted my jobs on a project basis.Here's a few reasons why:

First, I worked for nearly three years in a law firm where everything was billed by the hour.While legitimate work was done, a standard practice in legal billing is to assign certain number of minutes (or hours) to certain tasks.So for example, every phone call is billable for 10 minutes worth of time, even if it's 45 seconds long.

Now in my last post, I argued that a legitimate part of billing your customer is for your expertise, and More >

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 >

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.

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 >

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 >

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?

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 >

Well, it got just a bit better for me today. While using Google Reader to follow one of my favorite blogs, I ran across a brand-spanking new AIR-based application that brings the functionality of Google Reader to the desktop.

This new application is ReadAir. It is really nothing more than HTML and JavaScript, but it is shiny. And the functionality–on the whole–is pretty good. At this stage, it is still a bit buggy. Unread feed counts do not update when an article is viewed, and it is also a bit slow. However, the project is open-source, so hopefully others will come along and expand upon it to make it better.

So if you like Google Reader, take a look at ReadAir. Oh, and be sure to let me know what you think about it!!

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 >