Web Design Tips

[HabbDance]

In this thread, you can share your tips and secrets to designing sites and coding them.

I'll start:

Designing:
1. Try to use Photoshop if possible
2. Be as original as you can
3. Use gradients

Coding:
1. Do not use tables, use CSS
2. Do not use w3schools
3. Always validate your coding: http://www.validator.w3.org

[Excellent2]

Whats wrong with w3schools?

[Jackboy]

w3schools is fine for begginers

[kk.]

Whats wrong with w3schools?

my thoughts too :S

[lSnowie]

Why not use W3Schools, it is a very good website if you are a beginner and teaches you most things you need to know.

If you actually read it you may learn something from it, most people just skim over it and don't even look

W3 schools taught me quite alot.

[Iszak]

Like within 30 minutes ago I told him not to use w3schools and to validate his code xD and now he's using it as a tip. :P

lSnowie (http://www.habboxforum.com/member.php?u=51265): Sure it's not that bad for beginners but it's best not to get in bad habits first here are the follow mistakes just briefly.

Syntax Errors in the example => http://www.w3schools.com/flash/flash_inhtml.asp

Complete Lies => http://www.w3schools.com/xhtml/xhtml_intro.asp

Can't get it even more wrong if tried => http://www.w3schools.com/css/pr_class_clear.asp

[HabbDance]

w3 has alot of errors and explains things horribly :eusa_wall
But go right ahead and use them if you want, and please don't flame because of this ;)

[HabbDance]

Like within 30 minutes ago I told him not to use w3schools and to validate his code xD and now he's using it as a tip. :P
Iszak, now your being a little arrogant, alot of threads on this forum say things like that. Your not the only person on this forum.

EDIT: Can a mod please merge my double post, sorry :[

Edited by Meti (Forum Moderator): Please do not double post when you simply can edit your first post.

[Kaveri]

Validation means nothing, and you're replacing tables with CSS - :S.

You obviously don't know much so creating this sort of thread wasn't the best idea and w3 is an excellent resource.

[kk.]

Like within 30 minutes ago I told him not to use w3schools and to validate his code xD and now he's using it as a tip. :P


w3 has alot of errors and explains things horribly :eusa_wall
But go right ahead and use them if you want, and please don't flame because of this ;)
so ur helping him and giving him tips.. that meakns u dont know how tro code properly and ur saying it has a lot of errors? how would u know?

[HabbDance]

so ur helping him and giving him tips.. that meakns u dont know how tro code properly and ur saying it has a lot of errors? how would u know?
I have no idea what your trying to say or who this was directed to, so please improve your grammar.

I knew something like this would happen, that's what I hate about this forum.

[Jackboy]

My Tip
When coding use "Clear:" to your advantage, it can help alot.

[Iszak]

validation ensures that your site is to W3C specifications and since browsers are meant to render via the W3C specifications this will reduce the numbers of mal-formalities or errors on your webpage accross browsers. As for you HabbDance I accept that for no. 3 but for no. 2 you so stole that off me :P

[HabbDance]

My Tip
When coding use "Clear:" to your advantage, it can help alot.
Thank you for giving a useful tip :)!

+rep if i can :]

[Jackboy]

My Tip
When using padding rememebr to deduct the pixels off the width or height ;)

Example



.class {
width:12px;
height:12px;
}
if you wanted to pad some text in from the left side by 2px. You would add padding-left:2px;



.class {
padding-left:2px;
width:12px;
height:12px;
}
But now the actual width is too much. You must deduct 2 off the width to make it right.



.class {
padding-left:2px;
width:10px;
height:12px;
}

[lSnowie]

I use this in my code so the boxes dont go outside the main div


clear: both;
overflow: hidden;


If that counts as a tip?


Lool

[Jackboy]

My Tip
When using photoshop mess around with the transparency to get the result you want.

[HabbDance]

validation ensures that your site is to W3C specifications and since browsers are meant to render via the W3C specifications this will reduce the numbers of mal-formalities or errors on your webpage accross browsers. As for you HabbDance I accept that for no. 3 but for no. 2 you so stole that off me :P
http://www.habboxforum.com/showthread.php?t=506638
Look at the post made by hypertext in there, then the one I said after it. Ok?


