Рекомендации по веб-разработке - Как отключить JavaScript

Question

Что лучше всего делать, если у пользователя не включен JavaScript?Каков наилучший способ доставки контента для такого пользователя?Каков наилучший способ сделать сайт читабельным для поисковых систем?

Я могу придумать два способа добиться этого, но не знаю, что лучше (или если третий вариант лучше):

1. Положитесь на мета-тег обновления, чтобы перенаправить пользователей на версию сайта, не поддерживающую JavaScript.Оберните тег meta-refresh в тег noscript, чтобы те, кто имеет javascript, его игнорировали.
2. Используйте тег iframe, расположенный внутри тега body, для доставки не-javascript-версии сайта.Оберните тег iframe в тег noscript, чтобы он был проигнорирован теми, у кого есть JavaScript.

Я также был бы признателен за громкие примеры правильного или неправильного способа сделать это.

--------- ДОПОЛНЕНИЕ К ВОПРОСУ -----------

Вот пример того, что я сделал в прошлом для решения этой проблемы: http://photocontest.highpoint.edu/

Я хочу убедиться, что нет лучших способов сделать это.

Answer 1

Вы говорите о постепенной деградации: разработка и настройка сайта для работы с javascript, а затем обеспечение работы сайта с отключенным javascript. Самое простое, что можно сделать, это включить html-тег «noscript» где-то в верхней части вашей страницы, который выдает сообщение о том, что сайт ТРЕБУЕТ JavaScript или что-то не работает. ТАК идеальный пример этого. Большинство кнопок в верхней части экрана работают через JavaScript. Выключите его, и вы получите красивое красное знамя, а выпадающие js-эффекты исчезли.

Я предпочитаю прогрессивное развитие. Заставьте сайт работать полностью без javascript / flash / css3 / чем угодно, ТОГДА улучшайте его постепенно (по-прежнему включая тег noscript), чтобы улучшить взаимодействие с пользователем. Это гарантирует, что у вас есть полностью работающий, читаемый веб-сайт, независимо от того, являетесь ли вы пользователем с ограниченными возможностями с программой чтения с экрана или поисковой системой, и в то же время обеспечивает хороший пользовательский интерфейс для пользователей с новыми браузерами.

Итог: для любого динамически генерируемого контента (например, элементов страницы, генерируемых с помощью AJAX) должна быть статическая альтернатива страницы, где этот контент должен быть доступен по стандартной ссылке. Если вы используете javascript для содержимого с вкладками, отображайте все содержимое таким образом, чтобы это соответствовало остальной части веб-страницы.

Примером является http://www.bbc.co.uk/news/ Отключите JavaScript, и у вас будет полная страница письменного контента, изображений, ссылок и т. Д. Включите JavaScript, и вы получите прокрутку новостей, вкладок, прокрутку изображений и т. Д.

Я собираюсь быть непослушным и размещать ссылки на википедию:

Прогрессивное улучшение

Изящная деградация

Answer 2

Если вы выполняете «серьезный» Ajax (например, маршрутизация на стороне клиента), может быть полезен следующий метод:

1. Используйте URL-адреса без GET / "?" - параметры (это облегчает вашу жизнь в дальнейшем)
2. Использовать http://baseurl.com/#!/path/to/resource для клиентской маршрутизации
3. Реализовать рендеринг не-скриптовой HTML-версии вашего сайта (именно так Google называет снимок HTML) на http://baseurl.com/path/to/resource
4. Оберните все содержимое вашего снимка HTML в noscript-теги и перенаправьте через top.location.href на полную версию сайта
5. Дескриптор http://baseurl.com/?_escaped_fragment=/path/to/resource - он должен перенаправить через 301-ответ на http://baseurl.com/path/to/resource
6. Используйте a-теги только для GET-ссылок, используйте формы для POST / PUT / DELETE-ссылок - при необходимости удалите из них чертовски

Хороший пример кода для ссылок, который я нашел во время исследования «Как написать правильный Ajax-код»:

<a href="/path/to/resource" onclick="Routing.navigate(&quot;/path/to/resource&quot;); return false;">Resource</a>

Это, конечно, довольно сложное решение, но оно должно включать как SEO (включая сканеры не из поисковых систем), так и доступность. Проблема в том, что вы должны иметь возможность отображать свою страницу на стороне сервера и клиента.

Одним из решений может быть использование шаблонной структуры, такой как усы, где существуют реализации для разных платформ.

