BURNINGBIRD
a node at the edge  


July 02, 2002
Up, Down, Charm, Strange, Top, Bottom

The markup folks are going to be the weblogging death of me yet. It's a variation on the classic differences between the back-end or server-side developer and the front-end designer/developer.

All front-end folks know that we back-end folks are slobs when it comes to proper markup, clean web pages, and so on. And all back-end folks know that the front-end people are anal (in the nicest possible way of course). And for a client, this is the perfect combination - the back-end folks should focus on their area of expertise - back-end development - and leave the front-end to the experts.

Of course, when a back-end developer has a weblog, then all you see is sloppy markup, improper use of tags, and so on. I know. Bad Me.

(Still, I know of a front-end person or two who has needed my help for back-end issues, but we won't quibble over that, will we?)

I know I'm a markup slob, a hopeless case if there was one. However, in recent discussions, I'm left unsure if what I'm doing is "wrong" from a technical viewpoint, or only "wrong" from an esthetic viewpoint. In particular, I've been reading Dorothea's and Jonathon's weblogs about CSS style sheets, markup, use of bold for hypertext links and so on.

Am I wrong in my use of markup? Or is this a case of pure esthetic differences? Am I a slob? Or is Jonathon, as an example, being an effete snob (saying this in the nicest possible way, of course)?

For instance, there's the sweeping statement that underline for hypertext links is ugly. Well, ugly or not, the underline has been used to designate hypertext links since the dawn of web time. And underline is still used, by default, to mark links.

In some of my web sites, I use bold to mark hypertext links; in others, such as this weblog, I use underline within the content, bold in the sidebars. I will admit the bold un-underlined hypertext links within the content is elegant and tasteful. However, though ugly, there's no accessibility issue or problem with using underlines within the posting, is there?

(Side question: what's with the blue/gray in all the weblogs lately? Is this a civil war thing?)

Today, another issue arose about emphasis and the strong, em, b, and i elements. Jonathon asked the question of Dorothea about the proper use of the <strong>, <em>, <b>, <i> tags. In response, Dorothea provided a very, very nice discussion of the history, purpose, use of these particular tags.

From Dorothea's response, I believe I am using the strong element correctly. I use it when I want to bold something - when I want to make it more noticeable, to stand out, to strongly emphasis a point, a line, a statement. I tend to use the em element to emphasis something that I don't want to stand out if a person does a quick sweep of the eye down the page.

However, I use the strong element specifically because it is bold, and the em element because it does result in italic text. I never use <b> or <i>. Though the result is correct, is my underlying behavior incorrect? What happens in this mix when a blind person reads the page?

Sigh. At this point, I am faced with two choices: I can spend all my time fretting on these issues; or I can work on ThreadNeedle, accept the fact that I'm a hopeless web page slob who will never have an elegant weblog page, and hope that folks like Dorothea and Jonathon will specifically let me know when I'm doing something that makes my material inaccessible, or makes it break within a browser.



Posted by Bb at July 02, 2002 01:19 PM




Comments

You're fine, BB. Don't worry about it.

There's nothing wrong with figuring out how strong your emphasis is by whether you would boldface or italicize it. Sighted folks who do a lot of writing are wired to do that.

The accessibility problems arise when everything that is bold or italic for any reason at all is marked with the same tags. Your blogpost titles, for example. They aren't strongly emphasized, even though they're visually bold, so you don't want to mark them up with strong. They're bold for another reason -- their blogpost-title-ness.

I was going to post this clarification to CavLec, but textartisan.com seems to have been knocked offline. Yay.

Posted by: Dorothea Salo on July 2, 2002 02:34 PM

Whether or not the HTML spec dictates that we ugly things, the reality is that the standards are just that: standards. As Nielsen notes repeatedly, when a design element has become standard, it is the preferred solution simply because it is the standard. Is bolding more aesthetically pleasing than underlining? Possibly. If you watch actual users actually surfing, 99 out of 100 will not automatically think to click on a bolded word, while they will know to click on an underlined word (which of course becomes a problem when you need to underline something, hence the complementary standard of a link being #0000ff. I would argue that you are coding the way the standard intended. If you want to produce visually compelling content, you might want to do a lot of assault on the standards. If your writing is the most important aspect, then as long as your design is visually comfortable for the average user and doesn't break reasonably current browsers, then you're doing everything right.

Yes, I know, using the word content is evil. Just because marketroids and clueless media have debased the word, it really does accurately describe what we all write/draw/sing/create/produce/whatever. Deal with it.

Posted by: rev on July 2, 2002 02:43 PM

Doh, I hadn't read Dorothea's post yet. Ensuring accessibility is important, and if you do code to the standards you should be alright. One of these days I'm going to get around to grabbing a screenreader for verification, however.

Posted by: rev on July 2, 2002 02:45 PM

Rev is right about links and underlining vis-a-vis usability, by the way. For me, it's a case of markup snobbishness and typography snobbishness clashing badly. *grin* I compromise by bolding all links and underlining active ones.

Posted by: Dorothea Salo on July 2, 2002 03:05 PM

Your ponderings go to the very nature of publishing on the web in two ways-

First: What is the purpose of your website? Is it for for personal use with limited traffic, or are you trying to supply the widest possible audience with important information?

If the site is personal- hey, it's yours, do your thing. Sloppy markup will most likely be forgiven by friends and relatives who might not even know what "markup" is.

If the site is to be more universal, then your success with maximizing target acceptance will be ensured by spending time developing and continuing to use proper markup and document structure. Everybody can read (hear, absorb) what you have written when it is compliant with standards which are being implemented in browser creation (to varying degrees, but it is increasing).

Second: I mentioned the idea of document structure above. That is to use tags that have semantic symbology built in. For example heading tags, starting with h1 going down through h4 represent different levels of importance like in an outline. Sure you could start with h4 and go down to h1 because for some reason you wanted the last smallest point to be displayed largest, but then the logical structure of the flow of your ideas is working at cross-purposes to the purpose of the tags you have used, ie. the least important point is wrapped in the tag that represents the greatest importance.

This is important not only to alternative browsers like audible readers, which would be confused by the misuse of the h1 tag, but to enable you to transform (again, to varying degrees) what you have written from ASCII text into acutal data. That is, paragraphs are inside p tags, section headings progress logically from the top, h1, to the bottom of pontifical hierarchy with h4.

Such separation also makes it far easier to totally change the whole look of the site by changing your CSS without breaking things because what you say is independent of how the browser displays it.

It basically boils down to a philosophical decision.

Do you want to make it "work correctly" with the maximum flexibility, or do you just want to get pixels displayed in a manner that looks the way you want it to with the least hassle on your part?

(perhaps I should have emailed this- it turned out pretty long... I hope this space I've taken has been filled with ideas that are useful and not already old-hat)

Posted by: Roger L. Waggener on July 2, 2002 04:27 PM

BTW, Bb, your site is actually pretty clean. I'm going to go home and play with it tonight, see what I can do with it. I bet it won't take me long to reproduce it (not pixel-for-pixel, but reasonably close) sans table.

I'll let you know what I come up with, of course.

Posted by: Dorothea Salo on July 2, 2002 04:56 PM

I use the word _content_ Rev, but then, I'm contrary.

Roger, good points. The only length restriction to these comments is that if it's book length, I share royalities.

Dorothea, you are a very very kind person but please don't use your free time - unless you find this process fun, in which case, thanks!

Posted by: Bb aka Shelley aka Weblog Bosswoman on July 2, 2002 05:57 PM

I'd like to claim at least partial credit for the blue and the gray. I did it from republican motives since the default link colors on a white background so strongly resemble the red, white, and blue of the Union Jack -- an action at odds with my reputation, since effete snobs would usually be expected to support royalty.

Posted by: Jonathon Delacour on July 2, 2002 06:13 PM

True - I would have assumed your preference would be the royal purple and the elite pink.

Posted by: Bb aka Shelley aka Weblog Bosswoman on July 2, 2002 07:19 PM

I admit to being both anal and front end ... odd, you'd think it would be anal and backend, though methinks I'm being too literal...

Anal and Proud, say it loud!


hmmm...

Posted by: shar aka sharon o aka me on July 3, 2002 11:36 AM


Post a comment

Name:


Email Address:


URL:


Comments:


Remember info?