My Tip
When using padding rememebr to deduct the pixels off the width or height ;)

Example



.class {
width:12px;
height:12px;
}
if you wanted to pad some text in from the left side by 2px. You would add padding-left:2px;



.class {
padding-left:2px;
width:12px;
height:12px;
}
But now the actual width is too much. You must deduct 2 off the width to make it right.



.class {
padding-left:2px;
width:10px;
height:12px;
}

Another good tip :]

Another (Yes Iszak I actually got this from you ;))

Coding Tip:
don't use position absolute unless you really need to, and even then set the parent to position relative

Designing Tip:
If you don't have photoshop, you can use: http://iaza.com to add special effects to images.

[kk.]

I have no idea what your trying to say or who this was directed to, so please improve your grammar.

I knew something like this would happen, that's what I hate about this forum.

shut up and dont try to insult me. im on a forum so ill speak how i want
it was aimed at you. what i meant was for him to be telling u not to use w3schools, u must be learning therefore, u dont know if it has errors on it or not..

Edited by Meti (Forum Moderator): Please don't be rude.

[lSnowie]

shut up and dont try to insult me. im on a forum so ill speak how i want
it was aimed at you. what i meant was for him to be telling u not to use w3schools, u must be learning therefore, u dont know if it has errors on it or not..

@habbdance

I think he's basically saying,

If Iszak has told you not to use W3Schools, you must be looking for websites, and being a beginner, and he is saying you must not know how to code, and you would not know if there is errors or not.

[HabbDance]

I think he's basically saying,

If Iszak has told you not to use W3Schools, you must be looking for websites, and being a beginner, and he is saying you must not know how to code, and you would not know if there is errors or not.
+Rep to you for not being an idiot :]
But for the record, I do know how to code.



shut up and dont try to insult me. im on a forum so ill speak how i want
it was aimed at you. what i meant was for him to be telling u not to use w3schools, u must be learning therefore, u dont know if it has errors on it or not..
He was actually telling me because I said something about him explaining something alot better than the ******s at w3schools, so you can just stop posting in this thread.

[RichardKnox]

Only read first page, but a couple of the tips are stupid. 'Don't use tables'. Not even for tabular data? Sure, don't code a full design in tables but surprisingly they are actually good, if used properyl.

[kk.]

@habbdance

I think he's basically saying,

If Iszak has told you not to use W3Schools, you must be looking for websites, and being a beginner, and he is saying you must not know how to code, and you would not know if there is errors or not.

thats what i meant and i said it in the last post

[HabbDance]

Only read first page, but a couple of the tips are stupid. 'Don't use tables'. Not even for tabular data? Sure, don't code a full design in tables but surprisingly they are actually good, if used properyl.
That's a good point, your right. I should have stated that :P

[lSnowie]

I think we should get this thread back on track, post your helpfull tips, or don't post at all, this thread is to help beginners,

If you aren't going to be helpfull don't post. Thanks!

[RichardKnox]

Coding tip: use li for list items such as navigations etc as opposed to seperate divs.
If above was aimed at me, I was helping :rolleyes:

[HabbDance]

I think we should get this thread back on track, post your helpfull tips, or don't post at all, this thread is to help beginners,

If you aren't going to be helpfull don't post. Thanks!
Thanks Snowie and SetupScene (I think that was your name, forgot :])
+rep (if i can)

Anyway, going back to the gradient thing.

look at this image, which is more interesting, top or bottom?
http://jewbear.net/img/1225659992219.pngExactly :]

EDIT: His name is RichardKnox (http://www.habboxforum.com/member.php?u=41540) but his avatar is SetupScene so I was close x]

[Jackboy]

Only read first page, but a couple of the tips are stupid. 'Don't use tables'. Not even for tabular data? Sure, don't code a full design in tables but surprisingly they are actually good, if used properyl.

Richard is brilliant coder.

I have learn lots from looking at the source of his coding !

My Tip
Use class' when refering to them more than once. Otherwhys just use ids.

[RichardKnox]

Top in that specific example, although look at websites such as facebook. The design blows away many over gradiented, over glossed crap using block colours, no gimmicks.

[lSnowie]

Thanks Snowie and SetupScene (I think that was your name, forgot :])
+rep (if i can)

