Web Design Tips 2.0

[Awfy]

Since that other thread was a failure I decided to make my own, this is from past experience with things such as annoying errors that you also code to much for when there is a very simple solution.



When you're designing a layout which uses shadows, also make sure the shadows are needed.
Make sure all shadows are at the correct opacity as you don't want some darker (or too much darker) than others.
The human eye picks up of slight changes without the brain even realising, so subtle shadows are a really nice way of generating a good look without annoying the brain.
Also design to make the changing resolution support, for example in the past the general resolution was are 800 x 600 however you now find most new computers are setup to 1024 x 768 or more. So design within the limits of 1024 x 768 (but not right on the pixel as you'll have troubles with scroll bars).
Tables are NOT the devil, they have their uses and you will be thankful for them sometimes. There are things such as internal content positioning which Divs can really get confused on and often need paragraphs of code to get the same effect as a Table cell does instantly. So if you can't get the Divs to work, give Tables a quick shot.
Tabular data should be presented in Tables, that's what they're there for! For example a hosting site listing prices and features on a compare sheet should use a Table to same them a lot of time.
Take your time to go over your code when you can't work out the error, there has been countless times where I've missed a semicolon or misspelt "font" to "fpnt".
Photoshop ISN'T a needed application, before PS I used to do all my design work in Paintshop Pro 7 (which at the time was 4 years out of date) however I was still considered to be one of the best designers of Habbo fansites at the time. Try out things like GIMP, Paint, Paintshop Pro, Fireworks before settling on Photoshop. Not everyone likes the Photoshop setup or complicity.
Run with it, don't design something then think "nah that's crap" then delete. Keep working on it, add shadows, outlines, inner glows anything. If you work on each effect you can sometimes transform a really ugly box into something people love to look at (just be careful to not over do it).
Padding is a pain, between all the browsers you'll find padding causes a lot of errors. If you don't set a width/height of the div then it will display the same in all browsers. So where possible try and keep those two factors out of it. This is most common where one Div is inside another which has a width set.
Minus margins are so handy when it comes to positioning things, if your box seems a couple of pixels out. Rather than go back to Photoshop and resize just try some minus margins to see if they can cover up the mistake. Make sure it looks okay in all browsers though, not everyone wants to play nice with minus margins.

I may post more later, this is just to get you teeth into and discuss. I'm not always right so have a bite :P

[Thai-Man-Land]

awesome!

Thanks for the help=]

[HabbDance]

TIP:
My thread was better, go there.

Edited by Meti (Forum Moderator): Please don't post to cause arguements. And try staying on-topic ;)

[Awfy]

TIP:
My thread was better, go there.
Seriously it wasn't, at least I know a thing or two about web development and haven't got a one sided view about techniques based on what I've heard from someone else.

[HabbDance]

Seriously it wasn't, at least I know a thing or two about web development and haven't got a one sided view about techniques based on what I've heard from someone else.
You rly need to get a clue, Iszak is not the only person who doesn't like w3schools.

[Invent]

TIP:
My thread was better, go there.

lol, no it's not.

[wsg14]

TIP:
My thread was better, go there.

What the **** is wrong with you? Get off your high horse and stop thinking you're better than everyone else. Greg's thread is a hundred times better than yours.

[Dilore]

Tip:
When designing always google around for inspiration.

[Meti]

I love this guide!

Great job, you really deserve a +rep for doing this! :D

[Trinity]

[quote=HabbDance;5254669]TIP:
My thread was better, go there.[quote]

Wrong.
This thread instantly defeats yours because he's actually given reasons for the tips, whereas you just expect people to accept your tips blindly.

[UniqueHabbo]

Nice, really good for beginners.

Thanks, and I agree that this thread is better.

[--ss--]

Tip: Don't give tips unless you want to be flamed.

Not a bad list of tips you have compiled there, very helpful :).

#######################################
http://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Web_2.0_Map.svg/800px-Web_2.0_Map.svg.png

