Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 18
  1. #1
    Junior Member boutte's Avatar
    Join Date
    Feb 2007
    Location
    New Orleans
    Posts
    15
    Member #
    14790

    Current Rating

    Visual Appeal:
    0.0 out of 5

    Accessibility:
    0.0 out of 5

    Website Speed:
    0.0 out of 5

    Compatibility:
    0.0 out of 5

    Overall Rating:
    0.0 out of 5

    Rate This Site


    Advertisement (login to hide this!)


    You must be logged in to view this site

    This was the first web site I had built in six years so I first built it using tables and everything was fine. I posted it on another forum and got attacked mercilessly for using tables on a site meant to help beginners learn web design. The site's not supposed to be a tutorial, it's meant to point people in right diirection when looking for good web related freeware. Anyway I had to agree with their point so I decided to break down and learn css. I completely rebuilt it and was proud of my effort till I looked at it in other browsers besides IE. After 4 or 5 rebuilds it looks pretty good in Ie, Mozilla, Opera and NN. The code's clunky but it works so check out and tell what you think. Hopefully you guys will be a little kinder than the last place I did this.
    Once it's finished I'll get a real domain and start building other guides so any suggestions on how get the general effect with more efficent code will be appreciated.

  2.  

  3. #2
    Senior Member Kayo's Avatar
    Join Date
    Dec 2006
    Location
    Brampton Ontario
    Posts
    416
    Member #
    14523
    Liked
    39 times
    Its not a good looking website, but you got contant, which is a big part of it.

    you could use some optimizing. instead of using box3 for you nav. use lists. I could help you with that if you want.

    you are right about using table. You shouldn't use it for layout, ever. Using CSS is a start to a really good habbit.

    look at other websites, and look at how they done their websites. For a website like yours, try to keep it clean and simple. look at htmldog.com. Its a great web design website, and it should be that look you be going for.

  4. #3
    Senior Member Shani's Avatar
    Join Date
    Nov 2004
    Posts
    1,140
    Member #
    8171
    Kayo makes a good point about using lists for navigation.

    HTML Code:
    <ul>
      <li><a href="link1.html">link1</a></li>
      <li><a href="link2.html">link2</a></li>
    <ul>
    ul is for Unordered List, or you could also go for OL which is an ordered list. The primary difference is, UL has bullets, whereas OL has numbers. Style wise it does not matter since you can get rid of that by simply saying [minicode]list-style-type:none;[/minicode] but it will matter for screen readers, so there's your HTML trivia of the day.

    My next thing is to name your CSS classes and IDs more descriptively. .box3 would become .link or something like that.

    There is still some inline styling going on, which should be brought to the top, and many things in the top that are not used later... which brings up the question: Why are they there?

    Any how, it's good you've made the move to CSS. It's way more powerful.

    Looks fine in both FF & Safari on Mac.
    Shani

    I have an eye for detail like you'd never believe.

  5. #4
    Junior Member boutte's Avatar
    Join Date
    Feb 2007
    Location
    New Orleans
    Posts
    15
    Member #
    14790
    Quote Originally Posted by Kayo
    Its not a good looking website, but you got contant, which is a big part of it.

    you could use some optimizing. instead of using box3 for you nav. use lists. I could help you with that if you want.

    you are right about using table. You shouldn't use it for layout, ever. Using CSS is a start to a really good habbit.

    look at other websites, and look at how they done their websites. For a website like yours, try to keep it clean and simple. look at htmldog.com. Its a great web design website, and it should be that look you be going for.
    I guess using lists must be a better way to go since I keep hearing that. It's just no one has ever explained to me why it's better. Can I use an outset border with a list item? It might be a small thing but I like the it looks, gives a kind of 3d button look. But of course if there is a definite advantage I'd change it. Like I said ,I'm just beginning to learn css and any pointers you can give me would be great. Thanks for ther quick response.

  6. #5
    Junior Member boutte's Avatar
    Join Date
    Feb 2007
    Location
    New Orleans
    Posts
    15
    Member #
    14790
    Quote Originally Posted by DCScene
    Kayo makes a good point about using lists for navigation.

    HTML Code:
    <ul>
    <li><a href="link1.html">link1</a></li>
    <li><a href="link2.html">link2</a></li>
    <ul>
    ul is for Unordered List, or you could also go for OL which is an ordered list. The primary difference is, UL has bullets, whereas OL has numbers. Style wise it does not matter since you can get rid of that by simply saying [minicode]list-style-type:none;[/minicode] but it will matter for screen readers, so there's your HTML trivia of the day.

    My next thing is to name your CSS classes and IDs more descriptively. .box3 would become .link or something like that.

    There is still some inline styling going on, which should be brought to the top, and many things in the top that are not used later... which brings up the question: Why are they there?

    Any how, it's good you've made the move to CSS. It's way more powerful.
    Looks fine in both FF & Safari on Mac.
    Thanks for checking on a Mac for me as I have no way to do that myself. How do I ckeck AOL?
    There is a lot of junk left over up top from previous tries. I need to clean that up. The screen reader thing is the first time any one has givrn me a specific reason to use lists instead of boxs. Thanks

  7. #6
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    Yes, screen readers (and their accompanying text-only browsers) are a big factor now. You should always try to compensate for them.

    For the visual effects - here's an important tip I'm sure many newcomers need to know. For paragraphs, make text big and give extra line-height (yet another thing only CSS can do!) so that the text looks less like blocks and more like readable sentences. On that notice, break up paragraphs to a maximum of 6 lines. Any longer and people don't like reading them. Because you have a "what's new" homepage, try giving snippets of the articles in question instead of the whole thing. The background image is also too busy and too contrasting with the body. This can be very annoying because they attract a lot of attention from readers who should be reading your content.

    I suggest you try making your site more, err, 2.0-ish. The basic guidelines for that - use a plain white or patterned light gray over white background, pick a single color for body text, another single color for special text (links etc), and use different brightnesses of those colors for all other needs (button backgrounds etc). By tradition, all basic color are pale colors of any hue - this means the color doesn't have to directly shout the topic of your site, but anything. My site about web design uses baby blue as body text and bright red (but not pink) for link color.
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.

  8. #7
    Junior Member boutte's Avatar
    Join Date
    Feb 2007
    Location
    New Orleans
    Posts
    15
    Member #
    14790
    Quote Originally Posted by Steax
    Because you have a "what's new" homepage, try giving snippets of the articles in question instead of the whole thing. The background image is also too busy and too contrasting with the body. .
    I don't have a whats new page and my back ground is anything but busy. You may have point about using a lighter bg though. And good point about shorter paragraphs.

  9. #8
    Senior Member Kayo's Avatar
    Join Date
    Dec 2006
    Location
    Brampton Ontario
    Posts
    416
    Member #
    14523
    Liked
    39 times
    Your background is busy. its maybe simple, but the problem is that people would likly look at the background first. You dont want people to think about the background at all.
    try soft lite colors as the background.

  10. #9
    Junior Member boutte's Avatar
    Join Date
    Feb 2007
    Location
    New Orleans
    Posts
    15
    Member #
    14790
    Okay, I'll play around with some backgrounds. Maybe I should design a banner for the title too. Although I like using text whenever possible the site has a very plain look to it.

  11. #10
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    Actually, repeating elements are (contrary to popular thought) just as distractiving as abstract elements. This means a repeating line pattern can be as off-putting as a photo. And you don't want this, because backgrounds know barely anything about your site. And people should always be attracted immediately to the object which tells them who and what you are (usually the banner). One big problem is that the background's average color is about the same color of the body text.

    WDF's background is also a bit distracting for me, but it's contrast is far less sharp and it's color theme blends alright with the rest of the site.

    As I see it, the homepage seems to be contents of the primary articles... so I guess it would be considered a "tour" page. They should function like "what's new" pages - show as many new items as possible, giving a short description, and giving a link. Proof of concept.
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 05:45 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com