[Pro] Website Semantics?

Off Topic
1

I just finished the development of a new Freeway Pro website using Backdraft 1.5, which I’ve linked below. I’m trying to get better at website semantics. The only thing I’m unsure of is whether or not it made sense to wrap the company name at the very top in an h1 tag.

http://www.w3.org/2003/12/semantic-extractor.html

I’m also not sure why the icons and logo are coming up in the W3C semantics extractor. Any help or advice is greatly appreciated.

-K

http://mtc.idealynx.com/

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

These are just my initial thoughts…

##Company name as h1 Heading -
Remember that Semantics isn’t about how something looks, but what
information it carries. If you could only describe this page in outline
format - with no styling whatsoever, no bold or size or positioning (other
than carriage returns and outline indents) that would be semantic.

That said, I think the tide has turned against making branding part of the
semantics - and I am in agreement. Branding has basically devolved to a
visual cue that everyone accepts but really has no semantic value. I would
not use a semantic tag like a header for the branded company name unless it
was part of the semantic thesis for the page (e.g., “Company X now sells
stuff directly online” ). You can style a p tag to look important and
brand-ish without resorting to inserting it into the semantic flow of
things.

##Social media logos -
Because the social media logos are wrapped in a heading tag (h1) the
Outliner is considering those to be part of the semantic information as
well, when they honestly convey no semantic info. In this case, the
Outliner is grasping at the alt tags. Again, this should be imo a simple p
tag styled for appearance.

##Logo as h2 heading -
I think I’ve already made the case against branding as semantics. In this
case, the Outliner is taking the Alt tag and marrying it with the rest of
the h2 tag to form a botched tagline - though I am inclined to see the
combined tagline as somewhat semantic. Perhaps removing the image from the
h2 heading and typing out the whole tagline “More Than Cake - The finest in
powdered flavors.™” would work, but it’s still just a tagline and not
really vital information for the page thesis… though I might be swayed
otherwise.

##Best place to start semantics -
I think the best place to start off semantically is the h1 heading
following the nav menu and the slider… “Powdered flavors and scents for
cakes, fondant, and icing”. Unfortunately, it’s not a sentence and requires
the reader to fill-in the blanks. I might rewrite it to say

“More Than Cake makes powdered flavors and scents for cakes, fondant, and
icing”

As the first h1 on the page, then that is what will show in SERP results -
I think that would be very satisfying.

##h2 boxes (Perfect Palate, edible Petals, Customers)
Cleverly, this combination of Alt tag and h2 text combine very well. I
would still prefer to take the images out of the headings and expand the
heading text to be similarly semantic, but this seems to be working. If the
SERP results see the outline this way, then perhaps I would accept it as
is. Although honestly I think the function of Alt tags isn’t really
semantic but accessibility.

##Contact Information
I think some of the contact information should show up in the semantics.
Now-a-days we have micro-data formats and other html5 structures to
identify this type of information. Semantically, this data is more like a
footnote - and I think we realize this on some level as it visually almost
always appears in the footers of our pages. Here is a semantic data
extraction with this type of info - http://tinyurl.com/pm2jmyn

You can also see that I’ve dealt with the tagline as a quote - which is
also picked up by the extractor.

##Author
While I have been adding my name to the author meta tag (as you did) I am
beginning to think the definition of author is more inline with “website
owner”. This is also in line with the address tag and Contact Information,
which html5 specs differentiate from just any location data. I may be
wrong, but I think the author meta is a more serious attempt to define
relationships between parties and websites - beyond simple page focus. I
haven’t quite made up my mind what TO do about this yet, so I have nothing
more to say.

##Semantic Structures
The page is mostly divided by div structures - which have no semantic
meaning. You do have a header and a nav, but no footer or other divider to
provide semantic sections. In one sense, I’m glad for the restraint.
However, it makes better sense to establish a structural order - so you can
more easily show how each part of the page relates to each other part. I
don’t think there’s any rigid rule, but it could give your page more
relevance.

##Validation
Finally, there are some html5 validation problems (3 I believe). One may be
Freeway Pro, one may be Backdraft - and one may be yours, in that a z-index
value has been applied as an inline attribute instead of a CSS style. There
are also some CSS validation issues, but those seem related to vendor-based
prefixes and I’m not sure many folk care about that so much atm. Some of
that may be outdated actions and hard to fix within FWP. It’s not a
deal-breaker for me, but you should be aware of what browsers may object to
and why.

As always, I like your work and appreciate the extra effort you put into
these projects. Nicely done :slight_smile:

Best wishes,

Ernie Simpson

On Thu, Jun 26, 2014 at 2:41 PM, RavenManiac email@hidden wrote:

I just finished the development of a new Freeway Pro website using
Backdraft 1.5, which I’ve linked below. I’m trying to get better at website
semantics. The only thing I’m unsure of is whether or not it made sense to
wrap the company name at the very top in an h1 tag.

