<marquee> alternative

[Marc Bradshaw]

A client has asked for, effectively, a <marquee> at the top of each page
to draw attention to promotion of his latest offers.

My view is that these look somewhat old-fashioned and that the tag was
obviously depreciated for a reason. So as, a compromise, I put in a
<ul> and wrote javascript to fade the <li>s in and out, meaning that if
javascript wasn't available the <ul> would display as a plain list, and
there was also a button to change it back to a plain list.

The customer didn't like this and still wants having scrolling text of
some sort. Does anyone have any thoughts or suggestions, or can point
me towards some pre-written scripts that might be what I'm looking for?

 

[Jukka K. Korpela]

A client has asked for, effectively, a <marquee> at the top of each
page to draw attention to promotion of his latest offers.

Good for his competitors.

My view is that these look somewhat old-fashioned

Right, and they don't work the intended way. People just don't wait to see
what's coming. People may even actively ignore all animation that looks like
advertisement.

and that the tag was
obviously depreciated for a reason.

It was never part of any HTML spec. "Deprecated" means, in HTML parlance, a
feature that browsers are required to support but authors are discouraged
from using.

So as, a compromise, I put in a
<ul> and wrote javascript to fade the <li>s in and out, meaning that
if javascript wasn't available the <ul> would display as a plain
list, and there was also a button to change it back to a plain list.

Why? It's the same bad idea implemented in a clumsier and less reliable
manner.

The customer didn't like this and still wants having scrolling text of
some sort.

Your call. Do it if you just want to get paid. If you respect the customer,
tell him why the idea is bad.

There are other methods of animation that may work reasonably well. Using
Flash probably gives maximal flexibility. Simple animation like text that
gets replaced by other text could be implemented as an animated GIF or using
simple timed JavaScript. But the customer should first decide what he really
wants. This also depends on the page as a whole.

Animated content tends to either get ignored (as I wrote) or to draw all of
the user's attention, so that nothing else on the page really matters. So
animation could make sense e.g. on an error message page where it highlights
a button for getting online help with the error situation.

 

[cwdjrxyz]

A client has asked for, effectively, a <marquee> at the top of each page
to draw attention to promotion of his latest offers.

My view is that these look somewhat old-fashioned and that the tag was
obviously depreciated for a reason.  So as, a compromise, I put in a
<ul> and wrote javascript to fade the <li>s in and out, meaning that if
javascript wasn't available the <ul> would display as a plain list, and
there was also a button to change it back to a plain list.

The customer didn't like this and still wants having scrolling text of
some sort.  Does anyone have any thoughts or suggestions, or can point
me towards some pre-written scripts that might be what I'm looking for?

Marquee comes from the browser war era when IE had marquee and
Netscape had flashing text. Although not part of modern W3C html,
marquee will still be displayed on many browsers now in use.

What you do to please your client is your call. However if you will go
to http://www.dynamicdrive.com/dynamicindex2/index.html you will find
a glut of free scripts for all sorts of moving text. There are demos
of most and what browsers the scripts work on is pointed out. Using
the scripts is mainly a matter of copy and paste. You could show some
of these effects that strike your fancy to your client and let him or
her choose one with little effort. A few still turn script off, so you
might want to include a no script path if that is of concern.

 

[Gus Richter]

It was never part of any HTML spec.

But it will be part of HTML5.
All browsers of today support marquee and have supported it for quite
some time already. If I recall correctly, Mozilla decided to support it
a few years back because of the popularity of this IE proprietary
element in the Chinese market.

 

[dorayme]

But it will be part of HTML5.
All browsers of today support marquee and have supported it for quite
some time already. If I recall correctly, Mozilla decided to support it
a few years back because of the popularity of this IE proprietary
element in the Chinese market.

The validator at validator.w3.org, when including the marquee element
marks the doc invalid and remarks:

"by using vendor proprietary extensions such as "<spacer>" or
"<marquee>" (this is usually fixed by using CSS to achieve the desired
effect instead)".

In the OP's case, not so simple to just use "CSS". OP might be able to
persuade client to use the loop attribute to limit the annoyance? Use an
odd number if you want the text to end up on the left!

I suggest as a controlled annoying:

<marquee behavior="alternate" loop="3">This is some text</marquee>

 

[rf]

A client has asked for, effectively, a <marquee> at the top of each
page to draw attention to promotion of his latest offers.

Tell the client no.

My view is that these look somewhat old-fashioned and that the tag was
obviously depreciated for a reason.

Because it's a stupid thing to do. But it was not _deprecated_, it was never
part of any HTML specification.

So as, a compromise, I put in a
<ul> and wrote javascript to fade the <li>s in and out, meaning that
if javascript wasn't available the <ul> would display as a plain
list, and there was also a button to change it back to a plain list.

Equally bad.

