Thread

Hello folks,
Just curious if you would mind sharing your thoughts or preferences.
Personally I try to match logical meaning to the replaced so that ‘no-css/no-images’ scenarios of covered in its true representations. (for the most past using Shea technique).
Logic I thought it was fair:
h1 - company name
h2 - slogan
h3 - navigation or menu indicator (eg. Categories)
h2 - contextual heading
empty DIVisions without any text, just marginalized and padded for things such as empty ‘bottoms’ of the UL lists holding decorative images.
In some simple form of:

<div id="container">
        <h1 id="logo"><span></span>Company Name</h1>
        <h2 id="slogan"><span></span>Company Slogan</h2>
        <div id="top_menu">
            UL list
          </div>
    <div id="left_column_floated">
        <h3 id="side_menu_top"><span></span>Menu-Categories</h3>
            UL list
        <div class="side_menu_bottom">
        </div>
    </div>
    <div id="content">
        <h2 class="titles">Titles of entries / Contextual Headings</h2>
            
                Lorem Ipsum….
            
    </div>
</div>

Are any of these “evil deeds”?
What are you using so that your ‘naked’ pages remain with good HTML structure and yet remain with good SEO?
Thanks for your thoughts!

This is something that I’ve been doing for the past month or so and I really like it.  I don’t seen any “evil deeds” 😊.

Thanks MeanStudios,
Sometimes css seems like a book without a last page 😊.
I was going though an article although quite old still holds a conflict opinions today.
Nice to know I am not alone in my new path of experiments.
The only problem is re-positioning of the H elements gets little tricky (don’t like seeing negative margins) and naturally IE there…

Thank you.

First off let me say thank you for sending me over to MezzoBlue. It had been awhile and the design has been changed. What a beautiful site.

Now to your question… I don’t see anything wrong with what you are doing other than the div for the menu bottom. There should be some other way of doing that but if not then it is a pretty tame infraction. Typically I try and stay away from adding divs that are not for anything other than images but there are times where I too break the rules. Especially in the case of rounded corners or additional styling to the box surrounding the content. In those instances though I usually try and wrap the content with the extra div. Not that it makes a big difference but it is just my way of handling things. For instance:

<div class="somecoolclassnamehere">
<div>
<div>
<div>
<h3>Some Title</h3>
<p>Lorem Ipsum and all that Jazz<br />
</div><br />
</div><br />
</div><br />
</div>

Using CSS to put the rounded corner on the container box is quite easy with this method…

Anyway, I am tired from a late night coding session and half of this is probably not making sense so I wil stop now 😉

Hi MarcusNeto,
It makes perfect sense. 😊
The example above of empty div was sort of ‘on purpose’ (usually I would wrap the UL into div and then us div’s padding with image bottom no-repeat to produce the ‘bottom of the list’).
Rounded edges are perfect example of these empty divs…especially on fluid/flex designs.

I just hate to have to an image sit in HTML (when stripped of CSS) whose value is strictly decorative and then image replacement makes no sense…what to use for text and not harm SEO? “Cool image of cars here”...but really that is all it is 😊.

It seems that my patterns are as above then followed by ‘almost there’ stage where I look at the page in IE and it makes me wonder(read *&^%#$@! IE)
“what did I do wrong?”
“have I gone overboard with negative margins and funky placements of core HTML objects?”
“maybe my css skills just suck?”
“good old tables I miss you now that is single AM hour”
“go read what gurus are using…”
“...maybe my css skills just suck?”
“maybe IE is just an acronym that will go away when I wake up tomorrow?
“talk to other designers?”
....
And here we are 😊

As always, thanks for your thoughts!

Logic I thought it was fair:
h1 - company name
h2 - slogan
h3 - navigation or menu indicator (eg. Categories)
h2 - contextual heading

For the SEO part of your question - the title tag is very important as well as the h1 but I would not use the structure you are suggesting as the page context appears to be less important than the company name - though in a few cases this might be the correct strategy to follow if you are only interested in brand building.

I often use the content title and the site name in the title tag -

<title>{title} - A world of nonsense at example.com </title>

Then I make the contextual heading (content title) the h1. The tie up between the title tag and the h1 lets the search engine know what the pages content is about.

If the slogan is going to appear on every page alongside the logo I would just wrap it in a strong tag - that gives emphasis.

Thanks Simon,
Great point, I keep forgetting that Heading tags are more and more under control of content writers (especially with CMS) rather then designers.

If the slogan is going to appear on every page alongside the logo I would just wrap it in a strong tag - that gives emphasis

I have seen a few people use this > something I fail to remember, thank you!

Hey no problem!
This is how I would do the slogan using a global variable:

<strong id="slogan">{slogan}</strong>

You can then style the slogan how you like, using css - #slogan, including image replacement. And if at some point in the future the client realises that their slogan could be improved you have instant access to change it in one place for the whole site.

Thanks Simon,
{slogan}= actually how I did it on EE side 😉 global var.
I love embeds & global vars!
Thanks again for pointing out <strong></strong>.