How can I make my webpage look good when JS is disabled?

[whitesmith]

I know that discussions of handling the user experience of those who
elect not to enable JS go back years, so I'll focus on two sites that
handle it in different ways. First of all, there is http://www.netflix.com/
-- a page that looks great with or without JS. Then there is
https://www.agedwards.com/ageconnect/Login -- which looks like it was
put together by a kid unless JS is enabled.

I've looked at the source for both pages, but I'm new to JS and lack
the experience to see what specifically was done by the people at
Netflix to make their page look so good when JS is blocked. Can
anyone help me with this? Many thanks to anyone who does.

 

[Rick Brandt]

I know that discussions of handling the user experience of those who
elect not to enable JS go back years, so I'll focus on two sites that
handle it in different ways. First of all, there is
http://www.netflix.com/ -- a page that looks great with or without
JS. Then there is https://www.agedwards.com/ageconnect/Login -- which
looks like it was
put together by a kid unless JS is enabled.

I've looked at the source for both pages, but I'm new to JS and lack
the experience to see what specifically was done by the people at
Netflix to make their page look so good when JS is blocked. Can
anyone help me with this? Many thanks to anyone who does.

I assume the standard wisdom is "Don't use js for anything beyond a few
frills that your page can easily do without". Your second link above is
clearly not following that strategy.

With so many pages using Ajax these days you might as well just have a
non-js version of the page that says "sorry, this page is not going to work
for you". Obviously the target audience of the page is a large factor in
how you handle it.

 

[shimmyshack]

I know that discussions of handling the user experience of those who
elect not to enable JS go back years, so I'll focus on two sites that
handle it in different ways. First of all, there ishttp://www.netflix.com/
-- a page that looks great with or without JS. Then there ishttps://www.agedwards.com/ageconnect/Login-- which looks like it was
put together by a kid unless JS is enabled.

I've looked at the source for both pages, but I'm new to JS and lack
the experience to see what specifically was done by the people at
Netflix to make their page look so good when JS is blocked. Can
anyone help me with this? Many thanks to anyone who does.

in general the easiest way to prevent js making any difference is to
code the site without it, and add on the js later, in an "unobtrusive"
manner.
These days computers are fast and you can have js parse the markup
after page load and add listeners to all the links, the forms, and
attach events to them, so that when js is enabled the page has the
bells and whistles that some want.

In general I hate asp.NET because by default it uses javascript with
postback rubbish, and so the site simply doesnt work without js. I
prefer to keep js off until I need it, and will put up with all kinds
of crap on the page provided it works, sometimes in order to get a
specific form to submit - which requires client validation for
instance - I will just type the javascript into the address bar, or
firebug console to override the local lack of functionality. I know
this makes me in the minority - but I hate the nonsense that seems to
be web2.0 and of course the privacy problems, I prefer to get what I
need and get out, rather than watch a whole load of pretty effects and
wait while firefox loads the next lot of leaky code into my aging
comps memory.

 

[-Lost]

I know that discussions of handling the user experience of those who
elect not to enable JS go back years, so I'll focus on two sites that
handle it in different ways. First of all, there is http://www.netflix.com/
-- a page that looks great with or without JS. Then there is
https://www.agedwards.com/ageconnect/Login -- which looks like it was
put together by a kid unless JS is enabled.

I've looked at the source for both pages, but I'm new to JS and lack
the experience to see what specifically was done by the people at
Netflix to make their page look so good when JS is blocked. Can
anyone help me with this? Many thanks to anyone who does.

To start, use semantically correct markup. In whatever style you choose, make sure that
your markup lays the page out sequentially. Then you can apply your CSS to it to actually
"lay it out."

The number one thing you DO NOT want to do is document.write() entire pages, menus,
images, et cetera. Which is exactly what agedwards.com does. Just look at the footer.js
for example.

Another thing you can do is provide specific alternatives to content areas. For example,
if you rely on some fantastical JavaScript menu, provide an alternative one in a noscript
tag. Or better yet, use semantic markup, style it with CSS, animate it with JavaScript.
It will look spiffy without JavaScript in that fashion.

Now, about Netflix. I chose them as my DVD delivery guys, specifically because of how
nicely coded their JavaScript was (that is, it did not cause my browser to go ape).
However, they do rely on several aspects of JavaScript style as it were. The menus for
example lose their hover color change (for all browsers), you lose the ability to rate
DVDs, and a few other odds-and-ends.

They could easily use image maps for the stars rating system. They could easily code
links to have a display of 'block', maximize their 'width' in their containers and apply a
background-color change on :hover.

The thing is, you have to balance between what you want to offer and how important some of
these features are. Personally, I think they could do the image map thing, because they
can reuse it for each DVD. The links, same thing, really easy to implement.

Alright, enough babbling. That is my general $0.02.

-Lost

 

[-Lost]

-Lost said the following on 3/28/2007 5:54 PM:



Are you serious? You picked a movie rental site after viewing the scripting in the page?
And based solely on that criteria? I would have thought some sort of quality service
would bear a part in the decision.

You know, I thought afterwards I should have explained more, but thought already that I
was babbling too much.

I tested Blockbuster (two week trial) and then Netflix (month trial). I was *never*
impressed with Blockbuster's service, or their site.

After one month on Netflix, on the 4 DVDs a month plan, I had watched 27 movies in my
month's trial. As an added bonus, I REALLY dug the site, and Firebug never issued
warnings about its pages, HTML Tidy only ever reports two warnings, et cetera.

Blockbuster on the other hand delivered to me only 5 movies in 2 weeks. I could have went
to the local Blockbuster (barely two miles from here), but I thought that defeats the
purpose of having DVDs mailed to me.

So, it was service, but I have an odd attraction to sites that make good use of
JavaScript.

-Lost

 

[shimmyshack]

You know, I thought afterwards I should have explained more, but thought already that I
was babbling too much.

I tested Blockbuster (two week trial) and then Netflix (month trial). I was *never*
impressed with Blockbuster's service, or their site.

After one month on Netflix, on the 4 DVDs a month plan, I had watched 27 movies in my
month's trial. As an added bonus, I REALLY dug the site, and Firebug never issued
warnings about its pages, HTML Tidy only ever reports two warnings, et cetera.

Blockbuster on the other hand delivered to me only 5 movies in 2 weeks. I could have went
to the local Blockbuster (barely two miles from here), but I thought that defeats the
purpose of having DVDs mailed to me.

So, it was service, but I have an odd attraction to sites that make good use of
JavaScript.

-Lost

I too reward companies that have made a decent stab at accessibility,
as well as showing that they value my profession enough to get someone
professional to do it, it makes me feel better about putting my
details in their DB! I cannot stand companies that just throw some
shite on the web and call it a site, perhaps I have a small rage
problem (and a few others probably)

 

[mIDO]

using javascript only for your really need