The customer didn't like this and still wants having scrolling text of
some sort.

Fortunately I can choose my clients. If one of them wants, for example, a
marquee I tell them no, and then attempt to educate them in the error or
their ways.

If they insist I suggest they might be happier with some *other* developer.

Does anyone have any thoughts or suggestions, or can point
me towards some pre-written scripts that might be what I'm looking
for?

http://lmgtfy.com/?q=marquee+scripts

Pick any one of the quarter of a million hits. Then pick one of the one
point eight million hits for

http://lmgtfy.com/?q=why+marquee+is+bad

 

[Marc Bradshaw]

Thanks for everyone's comments.

The behaviour is in CSS3, so presumably the idea is the default
stylesheet will just set the new properties on marquee elements.

But it is at least defined properly in CSS3. IE marquee is totally
weird. Inline but the full width of the container by default (and other
strange things no-one understands).

Yeah, I found this: http://www.w3.org/TR/css3-marquee/

It seems it can be applied to static text as a presentation format.
Does anyone know how widely this is supported yet?

I also found this which is a javascript (jQuery) script which makes the
<marquee> tag scroll more smoothly and slower. But I suppose at the end
of the day it is still scrolling text.

http://remysharp.com/2008/09/10/the-silky-smooth-marquee/

At the end of the day, I understand my client's reasons - he wants to
draw attention to this text more so than the rest of his page. Thus
being distracting is his objective. I just don't want to cause
accessibility issues and I very rarely put live a page which doesn't
validate, and I'd hate to ignore the HTML specifications for the sake of
some scrolling text.

 

[Marc Bradshaw]

Hi cwdjrxyz,

What you do to please your client is your call. However if you will go
to http://www.dynamicdrive.com/dynamicindex2/index.html you will find
a glut of free scripts for all sorts of moving text. There are demos
of most and what browsers the scripts work on is pointed out. Using
the scripts is mainly a matter of copy and paste. You could show some
of these effects that strike your fancy to your client and let him or
her choose one with little effort. A few still turn script off, so you
might want to include a no script path if that is of concern.

Yeah, I saw that. The problem is that most of those scripts are ancient
- the newest I found was 2002 - and none of them use semantic mark-up.
Some even rely on the scrolling text content being in the javascript!

If I'm going to give him a marquee of some sort, I'd at least like it to
follow basic accessibility good practice so that if they have javascript
disabled the existing HTML will work just fine, thus my <ul>.

 

[Andy Dingley]

A client has asked for, effectively, a <marquee> at the top of each page
to draw attention to promotion of his latest offers.

Fair enough. Just make sure that you present it in a way that's not
especially annoying, is just about readable, and most importantly that
you address accessibility in general by only using it to show content
that's already available by other means.

I wouldn't mark it up with <marquee>, for two reasons:

* The default presentation of <marquee> is generally poor (over-
irritating), even when it is supported. You ought to implement marquee-
like behaviour with your own JavaScript (or Flash, or even JavaFX) and
so there's no _need_ to use <marquee> as content markup.

* <marquee> is purely presentational markup, no describing the
structure of the content. So even notwithstanding the question of
whether it's permitted under your chosen HTML doctype, it's not a
great piece of markup anyway. As you've seemingly already done, a list
is a good way to markup the content (wrap it up with display: none; to
hide it generally, after all you're only duplicating existing
accessible content).

