What Every Web Designer Needs to Know

[Pavel_Nedved]

Hi,

I've decided to start this post to find out what the web design community deems as "essentials" in the toolkit of a web designer.

What should every web designer know?

» HTML is a given if you don't know HTML, you won't make it far.
» CSS is another essential in my opinion. The cross-browser compatibility is essential (especially for backgrounds).
» PHP or a similar other programming language (ASP, etc) is another essential. You can certainly make a website without it, but to make a great, interactive website you need to know a programming language.
» MySQL or similar database software. This isn't essential to make a website, but it's something I feel every web designer should know. If you know MySQL or a similar database tool, the possiblities are nearly endless given that you know PHP (or similar) also.
» Basic knowledge about Apache. You don't need to know much, but enough to recognize why some of your scripts work on your home server, and not on your clients' - usually CHMOD problem, or options turned off.

What else is essential? XML, RSS, CGI, etc.

Let's hear some feedback,

Pavel

[HeatherID]

I definitely agree with HTML. Too many people couldn't code their way out of a paper bag if you took away their WYSIWYG editors.

I agree with everything you have posted. I found it was also handy to have a basic working knowledge (at least) of IIS, along with Apache.

-Heather

[Protoss]

Javascript is a must: popups, confirmation boxes, redirects, dhtml, etc.

[Ronny]

I agree with everything said, and I would like to mention markup and programming languages are not the only thing needed for a designer. How many times you've stumbled upon a site which have a great code, perfect HTML or CSS, but just looks horrible?
A designer also needs:

• A basic understanding of the color wheel and the are of matching colors. Try to search google for "Color Wheel Theory" (http://www.google.com/search?hl=en&i...r+wheel+theory) or read one of the help files in color wheel programs such as ColorImpact, ColorWheelPro, etc.
• Get inspired. Open your eyes and mind and go find some beautiful sites you like. Create a folder in your bookmarks for inspiration. There are some sites out there which are listing great sites, and you can even find some edgy sites in SitePoint Users' signatures! And, in addition, go to museums, learn a bit about design, art and others.
• Remember you're designing for humans, not robots. Learn about accessibility, browser issues, text sizing methods and more... It's important for you and your visitors that you'll know all that before you go and design a beautiful pink-text-on-black-background-site.
• Some people you can trust and you appreciate their opinion and their eyes. Designers, at any level, need feedback, and not just good feedback. Make sure these people don't lie to you because you're such a nice guy/gal - Constructive criticism is very helpful.
• As Brendon wrote somewhere here in SitePoint or in his Book, you need to know what you're capable of. You can spent three years trying to learn PHP-MySQL and fail and keep trying. That would be nice and heroic, but it can waste your time and money as well. Take me as an example, I'm not good enough with server-side languages and DBs, so I'm wroking (in the last three years or so) with my pal, he's the programming guy... And this way I can keep my head focues on design, and he code whatever needs to be coded. A perfect match... The lesson is quite simple - Don't go way over your head, that is.

I'm sure I forgot some important things, but for now this is it. Hope you find this post helpful

[AeG]

A web DESIGNER should know that s/he is not a developer. (different skills and education entirely)

A web DEVELOPER should know that s/he is not a designer. (different skills and education entirely)

Do one or the other well. Try to do both and you won't succeed at either.

Simple!

[RockyShark]

Yeah - I don't think that web designers need to know back end stuff. Certainly can't hurt, but it's not essential. More important (as mentioned above) is know your limitations.

KNOW THYSELF.

[Spiff Dog]

Originally Posted by AeG

A web DESIGNER should know that s/he is not a developer. (different skills and education entirely)

A web DEVELOPER should know that s/he is not a designer. (different skills and education entirely)

Do one or the other well. Try to do both and you won't succeed at either.

Simple!

That is a rather broad-reaching over-simplification. There is no reason you can't do both if given the proper education and experience.

I would argue that, at the very least, a general understanding of both sides is essential in creating a decent product.

-Spiff

[MuPPskI]

I think its a big must to know about the diffrent browsers at least the biggest

I would say Internet Explorer , Mozilla , Netscape (even if tis discountiued) , Opera and Konquerer ....

You need to make your site looks alright in all of those or atleast show the one entering the website what browsers the site is comptible with!!

[Pavel_Nedved]

Well put Ronny. AeG I can see where you're coming from. I can't say I agree, it's definitely possible to do both. There is such thing as a developer with an artistic sense... however rare it may be. I personally code and design each website I do, and I like to think that I'm good at both. I agree though that for the most part, designers design, developers develop. Mixing shouldn't happen.

I suppose a more appropriate title would be "Essential Skills every Freelancer needs to know". Freelancers need to do both, or outsource. They also need to know the ropes about sales, marketing, and general business. I've honestly never endorsed anything in my life, and I havn't even read what I'm about to endorse (it's coming in the mail), but Brendon Sinclair's Web Design Business Kit is a good read for any Freelancer. It's taken me almost 3 months to buy the book. I've been on Brendon's website, run searches on his name to find posts he's made in other forums, read all his articles... they're all gold. Every single one of them! I just purchased the book 10 minutes ago and am looking forward to it's arrival. I've read the sample chapters a few times, and if the rest of the book is anything like that, I'm in for a treat ;D

[bigbproductions]

SpiffDog and AeG touched on a senesitive but important issue: the difference between a designer and programmer.

As a college instructor and as Web/Interactive director at an advertising agency, I have a strong opinion on this subject. Most folks contributing to this thread seem to be well versed with various programming languages, server-side issues and proper site structure. But what many fail to understand or come to terms with are those little elements called "look and feel" and "usability".

Many talented programmers assume the role of designer and overlook important rules that designer adhere to. To follow Pavel's process, allow me to define a few:

>> Target Audience: Indentifying and designing for a defined target audience
>> Brand Consistency: as a web designer, are you adhering to your client's existing brand? Is it as simple as using their corporate Pantone color and recently purchased stock photos from Getty Images? (NO!)
>> Usability: this is a big one... programmers by nature dig into stacks of data, using organizational methods that the average consumer would find chaotic. This point closely ties into Target Audience, in that you must identify who you are deigning for, which in turn determines the complexity or simplicity of the site design.
>> Features: how about unique consumer-friendly features? Only a seasoned Advertising or Commercial Design individual can determine what the site should provide to its visitors.

In closing, the dispute of "what every web designer should know" can go on forever. I didn't even get into Flash-based experiences, video streaming or mobile device-based applications. But the truth is that it takes an experienced TEAM (yea, that means more than one, for all of you solo-heros out there) to produce a successful "online solution" that meets the client's objectives.

[WebOnTheFly]

Many people can do both design and development, but a precious few do them both *well* because they're very different skill sets. I would agree that a general understanding of both sides gives you better perspective when you're working in your strong area. But I heard some great words of advice at a leadership conference -- you're generally more valuable if you're outstanding in your strengths than if you're mediocre at a lot of things.

I'm a developer who can do design, but I have no delusions that I'm very good at it. I collaborate with designers so we can both deliver excellent work to our clients. (Speaking of which, I'm looking for more designers to work with...)

So my advice is, dig deeply into areas that make you great at stuff you're passionate about, and expose yourself to related areas so you can deal effectively with experts in those areas.

Good luck!!

Dan Miller
www.WebOnTheFly.com

[OfficeOfTheLaw]

Originally Posted by Pavel_Nedved

» HTML is a given if you don't know HTML, you won't make it far.

I've been the sole developer at my company for a year, but this year we're expanding... we hired 2 new programmers and 2 new designers. I'm currently putting together a general rules and guidelines, but there's some important concepts relating to HTML that even people I have met with 5 years of experience don't grasp:

* Your HTML MUST have a valid doctype
* You should understand that doctype. Do not go using self closing tags in HTML 4.01 strict, do not use XHTML strict if you are serving content as text/plain
* DO not use inline styles in you're tags... try to put it the stylesheet
* Tables are for tabular data, not positioning. On this point, due to difficulties with that handicapped browser 92% of the world uses, I try to provide as many links as possible to work arounds. CSS should be used for layout.
* The site must validate to w3c specifications AND general Accessability guidelines.
* Use a break tag, and I'll break your legs. You should use some other way of achieving a break line, either by setting margin/paddings, or using a proper tag (again, if I see a single <p> node holding multiple paragraphs using <br>, I'll break your legs).
* javascript is nice, even useful. However, be ready to offer an alternitive way to allow the user to do the same functions they could with js, i.e. if a drop down menu is used, make sure that if js is disabled, they can still click the top links and be presented with the sublinks in some way or another. I tend to use a serverside heriarchical menu for this.
* use a spacer.gif and you're fired.
* make sure your pages work in all browsers.
* never use a font tag.
* use tags that describe the data containing them, i.e. a list of links should probably be an unordered list, not several <p> nodes

