One of the more relevant software engineering principles is that of progressive enhancement, coined originally by Steven Champeon; which states that a website must be built in a structured-layered approach and functionality and core features are the most basic element of the website. In a correctly built website, content must be available to everyone, but fancy animations or enhanced versions of the content are only available to those with more advanced browsers/technologies.
In a more concrete way, a correctly built website must be functional for users without Javascript and content should not be dependent on Javascript. This is the same approach we have used when building our website. The first 'layer' of the website was a correclty displayed website, where all content was accessible, including content from the blog. You may even try this for yourself, by disabling Javascript in your browser. Note that when navigating from one page to another, or submitting an empty contact form, the website may not appear as animated as with Javascript, however it does not stop you from submitting the contact form or accessing blog content.
But is it worth it to develop following the principle of progressive enhancement? Other developers may disagree, however here at Incredible Web we believe in quality, and albeit it may take more time and effort to follow this principle, eventually we are bearing the fruit of our hard work in improved SEO (search engine optimization), remember that Googlebot does not execute JavaScript, improved maintainability and speed. It is easier to detach one of the top layers (such as changing an external CSS file) rather than having the CSS in-line and changing the CSS will require a change in the actual HTML.
We are even further convinced that our beliefs are correct by the latest findings including .net magazine describing progressive enhancement as the #1 web design trend.
But how do we apply progressive enhancement in our design or development over here at Incredible Web? The simplest change would be to use unobtrusive jquery instead of vanilla JavaScript; making sure that if the user's browser does not support Javascript, the message will still come across. This could be seen in the contact form; where we made slight and minor adjustements to toastr to allow for unobtrusive notification messages.
Instead of having to use
toastr['info']("Proin mauris lorem, cursus non dignissim in, accumsan ac risus.","Lorem Ipsum");
we are using
$(#message).toastIt();
As you can see, the difference is very slight, however the second approach takes an existent DOM object and creates a message from it. This means that if the browser did not support Javascript, the DOM object would still have been created and the message would still be displayed as part of the DOM.
Apart from this, another important area in which we must cater for progressive enhancement is when returning the view (in an MVC architecture) from the controller. If the user's browser supports Javascript (hence allows for AJAX), we do not need to recreate the entire view, but only the small area (or partial view) which has been altered. This is done by sending a JSON object representing the rendered partial view.
if (Request.IsAjaxRequest()) {
return Json(new
{
ReturnObject = this.RenderPartialView(...)
});
}
else
{
return View(model);
}
That's all there is to say on progressive enhancement from our end, however if you have any questions do not hesitate to contact us using the comment box below.