[craigg.]

good thread.

For members who want to start designing: I would recomend buying a old version of photoshop e.g. photoshop elements. I used photoshop elements a few years ago and it served me well. You could probably pick up a cd off ebay for pennies.

[HabbDance]

good thread.

For members who want to start designing: I would recomend buying a old version of photoshop e.g. photoshop elements. I used photoshop elements a few years ago and it served me well. You could probably pick up a cd off ebay for pennies.
Bad idea to recommend ps, there going to flama you, but I think you're right.

[kk.]

no he reccommended it, not said use it. You can use what you like its just photoshop is one of the most used at the moment. Fireworks and im sure indesign is also used.

great tips. ill quote my design tip..


in PS, duplicate and merge layers which youre not sure what colour you want, go to adjustments in the tools menu and choose hue/saturation. mess around with the colours and choose the right one. choose the original layer and make the colours match that of the changed one then delete the merged layer

[Agnostic Bear]

Bad idea to recommend ps, there going to flama you, but I think you're right.

Photoshop is the best tool to design websight graphics.

[Calon]

TIP:
My thread was better, go there.

Edited by Meti (Forum Moderator): Please don't post to cause arguements. And try staying on-topic ;)
http://www.lafferty.ca/wp-content/uploads/2007/05/fail-24.jpg
(to Habbdance)

On topic:
Tip 8.. At last, somebody who actually doesn't think photoshop is the only program to be used.

I think this is extremely useful to new designers and this has helped me a bit.


Photoshop is the best tool to design websight graphics.
Yes, for websight graphics.

Bad idea to recommend ps, there going to flama you, but I think you're right.
Stop pointlessly posting.

He reccomended it, he didn't moan at us to use it neither did he create a thread telling us to use it.

[Agnostic Bear]

http://www.lafferty.ca/wp-content/uploads/2007/05/fail-24.jpg
(to Habbdance)

On topic:
Tip 8.. At last, somebody who actually doesn't think photoshop is the only program to be used.

I think this is extremely useful to new designers and this has helped me a bit.


Yes, for websight graphics.

Stop pointlessly posting.

He reccomended it, he didn't moan at us to use it neither did he create a thread telling us to use it.

Do you not like my alternative to websites, the websight?

[Dentafrice]

Bad idea to recommend ps, there going to flama you, but I think you're right.

Shutup... you're seriously starting to piss me, and everyone off.. take your "Habboness" out of the Designing and Development forum.

If you can't tell, most of us here actually know what we are talking about, unlike you.

You remind me of Hypertext/Reconix 6 months ago.. browsing this forum all "Habbofied".. if you want to learn something, and actually be a part of this nutty community...

Then I suggest you step it up, take the stick out of your butt (attitude), and present yourself to us in a way that doesn't make us cut your wrists and throw you into a pool of alcohol.

Good evening ;)

Anyways. Nice tips Greg :]

[Source]

Listen to Dentafrice HabbDance - big ego's are not liked around here, so just take your time and word your responses in a way that can't be interpretated as "trolling" or "know it all".

Greg made some extremly valid points there; point 7 is one that often happens to me and can be applied to not only designing (xhtml, css etc...) - the same can happen in php, missing the occasional ; or closing bracket.

[HabbDance]

Listen to Dentafrice HabbDance - big ego's are not liked around here, so just take your time and word your responses in a way that can't be interpretated as "trolling" or "know it all".

Greg made some extremly valid points there; point 7 is one that often happens to me and can be applied to not only designing (xhtml, css etc...) - the same can happen in php, missing the occasional ; or closing bracket.
When did I say I was a 'know-it-all'. I never said I was the best coder/designer or anything. But you don't have to be the best to help people..

[Dentafrice]

Listen to Dentafrice HabbDance - big ego's are not liked around here, so just take your time and word your responses in a way that can't be interpretated as "trolling" or "know it all".

