[Pro] Image Replacement

I’m trying to improve the semantics of this website by using the ImageReplacement action for the company logo.

When CSS is disabled in the browser, the logo appears at the bottom of the page. This is probably due to the fact that the logo is a layered element. I’m planning on changing this to an inline element and using the Z-index so the logo overlaps the blue rule as it’s currently shown. However, I’m unsure of the next steps.

What’s the best way to accomplish this?

I think Image Replacement only works with a Graphic Item, but I’m not sure how to position the graphic item both horizontally and vertically. I’m thinking I would either need to use the extended option or place the graphic item within an HTML item for positioning purposes.

Any help is much appreciated.


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

If you use z-index to alter the layering order, remember that in the
absence of styles items will revert to their natural or non-styled order.
Semantic order is not necessarily layer order (z-index is CSS, therefore
style only). This is why you want to establish an outline order of your
main elements prior to creating your layout.

I think it’s important to stress that the order which items appear in the
HTML output code IS their semantic order. Headers need to be generated
before the content they announce, and so forth. How you use CSS to present
these items visually is another matter entirely.

For example, I might outline my page like this:

Header element—
h1 page topic, summary and site branding.
Nav element—
site navigation.
Article element—
h1 article topic, subheds and all discrete page content which is
part of this topic.
Footer element—
Additional or follow-up site content, like legalese or general
contact info.

There are other elements you can contribute to this structure, but this is
good semantic construction. Freeway Pro’s Site/Page panel is the best way
to assure yourself of this as it naturally reflects the html output order.


Ernie Simpson


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

Very good points. Thanks Ernie.

For the most part, this page is ordered the way I want. Obviously, some elements create challenges, such as the my use of the Carousel.

By changing the logo to an inline element that should help with the semantic hierarchy. The problem here is I want to maintain the established design with the descending “g” dropping down over the blue rule and part of the Carousel.

What’s the best way to accomplish that?


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

Hi Kelly,

not sure, but probably the following episode could show you a way:

http://www.kimmich-dm.de/wordpress/?p=880

The “one DIV below concept” with minus positioning should allow you to let the “g” overlap. Just a thought.

Cheers

Thomas


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

On 16 Dec 2013, 9:24 pm, Thomas Kimmich wrote:

Hi Kelly,

not sure, but probably the following episode could show you a way:

http://www.kimmich-dm.de/wordpress/?p=880

The “one DIV below concept” with minus positioning should allow you to let the “g” overlap. Just a thought.

Cheers

Thomas

Awesome. I’ll check it out. Thanks Thomas.


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

If I were you (and I am, you’re just not aware of it) I’d consider leaving
this one alone. The time for creating semantic value in this project is
long gone… and I don’t think you appreciate your investment in the visual
nature of this design… you still seem overly protective of it.

The best time for “semantic design” comes before you commit to the visual
design – when the content is still being written (or edited). Here, we’re
discussing how to wedge semantic-ness on as an afterthought.

===

Now that some time has passed since starting this reply, a few ideas have
inserted themselves into my head… so let’s look at how we might improve the
semantic structure of this page anyway. This is the current semantic
outline of this page - http://tinyurl.com/mkal76u

Your Community Cemetery

There is a tendency in our western advertising culture to convert our
language into compact sentence fragments. While we’ll eventually all talk
that way, I would advise trying to avoid it for the sake of semantics. So
let’s convert this to an actual sentence…

This is Your Community Cemetery

Now this is better phrasing. However, “this” is still an undefined
assumption that branding marketers would want to avoid, so specifically…

Williamsburg Memorial Park is Your Community Cemetery

Now that is a nice descriptive hedline. It’s a good way to start this page,
I think - at this point I’d hold any plans to add a semantic tag to the
logo and examine the content below the hedline which might suggest some
semantic improvements. For example, the content portion ends with a kind of
signature – the client name and phone number, with a wonderfully semantic
tagline…

Williamsburg Memorial Park
Dedicated to the preservation of cherished memories.
XXX-XXX-XXXX

It makes little sense to hide that juicy bit in a signature - it should
play a prominent role in the content outline. So let’s move it up between
the paragraphs as an h2 hedline - and then craft it to read a little more
naturally…

We are dedicated to the preservation of cherished memories

Very nice. The semantic outline is now…

Williamsburg Memorial Park is Your Community Cemetery

We are dedicated to the preservation of cherished memories

That’s not bad. How could we do better?

I remember you had some issue earlier with the slider content showing up in
search results… I don’t think that’s so bad – if we structure it right.
HTML5 introduces some new sectioning elements which I think can help.
Specifically, the header and footer elements, and the article element. But
first, let’s look at the content in the top portion.

That top portion tells a little different story than the main part of the
page… which is cool. This is what sectioning elements are for, to separate
themes. I think the slide descriptions would make marvelous subheads.

header element–
(h1) Welcome to Williamsburg Memorial Park (logo)

(h2) We are a non-denominational, community cemetery
(h2) We have 41 Acres of beautiful property set within a natural forest
(h2) We are conveniently located less than 15 minutes from Colonial
Williamsburg
(h2) We have fully customizable private and family estate options
(h2) With prices starting as low as $995, we fit any family’s budget
nav element–
end header element–

All those “we’s” sound a bit annoying, so I would spend a little time
rewording them… but not today. Wrapping the top and slider content in a
header element makes a nice semantic presentation. Following this reworked
top of the page with the middle content in an article element works well.
All is left is the footer element.

It may seem surprising, but there is lot of semantic goodness in the
content at the bottom. Each column has visual hedlines - why not make them
actual heds? The first two columns contain location and contact
information, so we should wrap them in an html address element to identify
the content as semantic. The other two columns would make nice lists -
semantic in my book though they don’t really make the outline.

footer element–

address element–

(h3) Street Address
(h3) Contact Info
end address element–
(h3) Property Options
html list
(h3) Helpful Forms
html list
end footer element–

Put it all together and you have a much richer semantic structure for this
page.

header element–
(h1) Welcome to Williamsburg Memorial Park (logo)

(h2) We are a non-denominational, community cemetery
(h2) We have 41 Acres of beautiful property set within a natural forest
(h2) We are conveniently located less than 15 minutes from Colonial
Williamsburg
(h2) We have fully customizable private and family estate options
(h2) With prices starting as low as $995, we fit any family’s budget
nav element–
end header element–

article element–
(h1) Williamsburg Memorial Park is Your Community Cemetery

(h2) We are dedicated to the preservation of cherished memories
end article element–

footer element–

address element–

(h3) Street Address
(h3) Contact Info
end address element–
(h3) Property Options
html list
(h3) Helpful Forms
html list
end footer element–

Compare that to what the W3C Semantic Data Extractor gets from my Bradford
example page - http://tinyurl.com/q66kjfo

Remember, each page is different - or at least should be. Your goal should
be to structure only the semantic content that already exists - there is no
benefit to inventing or exaggerating content.


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

Wow! Thanks Ernie. I really appreciate all of the time you put into this. And thanks for the workflow tips. That’ll certainly come in handy.

BTW, I wish you were me because I’d be developing much better websites. Plus, I’d have a really cool beard. LOL


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