Подготовьте свой сайт для мобильных устройств
Ваш веб-сайт готов для мобильных устройств? Звучит как почти глупый вопрос в 2017 году. Конечно, верно?
Но стоит взглянуть еще раз, чтобы увидеть, как это выглядит на мобильных устройствах. Не менее важно думать о том, как Google видит это на мобильных устройствах.
Первая подсказка, которая у меня была, это то, что мой сайт может быть не таким дружественным для мобильных устройств, как я думал, Инструменты Google для веб-мастеров что некоторые сенсорные элементы были слишком близко друг к другу. Оттуда пришел полный обзор. Это больше, чем просто технология.
Вот 10 вещей, которые вам нужно сделать, чтобы воспользоваться мобильной революцией.
Когда я говорю «революция», я имею в виду это двумя способами:
первый, теперь все больше людей выходят в интернет на мобильных устройствах чем на настольном компьютере и ноутбуке. Есть много клиентов, которые рискуют, не имея веб-сайта, готового для мобильных посетителей. Самое главное, что многие люди, которые делают покупки на настольных компьютерах или в розничном магазине, принимают решения о покупке на своих мобильных устройствах.
Глобальная статистика Statcounter – доля рынка настольных компьютеров, мобильных телефонов и планшетов в мире – август 2016 – 2017второйGoogle принял «Мобильный сначала» индекс. Это означает, что его основной индекс теперь смещен для отображения веб-страниц, оптимизированных для мобильных устройств. Мы еще не видели этого эффекта в индексе вашего рабочего стола, но, скорее всего, скоро. Почему? Следуйте этому сценарию:
- Вы делаете поиск Google что-то на вашем рабочем столе.
- То, что вы найдете, интересно.
- Вы отправляете это другу.
- Друг открывает его на своем мобильном … и это выглядит ужасно.
Чтобы избежать этого, Google может начать понижать рейтинг немобильных сайтов даже при поиске на рабочем столе. Это почти очевидно, и именно поэтому в первую очередь нужно иметь движущийся индекс.
СВЯЗАННАЯ ПУБЛИКАЦИЯ – SEO Guide Мое простое руководство по поисковой оптимизации
Быть полностью восприимчивым
Что делает «отзывчивый» сайт Половина? Очень просто: он адаптируется к любому размеру экрана, на котором вы находитесь.
Большой настенный экран? Нет проблем
Мини планшет? Нет проблем
¿Laptop? Нет проблем
iPhone? Нет проблем
Вам не нужно каждое устройство, чтобы проверить, полностью ли реагирует ваш сайт. На настольном компьютере или ноутбуке возьмите левый или правый край окна браузера и медленно перетащите его на противоположную сторону. Когда окно сужается, обратите внимание на то, как текст корректируется в соответствии с шириной экрана. Обратите внимание, как изображения становятся меньше, когда окно сужается.
Если текст и изображения не отвечают на изменение размера, ваш веб-сайт не отвечает. Получить новую тему или нанять программиста. Это был отличный подход для меня около года назад. Это одно из трех внесенных мною изменений, которое значительно увеличило число клиентов, пишущих, которые я получаю.
Ускоренные мобильные страницы
Google установил протокол под названиемУскоренные мобильные страницы (AMP)Эти страницы являются страницами-призраками, которые вы создаете, каждая из которых затеняет обычную страницу. Они ускоряются двумя способами. Во-первых, они удаляются для более быстрой загрузки, но отображаются не все элементы. Во-вторых, Google кэширует их, чтобы их можно было быстрее доставлять пользователям в поиске прямо с сервера Google.
Некоторые люди добавили ускоренные мобильные страницы на свои сайты. Другие предпочитают быть полностью восприимчивыми. Выполнение того и другого может быть излишним, так как Google не будет никого отправлять на ваши полностью отзывчивые страницы, если у них есть страница AMP, кэшированная для этого URL.
у меня есть нет планов по внедрению AMP, Если Google начнет улучшать рейтинг страниц AMP, это может изменить его мнение. Но у меня гораздо больше контроля над адаптивными страницами. Я не хочу, чтобы мои страницы выглядели раздетыми.
Если вы решили AMPify своего сайта, есть инструменты, которые могут вам помочь. Например, вот Список плагинов для WordPress AMP,
Оптимизировать изображения
Скорость важна при определении, готовы ли вы для мобильного сайта. Ускоряет отличную мотивацию за AMP. Простой способ увеличить скорость ваших мобильных страниц уменьшает размер ваших изображений.
Во-первых, убедитесь, что ваши изображения не больше, чем вам нужно. Если пространство для вашего изображения составляет всего 600 пикселей в ширину, не отображайте изображение шириной 3000 пикселей. Если люди должны видеть большие детали при нажатии, используйте два разных изображения: изображение шириной 600 пикселей на странице и изображение шириной 3000 пикселей при нажатии.
во-вторых, оптимизировать изображения, Я обычно Opimizilla, Это бесплатный онлайн инструмент. Просто перетащите изображение, которое вы хотите уменьшить, и Optimizilla оптимизирует его автоматически. Просто сохраните его на жестком диске и используйте оптимизированное изображение вместо оригинального.
Больше субтитров
Люди не читают в Интернете. Они сканируют. Это не совсем верно. Мы сканируем, пока не увидим то, что бросается в глаза. Частые титры важны для привлечения внимания людей.
Люди не только сканируют мобильные устройства, но и передвигаются во время сканирования. Субтитры еще важнее на мобильных устройствах, чем на настольных компьютерах.
Прекратите сканирование. Остановите прокрутку. Чтение начинается.
Меньшие абзацы
Важнее, чем субтитры длина абзаца, Вы, наверное, уже знаете, что большие блоки текста кажутся пугающими. Чем больше абзац, тем больше работы он, кажется, читает.
Если на настольном компьютере абзац выглядит большим, представьте, как он выглядит на мобильном устройстве. На телефоне это может заполнить экран. Даже половина экрана или треть экрана выглядит большой и слишком простой для прохождения.
Размер прикуса
Это не просто огромные абзацы. Даже небольшие блоки текста легко пропустить.
Одним из решений является использование списков. Я пытаюсь создавать списки маркеров каждый раз, когда в предложении есть список по крайней мере из трех элементов. Это может превратить очень длинное и сложное предложение в три, которые легче читать.
Скрыть менее важный контент
Я также реструктурировал некоторую информацию, чтобы она не отображалась при загрузке страницы. Вы увидите это на страницах сервиса, как в моя страница автора блога, Посмотрите, что происходит, когда вы нажимаете «Нажмите или Нажмите, чтобы узнать больше причин нанять профессионального блоггера». Это позволяет мне включать полезный контент в длинной форме, не перегружая мобильного пользователя. Помните, что текст корректируется на мобильном телефоне. То, что появляется на трех или четырех экранах на рабочем столе, может занимать 12 или 15 страниц в телефоне.
Любой, кто хочет, может открыть детали. В моем случае это справочная информация для людей, которые любят читать больше и получить представление о том, что происходит.
Держите свой CTA видимым
Я думал, что это было действительно круто. Он имел форму запроса боковой панели, плавающую в правой части экрана. Независимо от того, как далеко вниз прокручивается страница, форма плавает. Идея состоит в том, что всякий раз, когда кто-то думает о найме нас, путь есть. Там нет работы, чтобы найти его. Это почти легко и просто. Теперь, когда я думаю об этом, я был действительно крут. Но не так здорово на мобильном телефоне.
Проблема в том, что сама форма имеет размер экрана телефона. Очевидно, что он не может плавать в боковой панели на мобильных устройствах.
Поэтому вместо этого я положил кнопку, которая плавает над страницей на мобильном телефоне. На рабочем столе кнопка заменяет форму только при прокрутке под формой.
Вот так выглядит форма на рабочем столе.
Это то, что происходит, когда форма проходит.
И вот как это выглядит на мобильных устройствах (быстро используя этот прием, чтобы уменьшить ваш браузер).
Теперь наш сайт готов для мобильных устройствТеперь я снова очень крут 😉
Убедитесь, что ваш сайт готов для мобильных устройств
Не забудьте проверить, что ваш сайт готов для мобильных устройств. Я сказал, что вам не нужно каждое устройство, чтобы увидеть, полностью ли оптимизирован ваш сайт. Сжатие вашего экрана может быстро сказать вам, если это не так.
Но как только работа завершена, вам нужно проверить ее на разных устройствах. Вы можете найти больше улучшений, чтобы сделать.
Это также стоит проверить с помощью Инструментов Google для веб-мастеров. В конце концов, если есть что-то, что Google все еще не любит, по крайней мере это стоит проверить.