Anyway, going back to the gradient thing.

look at this image, which is more interesting, top or bottom?
Exactly :]

EDIT: His name is RichardKnox (http://www.habboxforum.com/member.php?u=41540) but his avatar is SetupScene so I was close x]


Hey you said +REP, where is it?!?!?!?!


Hehe jokes :)

The top is more intresting

Edited by Meti (Forum Moderator): Please don't ask for reputations!

[Jackboy]

Top in that specific example, although look at websites such as facebook. The design blows away many over gradiented, over glossed crap using block colours, no gimmicks.

Very true.

But alot of people hate the new facebook layout. And they have like some proper advanced people working for them im guessing?

[HabbDance]

Top in that specific example, although look at websites such as facebook. The design blows away many over gradiented, over glossed crap using block colours, no gimmicks.
Well, some sites make solid colors work, but gradients are best imo.


Richard is brilliant coder.

I have learn lots from looking at the source of his coding !

My Tip
Use class' when refering to them more than once. Otherwhys just use ids.
To extend on that, for all the new coders.



#id {
CSS


is used for divs you will be using once



.class {
CSS


is used for divs that will be used twice or more.

[lSnowie]

Floats can be quite usefull, but don't allways align it right


float: left;
float: right;
float: center;

[Excellent2]

The thing is we're starting to come out of the "web 2.0" era. Websites aren't using tons of glossy gradients no more and not overcrowding their design with petty unwanted graphics.

As Richard said, websites are starting to use block colours so you should really follow that.

[lSnowie]

The thing is we're starting to come out of the "web 2.0" era. Websites aren't using tons of glossy gradients no more and not overcrowding their design with petty unwanted graphics.

As Richard said, websites are starting to use block colours so you should really follow that.

Can you expand on what you mean by "block colours" please

[RichardKnox]

Solid blocks of a single colour. E.g. a 400px by 600px div with a background property of #000000. As opposed to using a repeating gradient image.

[Excellent2]

Just standard colours like this, instead of this.

[Jackboy]

Solid blocks of a single colour. E.g. a 400px by 600px div with a background property of #000000. As opposed to using a repeating gradient image.

The key is (this is rich coming from me) not to overuse gradients.

http://uk.youtube.com/

Youtube uses minimal gradient and is quite effective.

IM OFF NOW, I WILL POST LOADS MORE TIPS TOMOZ x

[RichardKnox]

I never said gradients were a bad thing. But the point is, use them to enhance the content/layout of a site as opposed to standing out unless it's in a download button for example that you want the user to be drawn to.

[Excellent1]

I never said gradients were a bad thing. But the point is, use them to enhance the content/layout of a site as opposed to standing out unless it's in a download button for example that you want the user to be drawn to.Totally agree, take HxF classic skin for example, hardly any gradients except for the theads - It just all fits.

[RichardKnox]

Not a great example though due to the fact it's hardly a work of web design art. But I'm sure everyone will know what you mean and where you're coming from.

[Excellent1]

Okay take this site for example :P:
http://www.tajloro.com/ - No gradients but solid colour and it's beautiful.

[RichardKnox]

Haha, i'll give you that one.

[kk.]

theres no style you should follow. Choose depending on your layout. If block colours work better, then use them if not then use gradients.

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 layout and make the colours match that of the changed one then delete the merged layer

EDIT: people just dont like change on the new facebook layout. I think it looks a lot cleaner and much more modern than wat was on show before.

[Excellent1]

Haha, i'll give you that one.1 point to me :P It just goes to show you don't need 50 colours on 1 page to make it decent.

Quick little tip (don't know if it's been said)
ALWAYS comply with web standards.

[RichardKnox]

That's exactly what we're talking about (the first part). Effects e.g. gradients should be used to enhance a user's experience.

[Excellent1]

This website has certainly used gradients to enhance the users experience, kudos:

http://www.dialageek.com/

[lSnowie]

This website has certainly used gradients to enhance the users experience, kudos:

http://www.dialageek.com/

That is not very affective AT ALL.

[HabbDance]

This website has certainly used gradients to enhance the users experience, kudos:

http://www.dialageek.com/
Good find, also check: http://habblefm.com

[Excellent1]

Good find, also check: http://habblefm.comYeah thats a nice habbo layout, reminds me of habbox :)

[HabbDance]

Yeah thats a nice habbo layout, reminds me of habbox :)
Speaking of habbox, they use gradients :]