That's some of the general ideas. I know, I'm anal, but when I started last year, I had to work with way too many crappy WYSYWIG generated sites, and let's face it... hand editing a table based layout with 6 nested tables is not only sheer pain... loads like a snail too! (case in point... first site I worked on had all static html pages, some were a good 700 lines long).

[megamanXplosion]

A web DESIGNER should know that s/he is not a developer. (different skills and education entirely)

A web DEVELOPER should know that s/he is not a designer. (different skills and education entirely)

Do one or the other well. Try to do both and you won't succeed at either.

Simple!

Actually, that is a plan destined for failure. Bosses of new businesses like people who are isolated in one profession and one profession only, but they'll realize that they made a dumb choice when something bad happens. You should train yourself so that you can take on the tasks of your peers, you should know enough about their tasks that you can cooperate with them, etc. For example, if you are working in a web development/design firm inside the office and everyone uploads their work to the storage server on the network, what happens if the network fails? Wait a few days until you can get a networking associate in? Heck no! You should know a little bit about networking in case things like that happen, it will definately give you a good reputation with the boss, even though (s)he may have chosen you specifically for one task, and that will quickly show them how bad of a mistake they could've made. Another example, what would happen if you (designer) were at the office and realized that your buddy (developer) was not in that day due to sickness and one of your repeat clients (a repeat client is much more important than a regular one because they trust you, you can't tarnish that trust!) were waiting to recieve their finished product the next day? If you did not know any development skills then you'll have to tell your client that their project has been delayed, and that will annoy your client greatly because they may have told a whole community/forum of people that a new design was supposed to happen and hundred of people end up disliking you for not keeping your promises.

Another reason why isolationism is bad because it prevents you from moving your career forward. For example, you will have a very hard time becoming an online business advisor if you have only worked in design, or in development, or in usability, or in financing, etc.

Specialization in a small niche in the market may be good for the short-term, but it's disaster for the long-term.

I believe that you should try to learn, at least, a little bit about other jobs in the same market. If you are a graphics designer then you will want to learn a bit about how web designers put the puzzle peices together, you should learn a little bit about psychology so you can craft your pages according to the intended audience, etc. Maybe after a year or two in graphics design, you might start working as a web designer. Once you become a web designer, you will want to learn a little about web development, usability, accessibility, networking, financing, etc. Once you become a developer you might need to learn a little about how the office is managed, etc.

Specialization in one niche of the market will not benefit you in the long term.

[OfficeOfTheLaw]

Originally Posted by AeG

A web DESIGNER should know that s/he is not a developer. (different skills and education entirely)

A web DEVELOPER should know that s/he is not a designer. (different skills and education entirely)

Do one or the other well. Try to do both and you won't succeed at either.

Simple!

I disagree. This may apply for some people (I guess) but it definately doesn't apply to me. I have a bachlor of science in computer science, so naturally I'm a programmer (and usually amaze the people I work with). I'm pretty skilled in javascript, python, perl, php, C++, JAVA, and even .NET.

On the other hand, I know the w3c html, xhtml, and css specs like the back of my hand and constantly find myself correcting design issues from other designers. It still chills me to the bone to see designers with 5 years expereince using css just to format fonts while they use font tags anyway, cram the body tag tight with deperciated attributes, and position elements with tables. Ugh... the agony!!!

[vgarcia]

Originally Posted by OfficeOfTheLaw

On the other hand, I know the w3c html, xhtml, and css specs like the back of my hand and constantly find myself correcting design issues from other designers. It still chills me to the bone to see designers with 5 years expereince using css just to format fonts while they use font tags anyway, cram the body tag tight with deperciated attributes, and position elements with tables. Ugh... the agony!!!

Knowing all that doesn't make you a designer; it makes you a client-side developer. Design is far more than the code a user can see.

[Dorsey]

I agree that design and development require totally different skills; however, I think that more developers can be taught to become reasonably good designers by following some simple principals, than designers can be taught to be reasonably good developers. By "developer", I mean software engineer, not just someone who can create web pages.

Any thoughts?

[Pavel_Nedved]

I can honestly see both sides of the arguement. I would like to add "Know how to use a WYSIWYG editor" - which is going to piss a lot of people off. I used to hand code all of my web sites. The speed and efficiency you get with a good WYSIWYG editor is amazing, and I think vital to success. Do you NEED to know it? No, but it will speed you up a lot. Frontpage is no good though. Dreamweaver is a great tool because unless you ask it to, it won't put in its own code. I've never had any problems with dreamweaver because if you run in to a common WYSIWYG problem, you can switch modes and hand code your way around it.

As for designing, I think bigbproductions is mostly right. You brought up some good points.

When designing a site, usability is the number 1 priority. If a visitor requires more than 3 clicks to find something, it's too much. I rarely use drop down navigation, but as he said, if you do you MUST have a backup plan for those who don't have JS enabled, and it must adhere to the 3 clicks rule.

Corporate branding is another great issue he brought up. You should ask to see all of the company's business literature (bus. cards, letterhead, recent print ads, etc) and base your design around that. If there is no common theme, then colours are all you're left with (if even that) - but very rarely will there be no common theme. If there isn't, you can explain to them why it's important and maybe even get some extra work doing their business literature.

For the content of the site (and the layout to a large degree also) you must consider the target audience. If it is an older group, use a larger font than you would use for a younger age group. It's hard to choose between usability and the copy on which is more important. I'm going to go with usability, because if they can't find what they're looking for, they'll never read your copy. Knowing the target audience will also sway your decision whether or not to use flash. Usually I opt for "no", but I live in a city where the elderly rome the streets in packs hunting young children who are up past their 5pm curfews.

Features is non-essential stuff that makes the user experience just that much better. For instance, on a real estate website, a mortgage calculator would be a great feature - but you could do without. Sometimes it's the features that'll help bring the customers back to the website, so they're definitely important.

Comments?

Pavel

[vgarcia]

Originally Posted by Pavel_Nedved

I can honestly see both sides of the arguement. I would like to add "Know how to use a WYSIWYG editor" - which is going to piss a lot of people off. I used to hand code all of my web sites. The speed and efficiency you get with a good WYSIWYG editor is amazing, and I think vital to success. Do you NEED to know it? No, but it will speed you up a lot. Frontpage is no good though. Dreamweaver is a great tool because unless you ask it to, it won't put in its own code. I've never had any problems with dreamweaver because if you run in to a common WYSIWYG problem, you can switch modes and hand code your way around it.

That's fine and I encourage people to do whatever can save them time. The problem is that in most "Web Design" programs you're taught Dreamweaver instead of HTML rather than as a tool to quickly generate it.

Originally Posted by Pavel_Nedved

When designing a site, usability is the number 1 priority. If a visitor requires more than 3 clicks to find something, it's too much. I rarely use drop down navigation, but as he said, if you do you MUST have a backup plan for those who don't have JS enabled, and it must adhere to the 3 clicks rule.

While I agree that usability is important and is probably the number one priority for most websites, the 3 click rule is largely a myth.

[Pavel_Nedved]

The 3 click rule is not so much a "do or die" thing as it is a guidelines for creating a simplistic navigation system. I've never made a site thinking "I've got to get the clicks to 3 or they'll never see this". I've always looked at it thinking that the easier my navigation system is to use, the more likely people will be to continue using it. Of course, if they can never find what they're looking for, they will leave - but if the navigation system makes them feel as if they're getting somewhere, and not just looping around in a maze, then they're very likely to go as high as 8-10 clicks. After a while they're going to eventually get annoyed and leave, but that point will rarely come after just 3 clicks (unless they have a 28k/s modem and you have large web page files.) Which used to be common - which is why the rule has been around for a long time.

I agree, with broadband the rule is less mandatory, but it's still a good rule to go by. 50% of people still have 56k in the states.

[RockyShark]

Interesting link, Vinnie. I always just believed the "3 click rule" myself, without questioning it.

I suppose it's a matter of making your navigation understandable, and when a user clicks a link, it takes them to a page they'd expect to find after clicking it. To quote Jakob Neilsen:

[ People ]...will keep clicking as long as they sense that they're "getting warmer"

Full article here

Even so, I'd always try and keep those clicks to a minimium, but it's interesting to note that it's not the "golden rule" I thought it was.

[vgarcia]

Originally Posted by RockyShark

Interesting link, Vinnie. I always just believed the "3 click rule" myself, without questioning it.

I did for a long time too, but sometimes there's just too much information to be found in 3 link clicks. Besides, who's to say those three clicks have to be on links? Why can't you find everything with a single click of the search button?

Originally Posted by RockyShark

Even so, I'd always try and keep those clicks to a minimium, but it's interesting to note that it's not the "golden rule" I thought it was.

Simplicity is definitely something that designers should strive for, and I'm not making the case against it. However, every rule has exceptions and it's just a matter of knowing when to bend it.

[Bill Posters]

I wouldn't consider javascript a 'must'.
It's nice to have in your bag of tricks, but it's not an essential as it's perfectly possible to have a career building good sites that never touch javascript.
Imho, a site's reliance on javascript for usability is usually a sign of bad site development.

That said, if a site is going to rely on javascript for certain functions, then it is a must that the javascript developer should know how to do things 'properly'.
Any site that uses MSIE-specific code for their navigation, e-commerce or basket functions will find my purchase process abandoned and my custom going elsewhere never to return.
Given the amount I spend online each year, that's their loss, not mine.

It's surprising and disturbing just how many sites there are that are *still* ignorant of the mistakes they are making by using single-browser techniques for essential functions.

-

Quite surprised that no-one's mentioned 'web standards'.
Surely that's an essential set of knowledge/skills that any 'professional' involved in web development today should have.

[OfficeOfTheLaw]

Originally Posted by Bill Posters

I wouldn't consider javascript a 'must'.
It's nice to have in your bag of tricks, but it's not an essential as it's perfectly possible to have a career building good sites that never touch javascript.
Imho, a site's reliance on javascript for usability is usually a sign of bad site development.

That said, if a site is going to rely on javascript for certain functions, then it is a must that the javascript developer should know how to do things 'properly'.
Any site that uses MSIE-specific code for their navigation, e-commerce or basket functions will find my purchase process abandoned and my custom going elsewhere never to return.
Given the amount I spend online each year, that's their loss, not mine.

It's surprising and disturbing just how many sites there are that are *still* ignorant of the mistakes they are making by using single-browser techniques for essential functions.

-

Quite surprised that no-one's mentioned 'web standards'.
Surely that's an essential set of knowledge/skills that any 'professional' involved in web development today should have.

indeed... I hardly ever use javascript for websites, and when I do, it's for non-important client side enhancement (i.e. client side form validation to save the user time). Of course, it's only an added feature to keep people on slow connections from having to wait for a request response, and, of course, data is validated server side.

javascript is great for web applications as it allows for extra features and behavior that mimics, well, an application. IMHO, javascript IS a must for making good web applications, but it's a bad apple if you are unable to provide functionality with it out of the picture.

And now, a good example of BAD javascript:
I'm currently doing modifications on a site designed by someone else ages ago, and all the forms consist of solely <form name="formName">. even though these forms never have any other different action on any of the pages, their action and methods are set in javascript via document.formName.methpd ="post"; .

it's AWFUL, and some pages that have different content generated... are generated completely from client side javascript as if it's PHP or something.

[bluedigitalmedia]

Originally Posted by AeG

A web DESIGNER should know that s/he is not a developer. (different skills and education entirely)

A web DEVELOPER should know that s/he is not a designer. (different skills and education entirely)

Do one or the other well. Try to do both and you won't succeed at either.

Simple!

I totally agree!!! Unless it is a pre-canned solution I can modify, I hire a programmer..

[icantsurf]

Originally Posted by AeG

A web DESIGNER should know that s/he is not a developer. (different skills and education entirely)

A web DEVELOPER should know that s/he is not a designer. (different skills and education entirely)

Do one or the other well. Try to do both and you won't succeed at either.

Simple!

What AeG is describing here is hemisperical dominance of the brain.

Creatives tend to be right very brained. I use creative in the advertising/entertainment sense, meaning Art Director and Copy Writers.

Coders tend to be very left dominant.

The issue we are debating is one of symantics - what is a "designer"? The truth is its very contextual. I think that the term designer has taken place of engineer or developer or any number of strictly applicable title to describe what one does because of the very nature of the web.

It informs, it entertains, it produces and it saves me time and wastes it too. The problem is "web designer" became a catchall phrase that means maker of web things.

My answer to many people who think they can design is check out the design annuals like Communication Arts or Print or even How

My company bases its web work on two fields web design and web development. We understand the difference and we collaborate. We also establish internal standards to work within the company and with our freelancers so when someone drops off the face of the earth, we can replace them on a project. All we need now is someone to clean up my run on sentences.

One more quick link for the designers out their bad design kills