• We're currently experiencing a minor issue with our email system preventing emails for new registrations and verifications going out. We're currently working to fix this
  • Be sure to join the discussion on our discord at: Discord.gg/serebii
  • If you're still waiting for the e-mail, be sure to check your junk/spam e-mail folders

Web Design General Tips

Lugia Tamer

< Is friggin awesome
I use the good old HTML. Also a good editor would be HTML kit, google it.

Btw, what does SPP stand for?
 

Strike!

Well-Known Member
I'm still new to web design but I already know a few important things. Practice whatever you learn before moving onto the next thing. You'll remember what you're learning better AND you'll know how to use it. Second, if you're going to build a site do it from scratch. That's the only way to get things exactly how you want them. Third, NEVER use a site builder until after you've learned how to build a site on your own with something like Notepad. You would be shocked at how inefficient these programs are, especially the free ones.
 

Charizard_Millky

Punk Rock > You
I think it means Serebii Pokemon Page. I remember Serebii saying that a while ago.
Who cares?

Anyway, with layouts, when adding banners (for table layouts anyway,) don't put the URL inside the banner area (like you do with the content) but go to where the CSS is and do this:

HTML:
background-image: url('banner url');
It makes it go from on top of the banner area and not covering it all, to covering it all.
 

Crepuscular

Surmounting~
One recommendation I have is never give broken links or images, especially on the main menu. I see it quite a lot, but really all it is is a false promise which irritates your viewers.

If you like to see what is planned for your next menu, put the links in HTML comments:

HTML:
<!-- This is a comment and is not viewable on the web page. -->
Or, better yet, have a menu plan in a .doc or .odt (or whatever) file on your computer, doing something like putting all things that aren't finished in say, italics. That way, you gain the benefit of seeing what's coming up, while your visitors don't have to guess which links are broken or not.

If you want your visitor to see what is upcoming, just have one page: "What's coming up", or "What's planned". I reiterate, all links on your site should work.
 

Disgruntled Goat

has his moments
Serebii.net has a horrible atrocious design,and people don't care about that except a few webmasters like me. You guys don't really get it,a website can have the best layout around,and all the 404 pages in the world. People are doin g things backwords instead of forward. When you have great content,horrible layout. Bad content,great layout. People have to do both things to succesfully own a website.
Don't confuse design with layout, they kinda different. For example, Serebii has a decent design - the pictures and shell structure and colours are good. But the layout of some of the content is pretty bad, for example there is no space (padding) between the nav on the left and where the text starts in the middle grey bit.

And the tables (eg here) make the content quite difficult to read sometimes. I think the borders are too bold - if they were fainter they still separate sections without getting in the way.

That's my two cents, anyway.
 

SilverFlame

png = PwNaGe
I'd like to say don't do table layouts, but then again they are very popular.

Oh, and try using CSS for the layout, not HTML. HTML can do it's job with content, CSS does it's job with looks. Keep them that way.
 

nickyn00

*shrugs*
Hmm...

Firstly, your layout is really important. Make sure it's visually appealing. If you can't do that, get someone else to make one for you until you can learn how to. You don't need to have the best layout, just one that doesn't hurt my eyes and/or looks crap. >P

Secondly, so is design. Make your pages clean and don't ever use marquees. I know my site at the moment hsa a marquee, but when I get the time I'll be making a new DIV layout with absolutely no marquees.

Thirdly, stay the hell away from Freewebs, Piczo and other such - quite frankly, crap.

Fourthly, rather than starting with HTML, start by using mainly HTML, but using XHTML tags such as <strong>, <em> and always including the alt attribute in <img> tags.

Finally, stay the hell away from generic anything. Don't have generic content, layouts, anything. Generic is horrible. Die die die. I know my site at the moment has a lot of generic content. I'm rewriting it.
 

SilverFlame

png = PwNaGe
Freewebs is okay imo for beginners, and if you just want something small. Atm I'm using it, only because I'm still thinking if I'm willing to pay for a real host.

And to add the my helps, don't just use random colors everywhere. Like my site's layout is using blue and green, don't go and mix 10 or 20 different colors to make something, unless it all makes sence.
 

nickyn00

*shrugs*
Who cares?

Anyway, with layouts, when adding banners (for table layouts anyway,) don't put the URL inside the banner area (like you do with the content) but go to where the CSS is and do this:

HTML:
background-image: url('banner url');
It makes it go from on top of the banner area and not covering it all, to covering it all.
Unless you're making a stretching banner in which case it would be:

HTML:
<img src="/images/style/banner-left.png" alt="banner_left" style="float:left;" />
<img src="/images/style/banner-right.png" alt="banner_right" style="float:right;" />
The CSS for the banner DIV/Cell would be something like this:

HTML:
#banner {
width:800px;
height:200px;
background-image:url(/images/style/banner-background.png);
}
And you'd find you'd have a stretching banner for your stretching layout. :DD