Greg made some extremly valid points there; point 7 is one that often happens to me and can be applied to not only designing (xhtml, css etc...) - the same can happen in php, missing the occasional ; or closing bracket.
These are the people that can have big egos:

Greg
Me
Source
Jewish Bear
Simon
and some other people kthx.

DO YOU SEE HABDANCE IN THAT LIST??? NO.

-------

I miss the occasional ; and closing bracket too.. they're easy to spot though if you have a good idea about where you are looking :P



When did I say I was a 'know-it-all'. I never said I was the best coder/designer or anything. But you don't have to be the best to help people..

But you actually have to know what you are talking about to help people, so you don't give them the wrong/stupid advice.. and lead them the wrong way in their "learning path".

[Agnostic Bear]

These are the people that can have big egos:

Greg
Me
Source
Jewish Bear
Simon
and some other people kthx.

DO YOU SEE HABDANCE IN THAT LIST??? NO.

-------

I miss the occasional ; and closing bracket too.. they're easy to spot though if you have a good idea about where you are looking :P




But you actually have to know what you are talking about to help people, so you don't give them the wrong/stupid advice.. and lead them the wrong way in their "learning path".

yo what's up thx for the name drop appreciate it bro

[Dentafrice]

I don't think we have egos at all.

[Source]

I wasnt saying you said you know it all HabDance, I was saying that the way you word your responces can be interpretated as someone who "thinks" they know it all. Don't take it as seriously, just take it on the chin and move on with a better attitude?

And Mingle spotting the errors in php is super easy thanks to PHP error system ^-^, but I always make those stupid mistakes when I wanna get something done whilst its still in my mind :P

[Dilore]

Nobody has en ego except for their own personal skills. It's obvious that Dentafrice and Awfy know a lot more than you Habbdance and from your other thread it seems you've copied advice from Izsak so you really can't say anything about coding unless you have the proper knowledge.

[Dentafrice]

I wasnt saying you said you know it all HabDance, I was saying that the way you word your responces can be interpretated as someone who "thinks" they know it all. Don't take it as seriously, just take it on the chin and move on with a better attitude?

And Mingle spotting the errors in php is super easy thanks to PHP error system ^-^, but I always make those stupid mistakes when I wanna get something done whilst its still in my mind :P

Yeah thanks PHP.. once you can actually interpret what the errors mean.. and what they are telling you.. it's quite easy to fix things :P

[lSnowie]

These are the people that can have big egos:

Greg
Me
Source
Jewish Bear
Simon
and some other people kthx.

DO YOU SEE HABDANCE IN THAT LIST??? NO.

-------

I miss the occasional ; and closing bracket too.. they're easy to spot though if you have a good idea about where you are looking :P




But you actually have to know what you are talking about to help people, so you don't give them the wrong/stupid advice.. and lead them the wrong way in their "learning path".

(I'm not starting on you here BTW) But anyone can have a big ego, as it's a free world, it's just alot of people wont like you if you do. :)

[RichardKnox]

What Denta means is those people can have an ego and not get flamed to hell cause they actually do have the skills to back it up. Doesn't mean they won't get flamed at all, just ask Greg.

[lSnowie]

What Denta means is those people can have an ego and not get flamed to hell cause they actually do have the skills to back it up. Doesn't mean they won't get flamed at all, just ask Greg.

Oh I get it now, thanks for explaining. :)

[Jackboy]

These are the people that can have big egos:

Greg
Me
Source
Jewish Bear
Simon
and some other people kthx.

DO YOU SEE HABDANCE IN THAT LIST??? NO.

-------

I miss the occasional ; and closing bracket too.. they're easy to spot though if you have a good idea about where you are looking :P




But you actually have to know what you are talking about to help people, so you don't give them the wrong/stupid advice.. and lead them the wrong way in their "learning path".

Caleb im fluent in C++. And also you know you said "DO YOU SEE HABDANCE IN THE LIST", he could technically appear under the "a few other people". Hehe i post out of pure boredom.



