Menu
I've redeveloped a webpage where previously all the page layout and search results were generated in PHP on the server and then displayed on the page when they were complete. This was slow.
To improve performance and responsiveness the new version loads the header/footer only for the page and then creates the remaining layout with javascript before populating the results dynamically using AJAX requests.
The downside of this is that obviously the page doesn't load properly without javascript support. What I'm trying to do is find a way of falling back on the old PHP code for layout & results if javascript is not enabled.
I've tried adding the old code into my new page and in a non-javascript browser it is fine. However in a javascript browser it loads everything twice - using the new javascript layout & results code and the old php code.
Because the PHP code is executed before the javascript code I can't see anyway to avoid this. Am I missing something completely here?
Thanks for any guidance.
977
What you want to do is something called progressive enhancement.
This image is from the link I've posted:
In a nutshell, what this describes is that your website should reach basic minimal functionality without CSS or JavaScript. In other words, if you have some website, you should have something that looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Basic HTML</title>
</head>
<body>
<h1>Introduction to semantic HTML</h1>
<p>You use H tags for headings, search engines like that.
Paragraph tags for paragraphs</p>
<a href="http://example.com/">Hyperlinks make sense</a>
<div>
<p>Divs can be used to create seperate areas for content</p>
</div>
</body>
</html>
And what does this look like?
In a modern web browser:
In a command-line browser that lots of people use:
CSS and JavaScript should enhance this basic functionality, not be required for it.
When I goto your website and request http://example.com/Foo I should see
<!DOCTYPE html>
<html>
<head>
<title>Foo page</title>
<script>/*Whatever script that does your ajaxy stuff*/</script>
</head>
<body>
<h1>Foo page</h1>
<p>Foo content</p>
<a href="http://example.com/bar">Click here to goto bar.</a>
<div>
<p>Divs can be used to create seperate areas for content</p>
</div>
</body>
</html>
What I shouldn't see is:
<!DOCTYPE html>
<html>
<head>
<title>Foo page</title>
<script>/*Whatever script that does your ajaxy stuff*/</script>
<script>/*Script to Load in the main content for the body*/</script>
</head>
<body>
<noscript>
<p>Sorry, for some reason I decided you need
javascript and a modern desktop browser to see
the basic line of text you wanted.</p>
</noscript>
</body>
</html>
So instead of making your pages load content based on the URL of the page in the browser, you should deliver the page from the server-side, so that when you request /foo, you get all of the foo HTML. Then when it loads, write JavaScript that will progressively enhance your page by making the specific navigation links load the body content. That way when JS is disabled, it works, and when JS is enabled, your content loads faster.
One last point from a usability point of view.
If you're going to do this ajaxy stuff, please, PLEASE ensure you make sure you catch all HTTP error codes and do the right thing like alert your users to errors loading the page, and display a loading graphic. Ajaxy websites that try and load content when I have a slow network and don't show me anything related to loading content or errors that occurred and leave me hung out to dry leaves me a very angry user that just leaves your site and never comes back.
127
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
