649821 - Display message when user has JavaScript disabled

Status: VERIFIED FIXED

(Websites :: webifyme.org, defect)

Description

[William Reynolds [:williamr]]

Since Webify uses JavaScript for much of its functionality, we should display a message to the user if they have JavaScript disabled. Something like:

"To best experience Webifyme, you must have JavaScript enabled in your browser." 

chowse or Matej, any suggestions on the design or copy of this message?

We could also link to a support article to show Firefox users how to enable JavaScript:
http://support.mozilla.com/kb/JavaScript

Comment 1

[Chris Howse [:chowse]]

If the user has no Javascript, does anything work? Can you look at others' work?

If nothing works, I'd suggest a prominent warning, right between the heading and the intro, almost a visual roadblock.

If some things worked, a hang-down warning might be better. Something to alert users to, but could be safely ignored if the visitor knows what they're doing.

How we react depends on who our Javascript-disabled users are: are they users who don't realize that Javascript is disabled? or are they tech-savvy users blocking JS intentionally (e.g. using NoScript)? The more likely the former, the more we want a roadblock. The more likely the latter, the less annoying we want the warning to be. Unfortunately, I have no metrics on these.

I'll attach examples of both.

Comment 2

[William Reynolds [:williamr]]

(In reply to comment #1)
> If the user has no Javascript, does anything work? Can you look at others'
> work?

jbresnik, could you comment on this? Thanks

Comment 3

[Chris Howse [:chowse]]

Attachment: No Javascript Warning (Front & Center)

Comment 4

[Chris Howse [:chowse]]

Attachment: No Javascript Warning (Top)

Comment 5

[Chris Howse [:chowse]]

(In reply to comment #1)
> How we react depends on who our Javascript-disabled users are: ...

Talked with Cheng in Support. Users with JS disabled are far more likely to be NoScript/JS-savvy users than novices who accidentally flipped a switch. In this case, a hang-down bar makes more sense. He also suggested that it might make sense to indicate WHY we're requesting JS access, e.g. "This site uses modern HTML5 features that work best with Javascript enabled".

Comment 6

[[:brez]]

Yea there's lots of options -  best is probably the <noscript> tag (added in
HTML 4.01)  - would be nice to have a designer specify exact what that looks
like..

Comment 7

[William Reynolds [:williamr]]

I think a combination of comments 3, 5 and 6 would be best.

Let's use the <noscript> tag to show the visual warning front and center with this placeholder text:

*Webify Me* uses modern HTML5 features that work best with JavaScript turned on. [How do I do that?]

*Webify Me* = bold text
"How do I do that?" links to: http://support.mozilla.com/kb/JavaScript

Matej, let us know if you have any suggestions for the message copy.

Comment 8

[Matej Novak [:matej]]

(In reply to comment #7)
> *Webify Me* uses modern HTML5 features that work best with JavaScript turned
> on. [How do I do that?]
> 
> Matej, let us know if you have any suggestions for the message copy.

I think the line works great as is, but here are some other options:

To experience the full HTML5 awesomeness of *Webify Me*, please turn on JavaScript. [Help, I don't know how!]

If you have JavaScript turned off, you're missing out on the yummy HTML5 goodness. [Ack! How do I turn it on?]

It's all the same to us, but if want the full, modern HTML5 experience of *Webify Me*, please set JavaScript to on. [How do I do that?]

Comment 9

[William Reynolds [:williamr]]

Thanks Matej. Let's go ahead with the message in comment 7.

brez, can you please add this message by end of Friday so it will be in before our string freeze? Thanks!

Comment 10

[[:brez]]

[master 5a88b34] adding noscript message for browsers with javascript disabled
 1 files changed, 3 insertions(+), 1 deletions(-)

Comment 11

[Pratibha]

Attachment: PostFix attachment

Comment 12

[Pratibha]

Verified at:
https://webifyme-dev.allizom.org/en-US/

With JavaScript disable in browser message appears as "Webify Me works best with JavaScript turned on!How do i do that?"