I wasnt saying you said you know it all HabDance, I was saying that the way you word your responces can be interpretated as someone who "thinks" they know it all. Don't take it as seriously, just take it on the chin and move on with a better attitude?

And Mingle spotting the errors in php is super easy thanks to PHP error system ^-^, but I always make those stupid mistakes when I wanna get something done whilst its still in my mind :P

Half asleep whilst posting that Matt :P

[RYANNNNN]

These are the people that can have big egos:

Greg
Me
Source
Jewish Bear
Simon
and some other people kthx.

DO YOU SEE HABDANCE IN THAT LIST??? NO.

-------

I miss the occasional ; and closing bracket too.. they're easy to spot though if you have a good idea about where you are looking :P




But you actually have to know what you are talking about to help people, so you don't give them the wrong/stupid advice.. and lead them the wrong way in their "learning path".

lol this forum gets funnier day by day

[Dentafrice]

lol this forum gets funnier day by day
And why do you say this?

[RYANNNNN]

And why do you say this?

can you not see why?

[Dentafrice]

No sir, why don't you "explain" for us..

[Josh-sama]

Bad idea to recommend ps, there going to flama you, but I think you're right.

Paint isn't better than photoshop dear.


Listen to Dentafrice HabbDance - big ego's are not liked around here, so just take your time and word your responses in a way that can't be interpretated as "trolling" or "know it all".

Greg made some extremly valid points there; point 7 is one that often happens to me and can be applied to not only designing (xhtml, css etc...) - the same can happen in php, missing the occasional ; or closing bracket.

As a lot of us has, truly learned.


When did I say I was a 'know-it-all'. I never said I was the best coder/designer or anything. But you don't have to be the best to help people..

You implied it by posting:

"MAH GUIDE WAS BETTAR"

Despite, my dislike for Greg. He actually did good for once and kudos to him.

He's probably one of the most experianced designers on here, and by no doubts completely wipes you off the table. Yes, I dislike Greg - but I cannot deny his experiance or abilities.

[Jackboy]

Yes, i suppose Greg is almost as good a designer as me!

I hope source reads this and remembers my appauling gradient layout rofl

[Josh-sama]

Yes, i suppose Greg is almost as good a designer as me!

I hope source reads this and remembers my appauling gradient layout rofl

ROFL. Same old Jack :D

[UniqueHabbo]

Lovely on-topic discussion here, folks!

[Funya Chin]

TIP:
My thread was better, go there.

Edited by Meti (Forum Moderator): Please don't post to cause arguements. And try staying on-topic ;)
Shut up, you know nothing.

w3 is an excellent resource.

[wewt]

These are the people that can have big egos:

Greg
Me
Source
Jewish Bear
Simon
and some other people kthx.

DO YOU SEE HABDANCE IN THAT LIST??? NO.

-------

I miss the occasional ; and closing bracket too.. they're easy to spot though if you have a good idea about where you are looking :P




But you actually have to know what you are talking about to help people, so you don't give them the wrong/stupid advice.. and lead them the wrong way in their "learning path".

well that's brought you across as a bit of a *****.

[L?KE]

well that's brought you across as a bit of a *****.

Lol, luckily he for him he pwns the frick out of HabbDance :P

Kills to type, I picked a blister on my hand :P

[Dentafrice]

Haha that's pretty much why I said it.. I wouldn't say it to someone I knew that I didn't beat in a landslide.. and I wouldn't say it to someone I respect.

[L?KE]

:P lmao.

At least he tried :rolleyes: :P

[CHTom]

Dear lord, it's funny how one moron can come in and cause 4 pages of crap to emerge.

Great guide Greg, agree with the points entirely.

[CS-dude]

Hey,

One additional tip: Always use xhtml 1.1 Strict. It may seem like alot more work at first, but trust me when i say it will save your hours in making your site cross browser compatible.

ie7, firefox, opera and safari will normally display the page exactly the same as each other. Ie6 is still a pain, but still does a better job than normal.

Cs-Dude