Task

Combine the lite version of the site (working without JavaScript) with the regular one. In other words, make graceful degradation for javascript solutions. Further in the post is a small guide for those who are interested in this problem.

"Easy" sites

What is the lite version? Site version available when JavaScript is disabled (hereinafter referred to as JS). And although there are usually not many visitors without JS, search engines that do not support the interpretation of JS are an important part of the “audience”. For example, it is important that a visitor or robot be able to bypass all pages. In this case, it will be more convenient for the ordinary user to receive content asynchronously, i.e. using JS'a. The second requirement of the lite-version is a tolerable display on mobile devices, which, in addition to the lack of JS, also have restrictions on uploading images and supporting CSS.

The problem with the lite-version of the site is that you have to maintain two versions at once — its “normal” and, and with a large number of edits in the templates, confusion may arise. Therefore, our (and your) goal is to design the layout and JS working in both normal and “limited” conditions.

We just ran into this on the site of Quietly.ru , when we wanted to abandon the lite-version of the site on separate templates, and implement all the functionality in one HTML. it was also important because we were afraid to give different HTML to search engines, since it was similar to cloaking.
')

Search page for auto-instructor with JS enabled


Autoinstructor search page with JS disabled

Recommendations

1. Marvelous layout is better than tabular.

But how! In addition to such important advantages as ease of support in comparison with tabular layout, HTML ease (reducing traffic) and reducing DOM-tree, marvelous (block) layout has a wonderful way to lose shape when CSS is disabled (fully or partially). Yes, the site on the mobile device will look completely different, but it will be easy to read, there will be no horizontal scrolling.

This is the page with the traffic rules on the screen of a mobile phone.

2. Different sequence of parts of the site in HTML and in the browser

Bravely “fool” the sequence of such sections (“global” blocks) as a header, content, footer, menu, etc. As one of the good options, in the HTML code, you must first follow the content, then the menu, then everything else. The true (i.e., visual) position of the elements is given by CSS. Thus, the site visitor on the mobile device will read the article, then see the menu, with which he will go to another page, and minor elements, such as a footer or greeting in the header, will remain below, that is, they will not clutter the issue of content. This tip is especially relevant for content sites. For them, there is an SEO benefit to raise content higher.

3. CSS identification with JS disabled

Set body specific class, for example, “noscript”. After the opening body tag we have a JS code that removes this class from the body. Now you can write in CSS rules for browsers without JS.

What should these rules do? Hiding blocks that are not relevant without JS, showing pagination, if with JS pagination is performed asynchronously, just change the appearance of some elements ... There are lots of options.

When implementing this principle on the website Spokono.ru, there was one small problem: there was some “juggling” of the page when loading or updating. The solution was to put all the styles associated with hiding or showing elements, within the head tag, in the inline spirit, that is, the style tag, and not a separate file.

Using wrapping with the noscript tag, we show blocks for the version of the site without JS.


Pagination with JS disabled

4. Combining JS with links

If asynchronous requests are used on the site to increase convenience, the elements with which these requests are activated can be represented by links. If JS is disabled, this functionality will remain. The server script that will interact with the page should understand how the request came, asynchronously or not, and in the first case return the response in HTML, JSON or any other format, and in the second, for example, do a reverse redirect to the page from which Request has come.

5. Continuous elements must have their discrete equivalents.

If the element is a continuous controller that is controlled by JS, it should alternatively be represented as a set of links. At Spokoyno.ru, we replaced the price slider with ranges (links) that we show to visitors without JS.

Comparison of the filter at the price with JS enabled and disabled