Задача

Совместить lite-версию сайта (работающую без JavaScript'а) с обычной. Иными словами, сделать graceful degradation для JavaScript-решений. Далее в посте небольшое руководство для тех, кому актуальна данная проблема.

«Лёгкие» сайты

Что такое lite-версия? Версия сайта, доступная при отключеном JavaScript (в дальнейшем JS). И хотя посетителей без JS бывает обычно мало, то поисковые роботы, которые не поддерживают интерпретацию JS, составляют важную часть «аудитории». Например, важно, чтобы посетитель или робот смог обойти все страницы. При этом обычному пользователю будет удобнее получать контент асинхронно, т.е. с помощью JS'а. Вторым требованием lite-версии является сносное отображение на мобильных устройствах, которые кроме отсутствия JS обладают также ограничениями на загрузку картинок и поддержку CSS.

Проблема lite-версии сайта заключается в том, что приходится вести сразу две версии — её и «нормальную», и при большом количестве правок в шаблонах может возникнуть путаница. Поэтому наша (и ваша) цель — это проектировать вёрстку и JS работающими и в нормальных, и «ограниченных» условиях.

На сайте Спокойно.ру мы как раз столкнулись с этим, когда захотели отказаться от lite-версии сайта на отдельных шаблонах, и реализовать весь функционал в одном HTML. это было важным также и потому, что мы опасались отдавать поисковикам разный HTML, так как это было похоже на клоакинг.


Страница поиска автоинструктора с включённым JS


Страница поиска автоинструктора с отключённым JS

Рекомендации

1. Дивная вёрстка лучше табличной

Да ещё как! Кроме таких важнейших преимуществ, как простота поддержки в сравнении с табличной вёрсткой, лёгкости HTML (уменьшение трафика) и уменьшение DOM-дерева, дивная (блочная) вёрстка обладает чудесным способом терять формы при отключенном (полностью или частично) CSS. Да, сайт на мобильном устройстве будет выглядеть совсем не так, но зато его будет легко читать, не будет горизонтальной прокрутки.

Так выглядит страница с ПДД на экране мобильного телефона

2. Разная последовательность частей сайта в HTML и в браузере

Дивно «обманывайте» последовательность таких разделов («глобальных» блоков), как шапка, контент, футер, меню и пр. Как один из неплохих вариантов, в HTML коде сначала должно следовать контент, потом меню, затем все остальное. Истиное (то есть визуальное) положение элементов задается CSS'ом. Таким образом посетитель сайта на мобильном устройстве прочитает статью, затем увидит меню, с помощью которого он перейдёт на другую страницу, а второстепенные элементы, такие как футер или приветствие в шапке, остануться ниже, то есть не будут загромождать выдачу контента. Этот совет особенно актуален для контентных сайтов. Для них же существует SEO-выгода поднимать контент выше.

3. CSS-идентификация при отключёном JS

Устанавливаем body специфический класс, например, «noscript». После открывающего тега body распологаем JS-код, который убирает этот класс у body. Теперь можно прописать в CSS правила для браузеров без JS.

Что должны делать эти правила? Скрывать блоки, не актуальные без JS, показывать пагинацию в случае, если с JS пагинация осуществляется асинхронно, просто поменять внешний вид некоторых элементов… Вариантов масса.

При реализации этого принципа на сайте Спокойно.ру возникала одна небольшая проблема: происходило некоторое «передёргивание» странички при загрузке или обновлении. Решением стало помещение всех стилей, связанных с сокрытием или показом элементов, в пределах тега head, в inline-духе, то есть тегом style, а не отдельным файлом.

С помощью обёртывания тегом noscript показываем блоки для версии сайта без JS.


Пагинация при отключённом JS

4. Совмещение JS со ссылками

Если для повышения удобства на сайте используются асинхронные запросы, то элементы, с помощью которых активируются эти запросы, может быть представлены ссылками. Если JS отключён, данный функционал сохранится. Серверный скрипт, который будет взаимодействовать со страницей должен понять, каким образом пришел запрос, асинхронно или нет, и в первом случае вернуть ответ в формате HTML, JSON или любом другом, а во втором, например, сделать обратный редирект на ту страницу, с которой пришел запрос.

5. Непрерывные элементы должны иметь свои дискретные эквиваленты

Если элемент — непрерывный контроллер, управление которым осуществляется с помощью JS, — он должен быть альтернативно представлен в виде набора ссылок. На Спокойно.ру мы заменили слайдер цен на диапазоны (ссылки), которые показываем посетителям без JS.

Сравнение фильтра по цене с включённым и отключённым JS