[Calon]

PHOTOSHOP ISNT THE ONLY GRAPHICS PROGRAM.

Jesus, I hate it. People advising people to use it really aggravates me, anything other than Paint is good.. I.E Fireworks.

[HabbDance]

PHOTOSHOP ISNT THE ONLY GRAPHICS PROGRAM.

Jesus, I hate it. People advising people to use it really aggravates me, anything other than Paint is good.. I.E Fireworks.
There are several others, but I consider Photoshop the best.
Gimp, Paint.NET (never actually tried), Fireworks, Paintshop PRO

and what's wrong with paint? :[

[chrisgocrazyH]

Mate i think you need the tips..

[Jackboy]

Okay take this site for example :P:
http://www.tajloro.com/ - No gradients but solid colour and it's beautiful.
I like that :)


This website has certainly used gradients to enhance the users experience, kudos:

http://www.dialageek.com/
That is good too


Mate i think you need the tips..
Get out of the thread. Aren't you the guy who goes crazy when he can't figure out how to make text bold in html? Yeh its you.

[chrisgocrazyH]

What the **** Is your problem I have known HTML since i was ten A ******* Bold would be <b> Hahah your a *** Jack </b>

[Awfy]

How dare you mock tables for layout use, have you completely ignored the world's biggest website when referring to this tip? Can anyone guess where this code comes from;

<form action="/search" name=f><table cellpadding=0 cellspacing=0><tr valign=top><td width=25%>&nbsp;</td><td align=center nowrap><input name=hl type=hidden value=en><input maxlength=2048 name=q size=55 title="Google Search" value=""><br><input name=btnG type=submit value="Google Search"><input name=btnI type=submit value="I'm Feeling Lucky"></td><td nowrap width=25%><font size=-2>&nbsp;&nbsp;<a href=/advanced_search?hl=en>Advanced Search</a><br>&nbsp;&nbsp;<a href=/preferences?hl=en>Preferences</a><br>&nbsp;&nbsp;<a href=/language_tools?hl=en>Language Tools</a></font></td></tr><tr><td align=center colspan=3><font size=-1><span style="text-align:left">Search: <input id=all type=radio name=meta value="" checked><label for=all> the web </label><input id=cty type=radio name=meta value="cr=countryUK|countryGB"><label for=cty> pages from the UK </label></span></font></td></tr></table></form>
If Google use it why can other people? Tables are a damn sight easier to code in when you first start as they follow the basics of how things should interact to a human, where as divs take it up a level where you actually have to find out how they interact in different situations making it harder for a beginner to understand why certain things must be happening. Also the fact they're likely to use tables due to things like Dreamweaver/Frontpage instantly giving them the tools to make tables quickly :P

[HabbDance]

What the **** Is your problem I have known HTML since i was ten A ******* Bold would be <b> Hahah your a *** Jack </b>
hmm.. when you were 10.. yesterday?



I like that :)


That is good too


Get out of the thread. Aren't you the guy who goes crazy when he can't figure out how to make text bold in html? Yeh its you.
Haha ;] He can't even get a link in his signature right :]


How dare you mock tables for layout use, have you completely ignored the world's biggest website when referring to this tip? Can anyone guess where this code comes from;

