Fastest Method to Learn Web Design for a Developer

Question

I am a Web developer and in my projects I have noticed that my weakest point is not being good at the front-end design. Relying on other designers can be annoying if they are not able to produce as quickly as I want.

My perspective on HTML/CSS is that it is basically a big hack that amazingly works. There are too many CSS and browser specific bugs/quirks to learn and remember them all without spending extreme amounts of time trying to untangle everything. Is there a fast track route to getting CSS into my brain? I have looked at some CSS books, but to me they really read as long lists of how to render things correctly in IE6 and how to make corners rounded. (Seriously why does it require so many tricks to make a sharp corner round? On any platform but the Web this would be called a major oversight.)

Does there exist something that does the analogous to CSS that jQuery does for JavaScript? Using jQuery you don't need to know JavaScript well to make things that work.

I am not interested in learning why IE6 does things in weird ways because I don't care about supporting it at all. I am more interested in a method of learning how to use CSS to do what I want without spending hours and hours reading obscure blogs.

Answer 1

In this case I don't think books will help much. CSS is extremely easy to learn, and extremely difficult to master.

All I can suggest is learn as you go.. You need a lot of experience!

Or, you can drop support for IE7 and especially IE6. If you do that you'll find very very few and very very rare quirks :)

Answer 2

Yes, there are CSS frameworks that are the 'jQuery of CSS'. Some of the more popular ones include 960 and Blueprint. I personally use 960 and have found it takes a lot of the guesswork out of layout.

As others have said CSS is hard to learn by reading. It ends up being one of those things you just need to develop an instinct for through lots of experience (which typically means lots of trial, error, and frustration). It is, as you've highlighted, not an ideal situation, but it is what it is.

Another difficulty is that the methodologies or workflow that is employed can really differ between individuals. Some people do a mock-up in Photoshop first, then produce an exact pixel-by-pixel "rendering" with HTML/CSS. Others use Photoshop, Illustrator, or another tool to simply sketch out and idea, and then re-create it from scratch in HTML/CSS. And still others prefer to start directly with HTML/CSS and just a few thumbnail sketches. Figuring out which of these methods fits you best is anthoer important piece of the puzzle.

Answer 3

It pretty much takes time and practice. But you can save yourself a lot of trouble if you keep your html clean and straightforward. Here are a few rules I can think of that have helped me:

• Use DOCTYPE in your html pages, start with transitional since it has the most lax rules, and validate your html. If you keep your page in standards mode rather than quirks mode, you will have significantly fewer problems across the board.
• Pick what browsers you will support early on and support them in a logical order. For me, I develop in firefox, then make sure that things are solid on chrome / safari. IE can use a special kind of comment that lets you insert html visible only to IE. Use that to add on stylesheets for IE7, then IE6 to override styles and fix any display issues in those browsers. You should generally start with the best browser first and work your way backward.
• Be careful with padding. That is one of the most problematic properties I've dealt with. When you can, opt for using a little sub-container element with a margin in place of padding. It's more markup but margin is handled much better across all browsers.
• Absolute-positioned elements inside of relative-positioned elements. This solves a LOT. When you relative position an element, it stays in it's normal flow. When you absolute position elements inside of a parent that is relative, the absolute items work in reference to the location of the parent.

Answer 4

Take some classes in graphic design. No programming language will make you an artist, and artistry is required for good user-interface design.

[or you could find better graphic designers to work with]

Answer 5

Subscribe to css-discuss, play with the common problems and talk with other people about your progress. The wiki is a very useful resource too.

Answer 6

Firsty, congratulations on wanting to begin the journey of Web Design, its a great rewarding hobby/business to get into.

Save The Pixel is a great and easy to follow Ebook From Expert Web Designer Ben Hunt. It is a must have more beginner web designers and i highly recommend this learning material, you will often refer back to this great Ebook: Save The Pixel