site critique

Discussion in 'HTML' started by murmur, Oct 21, 2003.

  1. murmur

    murmur Guest

    murmur, Oct 21, 2003
    #1
    1. Advertising

  2. Jerry Perkins, Oct 21, 2003
    #2
    1. Advertising

  3. murmur

    murmur Guest

    thanks. can you elaborate on the CSS comment?

    Jerry Perkins wrote:

    > murmur wrote:
    >
    > > http://www.philadelphiamusicproject.org/mockup/
    > >
    > > thank you.

    >
    > 1) First look impression, very good.
    > 2) Do not like links that open new windows. In fact I really hate
    > them.
    > 3) For using CSS, your code looks very over done.
    > 4) Your "<meta name="description"" may be a little long.
    >
    > --
    > Jerry Perkins
    > http://www.jperkins.us/
     
    murmur, Oct 22, 2003
    #3
  4. murmur

    rf Guest

    "murmur" <> wrote in message
    news:...
    >
    > Jerry Perkins wrote:
    >
    > > murmur wrote:
    > >
    > > > http://www.philadelphiamusicproject.org/mockup/
    > > >
    > > > thank you.

    > >
    > > 1) First look impression, very good.
    > > 2) Do not like links that open new windows. In fact I really hate
    > > them.
    > > 3) For using CSS, your code looks very over done.
    > > 4) Your "<meta name="description"" may be a little long.


    > thanks. can you elaborate on the CSS comment?


    You appear to have constructed a CSS rule, from the ground up, for every
    HTML element on the page. I suspect that if you add another element you
    might create another rule just for that element :)

    CSS is supposed to simplify things.

    Complex: many of the rules specify font-family. If you suddenly want to
    change this then you will have to hunt around your entire CSS file to change
    is.

    Simple:
    body {font-family: ...;}
    and let every element that lives in the body element inherit from that.

    Complex (quoted from your CSS):

    ..toppagetext {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 80%;
    line-height: 160%;
    color: #993300;
    }

    ..toppagetext a:link {
    color: #ff6600;
    text-decoration: none;
    font-weight: bold;

    }
    ..toppagetext a:visited {
    color: #ff6600;
    text-decoration: none;
    font-weight: bold;

    }
    ..toppagetext a:hover {
    color: #FF6600;
    text-decoration: underline;
    font-weight: bold;

    }

    Simple:

    ..toppagetext {color: #930; background-color: white;}

    ..toppagetext a
    {
    color: #f60; background-color: inherit;
    text-decoration: none;
    font-weight: bold;
    }

    ..toppagetext a:hover {text-decoration: underline}

    I would however strongly suggest specifying a different colour for hover and
    most especially visited.

    As well as the CSS you are also using presentational attributes in the HTML
    (bgcolor etc). Do all of this with CSS.

    There is lots of javascript in there do achieve rollover effects. This could
    be done much more neatly using CSS and would actually work for the 15% or so
    of people who have javascript turned off (for whatever reason).

    You have loads of, for example, <p class-"bodytext">. Don't use the class in
    the <p> element, use it in the <div> that contains those <p>'s and have the
    style rule select that div.

    Same for <tr class="calendartext">. Move calendartext to the enclosing
    table. You don't even need a table there. The whole lot could be done with
    <p> elements or better yet, a <ul>. Must be a bugger to maintain with all
    those tables :)

    Remember, the KISS principle applies.

    Cheers
    Richard.
     
    rf, Oct 22, 2003
    #4
  5. murmur wrote:

    > thanks. can you elaborate on the CSS comment?


    Very good comments from Richard.
    I will add one example. On line 167 you have:
    <p class="bodytext"><strong>3/21/03: March 2003 Issue of RE/SOUND
    Released</strong><br>
    The third issue of PMP’s biannual newsletter, re/sound,
    includes a <a href="resound.html">feature
    article</a> by <a href="http://www.citypaper.net"
    target="_blank">Philadelphia City Paper</a> ... </p>

    Suggest two classes for you text, a body and a heading for the
    <strong>. Hence
    <p class="bodytexthead">3/21/03: March 2003 Issue of
    RE/SOUND Released</p>
    <p class="bodytext">The third issue of PMP’s biannual
    newsletter, re/sound, includes a <a href="resound.html">
    feature article</a> by
    <a href="http://www.citypaper.net" target="_blank">
    Philadelphia City Paper</a> .... </p>

    <p class="bodytexthead">3/15/03: 2003 Grant Recipients
    Announced</p>
    <p class="bodytext">The Philadelphia Music Project awarded
    a total of $780,000 in project support ... </p>

    Remember that someone has to followup and make changes to your
    script.

    --
    Jerry Perkins
    http://www.jperkins.us/
     
    Jerry Perkins, Oct 22, 2003
    #5
  6. murmur wrote:

    > http://www.philadelphiamusicproject.org/mockup/
    >
    > thank you.


    This is a comment directed at updating your code. Since you have
    a number of items that will change or be updated frequently, you
    should think about the ease at reading and changing those items. I
    use the indent and space rules to enhance this.
    For an example from our church web site at
    http://www.oursaviorlcms.org/

    </tr><tr>
    <td class="special">
    <p class="special-head">The Bonhoeffer Film:</p>
    <p class="special-body">
    Opens October 10 at the ... </p>
    <p class="special-body">
    What critics are saying: &quot; ... </p>
    <p class="special-body">
    The new 90 minute documentary that tells ... </p>
    </td>
    <td class="special">
    <p class="special-head">Calendars for Sale:</p>
    <p class="special-body">If you would ... </p>
    </td>

    </tr><tr>
    <td class="special">
    <p class="special-head">Physical Education:</p>
    <p class="special-body">Miss April Fett is getting
    our students into ... </p>
    </td>
    <td class="special">
    <p class="special-head">Music:</p>
    <p class="special-body">We have ... </p>
    </td>

    The table has two columns. Each row is divided by a space. Note
    the </tr><tr>. Hence copy paste delete actions are easy.
    From this I can quickly copy paste another row into the table and
    update.
    --
    Jerry Perkins
    http://www.jperkins.us/
     
    Jerry Perkins, Oct 22, 2003
    #6
  7. murmur

    kchayka Guest

    Jerry Perkins wrote:
    >
    > Suggest two classes for you text, a body and a heading for the
    > <strong>. Hence
    > <p class="bodytexthead">3/21/03: March 2003 Issue of
    > RE/SOUND Released</p>
    > <p class="bodytext">The third issue of PMP’s biannual
    > .... </p>


    If that first line is a heading, then it should have heading markup, not
    paragraph markup.

    --
    To email a reply, remove (dash)un(dash). Mail sent to the un
    address is considered spam and automatically deleted.
     
    kchayka, Oct 22, 2003
    #7
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Long
    Replies:
    5
    Views:
    386
  2. Tina - AffordableHOST.com

    New site, looking for critique on loading time

    Tina - AffordableHOST.com, Oct 23, 2003, in forum: HTML
    Replies:
    17
    Views:
    712
  3. murmur

    critique template for site

    murmur, Oct 23, 2003, in forum: HTML
    Replies:
    5
    Views:
    422
  4. Weyoun the Dancing Borg

    Site Critique

    Weyoun the Dancing Borg, Jan 26, 2004, in forum: HTML
    Replies:
    8
    Views:
    506
    Weyoun the Dancing Borg
    Jan 27, 2004
  5. Spartanicus
    Replies:
    0
    Views:
    411
    Spartanicus
    Sep 16, 2004
Loading...

Share This Page