Веб-дизайн: как правильно использовать длинную прокрутку
- Вот как вы правильно используете длинную прокрутку Теперь, когда недостатки очевидны, вы узнаете,...
- Руководство пользователя при длительной прокрутке
- навигация
- Вывод: долгая прокрутка возможна, когда мы готовы вкладывать больше работы
Вот как вы правильно используете длинную прокрутку
Теперь, когда недостатки очевидны, вы узнаете, как с ними справиться. Потому что хорошей новостью является то, что вы можете устранить практически любой недостаток с помощью дополнительной работы.
SEO в долгой прокрутке
Что касается темы SEO, важно провести дальнейшую дифференциацию. Не всегда Long Scrolling будет синонимом перевода OnePager. Если вы используете длинную прокрутку в основном для визуального повествования, то упомянутые выше недостатки вряд ли могут возникнуть в первую очередь.В конце концов, здесь вы рассказываете на холсте однородную историю, которая настолько длинна, насколько это необходимо для этой цели. Это на самом деле идеально с точки зрения SEO.
С другой стороны, если вы найдете разные темы на вашем треке с длинной прокруткой или если вы имеете дело с OnePager, это будет интересно. Ключевое слово называется сегментация.
Мы делим наш контент на сегменты. Это можно сделать с помощью DIV-ID, чье имя лучше всего соответствует привязке. Каждый сегмент можно перепрыгнуть с верхней части страницы. Вы используете якорные ссылки, потому что якорные ссылки являются SEO-сигналами и оцениваются поисковыми системами. Другое преимущество якорных ссылок заключается в том, что они также доступны напрямую извне, что поддерживает построение ссылок.
Каждый сегмент мы снабжаем заголовком первого порядка, таким образом, H1 - что, безусловно, противоречит многим из вас, потому что правило состоит в том, чтобы устанавливать как можно меньше H1, предпочтительно только один на страницу, но мы можем из первого Успокойте человека Google, отвечающего за эту тему, Мэтта Каттса, который говорит:
С точки зрения релевантности, на самом деле сложно достичь разумного рейтинга, разместив слишком много разных тем на одной странице. Но если это страница с общим термином, который затем подразделяется на более мелкие, более усваиваемые кусочки в дальнейшем ходе страницы, чтобы исчерпывающе обработать ее, хороший рейтинг, по крайней мере, возможен.
В этом случае важно подготовить контент как можно более разборчиво и постараться занять наилучшее положение в целевой группе. Как средний читатель рассчитывает подойти к теме? Если ему удастся поработать над темой как можно лучше, существует высокая вероятность того, что это будет вознаграждено поисковыми системами.
Руководство пользователя при длительной прокрутке
В руководстве пользователя есть несколько недостатков, которые уже были определены выше. Как справиться с этим:
навигация
Исчезновение верхнего и нижнего колонтитула не является данным Богом фактом. Относительно просто технически возможно сделать заголовок липким, поэтому во время миграции при прокрутке. Таким образом, заголовок всегда будет виден, вашим пользователям не нужно будет прокручивать весь путь вверх, чтобы снова перейти к навигации.
Совсем недавно, липкий заголовок, более вероятно, будет смешанным. Заголовок сначала остается липким, но затем полностью исчезает при продолжении прокрутки, оставляя больше места на вашем мобильном устройстве для потребления фактического контента. Если пользователь затем попытается снова прокрутить вверх, заголовок сразу же появится в верхней части края экрана, как будто его никогда не было.
Липкий заголовок также используется здесь в t3n. (Скриншот: t3n)
Нижний колонтитул может быть липким. В большинстве случаев это должно быть довольно нежелательно. Точно так же, как заголовок может, конечно, привести к исчезновению нижнего колонтитула и автоматическому появлению. Вопрос в том, если это необходимо. При соответствующем дизайне информационной архитектуры должно быть относительно легко полностью обойтись без нижнего колонтитула, который отображается перед нижней частью страницы.
Вообще, визуализация способности прокрутки вверх также является хорошей идеей. На каждой странице с длинной прокруткой должна присутствовать однозначная пиктограмма «вверх».
На этом этапе я хотел бы снова затронуть тему сегментации. Мы можем отразить эту сегментацию соответственно в дизайне. В дополнение к основной навигации можно было бы подключить вторичную навигацию с боковым креплением, которая связывается непосредственно с отдельными сегментами и остается липкой, не оказывая негативного влияния на ограниченное пространство экрана. Apple продемонстрировала это несколько лет назад.
На странице продукта для структуры дизайна Slides вы найдете эту боковую навигацию, ведущую к отдельным сегментам страницы. (Скриншот: t3n)
Выгодно, если количество точек навигации, с одной стороны, отражает количество сегментов, а с другой, таким образом, нужно визуализировать не слишком много сегментов. Цель, наконец, ясность. Итак, мы подошли к почти естественному ограничению нашей длины страницы. Также рекомендуется, чтобы пиктограммы указывали, в каком сегменте вы находитесь в данный момент. Это дает читателю возможность классифицировать себя и получить представление об общем объеме и его соответствующей позиции.
Вашим читателям будет еще проще, если вы разделите отдельные сегменты графически. Хорошо, если сегмент всегда имеет такую же длину, как видимая область браузера. Это создает впечатление страницы-ориентированной презентации, которая, в свою очередь, служит обзору.
В то же время креативная вариация позволяет избежать скуки. В дополнение к разнообразному дизайну, скуку можно также избежать с помощью элементов параллакса или функциональной анимации. Функциональные анимации поддерживают UX страницы, типичные функциональные анимации обеспечивают обратную связь. Например, контент может разворачиваться так, как если бы он прокручивался или иным образом перемещался в область просмотра, изображения могли быть упорядочены в галерею и многое другое.
Если мы используем ленивую загрузку, важно визуализировать процесс загрузки, потому что не всегда сетевое соединение будет достаточно быстрым, чтобы избежать заметной задержки
Вывод: долгая прокрутка возможна, когда мы готовы вкладывать больше работы
В ходе этой статьи стало ясно одно: страницы с длинным циклом прокрутки обычно означают больше работы, чем классические концепции дизайна. Это относится, по крайней мере, когда длительная прокрутка сопровождается отказом от многостраничных дизайнов.
Но если Long Scroller - это только одна страница из нескольких, преимущества перевешивают преимущества, особенно в том, что касается визуального повествования. Длинные истории лучше рассказывать на длинных страницах, а не по частям. Вот тогда эффекты параллакса и другие анимации могут еще больше улучшить рассказывание историй.
Кстати, здесь есть каркас от дома Designmodo, с помощью которого можно реализовать долгую прокрутку в модульной системе. Посмотри веб-сайт продукта на. Он также был создан с использованием фреймворка Slides и демонстрирует некоторые из лучших практик, упомянутых здесь.
Другие источники по теме
- Плюсы и минусы длинной прокрутки в веб-дизайне | Speckydoy Design Magazine
- Все, что вам нужно знать о давно прокручивающейся тенденции | Депозит веб-дизайнеров
- Бесконечная прокрутка Лучшие практики | UX PlaFnet
- 10 отличных дизайнов для одной страницы | Aptdesign
- Прокрутка в веб-дизайне: сколько стоит? | Speckyboy Design Magazine
- Лучшие практики для долгой прокрутки | UX Planet
- Функциональная анимация в UX Design: что делает хороший переход? | Babich.biz
- SEO хитрости для одностраничных сайтов | Awwwards
- Одностраничные сайты и SEO | Земля Поисковой машины
- Бесконечная прокрутка: 9 советов для запоминания | T3n
- Бесконечная прокрутка: 33 отличных бесконечных прокрутки сайтов | T3n
- Хороший рейтинг, несмотря на «Бесконечную прокрутку»? Google дает 8 советов для операторов сайтов | T3n
Похожие
Веб-дизайн Утрехт... вы получаете более высокую потенциальную клиентуру. Кто не хочет выделяться среди десятков сайтов? С помощью уникального веб-сайта вы можете быстро и легко связаться со своей целевой группой. Веб-сайт - это больше, чем визитная карточка, это расширение вашей компании. Этим вы даете хорошее представление своим клиентам и можете быть уверены, что они вернутся снова. Не ждите больше, чтобы связаться с нами, чтобы креативные веб-дизайнеры MD Webbureau могли разработать веб-сайт для вашей Больше клиентов, больше продаж через Google
B & S Media Internet marketing - ведущее агентство интернет- маркетинга с полным спектром услуг. Мы помогаем малым и средним предприятиям получать больше потенциальных клиентов и получать больше прибыли через Google. Благодаря нашему обширному опыту в различных отраслях, мы можем обеспечить оптимальную отдачу от кампаний интернет-маркетинга наших клиентов. Наши сотрудники сертифицированы Google и ежедневно следят за последними новостями. Теперь выберите один из Как сделать Weebly
Аббатство Фукар, английский PWR Major '17 Weebly выделяется из всех создателей веб-сайтов как отличный выбор для любых целей и аудитории. Среди его вариантов - как профессиональный, так и развлекательный, а простые инструкции делают его довольно простым в использовании. Чтобы зарегистрироваться на сайте, перейдите на домашнюю страницу, www.Weebly.com и введите имя пользователя, адрес электронной почты и пароль. Затем вам Веб-сайты Аделаиды - Веб-дизайн
После более чем десяти лет создания высококачественных веб-сайтов в Южной Австралии, веб-отдел Alltraders теперь называется Adelaide Websites . Новый брендинг тесно отражает то, что он делает, чтобы создавать потрясающие сайты в прекрасной Аделаиде. Веб-команда была неотъемлемой частью Alltraders в течение многих лет и будет продолжать в будущем. Ожидается, что ребрендинг поможет им быть более заметными, чем они могли бы быть внутри бренда Alltraders. Коллектив Alilaide Websites SEO СОВЕТЫ: RSS-каналы и как их использовать
Лучшая техника - реализовать RSS-каналы для популярных поисковых фраз. Если вы добавите RSS-канал, отображающий результаты поиска в самых популярных поисковых системах по ключевым словам, возможно, вы сможете повысить свой сайт на несколько шагов Как работает поисковая система?
... вы всегда должны создавать контент сайта, ориентированный на ваших клиентов, а не на поисковые системы, важно понимать, как работает поисковая система"> Хотя вы всегда должны создавать контент сайта, ориентированный на ваших клиентов, а не на поисковые системы, важно понимать, как работает поисковая система. Как только вы это знаете, вы можете перейти к следующему шагу, который включает в себя элементы, которые ищет поисковая система. Как работают поисковые системы? Большинство Как Google, как SEO Pro: сила поисковых операторов
... как они на самом деле работают, и посмотрим, как они действительно ограничивают наши результаты. Итак, это не все основные операторы поиска, но они могут оказаться полезными. Теперь первый довольно очевиден. Когда вы помещаете кавычки вокруг определенного ключевого слова, это заставляет Google использовать точное совпадение для этого ключевого слова и предотвращает появление любых синонимов, если вы используете одно слово. Итак, давайте посмотрим, как это выглядит. Мы будем Как вы пишете заголовки и теги H1 для #LocalSEO?
Хорошо, местные эксперты по SEO, пришло время подойти к столу и показать свои карты. Мы все понимаем, насколько важно локальное SEO для наших маленьких и «локально локальных» клиентов. Черт возьми, мы все с замиранием сердца ждем, когда Дэвид Михм и ребята из Moz.com выпустят Введение в базовый курс SEO
Последняя проверка 11 марта 2019 года в 12:01 Прежде всего, поздравляем вас с тем, что вы стали одним из первых зарегистрировавшихся из 500 доступных нам слотов! Мы очень рады, что вы узнали о нас о SEO. Это первый в истории SEO хакерский базовый курс SEO. Вы получаете это электронное письмо, потому что вы записались на этот курс, который начинается сегодня 1 декабря 2010 г. Как вы все знаете… WordPress SEO Учебник
Этот учебник охватывает следующие темы: Как использовать постоянные ссылки для оптимизации вашего сайта WordPress WordPress дает вам свободу устанавливать ссылки так, как вы хотите, чтобы они выглядели. В административной области WordPress зайдите в Настройки -> Постоянные ссылки . На этой странице вы можете выбрать один из нескольких предопределенных вариантов или использовать собственную структуру для своих ссылок. Как создать SEO-дружественные тестовые страницы
... вы определенно не хотите идти вразрез с руководящими принципами поисковой системы. Тестирование маскировки? Может ли он создавать дублированный контент? Будут ли проиндексированы несколько версий ваших тестовых страниц? Веб-разработчики, которые хотят сохранить свои нынешние позиции при проведении тестов, не спят поздно ночью, думая об этих вещах. Поэтому, чтобы помочь веб-мастерам создавать тестовые страницы, оптимизированные для SEO, Performics разработала следующие рекомендации,
Комментарии
Название этого поста - одно из них: когда адаптивный веб-дизайн или RESS (адаптивный веб-дизайн + серверные компоненты) лучше адаптивного веб-дизайна, чем адаптивный веб-дизайн?Название этого поста - одно из них: когда адаптивный веб-дизайн или RESS (адаптивный веб-дизайн + серверные компоненты) лучше адаптивного веб-дизайна, чем адаптивный веб-дизайн? Если бы человек, который задал вопрос, сформулировал его так: «Является ли динамическое обслуживание лучше, чем адаптивный веб-дизайн для SEO?», На этот вопрос было бы легко ответить. К сожалению, из-за большого количества новых терминов, используемых для описания этих современных веб-процессов, иногда трудно поддерживать Подумайте об этом: когда вы видите инфографику, вы не цените, когда ее создатель нашел время, чтобы предоставить больше контекста?
Подумайте об этом: когда вы видите инфографику, вы не цените, когда ее создатель нашел время, чтобы предоставить больше контекста? Ответ очевиден для вас и ваших читателей. 9. Слишком много ссылок Связывание сложно реализовать. Вероятно, это причина того, что 15% сайтов, которые мы просмотрели, имеют слишком много ссылок «Как мне заставить Facebook использовать другую фотографию, когда кто-то делится моим сайтом?
«Как мне заставить Facebook использовать другую фотографию, когда кто-то делится моим сайтом?» «Как я могу заставить Facebook показывать что-то кроме первой строки моего блога?» «Где же Facebook получает фотографии, которые он показывает рядом с моими постами ?!» «Как мне заставить Facebook показывать то, что я хочу ?» Ты не одинок! Большинство маркетологов и блоггеров задают одни и те же вопросы, и на то есть веская причина: это неочевидно После того, как вы настроили свой веб-сайт на успех в поисковых системах, как вы можете определить, достигли ли вы результатов?
После того, как вы настроили свой веб-сайт на успех в поисковых системах, как вы можете определить, достигли ли вы результатов? Маркетологи должны знать, как отслеживать рейтинг своих сайтов и прогресс SEO, чтобы они могли продолжать делать то, что работает, и корректировать то, что не работает. Цели вашего сайта уникальны для вашего бизнеса. Тем не менее, есть некоторые показатели, на которые почти все сайты должны обратить внимание. На этом уроке по SEO вы научитесь Можете ли вы рассказать нам, как вы подходите / планируете план нового клиента (вообще говоря), и рассказываете о том, какие инструменты вы используете и почему?
Можете ли вы рассказать нам, как вы подходите / планируете план нового клиента (вообще говоря), и рассказываете о том, какие инструменты вы используете и почему? Владельцы сайтов в основном нанимают меня, чтобы увидеть измеримое движение в поисковой выдаче своих ключевых фраз. Это означает, что, чтобы помочь своим клиентам выделиться (в том, что касается Google), мне сначала нужно увидеть, с чем они сталкиваются. Поэтому я всегда начинаю с конкурентных исследований. Можете ли вы использовать повышение, когда мы говорим о качественных посещениях сайта и позволяет ли это ваш бюджет?
Можете ли вы использовать повышение, когда мы говорим о качественных посещениях сайта и позволяет ли это ваш бюджет? Тогда стоит подумать об «инвестировании» в СЭО. «Инвестирование» в кавычки действительно, потому что, как только вы остановите SEA, вы сразу увидите значительное снижение трафика на вашем сайте. Не совсем долгосрочное решение. Это снова SEO. Посадите семена, инвестируя время в Однако даже если вы создаете отличный контент, вы также можете столкнуться с некоторыми другими проблемами, такими как, как структурировать ваш контент?
Однако даже если вы создаете отличный контент, вы также можете столкнуться с некоторыми другими проблемами, такими как, как структурировать ваш контент? Как показать поисковым системам, с какими сообщениями они связаны, а также, что является наиболее важным? В этом вам поможет инструмент Yoast SEO Premium Internal Linking. Он покажет, какие сообщения относятся к вашему контенту, и его легко связать с некоторыми из связанных статей. Yoast SEO предоставляет широкий спектр функций, Более того, если вы не знаете предмет, как вы можете узнать, какие ключевые слова использовать, чтобы видео появляются на верхних позициях ?
Однако даже если вы создаете отличный контент, вы также можете столкнуться с некоторыми другими проблемами, такими как, как структурировать ваш контент? Как показать поисковым системам, с какими сообщениями они связаны, а также, что является наиболее важным? В этом вам поможет инструмент Yoast SEO Premium Internal Linking. Он покажет, какие сообщения относятся к вашему контенту, и его легко связать с некоторыми из связанных статей. Yoast SEO предоставляет широкий спектр функций, Но как вы подходите к этому и какие инструменты вы используете?
Но как вы подходите к этому и какие инструменты вы используете? Эта статья показывает это. Анализ ключевых слов: начать мозговой штурм Найти ключевые слова не так сложно. Благодаря таким инструментам, как Google Keyword Planner Вы можете легко найти сотни из них. Тем не менее, не стоит сразу же использовать инструменты, потому что есть серьезный недостаток. Они довольно жесткие. Пример показывает это. Касаясь SEO, мы имеем в виду, что ключевые слова эта позиция вы И ключевые слова открывают путь в новый мир, который вы, возможно, уже знаете: знаете ли вы, что такое длинный хвост SEO?
Но как вы подходите к этому и какие инструменты вы используете? Эта статья показывает это. Анализ ключевых слов: начать мозговой штурм Найти ключевые слова не так сложно. Благодаря таким инструментам, как Google Keyword Planner Вы можете легко найти сотни из них. Тем не менее, не стоит сразу же использовать инструменты, потому что есть серьезный недостаток. Они довольно жесткие. Пример показывает это. Вы можете нанять мой опыт как для крупных, так и для небольших проектов, какой проект или работа у вас сейчас есть, где вы можете использовать мой опыт?
Вы можете нанять мой опыт как для крупных, так и для небольших проектов, какой проект или работа у вас сейчас есть, где вы можете использовать мой опыт? #contact Мой фон 2018 Активен в качестве SEO специалиста уже 8 лет! 2010 Создание интернет-маркетинга BMC, где я получил дальнейшее развитие в онлайн-маркетинг, специализация SEO - поисковая оптимизация. 2008 Менеджер по инновациям Hogeschool
Как средний читатель рассчитывает подойти к теме?
Кто не хочет выделяться среди десятков сайтов?
Как работают поисковые системы?
Тестирование маскировки?
Может ли он создавать дублированный контент?
Будут ли проиндексированы несколько версий ваших тестовых страниц?
Название этого поста - одно из них: когда адаптивный веб-дизайн или RESS (адаптивный веб-дизайн + серверные компоненты) лучше адаптивного веб-дизайна, чем адаптивный веб-дизайн?
Если бы человек, который задал вопрос, сформулировал его так: «Является ли динамическое обслуживание лучше, чем адаптивный веб-дизайн для SEO?
Подумайте об этом: когда вы видите инфографику, вы не цените, когда ее создатель нашел время, чтобы предоставить больше контекста?
«Как мне заставить Facebook использовать другую фотографию, когда кто-то делится моим сайтом?