SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 50

Hybrid View

  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Break up Heading or not?

    I have a heading that I want to look like this...

    Housewife
    to CEO:
    Pamela's Story



    To get that effect, I chose the following markup...
    Code:
    <h2>Housewife<br />
    to CEO:</h2>
    <h3Pamela's Story</h3>

    Upon further reflection, it seems like I should have all of the title be in the same <h2> because otherwise Search Engines just key off of "Housewife to CEO:" versus the entire title of "Housewife to CEO: Pamela's Story".

    Questions:
    1.) What style(s) would you use? One? Two? Other?

    2.) How do I get the desired format I want?

    Thanks,


    Debbie

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,173
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    You could wrap spans around bits of text and style them differently. I would probably just put one span around Pamela's Story and set the font size differently and give it display: block to make it sit below the rest. Probably I would just use <br> after Housewife, though, but it's upt to you. Instead, you could wrap "housewife" and "to CEO" with spans and set all the spans to display: block.

  3. #3
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    You could wrap spans around bits of text and style them differently. I would probably just put one span around Pamela's Story and set the font size differently and give it display: block to make it sit below the rest. Probably I would just use <br> after Housewife, though, but it's upt to you. Instead, you could wrap "housewife" and "to CEO" with spans and set all the spans to display: block.
    Okay, but my bigger question was how to handle the Headings markup...

    Would you put everything into an <h2> and then also apply what you describe above?


    Debbie

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,173
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Yes, I meant that the whole lot is wrapped in an <h2> (as you said you wanted to do) with sans inside that for different styling.

  5. #5
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Yes, I meant that the whole lot is wrapped in an <h2> (as you said you wanted to do) with sans inside that for different styling.
    Okay.

    And don't you agree that I would all of my title to be one <h2> versus an <h2> and an <h3> which is what I originally had?


    Debbie

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,173
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    To me, "Pamela's Story" seems more a part of the title than a subtitle, so yes, I'd say keep it all in the one heading element.

  7. #7
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    The question to always ask when starting a new heading is "Is this a start of a separate content section?" -- if the answer is no, it's not a new heading, it's either content or part of the same heading.

    It's why when I see people do stuff like

    <h1>SomeBlastedSite</h1>
    <h2>We do things right</h2>

    at the top of a page... well, it's an indication they failed to grasp the purpose of heading tags... as "we do things right" is not the start of a separate subsection.

    In your case:

    <h2>Housewife<br />
    to CEO/h2>
    <h3Pamela's Story</h3>

    My question is... is there content under the H2 that would not be a subsection of the H3? Are you going to have other H3's that are siblings to "Pamela's Story" -- if the answer is no, why are you using the markup indicating the start of a new subsection?

    That's what heading tags are for -- to mark the start of a subsection and/or the end of a previous sibling level subsection... just like an HR indicates a change in topic that typically lacks a heading.

    <h2>Main Section</h2>
    <p>Some text</p>
    <h3>Start SubSection</h3>
    <p>More text, this is in the subsection</p>
    <hr /> <!-- end subsection -->
    <p>This text should be treated as part of the H2</p>
    <h3>Another subsection</h3>
    <p>More text in this subsection</p>
    <h2>Secondary section, ends the h3 subsection</h2>
    <p>Other stuff here</p>
    <hr> <!-- now back to H1's content -->

    It's also why doing idiocies like using heading tags inside menus is nonsense -- there's rarely a good reason to make a heading that has no content after it.

    Also why if you break past H4, it's probable something is wrong with your structure -- and why skipping levels going down in priority makes no sense.

    My approach would be one that would put CSS off appearance first... so use a span set to display block instead of the line-break.

    <h2>Housewife <span>to CEO/span> <small>Pamela's Story</small></h2>

    That way CSS off you get a nice clean single line. CSS on set the span to display:block for the line feeds between sections. SMALL is typically used to indicated de-emphasis (like in a tag line) as there's no other element to do so with.

  8. #8
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    DeathShadow,

    Let me provide some more context so you don't think I'm crazy...

    I'm re-factoring my website - HTML/CSS for now - and looking to clean things up.

    Right now I'm re-working my Home Page.

    Based on lots of previous research here at SitePoint, I think I have a pretty good set-up, but my CSS needs to be tightened up.

    On my Home, I have a hidden <h1>Starting a Small Business</h1>.

    Beneath my Top Menu, in my Left Column, I have...
    Code:
    <!-- Featured Article -->
    <div class="box">
    	<div class="headerBar">Featured Article</div>
    	<h2>Housewife <span>to CEO</span>
    		<small>Pamela's Story</small></h2>
    	<p>Lorem ipsum dolor sit amet...</p>
    </div>
    So, is this a separate section? Yes.

    Will I have subsections under this? Yes/No.

    Since this is a "teaser" on my Home Page, it ends after a paragraph.

    On the actual "Article Page", I will have the same heading again - but as an <h1> - followed by the body of the article with several <h2>'s.



    Debbie

  9. #9
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    On my Home, I have a hidden <h1>Starting a Small Business</h1>.
    As in hidden under an image, or are you content cloaking? If the latter, good way to get slapped down by the search engines.

    Quote Originally Posted by DoubleDee View Post
    <div class="headerBar">Featured Article</div>
    [/CODE]
    ... and why is that a classed DIV and not a heading? THAT'S the start of the subsection... the part you have in a h2 is the title of a subsection inside it, so that would be where I'd be using a h2 and h3... where you have a div and h2. Start of the featured article section, then the content of that section having it's own heading.

    At least, that's how I'd be looking at it... otherwise you've added hanging text with no semantics... and as such don't have a logical document structure.

  10. #10
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    As in hidden under an image, or are you content cloaking? If the latter, good way to get slapped down by the search engines.
    As in moving my <h1> off the viewport so you can't see it but the Search Engines can, because I have no logical place to put an <h1> on my Home Page. (Was thoroughly vetted on SitePoint and all the gurus said it was fine to do.)


    ... and why is that a classed DIV and not a heading?
    Because...
    Code:
    <h2>Housewife <span>to CEO</span>
    		<small>Pamela's Story</small></h2>
    ...is a section and something I want Search Engines to find. ("Featured Article" is an after-thought and not worthy of a Heading in my mind, because it *dilutes* my semantic structure...)


    THAT'S the start of the subsection... the part you have in a h2 is the title of a subsection inside it, so that would be where I'd be using a h2 and h3... where you have a div and h2. Start of the featured article section, then the content of that section having it's own heading.
    But now I have demoted the *important* content from an <h2> to an <h3>...

    If I had this...
    Code:
    <h2>Small Business Articles</h2>
    <h3>Housewife to CEO: Pamela's Story</h3>
    <p>Some short summary of the first article...</p>
    
    <h3>Is an LLC right for you?</h3>
    <p>Some short summary of the second article...</p>
    
    <h3>Open-Source can save you Big Bucks!</h3>
    <p>Some short summary of the third article...</p>
    ...then I would agree with you. But since this is on the Home Page, and the key points are...

    <h2>Housewife to CEO: Pamela's Story</h2>

    <h2>Upcoming Events</h2>

    <h2>Small Business Myths</h2>

    Combined with the fact there is only ONE "Featured Article", then I think it is better to make "Featured Article" a <div> and let it fall by the way-side semantically... (It's really just a superficial "label"...)


    At least, that's how I'd be looking at it... otherwise you've added hanging text with no semantics... and as such don't have a logical document structure.
    See above...



    Debbie

  11. #11
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Abusing the document structure JUST to satiate the search engines is black hat SEO, and a good way to get the page slapped down in the long term, for some vague short term benefit. Heading structure exists for USERS not search engines, and if you read the advice of the people who make search engines, they'll tell you to write for the USER, not the search engine.

    Don't know what "guru's" told you that was ok... but I would suspect the SEO nimrods being behind that one; who you can't trust to code their way out of a piss soaked paper bag with a hole in the bottom.

    Headings are for document structure, not for abusing for some vague SEO nonsense. It's that type of thinking that gives the entire SEO "Industry" a bad name.

    Though I could be off the mark without seeing the actual page in question. Intentionally hiding content JUST for the search engines is called "content cloaking" -- and while your black hat SEOtards get raging chodo for it, it's also the fastest way to get blacklisted on search engines within a few months of launch. If it's there, and it's content, why on earth wouldn't you be showing it? If it's not content and you're not showing it, it probably doesn't belong in the markup!

  12. #12
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Things were so peaceful on Thanksgiving...


    Quote Originally Posted by deathshadow60 View Post
    Abusing the document structure JUST to satiate the search engines is black hat SEO, and a good way to get the page slapped down in the long term, for some vague short term benefit. Heading structure exists for USERS not search engines, and if you read the advice of the people who make search engines, they'll tell you to write for the USER, not the search engine.

    Don't know what "guru's" told you that was ok... but I would suspect the SEO nimrods being behind that one; who you can't trust to code their way out of a piss soaked paper bag with a hole in the bottom.
    Back to body fluids I see...

    Well, I consider Stomme poes to be a SitePoint "guru". I respect here opinion greatly, and on topics like this I think she excels and is more up-to-date on industry trends and best-practices than just about anyone on SitePoint.

    Here is where she jumped into one of many long threads I have created:

    http://www.sitepoint.com/forums/show...=1#post4896285


    A few posts later I even asked...
    Quote Originally Posted by doubledee
    Is that a bad thing to do (i.e. "hiding" an <H1>)??

    Doesn't Google penalize you for such trickery?

    Stomme poes wrote back here:
    Quote Originally Posted by stommepoes
    No. Accessibility people have wondered ever since the Googles figured out how to find cloaked text. Matt Cutts answered definitively several years ago, hiding structure that you have put there for accessibility is fine. "BBC homepage" isn't exactly a shining example of keyword-stuffing cloaking anyway.
    http://www.sitepoint.com/forums/show...=1#post4896924


    Headings are for document structure, not for abusing for some vague SEO nonsense. It's that type of thinking that gives the entire SEO "Industry" a bad name.
    You're making a lot of assumptions here, the biggest being that I am cutting corners for selfish, lazy or nefarious reasons.

    Anything on my site is done with: Standards, Scalability, Maintainability, Accessibility, Simplicity, and Quality in mind.

    It doesn't mean I always get things right, or that others don't disagree, but I *strive* to build the best website possible.


    Though I could be off the mark without seeing the actual page in question. Intentionally hiding content JUST for the search engines is called "content cloaking" -- and while your black hat SEOtards get raging chodo for it, it's also the fastest way to get blacklisted on search engines within a few months of launch. If it's there, and it's content, why on earth wouldn't you be showing it? If it's not content and you're not showing it, it probably doesn't belong in the markup!
    If you so choose, read the posts above and that should answer your questions. (Don't have the time to re-type it here. Especially since I believe my site structure is semantically sound...)


    Debbie

  13. #13
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    DeathShadow,

    My last response - and links - should clear things up, but just some additional thoughts...

    1.) My Home Page has no one thing that stands out as an <h1>, so I chose my Company Name and Company Tag Line.

    That is totally valid.


    2.) Per Stomme's help, I "hid" my textual Company Name/Tag Line off screen because I have a Logo instead, but still need Readers and Search Engines to know what is the top of my Document Tree.

    That is totally valid.


    3.) Writing Semantically correct webpages has the side effect of helping SEO. And as long as the *READER* is the first priority (including "accessibility") then there is nothing dirty or wrong about that.

    You treat any utterance of SEO like it makes people the anti-Christ.

    Let's be reasonable here...


    4.) If I removed "Featured Article" from my Home Page, the Article Title...
    Code:
    <h2>Housewife <span>to CEO</span>
         <small>Pamela's Story</small></h2>
    ...stands up *entirely* on its own, which sorta backs up my "Having 'Featured Article' be its own Heading-Level is overkill and dilutes things".

    Semantically the choice I made is valid.

    5.) I am planning on having only three (or maybe four) Level-2 Headings on my Home Page...

    <h2>Housewife <span>to CEO</span><small>Pamela's Story</small></h2>
    <h2>Small-Business Facts</h2>
    <h2>Small-Business Workshops</h2>


    Beneath the last one are the following <h3>'s...

    <h3>Current Dates</h3>
    <h3>Upcoming Locations</h3>

    My Home Page may also have...

    <h3>Tip of the Day</h3>

    Combined with...

    <h1>Debbie's Company: Small-Business Central</h1>

    ...it is my opinion that my Home Page is marked up semantically rather well.


    6.) Could I make "Featured Article" an <h2>? Yes, but I just feel it adds an extra unneccesary level that takes away from the Article itself.


    You may disagree, which is fine, but don't make it sound like I'm executing baby kittens...

    Sincerely,



    Debbie

  14. #14
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    I'm going to agree with Crusty about Featured Article. I have heard screen reader users complain about pages with heading-overkill, so yes it can happen (the user was specifically pointing to the CBC, canadian broadcast news page I believe), but two things lead me to believe that the story title itself smells like an h3:

    Code:
    <div class="box">
    	<div class="headerBar">Featured Article</div>
    	<h2>Housewife <span>to CEO</span>
    		<small>Pamela's Story</small></h2>
    	<p>Lorem ipsum dolor sit amet...</p>
    </div>
    I notice this on lots of sites: they have text that they don't want to mark up as a header, but they still want to style it as such and give it a class name with either "head", "header", "heading" or "title" in the class/id name. If you call something a "headerBar" then some part of you does see this text as "heading" something underneath it, and I agree: it is.

    The second reason why I think h2 fits for Featured is what you've posted for your other h2s:
    <h2>Small-Business Facts</h2>
    Not a specific fact, but a heading for various facts (even if there was only one fact)
    <h2>Small-Business Workshops</h2>
    Not a specific workshop, but a heading for various workshops (again, what if at any given time you only have one to list?)


    It does seem natural and normal to have
    <h2>Feature</h2>
    <h3> specific feature story title</h3>
    <h2>Facts</h2>
    <h3>Specific Fact 1</h3>
    <h3>Specific Fact 2</h3>

    <h2>Workshops</h2>
    <h3>Workshop date</h3>
    <h3>Workshop Locations</h3>


    Re dilution: maybe that's a concern. And I haven't seen your page, how much information is on it, etc. I can only base on what I've seen here. To me, and it's opinion, it *looks* like Featured Article is heading a featured article who itself has a title (header). It wouldn't match as the main page h1, so having your h1 refer to the site-name is probably the best thing (but as I said I tend to waffle... today I'm good with main page h1 being site name, while other pages put h1 on other info). But it seems you have three main chunks, named above, and I'm sure all of your visitors (even if they're relying on a screen reader) will understand that the featured article is rather important (possibly more than the other evenly-named headed things like Facts and Workshops). Using a role of "main" on the box (div or whatever) that contains the bulk of your page content (so the part who isn't header, navigation, sidebars, footer) can help users exposed to landmark roles.

    So far as I know the googles don't look at landmark roles but since other roles are being added "natively" to elements as they write the HTML5 spec (and it doesn't matter if you use an HTML4 or XHTML1 doctype, browsers who have an HTML5 parser are going to consider any text/html page to be "HTML5" anyways), the SE's may find the roles benefit them as much as they are supposed to benefit other software, and they may start looking for them. Who knows. This is speculation.

    I'm also not sure how much the SE's "rank" parts of a page based on their heading levels. But I would not think you would have a big "dilution" problem with more nesting structure of your categories. Also, what you've posted here doesn't look anything like an insane number of heading tags on a single page, and that would likely contribute to "dilution" (or worse, pissing off experienced screen reader users) more so than bumping one item down a level.

    It is your page, and it is up to you, and you sounded fairly confident with what you have now. And you're not damaging your page with what you have now. But I agree with Crusty about the headerBar featured articles smells pretty strongly of a header.

    You treat any utterance of SEO like it makes people the anti-Christ.
    Lawlz, but I can't blame him. The industry itself knows how badly it smells. SEO... the anti-Christ... who knows? : )

    But you're thinking the right way, Debbie: you're considering SEO as part of the whole of accessibility, usability, and good page structure. So what if we disagree with how you chose to structure your document? The point is, you're doing it, and doing it for good reasons. Pretty much every place you've said "search engines" I automatically mentally add in "screen reader and lynx users" because they access the same thing as SEs. I think you do too. Crusty gets gets hung up on the SE-mention because it's usually spewed by marketing fools and weenies building crappy sites thinking only of teh googles.

  15. #15
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    2.) Per Stomme's help, I "hid" my textual Company Name/Tag Line off screen because I have a Logo instead, but still need Readers and Search Engines to know what is the top of my Document Tree.
    ...and what do people browsing images off/CSS on get? Sounds like what you wanted was an image REPLACEMENT. text-indent:-999em for the /FAIL/. (defeating the purpose of using an image instead of the text)... Please, PLEASE tell me you aren't using an IMG tag for the logo...

    Quote Originally Posted by DoubleDee View Post
    3.) Writing Semantically correct webpages has the side effect of helping SEO. And as long as the *READER* is the first priority (including "accessibility") then there is nothing dirty or wrong about that.
    ... and not having logical heading structures and leaving text floating does NOT help the reader -- that's putting your screen appearance first instead of accessible markup first -- and for what? some vague SEO nonsense.

    Quote Originally Posted by DoubleDee View Post
    You treat any utterance of SEO like it makes people the anti-Christ.
    There's good SEO and bad SEO... good is having content of value marked up in a semantic manner that people WANT to back-link to naturally. Bad is abusing HTML tags, ignoring structural rules of language and document construction, keyword stuffing, content cloaking, and a whole host of other techniques that are little more than snake oil. The SEOtards who've turned it into a cottage industry have pumped out so much misinformation and bad code they're destroyed their own reputations -- so yes, when I see someone having the rose colored glasses slapped on their head and being led down the garden path, I react.

    As SP just said, "I automatically mentally add in "screen reader and lynx users" -- it comes down to SEO being a small but important part of web building; I just refuse to do any of the nonsense that sacrifices all the other small but important parts of building a site... since I tend to use alternative browsing methods and know a lot of people that do... CSS off images on, CSS on images off, non-image capable, scripting off, in every possible combination. It's why I don't even THINK about screen appearance OR search engines until I have semantic markup of my content with a logical document structure, then progressively enhance it with CSS and scripting. Semantic markup, then bend it to your will.

    I'm down at Panera bread on the netbook for espresso and a lemon-poppy cake when it's packed with college kids, damned straight I turn images and scripting off as we all jockey for a share of the network. I travel to my uncle's place 50 miles to the north where 33.6 dialup is a good day and there's zero cell reception (kiss off tethering)... and, well...
    Off Topic:


    BTW, this post was made using DOSLYNX from a Tandy 1000 HX... Trying to get Arachne up and running, but it needs more system than this.

    Quote Originally Posted by DoubleDee View Post
    ...stands up *entirely* on its own, which sorta backs up my "Having 'Featured Article' be its own Heading-Level is overkill and dilutes things".
    Structurally makes no sense... since your "featured article" text is now part of whatever block of content is before it, instead of indicating it's the start of a section. That's NOT semantically correct. Semantics is NOT slapping heading tags around text you want emphasized for search engines and skipping text you don't... It's marking things up as what they ARE -- and headings MEAN 'start of a new section of content'... while floating text is just floating text/content.

    you know... if those h2 you listed are all going to be siblings, why is the "featured article" text even in there? Does listing it first not cover that? (again without seeing the whole page we're all guessing wildly)

    Quote Originally Posted by DoubleDee View Post
    You may disagree, which is fine, but don't make it sound like I'm executing baby kittens...
    Wasn't aware I was -- suspect regionalisms again; simply trying to help make things better.

    Remember, "Ya cahn't geht theyah frum heeyah"

  16. #16
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    Wasn't aware I was -- suspect regionalisms again; simply trying to help make things better.

    Remember, "Ya cahn't geht theyah frum heeyah"
    Only a few minutes of battery left - then bed time.

    DeathShadow, you give "tough love" a new name.

    (At least Stomme poes loves me for real... BLAH!!!)

    Will respond more later...


    Debbie

  17. #17
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    ...and what do people browsing images off/CSS on get? Sounds like what you wanted was an image REPLACEMENT. text-indent:-999em for the /FAIL/. (defeating the purpose of using an image instead of the text)... Please, PLEASE tell me you aren't using an IMG tag for the logo...
    What is the alternative to...
    Code:
            <!-- Display Logo -->
            <div id="logo">
              <a href="/index.php">
                <img src="/images/debbie_160x45.png" width="160" alt="Debbie" />
              </a>
            </div>


    ... and not having logical heading structures and leaving text floating does NOT help the reader -- that's putting your screen appearance first instead of accessible markup first -- and for what? some vague SEO nonsense.
    So what do you propose? (BTW, the code I'm posting is close - but not my exact copy - so take that into consideration.)

    I need an <h1> on my Home Page. But I do not have any one thing that deserves to be that <h1> other than my Company Name.

    No problem, except I do NOT want...
    Code:
    		<h1 id="companyName">Debbie's Small-Business Central</h1>
    ...listed on my Home Page (visually) because 1.) I have a Logo and 2.) It would look awkward.

    There must be a compromise?

    Then again, I thought Stomme poes help me find that *reasonable* common-ground earlier this year with what I am currently doing?!


    There's good SEO and bad SEO... good is having content of value marked up in a semantic manner that people WANT to back-link to naturally. Bad is abusing HTML tags, ignoring structural rules of language and document construction, keyword stuffing, content cloaking, and a whole host of other techniques that are little more than snake oil. The SEOtards who've turned it into a cottage industry have pumped out so much misinformation and bad code they're destroyed their own reputations -- so yes, when I see someone having the rose colored glasses slapped on their head and being led down the garden path, I react.
    I'm not "abusing" things. I'm taking a complex situation and picking what I feel is the best compromise.

    At least I'm big enough to ask other's opinions, and if you have a better idea, then let me know. But "my way or the highway" seldom works.


    It's why I don't even THINK about screen appearance OR search engines until I have semantic markup of my content with a logical document structure, then progressively enhance it with CSS and scripting. Semantic markup, then bend it to your will.
    I thought I did a decent job of doing just that.


    Structurally makes no sense... since your "featured article" text is now part of whatever block of content is before it, instead of indicating it's the start of a section. That's NOT semantically correct. Semantics is NOT slapping heading tags around text you want emphasized for search engines and skipping text you don't... It's marking things up as what they ARE -- and headings MEAN 'start of a new section of content'... while floating text is just floating text/content.

    you know... if those h2 you listed are all going to be siblings, why is the "featured article" text even in there? Does listing it first not cover that? (again without seeing the whole page we're all guessing wildly)
    So I slept on it, and I'll bow to your idea. I changed my code to have an <h2> and <h3>...

    (Of course my main reason for changing it was because Stomme poes gave me some credit, and was nice about it. Had only you responded, I likely would have left it as is just to object...)


    Wasn't aware I was -- suspect regionalisms again;
    A spade is a spade. You just have a crappy way of communicating with people at times, DeathShadow.

    You make things TOO PERSONAL and it makes everyone defensive and grouchy.

    Your "hand-grenade" approach to interacting with people has NOTHING to do with being a New Englander, and everything to do with some things you ought to work harder on improving in a lot of people's opinions.


    simply trying to help make things better.
    And for that, I grateful.

    I do want to keep getting better and be as smart - with HTML/CSS - as you and Paul O' and Stomme poes and many others on SitePoint.

    (I just wish you'd tone it down a bit and not automatically assume I'm an SEO-tard... For I go above and beyond the call-of-duty to write code that anyone could be proud of...)


    Remember, "Ya cahn't geht theyah frum heeyah"
    Yeah yeah.



    Debbie

    P.S. Will post a link to my *corrected* code when I have time. (Car is hopefully almost ready...)

  18. #18
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Ok, actually seeing the code in question, from the top...

    Four stylesheets and no media types? Ouch. Way too many handshakes for little return.

    I'd hide the H1 text UNDER the image using gilder-levin image replacement, that way images off you don't get the ugly box and uglier alt text.

    H1 should be unique, doesn't need an ID unless you're planning on targeting it with javascript.

    Clearfix, this isn't 2001.

    Extra DIV around elements that could be styled directly.

    Your use of a span to force line-break is broken on large font machines, you have that issue in a number of places where you've got dynamic content inside tiny little fixed size boxes. Both sidebars are WAY too tiny to have such large dynamic fonts inside them... I'd either fix the font size on the offending elements, or set the sidebar widths in EM.

    I'm not entirely sold that everything you have ID's on... well... needs ID's. The unique ones sure, but you've got a lot of them that could inherit off of body. I'd also put serious consideration into changing it to a middle column first code-order, as having the sidebar before the content is a bit annoying CSS off.

    Not sold on the definition list either, those look more like subsection headings than terms and definitions. I think people dive for DL's way too quickly these days -- they have their place, but really that looks to me like it should be a bunch of H3 and P, no extra tags/structure needed.

    The universal reset is also gonna bite you when/if you add forms to the page.

    Some of the comments are also kind of funny:
    Code:
    <!-- PAGE HEADER -->
    <div id="pageHeader">
    Really? Opening a div with the pageheader Id is the page header?

    Others though...

    Code:
    </div>
    
            <!-- Display Welcome -->
            <p id="welcome">
    could trip rendering bugs cross browser... in addition to the comedy of saying it's the welcome text twice.

    You're using nice verbose names with a indenting scheme, don't waste time on redundant comments. Only time where comments of that nature are really helpful is on closings, and so as to avoid tripping rendering bugs it's why in my code you'll often see this:
    <!-- .subSection --></div>

    instead of the more common:
    </div><!-- end .subSection -->

    Comments between sibling tags can trip rendering bugs (particularly if floats or inline-block are involved) in legacy IE and some versions of FF (double-render and disappearing content being the worst two). Moving the comment before the closing tag prevents this from ever being an issue... and it's a </div>, of course it's the end of the section

    Not sure I'd keep the footer div either.... but that really hinges on what's going there for content and if you're going to have more than just the UL... Funny that, I almost never put things in lists in my own footers.

    From what you have, my approach to the same page wouldn't be THAT different, but I'd only have Id's on the more... unique ones, my heading placement would be a bit different, and I'd probably have a wee bit different a use of DIV and P. (or should I say lack of P around some things)... and some HR to indicate changes in topic... Something like this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html
    	xmlns="http://www.w3.org/1999/xhtml"
    	lang="en"
    	xml:lang="en"
    ><head>
    
    <meta
    	http-equiv="Content-Type"
    	content="text/html; charset=utf-8"
    />
    
    <link
    	type="text/css"
    	rel="stylesheet"
    	href="/theme/screen.css"
    	media="screen,projection,tv"
    />
    
    <title>
    	Debbie's Small-Business Central
    </title>
    
    </head><body>
    
    <div id="pageWrapper">
    
    	<h1>
    		Debbie's Small-Business Central
    		<span><!-- image replacement --></span>
    	</h1>
    
    	<div id="userBar">
    		<span>Hello.</span>
    		<a href="">Log In</a> to access premium content.
    		&nbsp; Not a Member? &nbsp;<a href="">Start Here</a>
    	<!-- #userBar --></div>
    
    	<ul id="mainMenu">
    		<li class="current">
    			<a href="/index.php">Home</a>
    		</li><li>
    			<a href="/pages/article_index.php">Articles</a>
    		</li><li>
    			<a href="/pages/howto_index.php">How-To Guides</a>
    		</li><li>
    			<a href="/pages/news_index.php">In the News</a>
    		</li><li>
    			<a href="/pages/interview_index.php">Interviews</a>
    		</li>
    	</ul>
    
    	<hr />
    
    	<div id="contentWrapper"><div id="content">
    		<!-- double wrapper for easier content column first layout -->
    
    		<div class="subSection">
    			<h2>
    				Small-Business Facts<br />
    				<small>Some things to know about Small-Business...</small>
    			</h2>
    
    			<div class="factoids">
    
    				<h3>
    					<span>Fact #01:</span>
    					Small-Businesses represent 99.7% of all employer firms.
    				</h3>
    				<p>
    					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quam nisi, egestas mattis commodo a, adipiscing eget erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce ultrices lacus nec leo mattis vestibulum. Donec pharetra luctus nisl et sollicitudin. Aliquam faucibus tellus at orci pretium faucibus. Duis malesuada, enim ac luctus auctor, metus libero dictum nunc, vitae imperdiet est massa eget massa.
    				</p>
    
    				<h3>
    					<span>Fact #02:</span>
    					Small-Businesses employ half of all private sector employees.
    				</h3>
    				<p>
    					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quam nisi, egestas mattis commodo a, adipiscing eget erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce ultrices lacus nec leo mattis vestibulum. Donec pharetra luctus nisl et sollicitudin. Aliquam faucibus tellus at orci pretium faucibus. Duis malesuada, enim ac luctus auctor, metus libero dictum nunc, vitae imperdiet est massa eget massa.
    				</p>
    
    				<h3>
    					<span>Fact #03:</span>
    					Small-Businesses create more than half of the non-farm private GDP.
    				</h3>
    				<p>
    					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quam nisi, egestas mattis commodo a, adipiscing eget erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce ultrices lacus nec leo mattis vestibulum. Donec pharetra luctus nisl et sollicitudin. Aliquam faucibus tellus at orci pretium faucibus. Duis malesuada, enim ac luctus auctor, metus libero dictum nunc, vitae imperdiet est massa eget massa.
    				</p>
    
    			<!-- .factoids --></div>
    
    		<!-- .subSection --></div>
    
    	<!-- #content, #contentWrapper --></div></div>
    
    	<hr />
    
    	<div id="firstSideBar">
    
    		<div id="sCorporation">
    			<a href="#">
    				<strong>What is an <span>S-Corporation?</span></strong>
    				(Learn more here)
    			</a>
    		</div>
    
    		<hr />
    
    		<div class="subSection">
    			<h2>Featured Article</h2>
    
    			<h3>
    				Homemaker to Business Owner:
    				<small>Pamela's Story</small>
    			</h3>
    			<p>
    				In 2006, if you would have told Pamela Wilson that some day soon she would be Founder and President of her own company she would have thought you were crazy?!
    			</p><p>
    				Yet five years later she now owns and runs a successful and profitable company which sells T-shirts to teams, groups, and organizations from not only across her home state of Ohio, but across the U.S.
    			</p><p>
    				To read more about this small-business sucess story, and to learn how Pamela went from Homemaker to Business Owner
    				<a href="#">click here</a>.
    			</p>
    		<!-- .subSection --></div>
    
    	<!-- #firstSideBar --></div>
    
    	<hr />
    
    	<div id="secondSideBar">
    
    		<div class="subSection">
    
    			<h2>Small-Biz Workshops</h2>
    
    			<h3>Current Dates</h3>
    			<ul>
    				<li>December 3, 2011</li>
    				<li>December 10, 2011</li>
    				<li>December 17, 2011</li>
    			</ul>
    
    			<h3>Upcoming Locations</h3>
    			<ul>
    				<li>Phoenix, AZ</li>
    				<li>Chandler, AZ</li>
    				<li>Albuquerque, NM</li>
    			</ul>
    
    			<p>Lorem ipsum dolor sit amet...</p>
    		<!-- .subSection --></div>
    
    		<hr />
    
    		<div id="fastFigures">
    			<span>40.2%</span>
    			U.S. Businesses owned by Women (or with majority ownership) in 2006.
    		<!-- #fastFigures --></div>
    
    	<!-- .secondSideBar --></div>
    
    	<hr />
    
    	<div id="footer">
    		<ul>
    			<li><a href="#">One</a></li>
    			<li><a href="#">Two</a></li>
    			<li><a href="#">Three</a></li>
    			<li><a href="#">Four</a></li>
    		</ul>
    	<!-- #footer --></div>
    
    <!-- #pageWrapper --></div>
    
    </body></html>
    I have time later I'll toss together the CSS I'd use with that.

  19. #19
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    My opinion time! : )

    Ok, actually seeing the code in question, from the top...

    Four stylesheets and no media types? Ouch. Way too many handshakes for little return.
    I agree, unless your site were something like my husband's where they have a base stylesheet and then each of their newspaper clients (who each have their own house style) has a unique stylesheet... doesn't look like you have something like that going on.

    I'd hide the H1 text UNDER the image using gilder-levin image replacement, that way images off you don't get the ugly box and uglier alt text.
    I've been bitten by text peeking out in all my browsers when I use G-L on anything with a smallish logo, because my default fonts are large and only IE wouldn't let it grow if I set in px.
    I also can no longer find a UA who does not consider the alt text of an image sitting in an H1 as anything other than plain h1 text... I'm moving towards alt text with two exceptions/problems:
    -With Gilder-Levin, you can style that text that sits under the image, for people with CSS on but images off (or the image just doesn't load for some reason).
    -If the logo image is small, Mozilla is the only browser who correctly allows the image element to remain inline and act inline. All other browsers will keep the image dimensions if they know it and therefore can cut off alt text. What are vendors thinking???

    For all the above I've started liking Make The Logo Bigger Cream more and more. It works better with Gilder-Levin and if I go the alt text route, browsers aren't cutting alt text off.

    H1 should be unique, doesn't need an ID unless you're planning on targeting it with javascript.
    Or using it as a destination for a skip link, agreed.

    Your use of a span to force line-break is broken on large font machines, you have that issue in a number of places where you've got dynamic content inside tiny little fixed size boxes. Both sidebars are WAY too tiny to have such large dynamic fonts inside them... I'd either fix the font size on the offending elements, or set the sidebar widths in EM.
    My fonts aren't set anywhere near as big as Crusty's, but I'm getting this in FF7/Debian:



    I can make the % fit with one font-reduction and lose half the word "corporation" with a single increase.

    If you choose to set the font size in px, I'd only do it on the large header words and still let the little English words be able to grow and wrap (to a point).

    I'd also put serious consideration into changing it to a middle column first code-order, as having the sidebar before the content is a bit annoying CSS off.
    This will help you follow good header structure where WCAG2 strongly suggests keeping heading levels in order when possible... so, your h4 at least wouldn't be right after your header, but your main content could come first. You can do this and still choose to set your sidebar widths in ems if you want.

    Not sold on the definition list either, those look more like subsection headings than terms and definitions. I think people dive for DL's way too quickly these days -- they have their place, but really that looks to me like it should be a bunch of H3 and P, no extra tags/structure needed.
    I love definition lists, and I use them all over the place (especially anywhere I might otherwise have a 2-column table... and I use them for FAQs, legal text, insurance terms (course that is terms and defintions), even price listings sometimes...), but I agree with Crusty here. A heading tag followed by any number of P's will give you the same relationship without the extra dl.

    The universal reset is also gonna bite you when/if you add forms to the page.
    He means specifically the padding: 0. Browsers will let you strip the default padding off form controls, inputs... but they don't all let you add them back in, and with the submit button for example, you'd be adding in quite a lot of code you wouldn't otherwise need to (browser-padding gives the submit the "button" look and at least in versions of Firefox the "depressed" action of hitting a button would vanish too).
    Elements with padding who you'd want to remove it from:
    maybe html if and body if someone still puts padding on them
    ol, ul, dd
    th and th if you're making very tiny tables, Firefox adds 1px padding to those cells
    form, fieldset and legend if you're actually going to style those
    p

    Nobody else I can think of who we care about has padding by default (except form controls who we want). Inlines don't usually have padding (legend is exception), and blocks like divs and headings don't either.

    But just choose whatever you're using for stripping padding just because specifically we want to protect form controls. It's the main reason Eric Meyer's insane (insane, as in *not sane*) reset is so huge: he started out trying to avoid hitting form controls with the *. Later, he also just tried to avoid using * since it's a "heavy" selector to use, parsing-wise. I don't worry about it on sites that aren't ginormous though.

    I hope more visual feedback is given to both mouseover and focus on the main menu. I like your highlight for "current page".

    I would try to avoid using the same colours for links as you do for highlighted text (however you said you weren't done, maybe links will get a different colour). Now, the facts headings and the links are blue.

    To read more about this small-business sucess story, and to learn how Pamela went from Homemaker to Business Owner click here.
    Click here is a link who only has meaning when it's within its context, which is why we try to avoid it.
    Google's search results for "click here bad" where they tell you why.

    I'd rewrite that last sentence so the important meaning of the link in the link text. Like "learn how Pamela went from homemaker to business owner" as the link text, and expand the rest of the sentence as you want.

  20. #20
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    I've been bitten by text peeking out in all my browsers when I use G-L on anything with a smallish logo, because my default fonts are large and only IE wouldn't let it grow if I set in px.
    Whereas if people turn off the default zoom behavior and use the outdated half-assed text-only resize that resizes fonts only like some sweetly retarded cousin of netscape 4, I say they get what's coming to them. I never liked that behavior, and I'm REALLY glad it's no longer the default in ANY browser, and only exists for the handful of holdouts who by now should be used to EVERY website being broken with that type of 'text-zoom' since I've never seen a single site behave in a desirable manner with it...

    As these pics from five years ago shows:

    FF's text resize at the time (nyetscape 4 style)
    http://battletech.hopto.org/images/firefux/FF_Zoom.jpg

    Opera's PROPER resize:
    http://battletech.hopto.org/images/f...Opera_Zoom.jpg

    There's a reason most browsers have adopted Opera style resize as the default (even if everyone else's implementation is half-assed junk by comparison). It was idiotic to resize PX metric text in the first place, without resizing everything else declared in PX.

  21. #21
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    My opinion time! : )
    Boy, you guys sure are dishing out the "tough love" tonight!!!


    I agree, unless your site were something like my husband's where they have a base stylesheet and then each of their newspaper clients (who each have their own house style) has a unique stylesheet... doesn't look like you have something like that going on.
    Sorry, again, organization and filing versus one style-sheet. (Especially in development.)

    Besides, I *highly* doubt that 5 sheets at 2k is any different than 1 sheet at 10k from a performance standpoint?!


    I've been bitten by text peeking out in all my browsers when I use G-L on anything with a smallish logo, because my default fonts are large and only IE wouldn't let it grow if I set in px. I also can no longer find a UA who does not consider the alt text of an image sitting in an H1 as anything other than plain h1 text... I'm moving towards alt text with two exceptions/problems:
    -With Gilder-Levin, you can style that text that sits under the image, for people with CSS on but images off (or the image just doesn't load for some reason).
    -If the logo image is small, Mozilla is the only browser who correctly allows the image element to remain inline and act inline. All other browsers will keep the image dimensions if they know it and therefore can cut off alt text. What are vendors thinking???

    For all the above I've started liking Make The Logo Bigger Cream more and more. It works better with Gilder-Levin and if I go the alt text route, browsers aren't cutting alt text off.
    So I'm not getting why what I have is so bad. (It *did* come from you, Stomme...) And not sure what better alternative you are suggesting?!


    My fonts aren't set anywhere near as big as Crusty's, but I'm getting this in FF7/Debian:
    Again, not following you. My layout has worked fine in FF3.5 and FF8 for me.


    If you choose to set the font size in px, I'd only do it on the large header words and still let the little English words be able to grow and wrap (to a point).
    I'm using em's all the way through.


    This will help you follow good header structure where WCAG2 strongly suggests keeping heading levels in order when possible... so, your h4 at least wouldn't be right after your header, but your main content could come first. You can do this and still choose to set your sidebar widths in ems if you want.
    I don't see how changing from fixed-width Left & Right Columns using pixels to em's would blow up Paul o's layout?!


    I love definition lists, and I use them all over the place (especially anywhere I might otherwise have a 2-column table... and I use them for FAQs, legal text, insurance terms (course that is terms and defintions), even price listings sometimes...), but I agree with Crusty here. A heading tag followed by any number of P's will give you the same relationship without the extra dl.
    Okay. (Think the Search Engines would like that better too?)


    He means specifically the padding: 0. Browsers will let you strip the default padding off form controls, inputs... but they don't all let you add them back in, and with the submit button for example, you'd be adding in quite a lot of code you wouldn't otherwise need to (browser-padding gives the submit the "button" look and at least in versions of Firefox the "depressed" action of hitting a button would vanish too).
    Elements with padding who you'd want to remove it from:
    maybe html if and body if someone still puts padding on them
    ol, ul, dd
    th and th if you're making very tiny tables, Firefox adds 1px padding to those cells
    form, fieldset and legend if you're actually going to style those
    p

    Nobody else I can think of who we care about has padding by default (except form controls who we want). Inlines don't usually have padding (legend is exception), and blocks like divs and headings don't either.
    Sure I won't blow up all of my work thusfar? (Sounds pretty risky to me...)


    But just choose whatever you're using for stripping padding just because specifically we want to protect form controls. It's the main reason Eric Meyer's insane (insane, as in *not sane*) reset is so huge: he started out trying to avoid hitting form controls with the *. Later, he also just tried to avoid using * since it's a "heavy" selector to use, parsing-wise. I don't worry about it on sites that aren't ginormous though.
    So I'm not getting how I should change my code...


    I hope more visual feedback is given to both mouseover and focus on the main menu.
    I used to have that when I had drop-down menus, but lost it for simplicity.


    I like your highlight for "current page".
    Why so?


    I would try to avoid using the same colours for links as you do for highlighted text (however you said you weren't done, maybe links will get a different colour). Now, the facts headings and the links are blue.
    What color would use use assuming hyperlinks stay blue?

    I was using red for Facts, but wondered if that was too "loud"?!


    Click here is a link who only has meaning when it's within its context, which is why we try to avoid it.
    Google's search results for "click here bad" where they tell you why.

    I'd rewrite that last sentence so the important meaning of the link in the link text. Like "learn how Pamela went from homemaker to business owner" as the link text, and expand the rest of the sentence as you want.
    Good point.

    Thanks for the comments.

    Am concerned about what you say about scaling and about not breaking Paul O's magnificent layout that I adapted...

    Sincerely,



    Debbie

  22. #22
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Haha, poor Deb... look, if you use versioning software, you can dare to try some stuff out and if everything totally horribly dies in a fire, you always have your older, "working" version to go back to : )

    Re multiple stylesheets:
    Won't back down on this one.

    It is *much* easier for me to debug and conceptualize my code with the different "buckets". (If I even make it to "Go Live", I'll consider cramming things into one or two style-sheets.)
    ...
    Sorry, again, organization and filing versus one style-sheet. (Especially in development.)

    Besides, I *highly* doubt that 5 sheets at 2k is any different than 1 sheet at 10k from a performance standpoint?!
    Oh, there's a performance difference, but dunno if it would matter enough for you to be bothered. Here's how it works (and it's the same reason people use image sprites instead of lots of separate little images):
    Each stylesheet is a separate request, and each request to the server has a minimum amount of latency. That is, no matter how fast your browser, your internet connection, or the site's, it always takes a certain minimum of time to have the client (browser) ask for a resource and the server to determine if it has that resource, has permissions to send it, and then to do so. Crusty usually says about 200ms; I have little idea (other than, when I measure it with wget, it's never instantaneous).

    So 5 stylesheets each has a asking-checking-sending thing from the server going on.

    All that said you are not alone in finding development a lot easier with separate stylesheets! Drupal does this all the time, as does most CMSes.

    So, keep them all separate for ease-of-development on your local copy, but when you upload to "live", smoosh them all together (in the same order you have now). If they stay in order then they'll act the same as they act now. This means, one request for styles, your site gets loaded on the user's machine a bit faster.

    Frankly the difference is more measureable when the site is huge. I looked at a site done by a company I was interviewing at and they had, I kid you not, 30 separate stylesheets, plus 5 more stylesheets that came with various jQuery plugins... and almost 30 separate javascript calls.

    Later they fixed this so I'm sure it really was that someone was stupid enough to upload the dev version... IE won't even bother loading stylesheets after the 31st or 32nd one (IE has a limit).

    Re: Gilder-Levin image replacement
    I Googled that term, but didn't find anything really helpful.

    Care to explain or provide a link to a useful tutorial?
    http://www.mezzoblue.com/tests/revis...e-replacement/
    the last one.

    Gilder-Levin image replacement is what we use to place an image on top of text. If the image doesn't load, the text is sitting right there and styled however you like. If the image does load, it sits right on top of the text and covers it. It's nice. You see he mentions it's not going to work if the image is semi-transparent. It also won't work if the image is way smaller than your text.
    Frankly, I don't see anything wrong with
    <h1><img src="debbie.png" width="whatever" height="whatever" alt="Debbie"></h1> if on the main page that is your h1. Any user agent who doesn't load the image basically gets
    <h1>Debbie</h1>
    since that's how alt text is supposed to work. However, you won't really be able to style that text for those with CSS on but images off (except in Mozilla) and Gilder-Levin lets you do that.

    Re id on the h1:
    Not true.

    My strategy is to have <h1> be my Company Name (e.g. "Debbie's Small-Business Central") on the Home Page, however, every other page will have a different <h1> which will most likely be the title of the article.
    Okay, if you have an id on this h1 because it will be styled different from all other h1s throughought the site, then yeah, it does make sense to put an id on this one. Take Crusty's words to mean "in general" because it's not uncommon for people to put id's on all their h1's.
    Another option is to have the id on something else, like the body, if the main page had plenty of things that were different.

    Re: clearfix
    Had a thread going with Paul O' and others about this a week or two ago. (Never got the answers I really wanted.)

    If you can look at my 3-column layout and tell me how to remove ClearFix and not break things I am here to listen...
    Mostly, you don't have to worry about it. Crusty hates clearfix technique because it's way more code than all the other float clearing/enclosing methods out there, and frankly that's all you care about: floats remain in their containers instead of popping out and stuff riding up all over everywhere like a bad wedgie.

    I usually tend to use a combination of haslayout for IE and overflow: hidden. Sometimes I can't afford to hide overflow so since I usually still have Haslayout triggered I do just use a version of clearfix using :after, where all I do is make no character (content: "";), make it a block and clear: both. Still much smaller than the original clearfix, which took into account IE for Mac, IE5 and 6, and went out of its way to trigger Haslayout in some hidden way. A lot of the time you already have Layout because the box has a width or something anyway.
    Paul O'B also only uses clearfix when all the other methods aren't suitable or cause more problems than they solve.
    http://stommepoes.nl/floaties.html I think I've listed most of them here, except the Yahoo one with a :before and :after and display: table and all that junk. Then they go adding "zoom:1" to stuff which to me is retarded, since we've already dealt with Haslayout somewhere.

    You're not breaking anything using clearfix, it's just a wordier way of clearing/enclosing floats. You can safely leave it.

    Re the sidebars:
    You lost me here...

    1.) Won't using em's on my page layout break Paul O's "masterpiece"?!
    They don't have to. In fact, if you decide you want to go along with Crusty's suggestion of the middle part first, you can do it pretty easily. I assume Crusty is thinking of the "Holy Grail" layout. I'll outline it further down.

    2.) I am on a MacBook with FF8 and I can hit command + until things are as big as they get and nothing breaks in my layout...
    You're zooming. So is Crusty. But Crusty is zooming on a machine whose own system fonts are ginormous.
    I don't zoom, because I hate zoom *most of the time* (if there are any images, I hate zoom, because it makes the images large and blurry which always gives me a headache. If I'm zooming in, it's because I can't read the text, so let me enlarge the text!)... (directed at browser makers who only make the retarded zoom)

    3.) "Both sidebars are WAY too tiny to have such large dynamic fonts inside them..."

    I don't understand what you mean?!
    Your sidebars are small. There is text in there that easily gets so large that it disappears on some machines (ours). If text has the ability to grow a lot and it's already pretty big, then small-width containers can be a problem. I can show a Holy-Grail version with ems where at least the boxes would also get bigger (at some point, they'd get so big the middle would be squashed, but that would be extreme text-enlarge). If you have a mobile stylesheet and mobile-first setup, then actually Opera and other browsers will, if the user zooms in too much, actually switch to the mobile stylesheet. This is one plus of zooming browsers, and is really nice to read big text on.
    (an example, open Opera and zoom the hell out of this page and you'll see Opera switch because there'll be no more images)

    Again, not following you. My layout has worked fine in FF3.5 and FF8 for me.
    When you test your site, first try to set your fonts (on your computer, somewhere there's a place you can change the "default" font setting for most of your applications) a few times bigger than what you have now. Most pages if well-built should only look a little funny, but nothing important should overlap or get cut off.

    The reason MY firefox shows stuff bigger is, Firefox is one browser who will accept the "Application Settings" fonts I set in my windowing system (this machine is running the XFCE desktop environment, which is based on Gnome, on Debian) so it'll make text larger like it does in my music-playing program Banshee, my graphical text editor gEdit, and even my Terminal application (real terminals are tiny on this thing). Now Opera and Chrome don't bother looking at my desktop settings so your page probably fits better on those (I didn't check, sorry) and then those both zoom, so everything would fit the same way except just bigger.
    So this "problem" hits only people who have a different default font setting either in their browser (chrome for example does not offer this option, which some google employees have complained about) or further up where the browser will accept those settings. Zooming can't fix this for them, but the site can accommodate these people a bit more.

    I'm concerned about these comments... I spent AGES getting my base page "template" *exactly* like it needs to be to work, and I thought that Paul O' all but blessed it...
    You could make it absolutely perfect and there would be critical feedback. We assumed you wanted it : ) But it's YOUR site, and YOU get to make all the final decisions on it. For the most part, your site certainly isn't worse than most other web pages out there, nobody's going to die from it, and you can pick and choose any improvements you want to make. If you try something and it breaks, or you don't like the effect, go back to what you had. It's not a huge deal.

    (unless you like Crusty's rewrite, in which case, you ought to be able to easily plug his into your pages and it should Just Work anyways)

    Re content-first:
    Using position: relative or something?

    Again, won't that break my page layout?
    It's too bad the site that used to show 40 examples of Holy Grail is gone, or at least, I can't find them anymore. Though there are two decent ways to do middle-first (or content-first, when the assumption is the sidebars are less important).

    What is the ROI on doing that?
    If your sidebars are considered less-important than the middle section (where most sites put the meat), getting that as first originally was a benefit to search index because long ago the spiders actually had a limit in how far into a page they'd index.
    This isn't true anymore, but it does still help insure that if a bot does for whatever reason leave a page before it has finished indexing (esp if on each page the sidebar material is the same, which for many sites it is), it will have grabbed the meatiest part first.

    More importantly it's nicer for anyone browsing linearly like in a text browser or a screen reader where the user doesn't realise they can navigate where they want without needing to tab everywhere. Sighted keyboarders don't have the luxury of a screen reader's navigation capabilities.

    Lastly, printing rocks, if you want the sidebar content to be printed out, but the meat first, you've already got the source-order you need.

    It will just please people like you and your reading style?
    Visually it should look exactly the same, which is what's cool about it (site looks how you want, but meat comes first). Also heading level order.

    It will take me to #1 of Google?
    Frankly, despite what I mentioned above about search spiders, there is a dark SEO claim that it will help rankings, but it won't. It's really more for a small segment of your human visitors and catches the off-chance that a spider only comes once and gets interrupted (or follows a link and never comes back) or whatever. It seems pages get indexed often and regularly though.

    Also, you are assuming that I want the Middle Column first...

    I sorta thought "Featured Article" was a 1st choice?
    Well, visually you're implying the small business facts is the most important. The text is biggest, it's in the Easy Center (grabs most of the first attention on the page), and visually, if you asked me "what is this page mostly about?" I'd say "small business facts, and some other business-related stuff." Likely most other people would think the same.

    If the Featured Article is the most important chunk of the page (it seems to me to be more of something between a "testimonial" and a "story where the product helps a customer"), you're telling my eyes it's very minor.

    Newspapers put the stuff they want to scream out in the middle. They put ads for the local car wash Super Saturday Sale in little side columns in small text.

    Your markup will say the Featured Article is fairly important; your CSS is telling me it isn't. So I'm a little surprised it's not taking up center stage, but you may have a reason for that...

    And if I wanted to make money by giving Small-Business Workshops, then that might be 1st?
    If that's the point of the site, say it! Start off with your most-important section (and give it Center Stage!) stating the (potential) client's problems: want to start your own business but don't know where to start? Think you're just a housewife so you could never fulfill your dream? Go for it! With my help!
    -I help people start their small-business dreams get started with informative workshops blah blah...
    (cue Pamela) See this woman? She'd lay around her house in a housecoat with rollers in her hair smoking cigarrettes and watching Matlock and Golden Girls all day while her 16 cats peed on everything. Today, she's running her own business! (link) READ PAMELA'S AWESOME SUCCESS STORY!(/link).

    That kinda thing. It seems your site wants to be a general resource for your target audience, but if it's also mostly where YOU are helping OTHERS and that's your SERVICE, make that the most important thing! Both in the markup, AND visually!

    (again, remember this is the opinion of some random person on teh interwebs)

    Re <!-- excessive comments -->
    Well smarty pants, I use NetBeans and it shades all comments gray. As such, I add a comment before all logical sections so I can scan my code for the color gray and easily read my code...
    Crusty can't stand different colours in his code, so he won't understand how it helps you so much.

    But like with the multiple stylesheets, you could still serve the deployment version without the comments.

    Re comment rendering bug:
    What is a "rendering bug"???
    http://www.adrianpelletier.com/2007/...haracters-bug/
    He links to the PositionIsEverything explanation, which at the time they thought was only IE6 but it also hits IE7 too.
    It has nothing to do with Layout.

    It has to do (partially) with how IE6 and 7 think comments are part of the DOM. Here's an example.

    If you'd like to see what it looks like, I once managed to trigger it by having hidden stuff between floated elements (div) in a form.

    Frankly, it's not something you'll see terribly often, especially as IE6 and 7 usage go down. But you should be aware of it. I avoid the problem by not having comments between floats by pretty much not having comments at all in the deployed versions.


    I'm using em's all the way through.
    Yay!

    I don't see how changing from fixed-width Left & Right Columns using pixels to em's would blow up Paul o's layout?!
    Not if the middle part can also deal with ems. They could all share the same sandbox without someone playing "cat".

    Re definition lists (and to make it very clear: I *love* definition lists, but I *don't* think they're helping you here at all and would remove them):
    Okay. (Think the Search Engines would like that better too?)
    They won't care either way, except that the dl adds a bit more code per amount of content. Which, your page isn't dense enough to make anything measureable for a spider anyway (Crusty's always going on and on about Code to Content Ratio, and I think it does matter (you always want the least amount of code to present the content you want), but I don't think it's a huge deal here).
    While a dt->dd setup is supposed to show a "term-and-definition"-type of relationship (which I believe a Q &A is, or an FAQ), even screen readers don't get any real association between the two, search engines likely nothing, and inside your dl you have heading-paragraph pairs which are giving ALL the relational information you want to show anyway.
    Screen readers and search engines know what headings are (and actually Opera users can also navigate by headings!) and here, it looks like that's all you need. I don't believe a dl is reinforcing that idea more.

    Re padding reset:
    Sure I won't blow up all of my work thusfar? (Sounds pretty risky to me...)
    It's true that if a disaster is going to hit you, it's most likely when you change a reset after a page is mostly written rather than before you write any styles, but you can always try it. Either you have ctrl-z or u to undo and/or versioning software to let you go back anyways, if it totally destroys everything.
    But you can keep the
    * {
    margin: 0;
    }
    if you want: your styles are written for it and while it's a very heavy selector, whatever. Users won't notice. The problem with forms is just the padding. And as I said, most inlines don't even have padding, and neither do heading tags (h1-6) nor divs.

    You can try copying this and see if anything explodes:
    * {margin: 0;}
    html, body, ol, ul, dd, th, td, fieldset, legend, p {padding: 0;}

    And you may not even need that much, if you don't have *tiny* tables, don't want to really style legends (mostly removing the padding from legend meant it didn't leave a little gap behind when I absolutely-positioned it offscreen, for when I'm making accessible-but-redundant legends... a gap you only see if you let the fieldset have a border anyway).


    Re current-page highlight:
    Quote Originally Posted by poes
    I like your highlight for "current page".
    Why so?
    It's really obvious, for one (I like obviousness in user-centric design), and I like the colours. I often (not always, but most of the time) have the same highlight for hover, focus, and current page. The plus with this is it also reinforces to users who mouseover/focus on the menu item that leads to the current page that they're already there (they don't get any noticeable highlight because... it's already highlighted, cause they're already there) which is considered good usability (some UX even say "take the link out" but I don't bother).

    What color would use use assuming hyperlinks stay blue?
    I dunno, I suck at combining colours. If you want to extend the girlyness of your menu you could use one of those, but you'd really want to ask one of the more artsy people around here.

    I was using red for Facts, but wondered if that was too "loud"?!
    Yeah, and also, red and black are very commonly seen on the Get Rich Quick SEO crap sites. They all have that "look" and you wouldn't want to inadvertantly imitate it. Any other dark colour but red.


    Next post, so I don't lose all this, will be center-first if you want to try it. Or Crusty will beat me to it.

  23. #23
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Two ways to do middle-first:

    Holy Grail
    Has the disadvantage of not working well in IE6 (I'm sure Paul knows the easiest way around that) and in its own way is kinda brittle.

    Basic page markup, using pseudo-code NOT real code, these would be id's or classes:
    Code:
    <header />
    <wrapper>
      <maincontent />
      <leftsidebar />
      <rightsidebar />
    </wrapper>
    <footer />
    You always have that extra wrapper in there and it's purely to make this work.
    Also, something else will have to constrain the width of the wrapper assuming you want the page to have limited width and centered in teh viewport (like an all-encompassing pagecontainer thing).
    Code:
    wrapper {
      float: left;
      width: 100%;
    }
    
    maincontent {
    haslayout trigger if you want, but NO WIDTH;
      margin: 0 widthOfSidesInEm 1em; (1em bottom margin)
    }
    (so let's say you wanted sidebars of 10em width. set 11em as the side margins of maincontent. They also don't have to be the same width; they only need to be the width of the sidebars)
    
    leftsidebar {
      position: relative; (otherwise I've noticed browsers sometimes don't let you click on the links in here)
      float: left;
      width: 10em;
      margin-left: -100%; (this is why it doesn't work well in IE6, but if the page and wrapper have a set width, then you can use a non% unit here and then IE6 is also ok with it... but IE6 doesn't seem to know what 100% means here)
    }
    
    rightsidebar {
      position: relative;
      float: left;
      width: 10em;
      margin-left: -11em; (something more than its 10em width anyway... 11em might be too much, you play with it)
    }
    
    footer {
      clear: both;
    }
    That's Holy Grail in a nutshell. Basically, be aware you're placing the sidebars on top of some sidemargin owned by maincontent. It's actually very close to absolute positioning, meaning the rest of the page can't see the sidebars. This can sometimes be a problem so you've got to be careful.

    Advantage: if you *don't* have a set page width, or have a flexible (like 80%) page width, the middle can grow with the user's screen width while the sidebars only grow when fonts are enlarged.


    Option 2, not too unlike what you have now actually:
    Nested floats
    When Magento had their rewrite to do "content-first", this is the technique they used, partially because of course as a templating system, some users would have only a left or right sidebar, or none at all.

    This also assumes all these players are in a main page container restricting width and centering the page.
    Code:
    <header />
    <wrapper>
      <maincontent />
      <leftsidebar />
    </wrapper>
    <rightsidebar />
    <footer />
    Code:
    wrapper {
      float: left;
      width: totalOfMaincontentAndLeftsidebarAndSpaceBetweenThem;
    }
    
    maincontent {
      float: right;
      width: mostOfTheWidthMinusGutters;
      margin-left: gutterWidth;
    }
    
    leftsidebar {
      float: left;
      width: restOfTheWidth;
    }
    
    rightsidebar {
      float: right;
      width: what'sLeftAfterWrapperTookItsSpace;
    }
    
    footer {
      clear: both;
    }
    Disadvantage compared to Holy Grail: you need to know all your widths at the beginning, which restricts page growth. Floats don't naturally expand, they shrink, so nobody's going to be growing here with screen width. Unless you use %s for everything.

  24. #24
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Running out of time tonight, so may have to respond to DeathShadow and Stomme tomorrow evening...

  25. #25
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Wow! Lots of interesting and insightful comments. (Trying to make me a "Jedi" in one post?!)



    Quote Originally Posted by deathshadow60 View Post
    Ok, actually seeing the code in question, from the top...

    Four stylesheets and no media types? Ouch. Way too many handshakes for little return.
    Won't back down on this one.

    It is *much* easier for me to debug and conceptualize my code with the different "buckets". (If I even make it to "Go Live", I'll consider cramming things into one or two style-sheets.)



    I'd hide the H1 text UNDER the image using gilder-levin image replacement, that way images off you don't get the ugly box and uglier alt text.
    I Googled that term, but didn't find anything really helpful.

    Care to explain or provide a link to a useful tutorial?


    H1 should be unique, doesn't need an ID unless you're planning on targeting it with javascript.
    Not true.

    My strategy is to have <h1> be my Company Name (e.g. "Debbie's Small-Business Central") on the Home Page, however, every other page will have a different <h1> which will most likely be the title of the article.

    For example...

    Page 2
    <h1>Postage Meters can Save You Money</h1>

    <h2>Some Paragraph Heading</h2>
    <p>copy here</p>
    <p>copy here</p>

    <h2>Some Paragraph Heading</h2>
    <p>copy here</p>
    <p>copy here</p>


    Page 3
    <h1>Incorporating Your Business Without an Attorney</h1>

    <h2>Some Paragraph Heading</h2>
    <p>copy here</p>
    <p>copy here</p>

    <h2>Some Paragraph Heading</h2>
    <p>copy here</p>
    <p>copy here</p>



    Clearfix, this isn't 2001.
    Had a thread going with Paul O' and others about this a week or two ago. (Never got the answers I really wanted.)

    If you can look at my 3-column layout and tell me how to remove ClearFix and not break things I am here to listen...


    Extra DIV around elements that could be styled directly.
    Okay.


    Your use of a span to force line-break is broken on large font machines, you have that issue in a number of places where you've got dynamic content inside tiny little fixed size boxes. Both sidebars are WAY too tiny to have such large dynamic fonts inside them... I'd either fix the font size on the offending elements, or set the sidebar widths in EM.
    You lost me here...

    1.) Won't using em's on my page layout break Paul O's "masterpiece"?!

    2.) I am on a MacBook with FF8 and I can hit command + until things are as big as they get and nothing breaks in my layout...

    3.) "Both sidebars are WAY too tiny to have such large dynamic fonts inside them..."

    I don't understand what you mean?!

    I'm concerned about these comments... I spent AGES getting my base page "template" *exactly* like it needs to be to work, and I thought that Paul O' all but blessed it...


    I'm not entirely sold that everything you have ID's on... well... needs ID's. The unique ones sure, but you've got a lot of them that could inherit off of body.
    Examples?


    I'd also put serious consideration into changing it to a middle column first code-order, as having the sidebar before the content is a bit annoying CSS off.
    Using position: relative or something?

    Again, won't that break my page layout?

    What is the ROI on doing that?

    It will just please people like you and your reading style?

    It will take me to #1 of Google?

    Other?

    Also, you are assuming that I want the Middle Column first...

    I sorta thought "Featured Article" was a 1st choice?

    And if I wanted to make money by giving Small-Business Workshops, then that might be 1st?


    Not sold on the definition list either, those look more like subsection headings than terms and definitions. I think people dive for DL's way too quickly these days -- they have their place, but really that looks to me like it should be a bunch of H3 and P, no extra tags/structure needed.
    I think Paul O' recommended that. Sounds like Stomme poes likes it. But I can see your point, too...


    The universal reset is also gonna bite you when/if you add forms to the page.
    I guess you address this later.


    Some of the comments are also kind of funny:
    Code:
    <!-- PAGE HEADER -->
    <div id="pageHeader">
    Really? Opening a div with the pageheader Id is the page header?
    Well smarty pants, I use NetBeans and it shades all comments gray. As such, I add a comment before all logical sections so I can scan my code for the color gray and easily read my code...


    Others though...

    Code:
    </div>
    
            <!-- Display Welcome -->
            <p id="welcome">
    could trip rendering bugs cross browser...
    What is a "rendering bug"???


    in addition to the comedy of saying it's the welcome text twice.
    See above.


    You're using nice verbose names with a indenting scheme, don't waste time on redundant comments. Only time where comments of that nature are really helpful is on closings, and so as to avoid tripping rendering bugs it's why in my code you'll often see this:
    <!-- .subSection --></div>

    instead of the more common:
    </div><!-- end .subSection -->
    I could switch to that, but tell me more about these "rendering bugs"...


    Not sure I'd keep the footer div either.... but that really hinges on what's going there for content and if you're going to have more than just the UL... Funny that, I almost never put things in lists in my own footers.
    Then what do you use?


    From what you have, my approach to the same page wouldn't be THAT different, but I'd only have Id's on the more... unique ones, my heading placement would be a bit different, and I'd probably have a wee bit different a use of DIV and P. (or should I say lack of P around some things)... and some HR to indicate changes in topic... Something like this:
    Looks nice in straight up HTML.


    I have time later I'll toss together the CSS I'd use with that.
    Would love to see how you re-work/re-style things!!

    Thanks for your feedback!

    Sincerely,


    Debbie


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •