none
Feedback on CSS RRS feed

Answers

  • It's nice and clean looking. I haven't looked closely yet, but 3 things I notice:

    The page is far too wide. Those pages are set to display at 100% width. On my 20" monitor, the lines of text are way tooooooo lonnnnngggg. They are over a foot wide, about 300 characters. It's like reading a ping-pong match! Nobody's going to read that, it's simply too hard--they'll go elsewhere. Look at any major site on the web (CNN, MSNBC, Philly.com, etc.). The almost universal width is 960 to 980 px. Sites with 3 columns sometimes go a little wider--PCMag, PCWorld, ComputerShopper, etc.--run about 1060. Nobody--nobody runs 100% anymore, there are just too many widescreen monitor options to make it possible.

    The text is far too small. It's small on my desktop, but on a laptop, it will be 35% smaller because of the higher resolution screens. Plus, you've sized it in pixels, which means that IE can't zoom text-only so that people can compensate. Many laptops come from the factory set to zoom text one level larger to compensate for the higher resolution screens. Your site won't accommodate those poor people. Size your text in ems and make it bigger.

    Look at other major sites--use their sizes, use their widths. Take what they have learned and use it. They have spent big bucks on usability and design.

    There is a little auto-style creeping in. Nip it in the bud right now. One example:
    <h1><span class="auto-style1">Developer Software Programs</span><br />
    </h1>

    ...should just be:
    <h1>Developer Software Programs</h1><br />
    If you want search engines to understand your markup (semantic markup), what falls inside the <h> tag should be only the heading, nothing else. If you want your headings to be blue, make that part of the <h1> style on the style sheet, not a span you have to add each time. And make sure that stuff like the <br /> is outside the tags.

    Get those styles out of the head of the page unless they only occur on that page; get in the habit of doing all your styling on the style sheet. Your life will be easier.

    Finally, just a matter of taste, but since it's so common now, people expect sites to be centered on their screens. Hugging the left side looks odd.

    Bonus idea: You might want to use a little javascript for the copyright so that it updates automatically each year rather than your having to do it manually. I forget where I got--errr, stole--mine...
    <script language="javascript" type="text/javascript">
        document.write('&copy; 200X-'+(new Date()).getFullYear() + '&nbsp;&nbsp;  My Company Ltd');
        </script>
      <noscript>&copy; My Company Ltd</noscript>

    It's getting late and I'm bleary. I'll look more later


    Eschew obfuscation.
    • Marked as answer by Lance B Saturday, January 29, 2011 5:49 AM
    Saturday, January 29, 2011 5:16 AM

All replies

  • It's nice and clean looking. I haven't looked closely yet, but 3 things I notice:

    The page is far too wide. Those pages are set to display at 100% width. On my 20" monitor, the lines of text are way tooooooo lonnnnngggg. They are over a foot wide, about 300 characters. It's like reading a ping-pong match! Nobody's going to read that, it's simply too hard--they'll go elsewhere. Look at any major site on the web (CNN, MSNBC, Philly.com, etc.). The almost universal width is 960 to 980 px. Sites with 3 columns sometimes go a little wider--PCMag, PCWorld, ComputerShopper, etc.--run about 1060. Nobody--nobody runs 100% anymore, there are just too many widescreen monitor options to make it possible.

    The text is far too small. It's small on my desktop, but on a laptop, it will be 35% smaller because of the higher resolution screens. Plus, you've sized it in pixels, which means that IE can't zoom text-only so that people can compensate. Many laptops come from the factory set to zoom text one level larger to compensate for the higher resolution screens. Your site won't accommodate those poor people. Size your text in ems and make it bigger.

    Look at other major sites--use their sizes, use their widths. Take what they have learned and use it. They have spent big bucks on usability and design.

    There is a little auto-style creeping in. Nip it in the bud right now. One example:
    <h1><span class="auto-style1">Developer Software Programs</span><br />
    </h1>

    ...should just be:
    <h1>Developer Software Programs</h1><br />
    If you want search engines to understand your markup (semantic markup), what falls inside the <h> tag should be only the heading, nothing else. If you want your headings to be blue, make that part of the <h1> style on the style sheet, not a span you have to add each time. And make sure that stuff like the <br /> is outside the tags.

    Get those styles out of the head of the page unless they only occur on that page; get in the habit of doing all your styling on the style sheet. Your life will be easier.

    Finally, just a matter of taste, but since it's so common now, people expect sites to be centered on their screens. Hugging the left side looks odd.

    Bonus idea: You might want to use a little javascript for the copyright so that it updates automatically each year rather than your having to do it manually. I forget where I got--errr, stole--mine...
    <script language="javascript" type="text/javascript">
        document.write('&copy; 200X-'+(new Date()).getFullYear() + '&nbsp;&nbsp;  My Company Ltd');
        </script>
      <noscript>&copy; My Company Ltd</noscript>

    It's getting late and I'm bleary. I'll look more later


    Eschew obfuscation.
    • Marked as answer by Lance B Saturday, January 29, 2011 5:49 AM
    Saturday, January 29, 2011 5:16 AM
  •  

       Thanks Bill,

    I'm on the same page in regards to your comments. Only question I have is, am I actually setting the page size in the container ? in the css (observe css stylsheet below) wouldn't that conform to the preferred 955 type sizing ?

    }
    #container {
     min-width: 600px;
     width: 955px;
    }

    http://www.sohosoftware.net/apple-mac-apps.css

    Also, I've been advised to make my drop down menu absolute positioned so that I can keep it at the top but get the code lower in the markup sequence on the page. Is this correct ?

    Some things are sinking in so maybe there is hope for me. I was intimidated by all the new stuff, now I'm kinda getting it, slow but. Have a good rest, I'm sure your eyes will thank you in the AM.

    Lance B.


    Lance Barbarino
    Saturday, January 29, 2011 6:02 AM
  • Hmmm.

    I only looked at the developer-software page. I didn't check the apple page (I don't have any Macs and I didn't want my computer to get cooties by going there).

    The only styling for the container div on the developer-software page is:
    #container {
    min-width: 650px;
    padding-right: 50px;
    }
    ...so there is no width set for it at all (which defaults the browser to 100%).

    That solves that problem. But if you are keeping multiple style sheets for your site, that's gonna get cumbersome fast, and it leads to a site that doesn't have a unified look.

    I don't see that you are using a Master Page or a DWT for your site, and you really should. It'll make your life sooo much easier when you want to make changes/additions.

    As far as the drop-down menu, there is one rule of web design:
    Never ever, ever, ever, ever use absolute positioning. Ever. Almost.
    The code is right where it should be (developer-software page), and even if it weren't, using absolute positioning has no effect on where the code is in relation to the page order. There are so few uses for AP that it's not worth mentioning and very dangerous in inexperienced hands.

    The one thing I will say about the menu is that the all-capsness of it is hard to read, especially odd words or combination (like AMERICOMMERCE). I'd also use a darker red; the letter strokes are thin, and darker red would help legibility.

     

     

     


    Eschew obfuscation.
    Saturday, January 29, 2011 1:25 PM