Как Страница недавно написала макеты на основе параллакса, безусловно, были одной из преобладающих тенденций в 2013 году. Как убедительный способ рассказать визуальную историю в редакционном контексте, они предоставляют мощный и визуально привлекательный подход. Однако быстро «параллакс» превратился в популярную платформу для создания целых сайтов. Создание веб-сайта на основе параллакса, чтобы быть SEO-дружественным и достаточно быстрым, требует некоторых уникальных решений. Мы рассмотрим некоторые из них, а также посмотрим, почему в большинстве случаев они, вероятно, не стоят этого.
Эта проблема
В дополнение к замечательным замечаниям Пейджа, есть несколько технических проблем, которые следует учитывать при создании одностраничного веб-сайта.
- SEO, пожалуй, самый большой неудачник. Это страдает, потому что вы потеряли способность оптимизировать каждую страницу. Весь сайт в основном индексируется как одна большая страница (что это такое).
- Также теряется возможность соотносить активность сайта с измеримыми выигрышами (лидами, покупками и т. Д.). Поддержание кодовой базы, которая естественно не разделена на логические и дискретные секции, может быстро стать громоздкой.
- Производительность также ограничена - все эти великолепно большие фоновые изображения и слои параллакса загружаются одновременно, что может быть дорогостоящим, что значительно замедляет работу пользователей.
Короче говоря, создавая сайт таким образом, вы отказываетесь от всех неотъемлемых преимуществ многостраничного сайта. Несмотря на то, что есть обходные пути для всех перечисленных выше проблем, они просто - обходные пути, которые становятся еще одной областью сложности, которую необходимо поддерживать.
Некоторые обходные пути
Например, все три эти технические проблемы можно компенсировать, делая сайт более динамичным. В частности, можно использовать прогрессивно улучшенный подход на основе Ajax. Основная идея заключается в том, что различные «страницы» (на самом деле, блоки длинной прокручиваемой страницы) загружаются динамически через Ajax, когда это необходимо - либо щелчком по навигационной кнопке, либо прокруткой страницы. В то же время URL-адрес «изменяется» таким образом, что новая «страница» имеет новый уникальный URL-адрес. С точки зрения поисковой системы, страница может быть уникально проиндексирована, получая все преимущества целевого H1 и мета-тегов. С точки зрения пользователя, страница плавно прокручивается из одного раздела в другой, что позволяет создать необычный дизайн на основе параллакса, который так нравится детям.
Как это работает? Существует несколько встроенных библиотек jQuery, которые обеспечивают такую функциональность, и даже тема WordPress, которая (вроде) работает. Как бы то ни было, основные принципы те же, что и в этой простой демонстрации. Демонстрация работает только в HTML5-совместимых браузерах - для получения более подробной информации см. Мои заметки ниже.
https://www.newfangled.com/parallax_test/index.php
Обратите внимание, что при нажатии и прокрутке URL-адрес изменяется, чтобы указать, какую «страницу» вы просматриваете. С точки зрения поисковой системы, они рассматриваются и индексируются как отдельные страницы, так как мы используем метод pushState (), который по крайней мере Google а также Bing признать.
Это может быть неочевидно, но каждый раздел загружается динамически, что обеспечивает быструю начальную загрузку страницы. Использование кнопки «Назад» фиксирует историю просмотренных страниц. Однако прямой доступ к URL-адресу страницы приведет вас к данному подразделу.
Наконец, поскольку мы используем стандартный подход - дискретные ресурсы для обслуживания отдельных страниц - становится возможным предоставить полностью не одностраничный (но все же ориентируемый на навигацию) опыт тем пользователям, которые в нем нуждаются, либо из браузера, либо из специальных возможностей. точка зрения. Попробуйте: выключите JavaScript и перезагрузите страницу.
Пристальный взгляд
Сначала мы начнем с базовой функциональной навигации, которая ссылается на реальные страницы. В худшем случае, если у пользователя нет JavaScript, он все равно может перейти на эти страницы. Эти страницы могут даже быть динамическими, поэтому такие элементы, как верхний и нижний колонтитулы, отображаются только в том случае, если доступ к странице не осуществляется с помощью вызова Ajax. Ниже ссылок мы добавим заполнители, в которые будет загружена каждая «страница».
<div id = "nav"> <a class="mainnav" rel-container="page1" href="/parallax_test/page1.php"> Page 1 </a> <a class = "mainnav" rel-container = "page2" href = "/ parallax_test / page2.php"> стр. 2 </a> <a class="mainnav" rel-container="page3" href="/parallax_test/page3.php"> стр. 3 </ a > <a class="mainnav" rel-container="page4" href="/parallax_test/page4.php"> стр. 4 </a> <a class = "mainnav" rel-container = "page5" href = "/ parallax_test / page5.php "> Страница 5 </a> </ div> <div class =" container "id =" page1 "data-speed =" 20 "> </ div> <div class =" container "id = "page2" data-speed = "2"> </ div> <div class = "container" id = "page3" data-speed = "10"> </ div> <div class = "container" id = "page4 "data-speed =" 5 "> </ div> <div class =" container "id =" page5 "data-speed =" 9 "> </ div>Далее мы добавим немного JavaScript, который динамически загружает каждый блок и привязывает слушателя к основному элементу навигации, который прокручивается вниз к этому блоку.
$ ('. mainnav'). each (function () {var containerId = $ (this) .attr ('rel-container'); loadContainer (containerId); $ (this) .on ("click", функция (событие) ) {event.preventDefault (); scrollToContainer (containerId);})})Затем мы добавим немного JavaScript, который обнаруживает, когда данный блок получает видимость в видимом окне. Когда это произойдет, мы обновим историю браузера, используя API HTML5.
$ (window) .on ('scroll', function () {var newPage; $ ('. container'). each (function () {if (! newPage) {if ($ (this) .offset (). top) > ($ (window) .scrollTop ())) {newPage = $ (this) .attr ('id');} else {}}}) if ((typeof (newPage)! = 'undefined') && newPage! = currentPage) {updateHistory (newPage); currentPage = newPage;}}); function updateHistory (id) {history.pushState ('', 'New URL:' + id, baseUrl + id); }Наконец, мы хотим прослушать изменение URL-адреса, либо через нажатие пользователем кнопки «вперед / назад», либо за повторную загрузку страницы. Когда это произойдет, мы запустим соответствующий вид блока.
window.onpopstate = function (event) {var fullUrl = location.pathname; urlPart = fullUrl.replace (baseUrl, ''); if ((typeof (urlPart)! = 'undefined')) {scrollToContainer (urlPart); }};Конечно, это очень простой пример.
Мы полагаемся на API истории HTML5, что означает, что он не будет работать на старых браузерах, таких как IE 8 и 9. Это также может быть достигнуто более кросс-браузерным способом с помощью таких инструментов, как history.js а также htm5-история-апи , Стоит отметить, что, насколько мне известно, все эти методы используют #! ( Хэш-бэнг ), а не метод pushState (). Google а также Bing оба указали, что метод JavaScript pushState () является предпочтительным способом указать, что загрузка Ajax должна индексироваться / обрабатываться как уникальная страница.
Я не показываю какие-либо прогрессивные методы загрузки, хотя для этого есть все элементы, основанные на активности прокрутки.
Функциональность параллакса также очень проста и была взята из урока Вот , Проверьте исходный код чтобы увидеть полную функциональность, включая сам основной код параллакса.
Так?
Это должно дать вам общее представление о том, что мы делаем. Как вы можете видеть, он добавляет кучу шагов и зависимостей к тому, что в противном случае было бы очень простой многостраничной структурой. Несмотря на то, что он не обязательно хрупкий, он содержит много сложностей, которых иначе не было бы.
Что же тогда на вынос? В конце концов, стоят ли эти обходные пути? На мой взгляд, нет. Самая большая проблема для рассмотрения - это основная цель, которую нужно обслуживать. Редакционная статья или любой «автономный» фрагмент контента могут извлечь пользу из визуального повествования, которое обеспечивает параллакс. С другой стороны, если пользователь быстро переключается между разными элементами (скажем, на страницах веб-сайта), то параллаксный подход может сделать сайт в лучшем случае неловким - и часто непригодным для использования. В конечном счете, при рассмотрении построения сайта на основе параллакса я обнаружил, что Проблемы с пользовательским интерфейсом и технические проблемы, описанные выше, значительно превосходят визуальные преимущества. Что, может быть, было не так уж и хорошо для начала.
Как это работает?Так?
Что же тогда на вынос?
В конце концов, стоят ли эти обходные пути?
