New site. Can anyone tell me if I am doing something potentially bad BEFORE I commit?

Discussion in 'HTML' started by Mike Barnard, Feb 13, 2008.

  1. Mike Barnard

    Mike Barnard Guest

    Hi all.

    I am writing a site for myself. I'm learning HTML & CSS all over again
    by doing it, nice.

    Can a few of you take a look and comment on my methodology? That is,
    the way I am doing things rather than the clashing colour schemes and
    tell me if you think I should do anything differently? i.e. I have
    the body text set to 80% and the others work from there. Should I be
    doing something else?

    I'd rather know now than spend all week filling in the blanks THEN
    having to adjust it. And NO, the picture is not the one to be
    published although it *is* me.

    I'm writing it using just Note Tab Pro, no WSWYG editors.

    www.thermachek.com/temp/index.html

    Thanks.

    Mike.
     
    Mike Barnard, Feb 13, 2008
    #1
    1. Advertising

  2. Re: New site. Can anyone tell me if I am doing something potentiallybad BEFORE I commit?

    On Feb 13, 7:05 am, Mike Barnard <>
    wrote:
    > I am writing a site for myself. I'm learning HTML & CSS all over again
    > by doing it, nice.


    Pay someone to make you a logo.
     
    Travis Newbury, Feb 13, 2008
    #2
    1. Advertising

  3. Mike Barnard

    Andy Dingley Guest

    Re: New site. Can anyone tell me if I am doing something potentiallybad BEFORE I commit?

    On 13 Feb, 12:05, Mike Barnard <>
    wrote:

    > I am writing a site for myself. I'm learning HTML & CSS all over again
    > by doing it, nice.


    Not bad! Keep reading this group, c.i.w.a.h c.i.w.a.s too and let us
    know how it goes. Posting an example at about this sort of level of
    progress is sensible too.

    "Head First HTML with CSS & XHTML" is one of the few decent refs for
    "best practice" stuff.


    > Can a few of you take a look and comment on my methodology?


    Loads of things, but they're all minor and easily fixable.

    * Too much whitespace in the source. It works fine, but it would piss
    me off to try and edit this all day. Do you have a monitor the size of
    a whiteboard? If you use good, modern coding style (not old 5-deep
    nested tables) then you don't need to care too much about obsessive
    indent balancing, just to see where you are. Also the "end of div"
    comments. Those turn around and bite you in a few years when they're
    no longer accurate. Add them when they're _needed_, not just by
    default.

    * HTML 4.01 Strict. Good!

    *- XML markup " />" on the empty <head> elements and on <img />. This
    isn't appropriate for HTML, it's an XHTML thing.

    * Multiple <h1> elements:
    <div id="corporateid">
    <img id="logo" src="logo01.gif" alt="Mikes logo" />
    <h1>Mr. Michael Barnard</h1>
    <h1>Independent Fire Risk Assessor</h1>
    </div>

    This isn't _wrong_, but it's a bit lumpy, IMHO. I'd use a <br> in
    there instead, if you really do mean "a single page header, of two
    lines". You can adjust the line spacing in CSS later.

    * "Wrapped elements"
    You've got this:
    <div id="corporateid">
    <img id="logo" src="logo01.gif" alt="Mikes logo" />
    <h1>Mr. Michael Barnard</h1>
    <h1>Independent Fire Risk Assessor</h1>
    </div>

    When you could (almost certainly) use this instead
    <h1 id="corporateid" >
    <img id="logo" src="logo01.gif" alt="Mikes logo" ><br>
    Mr. Michael Barnard<br>
    Independent Fire Risk Assessor
    </h1>

    You don't need to wrap up those <h1> elements. They're big tough
    elements, they can look after themselves. Unless you're doing
    particularly complex layout, you can merge them with the overall
    wrapper that carries the CSS-significant id/class attributes. You'll
    need to change the CSS selectors to match, but that's easy.

    Similarly
    <div id="navbar">
    <ul id="navlist">
    could become
    <ul id="navbar" >


    * Bare <img> in a block.
    <div id="corporateid">
    <img id="logo" src="logo01.gif" alt="Mikes logo" />
    <h1>Mr. Michael Barnard</h1>
    <h1>Independent Fire Risk Assessor</h1>
    </div>

    <img> isn't a %block; element as <h1> and <p> are. Mixing it directly
    in with them as siblings can get hard to understand how the formatting
    is going to work. if you need to, don't be afraid to use
    <div class="img-wrapper" ><img ... ></div>


    * Use of id on elements
    <div id="corporateid">

    id is great for JavaScript and DOM access, not quite so good for CSS.
    The reasons are complex (and oft-discussed, search for "cascade" or
    "specificity"). As general advice though, use class to markup up HTML
    for future reference by CSS, not id. Quite often this is the simplest
    and most appropriate way to code it:
    <div id="corporateid" class="corporateid" >

    In particular I'd change this
    <li id="active"><a id="current" href="#">HOME</a></li>
    to
    <li class="current" ><a href="#">Home</a></li>


    * UPPERCASE typography

    GO EASY ON THIS, IT'S HARD TO READ. One highlight menu item is OK, but
    repeated lines of it is hard work.

    * UPPERCASE in HTML

    If you want to force uppercase, use CSS to do it. Code the HTML itself
    as normal English mixed case.


    * Whitespace padding.
    Add some whitespace (with CSS padding) around blocks of text, so as to
    make it easier to read. Particularly at the start of coloured
    background blocks.

    * Background color isn't being set in your CSS, so my lurid pink
    default shows through instead.

    * CSS font setting
    Read the group archives. We get stroppy about this.
    font: 80% arial, tahoma, "Trebuchet MS", verdana, arial, verdana,
    sans-serif;

    ** Avoid Verdana

    ** Don't scatter-gun the font names. In particular, don't list the
    "common" name before the "rare" name, or you'll always get Arial.
    tahoma, "Trebuchet MS", arial, sans-serif;
    isn't a bad list (aesthetic arguments aside)

    ** body text goes at 100%. Always.

    ** body text goes at 100% for non-IE browsers. It _might_ go smaller
    for IE alone (use conditional HTML), to work round an IE bug. Even
    this is political. Search the archives.


    * Use a validator (try Mark Gueury's for Firefox). You're nearly valid
    here, but not quite. It's easier to check though if you're completely
    valid. CSS validators, web developer toolkit, Firebug, Colorzilla etc.
    are all handy.

    * In general, don't mess with line-height (although Jukka's site
    describes a reason for always setting it, so as to get sensible
    defaults). If you do set it, set it in undimensioned units, not ems
    (complicated as to why, but search the group or read the spec)
    line-height: 1.3em;


    * Simple mailto links will attract spam.
    href="mailto:"
    Use a server-side mail form-handler (your ISP usually offers one)
    At a minimum, using a simple numeric entity seems to be less spammy
    href="mailto:info&64;example.com"


    * Lists are lists
    <a href="index.html"> home </a>
    | <a href="mailto:">contact </a>
    | &copy; 2008 Michael Barnard

    Should IMHO be coded as <ul><li> markup, but I wouldn't worry too much
    about this. It's a pain to generate a pipe character between entries
    easily, in a cross-browser manner (wrapping every entry is easy
    though, just use border).

    * Also don't link to index.html, just link to the directory <a
    href="./" > and let the server's default page do the rest.

    * You're using a lot of pixel units in your CSS. Now this is no
    problem for the odd 5px here and there, but in general em units should
    be your starting point, not pixels.

    * Fluid design is good and seems to work OK (I've only looked on one
    screen, with Windows Firefox though). Certainly this is a good thing
    to watch out for. I might be tempted to add a max-width : 55em; to
    your centre column though (NB, that's _max_ not width), because text
    in ridiculously wide lines gets hard to read.


    Otherwise though, it's a commendable piece of work. Good job!
     
    Andy Dingley, Feb 13, 2008
    #3
  4. Mike Barnard

    Andy Dingley Guest

    Re: New site. Can anyone tell me if I am doing something potentiallybad BEFORE I commit?

    On 13 Feb, 13:13, Travis Newbury <> wrote:

    > Pay someone to make you a logo.


    Amen to that. Some people just have the talent, so give them money to
    borrow it for a while.
     
    Andy Dingley, Feb 13, 2008
    #4
  5. Mike Barnard

    Mike Barnard Guest

    Re: New site. Can anyone tell me if I am doing something potentially bad BEFORE I commit?

    On Wed, 13 Feb 2008 05:13:44 -0800 (PST), Travis Newbury
    <> wrote:

    >On Feb 13, 7:05 am, Mike Barnard <>
    >wrote:
    >> I am writing a site for myself. I'm learning HTML & CSS all over again
    >> by doing it, nice.

    >
    >Pay someone to make you a logo.


    Yes, well it's just a filler while I get the overall layout as I want
    it. But you knew thatm, right?

    There's plenty of logo creation sites out there, but which one to
    choose? Got a reccomendation?
     
    Mike Barnard, Feb 13, 2008
    #5
  6. Re: New site. Can anyone tell me if I am doing something potentially bad BEFORE I commit?

    Gazing into my crystal ball I observed Mike Barnard
    <> writing in
    news::

    > On Wed, 13 Feb 2008 05:13:44 -0800 (PST), Travis Newbury
    ><> wrote:
    >
    >>On Feb 13, 7:05 am, Mike Barnard <>
    >>wrote:
    >>> I am writing a site for myself. I'm learning HTML & CSS all over

    again
    >>> by doing it, nice.

    >>
    >>Pay someone to make you a logo.

    >
    > Yes, well it's just a filler while I get the overall layout as I want
    > it. But you knew thatm, right?
    >
    > There's plenty of logo creation sites out there, but which one to
    > choose? Got a reccomendation?
    >
    >


    I would probably go to my local printer, so that my web site, business
    cards, stationary, etc., all have the same logo. Your printer can give
    you a digital copy of the logo in psd or other format, that you can
    adjust for the web.

    Sometimes, you can find some local talent and ask them to make a logo
    for you, then take that to the printer, etc.

    --
    Adrienne Boswell at Home
    Arbpen Web Site Design Services
    http://www.cavalcade-of-coding.info
    Please respond to the group so others can share
     
    Adrienne Boswell, Feb 13, 2008
    #6
  7. Mike Barnard

    Mike Barnard Guest

    Re: New site. Can anyone tell me if I am doing something potentially bad BEFORE I commit?

    On Wed, 13 Feb 2008 05:16:58 -0800 (PST), Andy Dingley
    <> wrote:

    >On 13 Feb, 12:05, Mike Barnard <>
    >wrote:
    >
    >> I am writing a site for myself. I'm learning HTML & CSS all over again
    >> by doing it, nice.

    >
    >Not bad! Keep reading this group, c.i.w.a.h c.i.w.a.s too and let us
    >know how it goes. Posting an example at about this sort of level of
    >progress is sensible too.


    Thanks for a positive comment.

    >"Head First HTML with CSS & XHTML" is one of the few decent refs for
    >"best practice" stuff.


    I'll be there in a jiffy, thanks.

    >> Can a few of you take a look and comment on my methodology?

    >
    >Loads of things, but they're all minor and easily fixable.


    Starting to feel good...

    >* Too much whitespace in the source. It works fine, but it would piss
    >me off to try and edit this all day. Do you have a monitor the size of
    >a whiteboard? If you use good, modern coding style (not old 5-deep


    Yep, 22" widescreen. It's just the way I like to see it, it breaks the
    sections up into (for me, and as it's my code thats what counts)
    easily readable chunks.

    Maybe it's in the Head First site you mention, but I wonder what a
    Good Coding Style is?

    Also, I intend to use a 'tidy up' type of program on the files to
    remove comments and whitespace, reducing the file to one big wall of
    characters. This should improve download times (I hope) and reduce
    overall bytes sent. HTML Tidy comes to mind.

    >nested tables) then you don't need to care too much about obsessive
    >indent balancing, just to see where you are. Also the "end of div"
    >comments. Those turn around and bite you in a few years when they're
    >no longer accurate. Add them when they're _needed_, not just by
    >default.


    I hate looking through and seeing </div> and thinking, "Which div?" Is
    the item above in div 1 or div 2, etc.

    >* HTML 4.01 Strict. Good!


    >*- XML markup " />" on the empty <head> elements and on <img />. This
    >isn't appropriate for HTML, it's an XHTML thing.


    Left over from a copy and paste, to be honest. Carelessness. It will
    be pruned.

    >* Multiple <h1> elements:
    > <div id="corporateid">
    > <img id="logo" src="logo01.gif" alt="Mikes logo" />
    > <h1>Mr. Michael Barnard</h1>
    > <h1>Independent Fire Risk Assessor</h1>
    > </div>


    >This isn't _wrong_, but it's a bit lumpy, IMHO. I'd use a <br> in
    >there instead, if you really do mean "a single page header, of two
    >lines". You can adjust the line spacing in CSS later.


    I see what you mean. Ta.

    snip.

    >You don't need to wrap up those <h1> elements. They're big tough
    >elements, they can look after themselves. Unless you're doing
    >particularly complex layout, you can merge them with the overall
    >wrapper that carries the CSS-significant id/class attributes. You'll
    >need to change the CSS selectors to match, but that's easy.


    >Similarly
    > <div id="navbar">
    > <ul id="navlist">
    >could become
    > <ul id="navbar" >


    snip

    ><img> isn't a %block; element as <h1> and <p> are. Mixing it directly
    >in with them as siblings can get hard to understand how the formatting
    >is going to work. if you need to, don't be afraid to use
    > <div class="img-wrapper" ><img ... ></div>


    >* Use of id on elements
    > <div id="corporateid">
    >
    >id is great for JavaScript and DOM access, not quite so good for CSS.
    >The reasons are complex (and oft-discussed, search for "cascade" or
    >"specificity"). As general advice though, use class to markup up HTML
    >for future reference by CSS, not id. Quite often this is the simplest
    >and most appropriate way to code it:
    > <div id="corporateid" class="corporateid" >
    >
    >In particular I'd change this
    > <li id="active"><a id="current" href="#">HOME</a></li>
    >to
    > <li class="current" ><a href="#">Home</a></li>


    Aha. My understanding is that if an element is a one off, for example
    a heading at the top of a page, then an ID is in order. But, if you
    expect there to multiple items needing the same attributes such as a
    series of pictures or articles then use a CLASS.

    >* UPPERCASE typography


    >GO EASY ON THIS, IT'S HARD TO READ. One highlight menu item is OK, but
    >repeated lines of it is hard work.


    All menus will be lower case. Just a tweak there. The sub heading is
    uppercase as it's important. I'll try it in lower and see how it
    looks, but I need to try and strike a sense of urgency / importance
    into the viewer.

    >* UPPERCASE in HTML


    >If you want to force uppercase, use CSS to do it. Code the HTML itself
    >as normal English mixed case.


    K.

    >* Whitespace padding.
    >Add some whitespace (with CSS padding) around blocks of text, so as to
    >make it easier to read. Particularly at the start of coloured
    >background blocks.


    Tidying up to be done, thanks.

    >* Background color isn't being set in your CSS, so my lurid pink
    >default shows through instead.


    Ah, I see. I was trying to cut down on the number of bytes to FINALLY
    be sent down the pipe, but if thats the effect.... hmmm.... maybe I'll
    keep it! :)

    >* CSS font setting
    >Read the group archives. We get stroppy about this.
    > font: 80% arial, tahoma, "Trebuchet MS", verdana, arial, verdana,
    >sans-serif;


    >** Avoid Verdana


    Again, a cut n paste. I will look further.

    >** Don't scatter-gun the font names. In particular, don't list the
    >"common" name before the "rare" name, or you'll always get Arial.
    > tahoma, "Trebuchet MS", arial, sans-serif;
    >isn't a bad list (aesthetic arguments aside)


    >** body text goes at 100%. Always.


    Although I don't want teeny body text, at 100% it was too big and
    there were only about two words in each line in the side columns. I'll
    go and research.

    >** body text goes at 100% for non-IE browsers. It _might_ go smaller
    >for IE alone (use conditional HTML), to work round an IE bug. Even
    >this is political. Search the archives.


    >* Use a validator (try Mark Gueury's for Firefox). You're nearly valid
    >here, but not quite. It's easier to check though if you're completely
    >valid. CSS validators, web developer toolkit, Firebug, Colorzilla etc.
    >are all handy.


    Already on my list of Things To Do.

    >* In general, don't mess with line-height (although Jukka's site
    >describes a reason for always setting it, so as to get sensible
    >defaults). If you do set it, set it in undimensioned units, not ems
    >(complicated as to why, but search the group or read the spec)
    > line-height: 1.3em;




    >* Simple mailto links will attract spam.
    > href="mailto:"
    >Use a server-side mail form-handler (your ISP usually offers one)
    >At a minimum, using a simple numeric entity seems to be less spammy
    > href="mailto:info&64;example.com"


    Good point.

    >* Lists are lists


    snip.

    >* You're using a lot of pixel units in your CSS. Now this is no
    >problem for the odd 5px here and there, but in general em units should
    >be your starting point, not pixels.


    More research.

    >* Fluid design is good and seems to work OK (I've only looked on one
    >screen, with Windows Firefox though). Certainly this is a good thing
    >to watch out for. I might be tempted to add a max-width : 55em; to
    >your centre column though (NB, that's _max_ not width), because text
    >in ridiculously wide lines gets hard to read.
    >
    >
    >Otherwise though, it's a commendable piece of work. Good job!


    <fx> swoons... thanks for the compliment.

    I started to respond to each item, but it just grew and grew and I
    thought it'd take too long. You've put a LOT of effort that you
    didn't have to into your review. I really appreciate it.

    I don't know that I'll end up with perfect markup in the future, I
    really just want a site that works, but I'll try to take on board all
    you have said. In truth things like the outer wraper were copied from
    a 'free template' site I found somewhere. 90% of it has been binned
    now, and it looks like more is to follow!

    There a a couple of glitches where things differ between FF and IE,
    but that may change as I alter it using your ideas.

    Again, thanks. I'll work on it this evening and tomorrow. Look back
    in a couple of days!

    Mike.
     
    Mike Barnard, Feb 13, 2008
    #7
  8. Mike Barnard

    C A Upsdell Guest

    Re: New site. Can anyone tell me if I am doing something potentiallybad BEFORE I commit?

    Mike Barnard wrote:
    > Hi all.
    >
    > I am writing a site for myself. I'm learning HTML & CSS all over again
    > by doing it, nice.
    >
    > Can a few of you take a look and comment on my methodology? That is,
    > the way I am doing things rather than the clashing colour schemes and
    > tell me if you think I should do anything differently? i.e. I have
    > the body text set to 80% and the others work from there. Should I be
    > doing something else?
    >
    > I'd rather know now than spend all week filling in the blanks THEN
    > having to adjust it. And NO, the picture is not the one to be
    > published although it *is* me.
    >
    > I'm writing it using just Note Tab Pro, no WSWYG editors.
    >
    > www.thermachek.com/temp/index.html


    At the risk of getting flamed again ...

    1. You have an HTML 4.01 DOCTYPE, but you have elements which belong in
    XHTML instead, i.e. ' />'.

    2. Run your site through the W3C HTML and CSS validators. You have
    errors, though few at this time.

    3. Elements of the design fall apart when the font size is larger than
    you expect: parts of the masthead start overlaying itself and the menu,
    especially if the browser window is narrow; the appearance of the menu
    fractures; the widths of the left and right narrow columns are fixed, so
    unpleasant things happen when the font size is larger than you expect.

    4. You do not specify widths and heights for your images, which may
    slow down rendering of your pages.

    5. IMO your masthead is too tall. This might shove important content
    down below the fold.

    6. Something that has nothing to do with the design or coding, but ...
    you say that "The law changed on the 1st October 2006". Where? The
    Internet covers more than one jurisdiction, so readers may not know
    whether your statement applies to them. Nearby you do mention London
    and West Sussex, which makes me suspect the UK, but Canada has places
    with these names too, and I suspect that other places have as well.
     
    C A Upsdell, Feb 13, 2008
    #8
  9. Re: New site. Can anyone tell me if I am doing something potentiallybad BEFORE I commit?

    Andy Dingley wrote:
    > On 13 Feb, 12:05, Mike Barnard <>
    > wrote:
    >
    >> I am writing a site for myself. I'm learning HTML & CSS all over again
    >> by doing it, nice.

    >
    > Not bad! Keep reading this group, c.i.w.a.h c.i.w.a.s too and let us
    > know how it goes. Posting an example at about this sort of level of
    > progress is sensible too.


    <snip>

    > * HTML 4.01 Strict. Good!
    >
    > *- XML markup " />" on the empty <head> elements and on <img />. This
    > isn't appropriate for HTML, it's an XHTML thing.


    Glad someone else caught this too.

    > * Multiple <h1> elements:
    > <div id="corporateid">
    > <img id="logo" src="logo01.gif" alt="Mikes logo" />
    > <h1>Mr. Michael Barnard</h1>
    > <h1>Independent Fire Risk Assessor</h1>
    > </div>
    >
    > This isn't _wrong_, but it's a bit lumpy, IMHO. I'd use a <br> in
    > there instead, if you really do mean "a single page header, of two
    > lines". You can adjust the line spacing in CSS later.
    >
    > * "Wrapped elements"
    > You've got this:
    > <div id="corporateid">
    > <img id="logo" src="logo01.gif" alt="Mikes logo" />
    > <h1>Mr. Michael Barnard</h1>
    > <h1>Independent Fire Risk Assessor</h1>
    > </div>
    >


    Not saying it is wrong but do it this way and give myself more flexibility:

    <div id="corporateid">
    <img id="logo" src="logo01.gif" alt="Mikes logo">
    <h1>Mr. Michael Barnard
    <span>Independent Fire Risk Assessor</span></h1>
    </div>

    This it would give my style options. To have it the way you have it:

    #corporateid img { display: block; float: left; margin: 0 1em 0 0; }
    #corporateid h1 span { display: block; }

    You could remove the 2nd rule and the logo heading will be on one line,
    or change to this to make it a "sub" heading

    #corporateid h1 span { display: block; font-size: .8em; }

    Or put the logo image on the right!

    #corporateid img { display: block; float: right; margin: 0 0 0 1em; }

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Feb 13, 2008
    #9
  10. Re: New site. Can anyone tell me if I am doing something potentiallybad BEFORE I commit?

    Jonathan N. Little wrote:

    > Not saying it is wrong but do it this way and give myself more flexibility:
    >
    > <div id="corporateid">
    > <img id="logo" src="logo01.gif" alt="Mikes logo">
    > <h1>Mr. Michael Barnard
    > <span>Independent Fire Risk Assessor</span></h1>
    > </div>
    >
    > This it would give my style options. To have it the way you have it:
    >
    > #corporateid img { display: block; float: left; margin: 0 1em 0 0; }
    > #corporateid h1 span { display: block; }
    >
    > You could remove the 2nd rule and the logo heading will be on one line,
    > or change to this to make it a "sub" heading
    >
    > #corporateid h1 span { display: block; font-size: .8em; }
    >
    > Or put the logo image on the right!
    >
    > #corporateid img { display: block; float: right; margin: 0 0 0 1em; }
    >


    Damn accidentally hit send too soon!

    There are a whole host of other ways to change the presentation without
    touching the markup but just by changing the CSS. If you use <br> you
    are committed to changing the markup too if you wish to change the look
    of heading.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Feb 13, 2008
    #10
  11. Re: New site. Can anyone tell me if I am doing something potentially bad BEFORE I commit?

    Mike Barnard wrote:

    > Andy Dingley wrote:
    > ...
    >> * Background color isn't being set in your CSS, so my lurid pink
    >> default shows through instead.

    >
    > Ah, I see. I was trying to cut down on the number of bytes to
    > FINALLY be sent down the pipe, but if thats the effect.... hmmm....
    > maybe I'll keep it! :)


    It's an ugly purple in my main browser, bright yellow in another.

    >> * CSS font setting Read the group archives. We get stroppy about
    >> this. font: 80% arial, tahoma, "Trebuchet MS", verdana, arial,
    >> verdana, sans-serif;

    >
    >> ** Avoid Verdana

    >
    > Again, a cut n paste. I will look further.


    Before you adjust, have a read here:
    http://k75s.home.att.net/fontsize.html

    >> ** Don't scatter-gun the font names. In particular, don't list the
    >> "common" name before the "rare" name, or you'll always get Arial.
    >> tahoma, "Trebuchet MS", arial, sans-serif; isn't a bad list
    >> (aesthetic arguments aside)

    >
    >> ** body text goes at 100%. Always.

    >
    > Although I don't want teeny body text, at 100% it was too big and


    Then you need to readjust your *own* browsers' default sizes. 100% is
    *everyone's* default, chosen size. Why take that away from us?

    > there were only about two words in each line in the side columns.
    > I'll go and research.


    Because you are setting your side column widths in pixels. ("width:
    150px;") Use em units instead, and they will grow along with the text.
    Use pixels only for things like borders, and for image height and
    widths. Use ems or percentages everywhere else.

    --
    -bts
    -Motorcycles defy gravity; cars just suck
     
    Beauregard T. Shagnasty, Feb 13, 2008
    #11
  12. Mike Barnard

    mrcakey Guest

    I'm sure by the very fact that there's something there at all that you
    intend to see it through, but at the minute the navigation menu at the
    bottom (great idea) only includes Home and Contact. Obviously in the
    finished thing you need all necessary links in there.

    Reiterating the "get a nice logo" comment and - for me - I don't like the
    whitespace to the right of the header, it feels like something should be
    there - maybe you can put your contact details there?

    +mrcakey
     
    mrcakey, Feb 13, 2008
    #12
  13. Mike Barnard

    Andy Dingley Guest

    Re: New site. Can anyone tell me if I am doing something potentiallybad BEFORE I commit?

    On 13 Feb, 16:05, Mike Barnard <>
    wrote:

    > Also, I intend to use a 'tidy up' type of program on the files to
    > remove comments and whitespace, reducing the file to one big wall of
    > characters. This should improve download times (I hope) and reduce
    > overall bytes sent. HTML Tidy comes to mind.


    Don't bother. HTML code size is tiny in comparison to images. Also
    whitespace compresses well in transit.


    > I hate looking through and seeing </div> and thinking, "Which div?" Is
    > the item above in div 1 or div 2, etc.


    With decent markup you shouldn't need to use so many levels of indent
    that you get lost, unless it's _really_ complex.



    > Aha. My understanding is that if an element is a one off, for example
    > a heading at the top of a page, then an ID is in order. But, if you
    > expect there to multiple items needing the same attributes such as a
    > series of pictures or articles then use a CLASS.


    That's true, but there are other factors too. Using id on a broad
    element like "left-column" in a CSS selector gets awkward because of
    specificity, apart from any issues of how many there are.

    For CSS-only work, I just use class. For JavaScript too, I use both.



    > >** body text goes at 100%. Always.

    >
    > Although I don't want teeny body text, at 100% it was too big and
    > there were only about two words in each line in the side columns.


    That's because your browser default size is mis-configured.

    Most importantly though, I don't care what it looks like for _you_, I
    care what it looks like for _me_. This is one of the two biggest
    mistakes in web design.



    > There a a couple of glitches where things differ between FF and IE,
    > but that may change as I alter it using your ideas.


    That's the 3rd biggest mistake in web design. No-one except the
    designer is going to sit there comparing it on two browsers. I want it
    to _work_ for me, not to be identically bad in all browsers. Get the
    basic design right, avoid the glaring IE problems, and a few pixels
    here and there can go hang.
     
    Andy Dingley, Feb 13, 2008
    #13
  14. Re: New site. Can anyone tell me if I am doing something potentiallybad BEFORE I commit?

    On Feb 13, 10:25 am, Mike Barnard <>
    wrote:
    > On Wed, 13 Feb 2008 05:13:44 -0800 (PST), Travis Newbury
    > >Pay someone to make you a logo.

    > Yes, well it's just a filler while I get the overall layout as I want
    > it. But you knew thatm, right?


    Nope that was not obvious

    > There's plenty of logo creation sites out there, but which one to
    > choose? Got a reccomendation?


    Nope, we do our own. ask around I am sure someone will make a
    recomendation
     
    Travis Newbury, Feb 13, 2008
    #14
  15. Mike Barnard

    Ed Mullen Guest

    Re: New site. Can anyone tell me if I am doing something potentiallybad BEFORE I commit?

    Mike Barnard wrote:
    > Hi all.
    >
    > I am writing a site for myself. I'm learning HTML & CSS all over again
    > by doing it, nice.
    >
    > Can a few of you take a look and comment on my methodology? That is,
    > the way I am doing things rather than the clashing colour schemes and
    > tell me if you think I should do anything differently? i.e. I have
    > the body text set to 80% and the others work from there. Should I be
    > doing something else?
    >
    > I'd rather know now than spend all week filling in the blanks THEN
    > having to adjust it. And NO, the picture is not the one to be
    > published although it *is* me.
    >
    > I'm writing it using just Note Tab Pro, no WSWYG editors.
    >
    > www.thermachek.com/temp/index.html
    >
    > Thanks.
    >
    > Mike.


    My only comment is that the text is too small for me to read on my 17"
    LCD running at 1280 x 1024. So I used text zoom in my browser
    (SeaMonkey). Ooops.

    http://edmullen.net/temp/image.jpg

    --
    Ed Mullen
    http://edmullen.net
    I used to be schizophrenic, but we're all right now.
     
    Ed Mullen, Feb 15, 2008
    #15
  16. Mike Barnard

    Mike Barnard Guest

    On Wed, 13 Feb 2008 12:05:24 +0000, Mike Barnard
    <> wrote:

    >Hi all.
    >
    >I am writing a site for myself. I'm learning HTML & CSS all over again
    >by doing it, nice.
    >
    >Can a few of you take a look and comment on my methodology? That is,
    >the way I am doing things rather than the clashing colour schemes and
    >tell me if you think I should do anything differently? i.e. I have
    >the body text set to 80% and the others work from there. Should I be
    >doing something else?
    >
    >I'd rather know now than spend all week filling in the blanks THEN
    >having to adjust it. And NO, the picture is not the one to be
    >published although it *is* me.
    >
    >I'm writing it using just Note Tab Pro, no WSWYG editors.
    >
    >www.thermachek.com/temp/index.html
    >
    >Thanks.
    >
    >Mike.


    Just to say thanks to everyone for their input. There is a version 2
    in the pipeline.
     
    Mike Barnard, Feb 15, 2008
    #16
  17. Mike Barnard

    derek Guest

    On 02/13/2008 at 07:05:24, Mike Barnard <> wrote:

    > Hi all.
    > I am writing a site for myself. I'm learning HTML & CSS all over again
    > by doing it, nice.
    > Can a few of you take a look and comment on my methodology? That is,
    > the way I am doing things rather than the clashing colour schemes and
    > tell me if you think I should do anything differently? i.e. I have
    > the body text set to 80% and the others work from there. Should I be
    > doing something else?
    > I'd rather know now than spend all week filling in the blanks THEN
    > having to adjust it. And NO, the picture is not the one to be
    > published although it *is* me.
    > I'm writing it using just Note Tab Pro, no WSWYG editors.
    > www.thermachek.com/temp/index.html
    > Thanks.
    > Mike.


    dont forget to put meta keywords and meta description tags also put your logo as an icon for the page.
    for example,

    <meta name="keywords" content="keywords to help you get found in the different search indexes" />
    <meta name="description" content="try to put some blurb in here that when your target audience sees it will want to click it. this will usually end up in the description in the search index response pages" />
    <link rel="shortcut icon" href="/favicon.ico" >

    use the title and name attribute in your image and anchor tags.
    your anchor and image tags are another area that you could add text to increase your placement in search engines.
    <a title="" name="" href="">asdf</a>
    <img title="" alt="" src="">

    ..
    =====================================================
    THIS IS MY SIGNATURE. There are many like it, but this one is mine.
     
    derek, Feb 15, 2008
    #17
  18. derek wrote:

    > Mike Barnard wrote:
    >
    >> Hi all.
    >> I am writing a site for myself. ...

    >
    > dont forget to put meta keywords and meta description tags also put
    > your logo as an icon for the page. for example,


    Search engines stopped reading keywords eons ago, due to abuse.

    > .
    > =====================================================
    > THIS IS MY SIGNATURE. There are many like it, but this one is mine.


    No, it isn't your signature; it is part of the body of your post.
    Signatures are delimited by a line containing only two dashes, a space,
    and a hard return. Like below.

    --
    -bts
    -Friends don't let friends drive Vista
     
    Beauregard T. Shagnasty, Feb 15, 2008
    #18
  19. Mike Barnard

    mrcakey Guest

    "Beauregard T. Shagnasty" <> wrote in message
    news:zEhtj.227458$...
    > derek wrote:
    >
    >> Mike Barnard wrote:
    >>
    >>> Hi all.
    >>> I am writing a site for myself. ...

    >>
    >> dont forget to put meta keywords and meta description tags also put
    >> your logo as an icon for the page. for example,

    >
    > Search engines stopped reading keywords eons ago, due to abuse.
    >
    >> .
    >> =====================================================
    >> THIS IS MY SIGNATURE. There are many like it, but this one is mine.

    >
    > No, it isn't your signature; it is part of the body of your post.
    > Signatures are delimited by a line containing only two dashes, a space,
    > and a hard return. Like below.
    >
    > --
    > -bts
    > -Friends don't let friends drive Vista


    Good grief!!! That's a real Comic Book Guy moment.

    +mrcakey
     
    mrcakey, Feb 15, 2008
    #19
  20. Mike Barnard

    derek Guest

    On 02/15/2008 at 09:50:07, "Beauregard T. Shagnasty" <> wrote:

    > derek wrote:
    > > Mike Barnard wrote:
    > >
    > >> Hi all.
    > >> I am writing a site for myself. ...

    > >
    > > dont forget to put meta keywords and meta description tags also put
    > > your logo as an icon for the page. for example,

    > Search engines stopped reading keywords eons ago, due to abuse.
    > > .
    > > =====================================================
    > > THIS IS MY SIGNATURE. There are many like it, but this one is mine.

    > No, it isn't your signature; it is part of the body of your post.
    > Signatures are delimited by a line containing only two dashes, a space,
    > and a hard return. Like below.
    > --
    > -bts
    > -Friends don't let friends drive Vista


    Its true the value of the meta keywords tag is limited. but there is
    still value in using the tag. Even if the value is small it doesnt hurt you
    to add it in.
    The meta description tag still provides a lot of value though.

    ..
    =====================================================
    THIS IS MY SIGNATURE. There are many like it, but this one is mine.
     
    derek, Feb 15, 2008
    #20
    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. =?Utf-8?B?V2lsbGlhbSBTdWxsaXZhbg==?=

    vs2005 publish website doing bad things, bad things

    =?Utf-8?B?V2lsbGlhbSBTdWxsaXZhbg==?=, Oct 25, 2006, in forum: ASP .Net
    Replies:
    1
    Views:
    616
    =?Utf-8?B?UGV0ZXIgQnJvbWJlcmcgW0MjIE1WUF0=?=
    Oct 25, 2006
  2. John Nagle
    Replies:
    4
    Views:
    9,966
    John Nagle
    Feb 4, 2008
  3. Tricky
    Replies:
    3
    Views:
    2,890
    Tricky
    Apr 26, 2010
  4. rantingrick
    Replies:
    44
    Views:
    1,247
    Peter Pearson
    Jul 13, 2010
  5. endy_tj
    Replies:
    1
    Views:
    153
    Bret Pettichord
    May 7, 2006
Loading...

Share This Page