Decommission Semantic Data Extractor

I’m also not sure why the icons and logo are coming up in the W3C
semantics extractor. Any help or advice is greatly appreciated.

-K

http://mtc.idealynx.com/

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

Here’s one way I’ve done it:

<h1><a href="/">[[*longtitle]]</a></h1>
<a class="logo" href="/" rel="nofollow">
        <img src="../resources/logo.gif" alt=“Some meaningful text" />
</a>

Here the h1 tag represents a meaningful more specific description of the page content, something beyond the meta description tag.

  • The [[*longtitle]] tag used here is CMS-specific, but you get the idea.

Following that is the branding graphic. What I like about this is that even though the branding is not wrapped in a heading it still follows a heading, which to my mind retains a sense of semantic flow. Now, depending on how you feel about the whole branding/heading thing you could leave it as-is or modify it slightly by wrapping the whole shebang in a tag which is technically proper usage http://html5doctor.com/the-header-element/, even if opinions are divided on its usefulness. I don’t think you would go far wrong either way.

Todd

That said, I think the tide has turned against making branding part of the
semantics - and I am in agreement. Branding has basically devolved to a
visual cue that everyone accepts but really has no semantic value. I would
not use a semantic tag like a header for the branded company name unless it
was part of the semantic thesis for the page (e.g., “Company X now sells
stuff directly online” ). You can style a p tag to look important and
brand-ish without resorting to inserting it into the semantic flow of
things.

The only thing I’m unsure of is whether or not it made sense to
wrap the company name at the very top in an h1 tag.

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

Nice writeup Ernie, you’ve covered the bases well.

On the topic of the errors, I did a bit of snooping and here are the problems:

The charset attribute on the link element is obsolete. Use an HTTP Content-Type header on the linked resource instead.

Walter’s Responsive CSS Menu action is using charset="utf-8" in it’s link to the CSS file that the action creates. In HTML4, this was recommended, as it informed the browser of the encoding of the stylesheet. Apparently, this has been removed in HTML5.

Attribute z-index not allowed on element nav at this point.

If you right-click on the navigation element and choose Extended, you will see in the

tab you have a z-index entry. As z-index is actually a CSS property, it should always be placed in the
tab instead.

Bad value navigation for attribute role on element ul.

The Responsive CSS Menu action adds role="navigation" to the navigation UL. While navigation is indeed a valid role, some snooping revealed that it’s not allowed on UL elements, interestingly enough.

I’ll ping Walter about this and see what can be done in regard to fixing up the action so that you don’t get the first and third problems. :slight_smile:

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

5

Walter, being superb as always, has patched the action to help the HTML to validate. Download the new version here: Responsive CSS Menu - ActionsForge

:smiley:

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

6

Wow! Very good write up gentlemen. I can’t thank you enough.

I’ll make the corrections you each have suggested and download the patched Action.

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

7

On 26 Jun 2014, 9:17 pm, The Big Erns wrote:

##Contact Information
I think some of the contact information should show up in the semantics.
Now-a-days we have micro-data formats and other html5 structures to
identify this type of information. Semantically, this data is more like a
footnote - and I think we realize this on some level as it visually almost
always appears in the footers of our pages. Here is a semantic data
extraction with this type of info - http://tinyurl.com/pm2jmyn

You can also see that I’ve dealt with the tagline as a quote - which is
also picked up by the extractor.

##Semantic Structures
The page is mostly divided by div structures - which have no semantic
meaning. You do have a header and a nav, but no footer or other divider to
provide semantic sections. In one sense, I’m glad for the restraint.
However, it makes better sense to establish a structural order - so you can
more easily show how each part of the page relates to each other part. I
don’t think there’s any rigid rule, but it could give your page more
relevance.

Ernie, I fixed some of the issues, and I’m now using HTML sections, but I’m at a loss as to how you were able to get a description and contact information to appear in your website semantics. I’m also still getting a few CSS errors, even after the action update, so I’m not sure what’s going on there.

Please see the updated site to make sure I’ve done everything properly so far.

Thanks!

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

8

Okay, I figured out the description section, which is just a META tag. The reason that threw me is I’ve never seen that much copy in the description before. :slight_smile:

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

9

Why am I getting two prototype.js errors on my home page and an invalid CSS declaration that involves this code:

.f-cf { *zoom: 1; }

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

10

On 26 Jun 2014, 9:17 pm, The Big Erns wrote:

##h2 boxes (Perfect Palate, edible Petals, Customers)
Cleverly, this combination of Alt tag and h2 text combine very well. I
would still prefer to take the images out of the headings and expand the
heading text to be similarly semantic, but this seems to be working. If the
SERP results see the outline this way, then perhaps I would accept it as
is. Although honestly I think the function of Alt tags isn’t really
semantic but accessibility.

