{"id":1015,"date":"2018-01-11T13:57:01","date_gmt":"2018-01-11T13:57:01","guid":{"rendered":"https:\/\/azoora.com\/blog\/?p=1015"},"modified":"2018-12-13T15:44:33","modified_gmt":"2018-12-13T15:44:33","slug":"seven-sites-which-works-just-fine-without-javascript","status":"publish","type":"post","link":"https:\/\/azoora.com\/blog\/javascript\/seven-sites-which-works-just-fine-without-javascript\/","title":{"rendered":"Seven Sites Which Works Just Fine Without JavaScript"},"content":{"rendered":"<div class=\"single-excerpt\">\n<p>Too many developers rely on JavaScript as an essential resource. We look at a range of sites that are modern, interactive, and feature great UX, without the need of JavaScript.<\/p>\n<\/div>\n<p>Gather \u2019round, ladies, gents, and children. Lo, before your very eyes, we shall reveal several freaks of the Internet! Behold! Websites that don\u2019t need JavaScript to display their god-given content!<\/p>\n<p>Oh, you think I\u2019m kidding? Websites that are presented by plain old HTML and CSS are becoming increasingly rare. At this juncture, I don\u2019t know who to blame, and is it really worth blaming anybody? I could point finger at whomever or whatever I think is to blame, or I could point fingers at creative and sometimes large websites that do it right!<\/p>\n<p>Now, what do I mean about \u201cdoing it right\u201d? Some of these sites, you might notice, do implement some things with JavaScript. But here\u2019s the secret: if you turn JavaScript off, these sites still work just fine. The content doesn\u2019t just disappear. The JavaScript effects and features have fallbacks! Sites are progressively enhanced, or they degrade gracefully.<\/p>\n<p>Either way: they work. And they\u2019re kind of hard to find, these days.<\/p>\n<p class=\"fixed-empty-p\">\n<h2>1. Amazon<\/h2>\n<p>You might expect a site with as much information present on any given page as&nbsp;<a class=\"external inner-link-effect\" href=\"https:\/\/www.amazon.com\/\" rel=\"nofollow\"><span class=\"ile-sp\">Amazon<\/span><\/a> has to use a mountain of JavaScript to, in some way, organize it more efficiently. Not so. Turn off the JS, and you can buy stuff just fine.<\/p>\n<div class=\"finline-large\"><a class=\"external\" href=\"https:\/\/www.amazon.com\/\" rel=\"nofollow\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-95515 image-border\" src=\"https:\/\/netdna.webdesignerdepot.com\/uploads\/2017\/12\/001-8.jpg\" sizes=\"(max-width: 1856px) 100vw, 1856px\" srcset=\"https:\/\/netdna.webdesignerdepot.com\/uploads\/2017\/12\/001-8.jpg 1856w, https:\/\/netdna.webdesignerdepot.com\/uploads\/2017\/12\/001-8-300x207.jpg 300w, https:\/\/netdna.webdesignerdepot.com\/uploads\/2017\/12\/001-8-768x530.jpg 768w, https:\/\/netdna.webdesignerdepot.com\/uploads\/2017\/12\/001-8-1024x706.jpg 1024w\" alt=\"001\" width=\"1856\" height=\"1280\"><\/a><\/div>\n<p class=\"fixed-empty-p\">\n<h2>2. The Warren Trust<\/h2>\n<p><a class=\"external inner-link-effect\" href=\"https:\/\/warrentrust.org.nz\/\" rel=\"nofollow\"><span class=\"ile-sp\">The Warren Trust<\/span><\/a>&nbsp;is another one that degrades quite gracefully. With JS on, the site uses AJAX techniques to load content from other pages without technically leaving the home page. Turn off the JS, and it won\u2019t work quite like it does with the JS on, but it&nbsp;<em>does work<\/em>. You can still see every page, but, you know, on its own page.<\/p>\n<div class=\"finline-large\"><a class=\"external\" href=\"https:\/\/warrentrust.org.nz\/\" rel=\"nofollow\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-95516 image-border\" src=\"https:\/\/netdna.webdesignerdepot.com\/uploads\/2017\/12\/002-6.jpg\" sizes=\"(max-width: 1856px) 100vw, 1856px\" srcset=\"https:\/\/netdna.webdesignerdepot.com\/uploads\/2017\/12\/002-6.jpg 1856w, https:\/\/netdna.webdesignerdepot.com\/uploads\/2017\/12\/002-6-300x207.jpg 300w, https:\/\/netdna.webdesignerdepot.com\/uploads\/2017\/12\/002-6-768x530.jpg 768w, https:\/\/netdna.webdesignerdepot.com\/uploads\/2017\/12\/002-6-1024x706.jpg 1024w\" alt=\"002\" width=\"1856\" height=\"1280\"><\/a><\/div>\n<p class=\"fixed-empty-p\">\n<h2>3. Stuff &amp; Nonsense<\/h2>\n<p><a class=\"external inner-link-effect\" href=\"https:\/\/stuffandnonsense.co.uk\/\" rel=\"nofollow\"><span class=\"ile-sp\">Stuff &amp; Nonsense<\/span><\/a>&nbsp;was created by known and self-admitted web designer Andy Clarke. So yeah, it work with and without JS just fine. It\u2019s a lovely example of a site that (mostly) works perfectly fine either way.<\/p>\n<p>The only thing that doesn\u2019t work when JS is turned off is the audio player. That is kind of to be expected, really. I can\u2019t take many points away for that.<\/p>\n<div class=\"finline-large\"><a class=\"external\" href=\"https:\/\/stuffandnonsense.co.uk\/\" rel=\"nofollow\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-95517 image-border\" src=\"https:\/\/netdna.webdesignerdepot.com\/uploads\/2017\/12\/003-5.jpg\" sizes=\"(max-width: 1856px) 100vw, 1856px\" srcset=\"https:\/\/netdna.webdesignerdepot.com\/uploads\/2017\/12\/003-5.jpg 1856w, https:\/\/netdna.webdesignerdepot.com\/uploads\/2017\/12\/003-5-300x207.jpg 300w, https:\/\/netdna.webdesignerdepot.com\/uploads\/2017\/12\/003-5-768x530.jpg 768w, https:\/\/netdna.webdesignerdepot.com\/uploads\/2017\/12\/003-5-1024x706.jpg 1024w\" alt=\"003\" width=\"1856\" height=\"1280\"><\/a><\/div>\n<p class=\"fixed-empty-p\">\n<h2>4. Mike Mai<\/h2>\n<p><a class=\"external inner-link-effect\" href=\"http:\/\/mikemai.net\/\" rel=\"nofollow\"><span class=\"ile-sp\">Mike Mai\u2019s site<\/span><\/a>&nbsp;is proof enough that your site can be plenty creative\u2014if a little odd in this case\u2014with or without scripting. And I do mean \u201codd\u201d, and I&nbsp;<em>really<\/em>&nbsp;do mean \u201clittle\u201d.<\/p>\n<p>It may not be the poster-site for visual accessibility, but it does show what kind of things can be accomplished in plain old HTML and CSS by those just crazy enough to try it.<\/p>\n<div class=\"finline-large\"><a class=\"external\" href=\"http:\/\/mikemai.net\/\" rel=\"nofollow\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-95518\" src=\"https:\/\/netdna.webdesignerdepot.com\/uploads\/2017\/12\/004-4.jpg\" sizes=\"(max-width: 1856px) 100vw, 1856px\" srcset=\"https:\/\/netdna.webdesignerdepot.com\/uploads\/2017\/12\/004-4.jpg 1856w, https:\/\/netdna.webdesignerdepot.com\/uploads\/2017\/12\/004-4-300x207.jpg 300w, https:\/\/netdna.webdesignerdepot.com\/uploads\/2017\/12\/004-4-768x530.jpg 768w, https:\/\/netdna.webdesignerdepot.com\/uploads\/2017\/12\/004-4-1024x706.jpg 1024w\" alt=\"004\" width=\"1856\" height=\"1280\"><\/a><\/div>\n<p class=\"fixed-empty-p\">\n<h2>5. Solace House<\/h2>\n<p><a class=\"external inner-link-effect\" href=\"http:\/\/solacehouseinc.com\/\" rel=\"nofollow\"><span class=\"ile-sp\">Solace House<\/span><\/a>&nbsp;is a sobering example of a site that absolutely needs to work any time, under any circumstance, no matter which technologies are or aren\u2019t working. It\u2019s a suicide prevention center, after all.<\/p>\n<p>You might be able to argue that your target demographic should just have JavaScript enabled at all times in some circumstances, but there are some services that are just too vital to ever leave to chance.<\/p>\n<div class=\"finline-large\"><a class=\"external\" href=\"http:\/\/solacehouseinc.com\/\" rel=\"nofollow\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-95519 image-border\" src=\"https:\/\/netdna.webdesignerdepot.com\/uploads\/2017\/12\/005-4.jpg\" sizes=\"(max-width: 1856px) 100vw, 1856px\" srcset=\"https:\/\/netdna.webdesignerdepot.com\/uploads\/2017\/12\/005-4.jpg 1856w, https:\/\/netdna.webdesignerdepot.com\/uploads\/2017\/12\/005-4-300x207.jpg 300w, https:\/\/netdna.webdesignerdepot.com\/uploads\/2017\/12\/005-4-768x530.jpg 768w, https:\/\/netdna.webdesignerdepot.com\/uploads\/2017\/12\/005-4-1024x706.jpg 1024w\" alt=\"005\" width=\"1856\" height=\"1280\"><\/a><\/div>\n<p class=\"fixed-empty-p\">\n<h2>6. Twitter<\/h2>\n<p>Yeah,&nbsp;<em>that<\/em>&nbsp;<a class=\"external inner-link-effect\" href=\"https:\/\/www.twitter.com\/\" rel=\"nofollow\"><span class=\"ile-sp\">Twitter<\/span><\/a>. It was while researching this article that I found out Twitter works well enough without JavaScript. Well, their solution is a bit convoluted, perhaps, but it\u2019s effective.<\/p>\n<p>In short, Twitter will actually redirect you to a pared-down, mobile version of Twitter. It\u2019s fully functional, except for features like feeds that update live, and so on. Who says social media needs JavaScript?<\/p>\n<p>Truth be told, Twitter never felt faster.<\/p>\n<div class=\"finline-large\"><a class=\"external\" href=\"https:\/\/www.twitter.com\/\" rel=\"nofollow\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-95520\" src=\"https:\/\/netdna.webdesignerdepot.com\/uploads\/2017\/12\/006-4.jpg\" sizes=\"(max-width: 1856px) 100vw, 1856px\" srcset=\"https:\/\/netdna.webdesignerdepot.com\/uploads\/2017\/12\/006-4.jpg 1856w, https:\/\/netdna.webdesignerdepot.com\/uploads\/2017\/12\/006-4-300x207.jpg 300w, https:\/\/netdna.webdesignerdepot.com\/uploads\/2017\/12\/006-4-768x530.jpg 768w, https:\/\/netdna.webdesignerdepot.com\/uploads\/2017\/12\/006-4-1024x706.jpg 1024w\" alt=\"006\" width=\"1856\" height=\"1280\"><\/a><\/div>\n<p class=\"fixed-empty-p\">\n<h2>7. Slack<\/h2>\n<p>You might need JavaScript to actually run a&nbsp;<a class=\"external inner-link-effect\" href=\"https:\/\/slack.com\/\" rel=\"nofollow\"><span class=\"ile-sp\">Slack<\/span><\/a>&nbsp;chatroom, but the rest of the client-facing site looks and works just fine. It even has a condition in the URL for no JavaScript. And when you need to enable JS to make things run, they tell you! They actually tell you!<\/p>\n<p>No seriously, it\u2019s a thing that lots of sites would rather let you stare at a blank page than even say, \u201cWoops! Looks like the JS broke, or you need to enable it.\u201d I dislike this thing.<\/p>\n<div class=\"finline-large\"><a class=\"external\" href=\"https:\/\/slack.com\/\" rel=\"nofollow\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-95521 image-border\" src=\"https:\/\/netdna.webdesignerdepot.com\/uploads\/2017\/12\/007-4.jpg\" sizes=\"(max-width: 1856px) 100vw, 1856px\" srcset=\"https:\/\/netdna.webdesignerdepot.com\/uploads\/2017\/12\/007-4.jpg 1856w, https:\/\/netdna.webdesignerdepot.com\/uploads\/2017\/12\/007-4-300x207.jpg 300w, https:\/\/netdna.webdesignerdepot.com\/uploads\/2017\/12\/007-4-768x530.jpg 768w, https:\/\/netdna.webdesignerdepot.com\/uploads\/2017\/12\/007-4-1024x706.jpg 1024w\" alt=\"007\" width=\"1856\" height=\"1280\"><\/a><\/div>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Too many developers rely on JavaScript as an essential resource. We look at a range of sites that are modern, interactive, and feature great UX, without the need of JavaScript. Gather \u2019round, ladies, gents, and children. Lo, before your very eyes, we shall reveal several freaks of the Internet! Behold! Websites that don\u2019t need JavaScript [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":1016,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[12],"tags":[87],"jetpack_featured_media_url":"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2018\/02\/featured_nojs.jpg","jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/p7FQPL-gn","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/1015"}],"collection":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/comments?post=1015"}],"version-history":[{"count":2,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/1015\/revisions"}],"predecessor-version":[{"id":1632,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/1015\/revisions\/1632"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media\/1016"}],"wp:attachment":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media?parent=1015"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/categories?post=1015"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/tags?post=1015"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}