Dear Rob,

Just wanted to tell you I think your site is awesome, and I encourage you to post more tips & tricks, as it’s very helpful.

My name is Jonathan, and I’m a student in Chicago. I’ve always been very into design, but have recently started finding an interest in designing for the web. I graduate with my Associates Degree (in design) this coming Spring. However, I’ve been fortunate enough to meet a local web designer, and I have landed some free lance work. Along with asking my friend/mentor about specific design questions, I like to bounce things off other fellow designers as well…two, three, and even four heads are better than one, right?

“I also want to know if it’s truly important to know the development side or if I should pour my blood, sweat and tears into purely design.”

My question(s) is this. I feel I have a good handle on the design aspects of building an attractive website, I’m confident my creativity, and approach will yield great results. However, I am totally clueless when it comes to the development side. Outside of general HTML/Table crap, I really know nothing. I’ve attempted to teach myself CSS, however, all I find are a bunch of sites that tell me how to create a vertical drop down nav menu, kinda useless. I want to know how to design in a way that implements CSS, how to set up containers, things like that. I also want to know if it’s truly important to know the development side or if I should pour my blood, sweat and tears into purely design. I want to be a well rounded designer, I want to build attractive sites, but almost as important, I want to know how sites work, and how they can function even better.

Any suggestions, tips, or other things that may point me in the right direction?
Yours Sincerely,

Jonathan

Dear Jonathan,

Hiya. Great to hear from you.

Firstly, cheers for the kind words. I agree—I could certainly post more—and will be making more of an effort to do just that.

Also, congratulations on the freelance work! The move into getting paid for the work you do definitely changes the vibe (mostly for the better). It’s an exciting time.

There are certainly resources you can read and things you can do that will help you get your head around CSS. The good news is that pretty much anyone is capable of learning to build CSS driven, standards-compliant sites. The hard part—your ability to design good stuff—however, is something that is much more personal and perhaps less malleable.

Everyone’s different, but for my 2 cents, it’s very hard to be a front-end designer without a solid working knowledge of HTML & CSS. Whether you learn what I’d call real development (like client-side or even server-side scripting) is up to you. For me, I know my talent lies more in the visuals than programming, so that’s where I spend most of my time. You may be different. And there’s a rare breed of people who are admirably able to develop as well as they design. The bastards.

“Everyone’s different, but for my 2 cents, it’s very hard to be a front-end designer without a solid working knowledge of HTML & CSS.”

Changing from thinking in table-based layouts to “CSS isn’t as big a jump as you might think. Even though it probably feels more restrictive in terms of achieving your design, after a little while you’ll feel much more able to achieve what you’re trying to do with less fiddling. What you’re going for is a separation of content and form. This gives you the ability to delivery the same content for different browsers, devices and media.

In terms of learning techniques, if you’re like me, you probably need to actually apply what you’re learning to truly grasp and remember it. So because you’re already working in the field, once you’ve got a base level of understanding, perhaps the best approach for you would be to learn CSS on the job. I’ve certainly found necessity to be the best motivator for learning something new. That means designing page concepts without worrying if you’re capable of building them and then digging in working out how to achieve them.

Getting Started

The are heaps of great books out there on this. Below are some online resources that can help you get going:

Basics
Positioning
Lists
Selectors
Image replacement/sprites

Lastly, you can run your sites through the HTML and CSS validators just to double check everything’s right. That’s not to say all your sites should always validate, because sometimes that might not be possible, but if nothing else, they’re a great way to better understand web standards.

For most other things you can usually use Google if you’re after something specific. The trick is being able to pick the resources you can trust and those that might not be teaching you ‘best practice’.

More than all the resources above, you’ll really benefit from simply being curious about how certain things are achieved on sites around the web. Deconstruct their “CSS not to copy, but to learn. I guarantee all your favourite web designers do this all the time.

Best of luck with it!

Rob

—Published 20 August, 2009

Next