The rest is JavaScript frog-work, and a bit of design creativity to
keep your client happy (fixated on one idea, looks at the same page
too often) whilst retaining good usability for your site visitors
(never been to the site before, have a goal-centred task in mind,
don't want to be distracted by rubbish in the meantime)

You might find looking at the BBS News site and their ticker
interesting.

If your marquee is a series of clickable links (and I can't think of a
justification for one that isn't) then make sure they're easily
clickable, without having to play a game of "whack-a-mole" to select
the link. Maybe slow them, stop them, or even skip backwards slightly
when you hover the mouse over. The BBC's marquee looks nice, but it's
hard to select for navigation.

 

[cwdjrxyz]

Hi cwdjrxyz,


Yeah, I saw that.  The problem is that most of those scripts are ancient
- the newest I found was 2002 - and none of them use semantic mark-up.
Some even rely on the scrolling text content being in the javascript!

If you think some of these scripts are ancient, you should have seen
some of them just a few years ago when they had to use 3 paths to
support IE4 (document.all), NN4 (layers), and (getElementBy ID) for
more modern browsers. In many cases these scripts have been changed to
support modern browsers, and often support for such as IE4 and NN4 has
been dropped resulting in much shorter scripts. Usually just a few
minor changes will bring the script up to modern standards. If you
write in any version of xhtml, scripts may contain code that causes
xml errors and hence throw errors in the xhtml validation. The most
easy way to overcome this is to use the script as an external script.
Also you now use <script type="text/javascript">. Some of the older
scripts may use language only instead of this, and that throws an
error on html validation. Other than that, the nuts and bolts of
script have not changed so much over several years. Scripts that use
evaluate( ) a lot often are quite old, but still often work. The
people over at the javascript groups are more than happy to point out
what is wrong with depending on evaluate in most cases. I see nothing
wrong with having the scrolling text content within the script. You
just have to have some text message in the noscript path in case
script is turned off, and that message might not be the same as for
the scrolling text.

 

[Adrienne Boswell]

How is it any more presentational than, say, <h1> or <p>?

H1 is a heading, P is a paragraph, they are structural elements.

Marquee, like B, I and U are purely presentational.

 

[Jonathan N. Little]

[...]
* <marquee> is purely presentational markup, no describing the
structure of the content.
How is it any more presentational than, say, <h1> or <p>?

H1 is a heading, P is a paragraph, they are structural elements.

Marquee, like B, I and U are purely presentational.

But it's not like B, I or U. The word "marquee" does not describe
anything to do with text presentation. It means a tent, but also the
awning or canopy in front of a hotel, and by extension any kind of
banner designed to attract attention. It is similar to a heading only
grander.

No, <h1> & <p> as Adrienne states have a particular function, H1 is a
heading, P is a paragraph they may have different styling but their
function to the document remains the same.

Marquee describes a particular "look" or style where the text ticks
across the screen. It may be a heading, but it may not. A marquee will
not be a marquee if in its appearance is does not tick across like a
marquee. In contrast a heading will still be a heading even if it does
not have the default "look" of being bolder, bigger, and with and
vertical margin...

 

[Andy Dingley]

How is it any more presentational than, say, <h1> or <p>?

Because <h1> is a heading and is (by and large) used for such a
purpose fairly consistently.

<marquee> is used for scrolling tickers, where the fundamental
defining characteristic is sideways scrolling. Although you construct
a logically plausible interpretation as, "by extension any kind of
banner designed to attract attention. It is similar to a heading only
grander. " this isn't widely followed.

Take http://news.bbc.co.uk/ as an example

There area huge "BBC" and "News" banners that are comparable to a
couple of <h1>, but are used as branding rather than heading. You
might not even have noticed they were there any more, they're so
familiarly ignored.

The lead news story is highlighted with the next-largest heading on
the page, but this is only slightly bigger than the headings for other
stories. There's no strong "MAIN STORY" theme here, it's a newspaper
approach like the old Times and the group of stories is given broadly
similar precedence. The related magazine http://news.bbc.co.uk/1/hi/magazine/default.stm
highlights its single main story slightly more heavily.

So there's a pretty serious site with a lot of effort and re-work gone
into it. Their overall banner is a worthless sacrifice to the fetishes
of brand-marketing, their changing headings are a fairly large number
of very similar weighting. There just isn't "one big headline" like a
Gotcha! or a Freddy Starr Ate My Hamster.

Now to the marquee. It does, as you suggest, try to grab attention.
However it's also scrolling through a number of equal-weight stories,
which frequently aren't the top-level main story. Its primary function
is to re-use screen space. Web pages don't need single eye catchers
to draw you to the page, you're already there. What they need is ways
to fit a quart into a pint pot, marquee does this by time-slicing
their screen area.

 

[Jonathan N. Little]

No it doesn't (any more than h1 describes a particular look or style
involving a large or bold font).

It does with respect to MS when they made the element up.

http://msdn.microsoft.com/en-us/library/ms535851(VS.85).aspx
marquee Object

 

[Neredbojias]

Gazing into my crystal ball I observed Ben C <[email protected]>
writing in
[...]
* <marquee> is purely presentational markup, no describing the
structure of the content.
How is it any more presentational than, say, <h1> or <p>?

H1 is a heading, P is a paragraph, they are structural elements.

Marquee, like B, I and U are purely presentational.

But it's not like B, I or U. The word "marquee" does not describe
anything to do with text presentation. It means a tent, but also
the awning or canopy in front of a hotel, and by extension any kind
of banner designed to attract attention. It is similar to a heading
only grander.

No, <h1> & <p> as Adrienne states have a particular function, H1 is
a heading, P is a paragraph they may have different styling but
their function to the document remains the same.

Marquee describes a particular "look" or style where the text ticks
across the screen.

No it doesn't (any more than h1 describes a particular look or style
involving a large or bold font).

It may be a heading, but it may not. A marquee will not be a marquee
if in its appearance is does not tick across like a marquee.

Why couldn't it be surrounded by animated fireworks, for example, or
indicated by moving Monty-Python-style cartoon fingers?

