Лучшие практики для дизайна веб-сайта Parallax Scrolling

1. Как использовать эффекты прокрутки параллакса
2. Учитывайте скорость загрузки веб-страницы
3. Учитывайте пропускную способность вашего веб-пользователя
4. Оцените производительность Parallax Scrolling на мобильных устройствах
5. Рассмотрим влияние веб-дизайна Parallax на SEO

Если вы веб-дизайнер или хотите нанять профессиональную компанию по дизайну в Торонто, такую ​​как Дизайн парашюта чтобы создать свой сайт, вы, вероятно, будете в курсе текущих тенденций дизайна сайта.

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

Прокрутка параллакса в веб-дизайне позволяет любому элементу дизайна на веб-холсте перемещаться независимо (быстрее или медленнее) от элементов фона или переднего плана. Дизайн веб-сайта Parallax настолько популярен в настоящее время, что даже если этот термин звучит для вас чуждо, вы, скорее всего, уже испытали его.

Несмотря на красоту и вау-фактор, который может предложить дизайн параллакса, в сообществе дизайнеров и поисковиков (SEO) по-прежнему ведутся широкие споры о его эффективности в целом.

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

Я написал подробно о своих мыслях о методах веб-дизайна параллакса. Я думаю о всех статьях, которые я когда-либо писал, эта вызвала наибольшую общественную обратную связь, и было приятно видеть. Если вы хотите начать с самого начала, пожалуйста, ознакомьтесь с нашей предыдущей статьей Плюсы и минусы дизайна сайта Parallax ,

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

Тем не менее, я думаю, что есть место для эффектов параллакса и дизайна веб-сайта. Если вы можете использовать эффект надлежащим образом и в модерации (разве не все хорошо лучше в модерации?), Вы можете создать несколько прекрасных интерфейсов и эффектов веб-сайта, которые будут удобны как для пользователя, так и для SEO.

Давайте рассмотрим некоторые рекомендации по прокрутке параллакса, которые следует учитывать при создании дизайна веб-сайта параллакса.

Как использовать эффекты прокрутки параллакса

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

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

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

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

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

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

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

Учитывайте скорость загрузки веб-страницы

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

Эффект параллакса опирается как на CSS, так и на Javascript, чтобы показать свое великолепное шоу. С каждым движением браузер должен рассчитывать положение каждого элемента на экране одновременно, используя эти внешние скрипты. Даже с современными технологиями это может быть чрезвычайно сложным для браузера и подключения к Интернету. Переусердствуйте с эффектом параллакса, и вы можете снизить производительность своего сайта до уровня, который не только разочарует пользователей, но и снизит рейтинг вашей страницы.

Помимо минимизации применения эффекта на вашем веб-сайте, есть и другие обходные пути, которые веб-дизайнеры и разработчики могут использовать для повышения скорости загрузки и производительности страницы:

• • requestAnimationFrame Callback
    Эта функция сообщает браузеру, что нужно выполнить анимацию, и запрашивает, чтобы веб-браузер пользователя вычислил положение элементов вашей страницы, прежде чем пользователь прокрутит вниз к этому конкретному экземпляру. Этот метод исключает принудительное обновление страницы при каждом событии прокрутки.
  • 3D трансформации
    Метод применения трехмерных преобразований к элементам страницы, которые добавляют больше измерений, создает новый слой для каждого элемента, к которому применяются преобразования.
  • Больше полагаться на CSS
    CSS, необходимый для создания эффекта прокрутки параллакса, довольно простой и легкий. Полагаясь больше на CSS, а не на Javascript, мы можем свести к минимуму использование внешнего скрипта, обеспечивая более быструю скорость загрузки страницы.

Учитывайте пропускную способность вашего веб-пользователя

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

Большинство веб-сайтов, которые мы создаем, полностью настраиваемый WordPress установки, что дает нам возможность использовать плагины сжатия изображений, такие как SmushIt, для оптимизации изображений для веб-сайтов и уменьшения пропускной способности, необходимой для загрузки каждого изображения.

Если ваш веб-сайт не создан в системе управления контентом (CMS), которая допускает внешние службы, такие как SmushIt, вы также можете отключить эффект параллакса для каждого пользователя при обнаружении медленного соединения. Это похоже на метод, который мы используем с адаптивным дизайном сайта. Когда планшет или мобильный видовой экран обнаружены, вместо параллакс-версии загружается статическая версия сайта, что приводит меня к параллаксу и мобильной среде…

Оцените производительность Parallax Scrolling на мобильных устройствах

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

Хороший веб-дизайнер заранее поймет это и спланирует статическую или оптимизированную для мобильных устройств версию веб-сайта, которая по существу «отключает» эффект параллакса при обнаружении мобильной среды. Веб-сайт будет выглядеть точно так же в своем статическом состоянии, мы просто уберем движение элементов дизайна и требование мобильного браузера вызывать внешние скрипты для выполнения вычислений, которые их коллеги по настольному компьютеру могут выполнять проще.

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

Тем не менее, некоторые смелые веб-разработчики создали обходные пути для имитации эффекта параллакса на мобильных устройствах с использованием преобразований CSS3. С помощью этого метода мы можем воссоздать богатую интерактивную прокрутку параллакса, которую мы можем предложить нашей аудитории на рабочем столе. Для эмуляции прокрутки параллакса в мобильных браузерах доступно несколько библиотек прокрутки на сенсорном экране, таких как Scrollability, iScroll, Zynga Scroller.

Рассмотрим влияние веб-дизайна Parallax на SEO

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

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

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

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

Другой проверенный вариант - использовать функцию pushState в jQuery для разделения одной страницы параллакса на несколько индексируемых разделов. Это означает, что каждый раздел будет проиндексирован со своим уникальным URL-адресом и мета-контентом. Этот метод очень эффективен, поскольку позволяет многократно индексировать одну страницу для уникального контента.

Более простой способ - использовать прокрутку параллакса на домашней или целевой странице и страницы со статической информацией, которые могут использовать оптимизированные для SEO URL-адреса.

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

Дизайн парашюта является компанией по разработке веб-сайтов в Торонто, которая специализируется на создании адаптивного веб-дизайна и дизайна пользовательского интерфейса для клиентов по всей Северной Америке.

Похожие

Комментарии