<form action="/search" name=f><table cellpadding=0 cellspacing=0><tr valign=top><td width=25%>&nbsp;</td><td align=center nowrap><input name=hl type=hidden value=en><input maxlength=2048 name=q size=55 title="Google Search" value=""><br><input name=btnG type=submit value="Google Search"><input name=btnI type=submit value="I'm Feeling Lucky"></td><td nowrap width=25%><font size=-2>&nbsp;&nbsp;<a href=/advanced_search?hl=en>Advanced Search</a><br>&nbsp;&nbsp;<a href=/preferences?hl=en>Preferences</a><br>&nbsp;&nbsp;<a href=/language_tools?hl=en>Language Tools</a></font></td></tr><tr><td align=center colspan=3><font size=-1><span style="text-align:left">Search: <input id=all type=radio name=meta value="" checked><label for=all> the web </label><input id=cty type=radio name=meta value="cr=countryUK|countryGB"><label for=cty> pages from the UK </label></span></font></td></tr></table></form>If Google use it why can other people? Tables are a damn sight easier to code in when you first start as they follow the basics of how things should interact to a human, where as divs take it up a level where you actually have to find out how they interact in different situations making it harder for a beginner to understand why certain things must be happening. Also the fact they're likely to use tables due to things like Dreamweaver/Frontpage instantly giving them the tools to make tables quickly :P
I'm not even gunna read this, tables are not the best solution FOR LAYOUTS.

Another Tip:
Make sure you have a quality web host. One that has good up time and easy to use.
I recommend http://1and1.com. Great for beginners and advanced.

[wsg14]

hmm.. when you were 10.. yesterday?



Haha ;] He can't even get a link in his signature right :]


I'm not even gunna read this, tables are not the best solution FOR LAYOUTS.

Another Tip:
Make sure you have a quality web host. One that has good up time and easy to use.
I recommend http://1and1.com. Great for beginners and advanced.

Did he say the best? All he said was that tables are good for beginners. Maybe if you read it....

[HabbDance]

Did he say the best? All he said was that tables are good for beginners. Maybe if you read it....
How about YOU read? I said not the best. And imo, and in a majority of the people on this forum, think tables are not good for layouts.
Please get out of this thread BOX! if you just plan on posting pointlessly.

[wsg14]

How about YOU read? I said not the best. And imo, and in a majority of the people on this forum, think tables are not good for layouts.
Please get out of this thread BOX! if you just plan on posting pointlessly.

I agree too, divs are better than tables. All Greg was trying to say was that tables are easier to code than divs for beginners.

[HabbDance]

I agree too, divs are better than tables. All Greg was trying to say was that tables are easier to code than divs for beginners.
Hey, a reasonable post (:
Well you can say that, but for me css/divs are easier

[Meti]

Good thread.
@HabbDance (one of your first posts when you said not to use positions);
- Didn't you use them like a week ago? You've might learned not to use them now, so I'm not saying anything.

TIP:
Always have matching colours.

PS: Are we going in to the 3.0 web? :P Jks

[HabbDance]

Good thread.
@HabbDance (one of your first posts when you said not to use positions);
- Didn't you use them like a week ago? You've might learned not to use them now, so I'm not saying anything.

TIP:
Always have matching colours.

PS: Are we going in to the 3.0 web? :P Jks
Good observation. I actually did learn that this week from Iszak, thanks for not flaming.
And yes, when making layouts matching colors is a must, usually. :]

[Awfy]

HabbDance your opinion is based on someone else's therefore how can you say it's the truth? You need to experience a world's worth of problems when it comes to HTML before you can even comment on what's best for people. I've been working in HTML since the fine age of 10 and back then tables were the way to code and were extremely easy. I didn't know anyone who was starting off to go straight into coding with divs.

[Jackboy]

HabbDance your opinion is based on someone else's therefore how can you say it's the truth? You need to experience a world's worth of problems when it comes to HTML before you can even comment on what's best for people. I've been working in HTML since the fine age of 10 and back then tables were the way to code and were extremely easy. I didn't know anyone who was starting off to go straight into coding with divs.

I actually agree with you Jon, i went to tables first... I never learnt how to do them properly until i had learn divs..

THe other week i couldn't even code that habboring layout. Now after coding 4 layouts i would say im overly confident in coding layouts.

Also @Habbdance, LOL AT CHRIS' SIGNATURE JOKE!!!

[HabbDance]

I actually agree with you Jon, i went to tables first... I never learnt how to do them properly until i had learn divs..

THe other week i couldn't even code that habboring layout. Now after coding 4 layouts i would say im overly confident in coding layouts.

Also @Habbdance, LOL AT CHRIS' SIGNATURE JOKE!!!
heheh ;]