If you consider "marquee" similar to "banner" or "logo", there _is_ a
structural aspect to it although not the "classical" type such as "p",
"ul", etc. But this brings up the point wherein there can be (and
often is) a commingling between so-called structure and presentational
devices. As recently suggested, a heading is a heading is a heading,
but what heading is not somehow emphasized (even if only by segregated
placement) to indicate its status? To me, the current fad stressing
"layout" vs. "presentation" is really a bit on the ludicrous side
because correct implimentation of overall page markup does not rely on
one or the other alone. Some would say a style-less page is "correct"
if the "structural" html is valid, well-formed, and so forth, but is
it? The answer is no, not really, and presentation itself is
structural in a certain sense.

 

[Neredbojias]

Personally I hate marquees. If I cannot hide or disable it, I move
on to
another site. The same for blinking GIFs or other image types. And
Flash.
I have noticed a number of sites implement a marquee of some sort;
news
sites seem to do this regularly. In every case so far, the marquee
has disappeared within three months. The implication is that marquess
are hugely unpopular.

Agreed, but should they be banned from (valid) html (or css) like
"target" was? Personally, I think the banning of "target" from
non-frames environments was one of the biggest of the w3c's many
mistakes.

 

[dorayme]

A marquee will
not be a marquee if in its appearance is does not tick across like a
marquee. In contrast a heading will still be a heading even if it does
not have the default "look" of being bolder, bigger, and with and
vertical margin...

At least this argument is no good. Is a heading that does not look like
a heading, sound like a heading, feel like a heading or smell like one,
still nevertheless a heading? I don't think so!

What is usefully to be described as presentational and what is not
depends on how deep browsers implement cross medium representation.
Meaning that if a blind man hears nothing at all or just "New York has
just been blown up by North Korea" in an ordinary voice used for body
sentences from a marquee marked up bit of text, it is fair to describe
it as having no or little of anything semantic cross medium, a limited
limitation.

However, if browsers expressed marquee text in a sort of circus master
of ceremonies voice, louder than the loudest H1, or even equally
annoyingly repeatedly, - "...Hilary admits to not really forgiving
Bill...Hilary admits to not really forgiving Bill...Hilary admits to not
really forgiving Bill" - then there is some sort of justice to what Ben
has said.

 

[Jonathan N. Little]

At least this argument is no good. Is a heading that does not look like
a heading, sound like a heading, feel like a heading or smell like one,
still nevertheless a heading? I don't think so!

Sure. How you your define a heading? Here we have plain text:

Widgets

What will follow is an extended description about widgets....


Doodads

Also an extended amount of text describing what a doodad is. I can be
quite lengthy comprising many sentences....

Am I really a marquee now in plain text?

"Widgets" and "Doodads" can clearly serve as headings in plain text with
no definitive styling. They are structured as headings. Can you say the
same for the marquee line? And I am defining "marquee" in the manor the
creator, Microsoft, defines the marquee element.

 

[cwdjrxyz]

At least this argument is no good. Is a heading that does not look like
a heading, sound like a heading, feel like a heading or smell like one,
still nevertheless a heading? I don't think so!

What is usefully to be described as presentational and what is not
depends on how deep browsers implement cross medium representation.
Meaning that if a blind man hears nothing at all or just "New York has
just been blown up by North Korea" in an ordinary voice used for body
sentences from a marquee marked up bit of text, it is fair to describe
it as having no or little of anything semantic cross medium, a limited
limitation.

However, if browsers expressed marquee text in a sort of circus master
of ceremonies voice, louder than the loudest H1, or even equally
annoyingly repeatedly, - "...Hilary admits to not really forgiving
Bill...Hilary admits to not really forgiving Bill...Hilary admits to not
really forgiving Bill" - then there is some sort of justice to what Ben
has said.

I go to my bank web site quite often to check my balance, etc. I
seldom bother to read anything else, since it seldom changes. The site
is a rather proper plain design. However very rarely a huge marquee in
large red letters scrolls across the page. This does get one's notice.
You might get such a marquee concerning some problem with the site
that people need to know about at once. Of course you could get
attention to a message by using a temporary page to go to when you
sign in with an auto redirect to the usual page after some selected
time or when the user clicks a button. Or you could use bright
flashing text, etc. to get attention.The important point is that the
marquee or other device used be out of character with the page and
nearly impossible to avoid. On the other hand, if one has page that is
usually filled with marquees, flashing text, elaborate moving flash
ads, etc., a special notice marquee might easily go unnoticed by
repeat users of the page. In that case you might have to go to extreme
means to attract attention to a very important special message such as
by using a script "marquee" that allows images as well as text and
using scrolling nudes as well as text . A siren recording added
also might help .

 

[dorayme]

Sure. How you your define a heading? Here we have plain text:

Widgets

What will follow is an extended description about widgets....

Notice how your single line "Widgets" is on a single line, on its own.
That is *not* what I call 'not looking or smelling or sounding like a
heading'.