One recommendation I have is never give broken links or images, especially on the main menu. I see it quite a lot, but really all it is is a false promise which irritates your viewers.
On top of that, always try to open your site after it has 50 pages and a respectable layout. Believe me, it works. Firstly, while you're making your 50 pages your graphic talents do become vastly better and then you can open with a really, really nice layout~

Freewebs is okay imo for beginners, and if you just want something small. Atm I'm using it, only because I'm still thinking if I'm willing to pay for a real host.
No, you should never, ever use Freewebs.

It doesn't offer any server-side scripting technologies unless you have a paid account, you have a limit of 50 pages, you're stuck with .htm and much more. Looking back, I'm really, really glad that I never ever used Freewebs.

And yet another thing - I don't see why so many people are buying domains before they even open their site?? Why don't people just go with free hosts which support PHP?
 
Last edited:

ashgray2

New Member
XHTML isn't constantly supported by webhosts. Some may not have the appropriate software for that. It could also take place that your browser does not support XHTML. I'm not really sure if XHTML is upgrade for HTML, or that is an entire new language.


____________________________________________________________
Infant Shoes, Women's Hair Accessories
 

An00bis

Wicked Witch
Sketch out your Layout before you Code

This helps immensely when it comes to figuring out what goes where. I normally do this process with a pencil and a piece of scrap paper I keep with me when I code. First I decide where the main areas for content will go (the logo, menu, and main content areas) and draw them out with boxes. Then I go over the light sketch with a darker pencil to draw in little details that will be in the final design like unique shapes or other design quirks. Finally I show a little contrast between areas by lightly shading in some areas I want to be darker with pencil while keeping other areas light.

Keep a .txt file with Code Snippets

If you learned a cool trick you think you'll be using in the future or need some quick references for old code you should start keeping track of those codes in a Text File so you won't have to comb over the Internet looking for a particular code every time you need it. Have an example of the working code and what it does clearly labeled for easy use.

Have an External File for CSS and Javascript

This one's a given but I'll say it anyway. You'll be thankful you're only editing one line in a single .css file then one line in 100+ .html or .php files.

Finish Coding your Layout completely, THEN debug

To debug things as you go along is spiraling into the annals of insanity. Get your site looking right visually first and then start working out the kinks in the coding a step at a time. It's usually easier to spot your mistakes and fix things up near the end anyway.

Run your code through a Validator to make sure its up to snuff.

If there's something wrong with your code and you can't figure out what it is the Validator will probably detect it for you so you can fix it. Here's a very good Validator that can detect for multiple Document Types:

http://validator.w3.org/

There's also one for your CSS.

http://jigsaw.w3.org/css-validator/

Check your site in Multiple Browsers

Just because it looks fine in Internet Explorer doesn't mean it will in Firefox, or visa versa. Make a habit of testing them out in multiple browsers to see if it's displaying and functioning correctly. I downloaded a few extra Browsers just to make sure that my layouts work in the most browsers possible before uploading them. If you don't want to go through that much trouble in the least make sure they look good in both Internet Explorer and Firefox since they're the browsers people use the most by far.
 

Disgruntled Goat

has his moments
A lot of people (about 7%) use Safari since it's the default on Mac. You can get it for Windows, or use Chrome instead because they use the same back-end to display pages.

XHTML isn't constantly supported by webhosts. Some may not have the appropriate software for that. It could also take place that your browser does not support XHTML. I'm not really sure if XHTML is upgrade for HTML, or that is an entire new language.
Please don/t try and give advice when you have no idea what you're talking about. XHTML has nothing to do with web hosts, it's just a slight variant on HTML. Any XHTML file will work in any browser, same as HTML.
 

ferrywayes

New Member
Hey
Website's Layout is very nice.
But i m little bit stress from your website because it's color the back ground color is green,
Some font's color is white and some font's are in Black.
Because of this My eyes starching lot today.
It is just a suggestion.
Thank you.
 

pooja

New Member
Some of these are things that I’ve never seen or read anywhere but have learned from experience. Hopefully, you can glean something from my early mistakes.

A good rule of thumb is this: Keep It Simple But Nice. Complicated pages are tough to maintain and leave lots of room for errors. Also, too much stuff on the page can bog down your visitor’s computer. For example, instead of a background image, try a background color; it looks nice and loads more quickly. Or try a text link instead of an image link. If you do use image links (and I use a few myself), don’t overdo it with large files or too many of them.

For goodness’ sake, use good HTML! A lot of us write our own, and it’s easy to mess it up and never be aware of it. Not all browsers will render your page properly if it has errors in it. Internet Explorer is generally pretty forgiving.

Most elements require both start and end tags, so be sure to use both if required, or your page may look wrong.

A word of caution if you write your own HTML: always put attribute values in "quotes" if they contain anything other than alphanumerics (letters or numerals). And DON’T forget the end quote, or your entire page may be messed up! Even Internet Explorer won’t forgive you for that.
=======================================
alcohol rehab Doctor Reviews
 
Top