1. Используйте что-то вроде {{#pagelet}} / path / to / частичное {{/ pagelet}} для динамических частей вашей страницы - пример: {{#pagelet}} / image / {{image_id}} / preview { {/ pagelet}}
2. При рендеринге на стороне клиента будет реализован динамический обмен Pagelet на что-то, загруженное через Ajax (например, render)
3. При рендеринге на стороне сервера пейджер будет просто визуализироваться напрямую (в случае сомнения просто сверните пейджер и отрендерите его сразу же - или, если вы можете написать код асинхронно, сделайте это так же, как на стороне клиента: напишите несколько временный промежуток в буфер, начните извлекать все страницы, заменяйте временные промежутки по мере поступления страниц и очищайте буфер после того, как все страницы были обработаны.

Это лучший общий дизайн, который я нашел до сих пор. Вы можете делать глубокие ссылки в свое приложение, оно дружественно для поисковых систем и должно заставить вас создать страницу, которая изящно ухудшается.

P.S .: Одно из преимуществ методов, описанных выше, заключается в том, что рендеринг страницы как в Ajax, так и в «Web 1.0» может выиграть от кэширования memcached целых страниц.

Answer 3

Один быстрый совет, который может вам помочь: просто установите lynx, веб-браузер командной строки, и вы сразу увидите, как Google и другие SEO видят ваш сайт (и слепых тоже).Это очень полезно.Конечно, в окнах командной строки нет графики, и JavaScript отключен.

Answer 4

Если ваше приложение должно иметь функционал javascript, тогда вы ничего не можете сделать, кроме как показать им вежливое сообщение в теге noscript.

В противном случае вы должны думать иначе.

1. Создайте свой сайт без JS
2. Дайте потрясающий пользовательский опыт и сделайте его полным функциональным
3. Добавьте JS и сделайте UX еще более функциональным,Слой JS сверху.

Так что, если у пользователя нет JS, ваш сайт все равно вернется ко второму шагу состояния вашего сайта.

Что касается сканирования.Если ваш сайт зависит от AJAX и большого количества JS, вы можете сообщить об этом Гоголе: http://code.google.com/web/ajaxcrawling/docs/getting-started.html

Answer 5

Я не совсем уверен, считается ли Прогрессивное улучшение лучшей практикой в ​​наши дни, но я лично предпочитаю этот подход.В этом случае вы пишете свой серверный код так, чтобы он функционировал как стандартное веб-приложение web 1.0 (без JavaScript), чтобы обеспечить хотя бы достаточную функциональность для работы системы без JavaScript.Затем вы начинаете размещать функции JavaScript поверх этого, чтобы сделать систему более удобной для пользователя.Если все сделано правильно, вы должны получить веб-приложение, которое, по крайней мере, предоставляет достаточно функциональности, чтобы быть полезным для пользователей, не использующих JavaScript.

Связанный процесс известен как Graceful Degradation, который работает аналогичным образом, но начинается с предположения, что у пользователя включен JavaScript, и встроены обходные пути для случаев, когда они не работают.Однако у этого есть недостаток, заключающийся в том, что если вы пропустите что-то, вы можете оставить пользователя без JavaScript без отступления.

Пример прогрессивного улучшения для страницы поиска: создайте свою страницу поиска так, чтобы она обычно просто возвращала HTML-страницу результатов поиска, но также добавляли флаг, который можно установить с помощью GET, чтобы при установке он возвращал XML илиJSON вместо.На странице поиска включите сценарий, который выполняет запрос AJAX на странице поиска с флагом, добавленным к строке запроса, а затем заменяет основное содержимое страницы результатом вызова AJAX.Пользователи JavaScript получают выгоду от AJAX, но те, у кого нет JavaScript, все еще получают работающую страницу поиска.

http://en.wikipedia.org/wiki/Progressive_enhancement

Answer 6

У вас есть другой вариант, просто загрузите ту же страницу, но сделайте так, чтобы она работала для пользователей noscript (прогрессивное улучшение / постепенное ухудшение).

Простой пример: вы хотите загрузить контент в div с помощью ajax, makeтег <a>, ссылающийся на полную страницу с новым содержимым (поведение noscript) и привязка тега <a> к jQuery для перехвата щелчков и загрузки с помощью ajax (поведение сценария).

$('a.ajax').click(function(){
var anchor = $(this);
$('#content').load(anchor.attr('href') + ' #content');
return false;
});

Answer 7

Я бы предпочел закодировать страницу без javascript, а затем, если javascript включен, мы перенаправим пользователей на аналогичную страницу с javascript.(та же концепция, что и для прогрессивного улучшения)

перенаправление с использованием JavaScript