HabbDance your opinion is based on someone else's therefore how can you say it's the truth? You need to experience a world's worth of problems when it comes to HTML before you can even comment on what's best for people. I've been working in HTML since the fine age of 10 and back then tables were the way to code and were extremely easy. I didn't know anyone who was starting off to go straight into coding with divs.
Listen, please do NOT post again if your going to be so annoying and incorrect. Is it not possible for 2 people to think the same thing? And my, or anyone else's, opinion is NOT fact.

[Awfy]

How am I incorrect? I've now been coding HTML for 8 years past September, so my experience is a little more than yours. So how can you - who has learnt it from someone else who I've heard numerous hilarious stories on his abilities in coding - comment on my correctness?

[HabbDance]

How am I incorrect? I've now been coding HTML for 8 years past September, so my experience is a little more than yours. So how can you - who has learnt it from someone else who I've heard numerous hilarious stories on his abilities in coding - comment on my correctness?
Umm.. when did we bring coding skills into this. & i'd love to hear who you heard one story from. + Millions of people in the world don't even know what HTML is.

[kk.]

st*u habbdance, you clearly dont know what you are on about. I uysed tables when i first started coding and it prooved to be easy. However, load times suffer and that means a lot nowadays. Although not the best, it can still be used...

and meti... i wasnt being rude.. if i was then he was?

[RichardKnox]

I actually agree with you Jon, i went to tables first... I never learnt how to do them properly until i had learn divs..

THe other week i couldn't even code that habboring layout. Now after coding 4 layouts i would say im overly confident in coding layouts.

Also @Habbdance, LOL AT CHRIS' SIGNATURE JOKE!!!

Who the hell is Jon? Greg?

I agree with Greg, tables are much easier to use for beginners, but if i'm completely honest I learnt div's first as when I was learning that's what I was recommended.

[Decode]

In this thread, you can share your tips and secrets to designing sites and coding them.

I'll start:

Designing:
1. Try to use Photoshop if possible
2. Be as original as you can
3. Use gradients

Coding:
1. Do not use tables, use CSS
2. Do not use w3schools
3. Always validate your coding: http://www.validator.w3.org
"Try to use Photoshop if possible" - Why? If I wanted to I could use a free editing program like paint.net or GIMP and copy a layout done in photoshop. Photoshop is too expensive for most people.
"Use gradients" - Maybe use 1 or 2 gradients on the page, for the page background and stuff but putting too many on the page will make it look messy. Just saying "Use gradients" isn't going to help anyone.
"Do not use tables, use CSS" - Its okay to use tables for tabular data (EG: compare hosting plans)
"Do not use w3schools" - For beginners its a good site. I can't see why you've said this, they use valid coding and it teaches you how to code :S There's nothing wrong with using it.

[L?KE]

My Tip - Which helped me plenty ;)

You know how IE takes padding without making the div wider, but firefox does the opposite?

Add this to your stylesheet and you won't have to accommodate for any padding in your width:


DIV{-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;}

Codes not mine btw, I just use it in a lot of my layouts :)

[HabbDance]

My Tip - Which helped me plenty ;)

You know how IE takes padding without making the div wider, but firefox does the opposite?

Add this to your stylesheet and you won't have to accommodate for any padding in your width:


DIV{-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;}
Codes not mine btw, I just use it in a lot of my layouts :)
Very helpful! Alot less work for me :] +rep

[--ss--]

In this thread, you can share your tips and secrets to designing sites and coding them.

I'll start:

Designing:
1. Try to use Photoshop if possible
2. Be as original as you can
3. Use gradients

Coding:
1. Do not use tables, use CSS
2. Do not use w3schools
3. Always validate your coding: http://www.validator.w3.org
Sorry but never suggest photoshop to beginners, especially when suggesting to use gradients. It will just look extremely tacky and unprofessional. If somehow with a miracle they get good at it they'll just end up making those rubbish cliche layouts which are based on the Habbo Homepage and look exactly like all the others out there.
Use Ms Paint for layouts, afterall Habbo is a game based around Isometric Art, only makes sence if the layouts are too.

[L?KE]

Coding:
1. Do not use tables, use CSS


Did it not occur to you that CSS styling can be applied to tables?