Okay, I pulled the images out of the h2 boxes, but in doing so I had to add yet another container div so that things would lineup properly, which is why I used the first method.

Do images always need to be in container divs?

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

11

Your WowSlider is loading jQuery into the page. That’s not mixing well with your prototype scripts elsewhere. Pick one or the other, or load your WowSlider into an iframe (which firewalls it from the rest of the page).

Walter

On Jun 26, 2014, at 10:56 PM, RavenManiac wrote:

Why am I getting two prototype.js errors on my home page and an invalid CSS declaration that involves this code:

.f-cf { *zoom: 1; }

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

12

On 27 Jun 2014, 10:48 am, waltd wrote:

Your WowSlider is loading jQuery into the page. That’s not mixing well with your prototype scripts elsewhere. Pick one or the other, or load your WowSlider into an iframe (which firewalls it from the rest of the page).

Walter

I’m using Crowbar to insert the WowSlider code into the page. How does that work with an iframe?

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

13

I don’t use WowSlider myself, but my understanding is that it has an export option where all of the code is packaged so that it can be accessed through an iframe. There’s an Action to add an iframe to the page, and that should get you the rest of the way.

Walter

On Jun 27, 2014, at 7:45 AM, RavenManiac wrote:

On 27 Jun 2014, 10:48 am, waltd wrote:

Your WowSlider is loading jQuery into the page. That’s not mixing well with your prototype scripts elsewhere. Pick one or the other, or load your WowSlider into an iframe (which firewalls it from the rest of the page).

Walter

I’m using Crowbar to insert the WowSlider code into the page. How does that work with an iframe?

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

14

I don’t think this is going to work. I have everything setup, but I’m getting a gray border around the slider, even though I have frame border set to 0. Plus, the iFrame is not responsive.

Am I doing something wrong?

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

15

Probably not. Let’s see if there’s a way to get your page to work with either all jQuery, or all Prototype. If you look through your page, what are you using Prototype to do? Are you using my Scripty Actions, or the Softpress FX Actions? Those require Prototype and Scriptaculous, and unless you’re hand-coding the page, it’s genuinely difficult to get these two to play nicely with jQuery. Even if you do get them to cooperate, there’s the huge download burden that you impose on users – especially mobile users.

Walter

On Jun 27, 2014, at 8:48 AM, RavenManiac wrote:

I don’t think this is going to work. I have everything setup, but I’m getting a gray border around the slider, even though I have frame border set to 0. Plus, the iFrame is not responsive.

Am I doing something wrong?

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

16

Yep, that’s a great idea.

Upon review, I discovered that I mistakenly applied SmoothScroll to my master page, when it was only needed on one page in the site. I am still experiencing something weird though. If you leave your mouse over the menu you’ll notice that the menu text changes in weight as the slider transitions.

Also, I am having a problem with the brown bar at the top of the page. It’s the right height on every page in the site except this one: http://mtc.idealynx.com/blog/news.php

Any idea what may be causing both of these issues?

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

17

the brown top bar problem is because there is a margin-bottom: 1em applied to the img-Tag (line 147 of blog.css) which is not on the other pages.

With iFrame I can’t help cause I can’t see any reason for iFraming a WOW-Slider.

Cheers

Thomas

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

18

On 27 Jun 2014, 1:29 pm, Thomas Kimmich wrote:

the brown top bar problem is because there is a margin-bottom: 1em applied to the img-Tag (line 147 of blog.css) which is not on the other pages.

With iFrame I can’t help cause I can’t see any reason for iFraming a WOW-Slider.

Cheers

Thomas

Good catch Thomas. That code is coming from the Perch blog.css file, which is why only those pages are affected.

No worries on the WowSlider problem. Walter and I have that all worked out, and without an iFrame. :slight_smile:

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

19

This is a common thing, particularly on Mac OS, where the OS shifts the rendering from the 2D to the 3D realm whenever transparency is invoked. These two models have different approaches to anti-aliasing, causing the weight of the text to appear to change. There are a number of tricks you can use (CSS) to force the computer to choose and stick to 3D, but this comes at a cost, depending on the graphics card in use by your visitors.

Walter

On Jun 27, 2014, at 9:18 AM, RavenManiac wrote:

you’ll notice that the menu text changes in weight as the slider transitions.

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

20

Another option is to use this CSS:

html {-webkit-font-smoothing: antialiased; }

This will keep the text from flashing during the animations. However, this isn’t as ideal as one would wish. The default font-smoothing in OS X is subpixel-antialiased which employs the the three small subpixels inside each pixel (red, green, and blue) to make the text smoother and sharper looking.

On the other hand, antialiased simply uses grayscale whole pixels (by lighting all three subpixels equally). Text will not be as sharp or as legible.

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options