Making My Site Noscript-compatible

Question

I am almost finished building a nameplate site for myself from scratch, both as a learning experience and to formally put my presence online. I made a cool-looking (at least, I think so) tabbed site that uses AJAX and anchor navigation to switch between tabs. I also threw together a style changing script that uses cookies to remember your style selection.

Now, the sixty-four thousand dollar question: how do I make this site usable for people who choose to turn off JavaScript? As it stands currently, a user without scripting can see the "About Me" section and nothing else. I also put a banner at the top directing them to my "noscript" page, which as of now doesn't exist. Is the best option a noscript page that shows all the content at once? Is there a CSS method to avoid the JavaScript for tab switching? Or, is there some method to show all the content on the main page to users without scripting but still have the scripting-enhanced version for others?

My site is located at scolbyme.webs.com. I appreciate any ideas you guys come up with!

P.S. Bonus points for the person who can name the background color.

Answer 1

I would agree with jeroen, you want to build the site normally (w/out ajax) first, then add on the js layer.

If you build each tab as it's own page, and put the content of the page into a div with a certain id, you can do an ajax call w/ jquery pretty easily that can grab the content from the page and only grab within the div that holds the content, and then put that into your main page. so, same effect, but the site would work completely without script as well.

Answer 2

If you are concerned about the people who have scripting turned off, you have used the wrong design procedure; you should have made a site that just works without scripting and added the ajax / script enhancements later on.

Changing it now will be pretty hard, but perhaps you can make all tabs regular links and make some sort of a template that will show the correct layout and read the specific content of the tab that is selected.

Answer 3

1 - Replace your nav by this:

<noscript>
    <nav>
        <div id="twitternav"><a href="?r=twitter">Twitter</a></div>
        <div id="tumblrnav"><a href="?r=tumblr">Tumblr</a></div>
        <div id="flickrnav"><a href="?r=flickr">Flickr</a></div>
        <div id="facebooknav"><a href="?r=facebook">Facebook</a></div>
        <div id="devnav"><a href="?r=dev">Dev</a></div>
        <div class="active" id="aboutnav"><a href="?r=about">About Me</a></div>
    </nav>
</noscript>
<div id="nav_with_script"></div>

When device is an cellphone or don't support javascript the noscript show an alternative menu, your links will be ?r=twitter and NOT #twitter. The last div is an container for the menu with javascript. You populate this with pushing this code inner head tag:

<script type="text/javascript">
document.getElementById('nav_with_script').innerHTML = '<nav><div id="twitternav"><a href="#twitter">Twitter</a></div><div id="tumblrnav"><a href="#tumblr">Tumblr</a></div><div id="flickrnav"><a href="#flickr">Flickr</a></div><div id="facebooknav"><a href="#facebook">Facebook</a></div><div id="devnav"><a href="#dev">Dev</a></div><div class="active" id="aboutnav"><a href="#about">About Me</a></div></nav>';
</script>

if device not have javascript support the noscript will be show and not execute. if device supports javascript the show menu inner nav_with_script div.

2 - Change your page to work showing the contents according to the $_GET['r']

Something like this:

<div id="twitter"<?php if($_GET['r'] == 'twitter') { echo ' class="active"'}?>></div>
<div id="thumblr"<?php if($_GET['r'] == 'thumblr') { echo ' class="active"'}?>></div>
...

And its accessible in old devices. This is a remedial solution, good unobustrusive codes are made since project.