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

Discussion in 'Javascript' started by whitesmith, Mar 28, 2007.

  1. whitesmith

    whitesmith Guest

    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.
    whitesmith, Mar 28, 2007
    #1
    1. Advertising

  2. whitesmith

    Rick Brandt Guest

    whitesmith wrote:
    > 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.
    Rick Brandt, Mar 28, 2007
    #2
    1. Advertising

  3. whitesmith

    shimmyshack Guest

    On 28 Mar, 20:40, "whitesmith" <> wrote:
    > 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.
    shimmyshack, Mar 28, 2007
    #3
  4. whitesmith

    -Lost Guest

    "whitesmith" <> wrote in message
    news:...
    >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, Mar 28, 2007
    #4
  5. whitesmith

    -Lost Guest

    Re: How can I make my webpage look good when JS is disabled? OT: Netflix preference.

    "Randy Webb" <> wrote in message
    news:...
    > -Lost said the following on 3/28/2007 5:54 PM:
    >
    > <snip>
    >
    >> 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).

    >
    > 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
    -Lost, Mar 28, 2007
    #5
  6. whitesmith

    shimmyshack Guest

    Re: How can I make my webpage look good when JS is disabled? OT: Netflix preference.

    On 28 Mar, 23:25, "-Lost" <> wrote:
    > "Randy Webb" <> wrote in message
    >
    > news:...
    >
    > > -Lost said the following on 3/28/2007 5:54 PM:

    >
    > > <snip>

    >
    > >> 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).

    >
    > > 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


    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)
    shimmyshack, Mar 29, 2007
    #6
  7. whitesmith

    mIDO Guest

    Re: How can I make my webpage look good when JS is disabled? OT: Netflix preference.

    using javascript only for your really need ;)
    mIDO, Mar 29, 2007
    #7
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. mike
    Replies:
    3
    Views:
    309
  2. inhahe
    Replies:
    3
    Views:
    2,346
    Diez B. Roggisch
    Jan 28, 2005
  3. bcr666
    Replies:
    0
    Views:
    1,083
    bcr666
    Apr 2, 2007
  4. MST
    Replies:
    7
    Views:
    146
    Vetle Roeim
    Jul 12, 2004
  5. Replies:
    4
    Views:
    169
Loading...

Share This Page