Содержание

7 сервисов для проверки сайта на мобильность

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

Признаки дружелюбного к мобильным устройствам сайта:

  1. Удобно читаемый контент (читается без увеличения), крупные поля форм и кнопки.
  2. Отсутствие «тяжелых» картинок, Flash — элементов и излишней анимации.
  3. Отсутствие Java-апплетов и Silverlight-плагинов.
  4. Отсутствие горизонтальной полосы прокрутки.
  5. Минимальная скорость загрузки сайта.
  6. Максимально простая навигация.
  7. Прописан мета-тег viewport.

Сервисы для проверки сайта на «мобильность»

Для демонстрации работы сервисов возьмём сайт моих хороших партнёров — бюро переводов КОНТЕКСТ.

1. Google Mobile Friendly

Проверить можно любой сайт, просто вбив его адрес в строку.

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

https://search.google.com/test/mobile-friendly

2. Яндекс Вебмастер (beta) — инструмент «проверка мобильных страниц»

В отличии от остальных сервисов, тут можно проверить не каждый сайт, а только свой. То есть после того, как сайт добавлен в интерфейс вебмастера с подтверждением прав на него.

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

https://beta.webmaster.yandex.ru/

3. Средство проверки Bing

Проверяется общая оптимизация плюс соответствие 4 пунктам.

Также отображается то, как сайт выглядит на экране смартфона (конечно же, на OS windows, в то время предыдущие сервисы отображали android-смартфон =)).

https://www.bing.com/webmaster/tools/mobile-friendliness

4. Mobile Checker от W3C

Самый «долгий» из всех сервисов. Настолько «долгий», что окончания проверки я так и не дождался =)

Ждал минут 5, в то время как остальные сервисы справлялись за 5-20 секунд.

Пробовал Google chrome и Opera.

https://validator.w3.org/

5. Responsinator

В отличии от остальных не даёт каких-либо оценок, но отображает как выглядит ваш сайт на 6 различных устройствах в двух ориентациях на IOS и Android, что очень круто.

http://www.responsinator.com/

UPD1: 20.07.2017:

6. Adaptivator

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

http://adaptivator.ru/

UPD2: 3.11.2017:

7. iloveadaptive.ru

Ещё один новенький сервис, предложенный в комментариях. Как по мне, немного грузноват и непрактичен, но это с лихвой окупается большими возможностями. Имеется даже сортировка по ОС.

www.iloveadaptive.ru

Вывод

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

Поэтому всем, кто хочет быть ближе к клиенту и иметь больше посещений\лидов, рекомендую как можно быстрее адаптировать свои сайты. Задать мне вопрос — https://vk.com/topic-111053731_33165203

Бесплатный аудит вашего сайта\лэндинга\группы — https://vk.com/topic-111053731_33178124

Больше интересной информации о digital — https://vk.com/bilalovpro

адаптивный дизайн VS мобильная версия

Если ещё лет 8 назад многие компании сомневались, а нужна ли им оптимизация сайта под мобильные устройства, то сегодня практически ни у кого нет сомнений. Конечно, нужна!

Даже самых упёртых скептиков убедила статистика. Цифры говорят сами за себя — рост мобильного трафика бьёт все мыслимые и немыслимые рекорды. Всё больше людей используют для выхода в интернет смартфоны и планшеты. Но тут появляется другой вопрос: как лучше адаптировать сайт под мобильные устройства? Вариантов два — сделать адаптивный дизайн или разработать мобильную версию сайта. Что лучше конкретно в вашем случае? Давайте разбираться вместе!

Почему вообще так важна адаптивность

Вспомните, сталкивались ли вы с такой ситуацией, когда, заходя на сайт со смартфона или планшета, не могли понять, что же за мракобесие здесь происходит. Например, почему элементы сайта не умещаются на экране мобильного устройства. Всё куда-то «ползёт» и «едет». Или почему кнопки, ссылки настолько мелкие, что вы не можете попасть по ним пальцем. А тут ещё — бац!— огромный всплывающий баннер как вылезет на весь экран! Хотя вам он вовсе и не нужен. Зато до действительно необходимого контента не добраться. Для начала нужно преодолеть дебри из бесполезных элементов вроде огромного экрана шапки. Вроде уже несколько раз прокрутили экран, а искомой информации до сих пор не видно…

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

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

Оптимизация сайта под мобильные устройства делается не только ради удобства пользователей, но и для того, чтобы «понравиться» поисковикам. Ведь те, как мы знаем, внимательно отслеживают скорость загрузки страниц, показатели юзабилити. Для Яндекса и Google важно, чтобы сайт имел удобную навигацию, читабельный шрифт (с точки зрения размера). Поисковики не жалуют ресурсы, на которых присутствуют до неприличия мелкие элементы или контент, располагающийся за пределами экрана. Ведь, возвращаемся к уже озвученной мысли, всё это неудобно для пользователей. А значит, и неприемлемо для поисковых систем. Результат: рост отказов, ухудшение поведенческих факторов, проседание позиций в выдаче, сокращение трафика.

С какими проблемами вы можете столкнуться при адаптации сайта под мобильные устройства

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

Иногда проблемы всплывают на этапе переноса существующего сайта на адаптивную версию. В зоне риска — старые сайты и сайты, сделанные на самописных CMS. Порой рентабельней и быстрее не переносить старую версию сайта, а создать новый с нуля (уже с учётом адаптивности). Подробнее об этом — чуть позже.

3 способа проверить адаптивность сайта

1. Без дополнительных сервисов, напрямую в браузере.

Наша задача — добраться до «Инструментов разработчика» и там посмотреть, как разные страницы сайта отображаются на экранах разных устройств.

Используйте меню браузера или горячие клавиши.

Если предпочитаете первый вариант, то действуйте так: откройте сайт, найдите в меню браузера пункт «Дополнительные инструменты», а уже там выбирайте «Инструменты разработчика».

Вы пользуетесь браузером Mozila Firefox? Тогда для проверки адаптивности своего сайта просто нажмите Ctrl+Shift+M.

Предпочитаете браузеры Google Chrome или Opera? Значит, зажимайте сочетание Ctrl+Shift+M или клавишу F12. После этого нажимайте на кнопку Toggle Device Toolbar. И в соседнем окне выбирайте интересующее вас устройство или разрешение на экране.

2. С помощью сервиса «Проверка оптимизации для мобильных» (Mobile Friendly), разработанного Google.

Открываем сервис, в специальной строке прописываем URL, нажимаем «Проверить страницу», ждём результат. Через пару минут сервис вынесет вердикт — удобна или нет проанализированная страница сайта для отображения на мобильных устройствах.

Если страница неудобна, то Mobile Friendly подскажет, какие проблемы надо устранить, чтобы изменить ситуацию.

3. С помощью сервиса от Яндекса.

В данном случае важно соблюсти одно условие — ваш сайт к моменту проверки уже должен быть добавлен в Яндекс.Вебмастер.

Последовательность действий простая: в специальной строке выбираем адрес нужного сайта, нажимаем на кнопку «Проверить», через минуту получаем результат.

Чем адаптивная вёрстка отличается от мобильной версии сайта?

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

Функция мобильной версии сайта заключается в том, чтобы «закрыть» все пожелания мобильной аудитории:

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

Признаки «идеальной» мобильной версии

Если вы хотите оценить, насколько удобна та или иная мобильная версия сайта, посмотрите, а соответствует ли она следующим параметрам.

  • Нет поп-апов и всплывающих окон других видов. Они могут закрывать собой нужный пользователям контент, ограничивать взаимодействие с интерактивными элементами, отвлекать.
  • Короткие формы заказа. Не стоит мучить потенциального клиента долгим заполнением формы. Есть риск, что ему надоест вводить очередную порцию данных, и он решит уйти на другой сайт, где нет таких сложностей.
  • Автозаполнение для тех, кто уже оформлял заказ. Это избавит пользователя от необходимости опять прописывать свои данные.
  • Обеспечена возможность легко увеличивать элементы страницы, скроллить страницу.
  • По указанному на сайте номеру телефона можно действительно позвонить представителям компании. Это должен быть активный элемент страницы.
  • На любой странице сайта есть доступ к меню. Как и на главную страницу.
  • Шрифт размером 14-16 рх. Это оптимальный размер для экранов мобильных устройств, комфортно воспринимаемый человеческим глазом.
  • Крупные кнопки «Заказать»/ «Купить»/ «Позвонить», по которым удобно кликать.

Что выбрать: адаптив или мобильную версию?

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

О мобильной версии

Обеспечивает быструю загрузку страниц, достаточно удобна для пользователей. Однако мобильная версия — это, как правило, только про базовый функционал. Дополнительные функциональные возможности доступны лишь на основном сайте. Кроме того, не всегда мобильная версия сайта отображается правильно. На некоторых экранах сайт «плывёт».

Об адаптивной вёрстке

Контент будет читабельным на экранах практически любых устройств. Но если сайт «тяжелый» и «большой», то и грузиться он будет долго. Какие ресурсы попадают в эту категорию? Сайты с большим количеством страниц, со сложным функционалом, с неоптимизированным контентом. Если ваш ресурс тоже «из этих», проще сделать мобильную версию. А вот для небольших проектов с простым функционалом достаточно будет и адаптива. Плюс поисковые системы отдают предпочтение как раз единым версиям сайта, способных корректно отображаться на разных экранах. А благосклонность поисковиков — это мощный аргумент для всех, кто заинтересован в продвижении своего проекта.

Что дешевле?

Мы снова не в силах дать вам однозначный ответ. С одной стороны, разработка мобильной версии обычно стоит дешевле. Но нужно понимать, что новый отдельный сайт потом придётся обслуживать, продвигать, исправлять на нём ошибки. Стоимость создания адаптива — выше. Однако это всё тот же ваш сайт, только уже оптимизированный под мобильные устройства.

Кто сделает макет сайта для мобильных устройств?

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

Макет своими руками. Способ для тех, кто понимает, что хочет в итоге получить. «Набросать» макет можно даже в Ворде (стрелочки и поля с комментариями вам в помощь), но тут важно, чтобы конечная версия не требовала отдельного дизайна и могла функционировать на базе уже имеющихся решений.

Обратиться к дизайнеру. Уточните, для каких размеров экрана вы хотите заказать макеты и для каких страниц сайта.

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

А если хотите быть на 100% уверенным, что и макет, и работы по адаптации сайта под мобильные устройства будут выполнены безукоризненно, воспользуйтесь услугами «Студии ЯЛ». В нашем штате — опытные спецы с многолетним стажем в веб-разработке, вёрстке и дизайне. Всех желающих мы приглашаем познакомиться с нашим портфолио. Здесь собраны кейсы Студии ЯЛ, посвящённые проектам разного масштаба и тематики.

У вас остались вопросы или вы хотите оформить заявку на наши услуги? Свяжитесь с менеджерами Студии ЯЛ по телефону 8(800) 775-23-01 или через специальную форму на сайте, оставив свои контактные данные.

Другие материалы на тему:


Как проверить адаптивность сайта, и для чего она нужна

Адаптивность сайта — это способность вашего сайта правильно отображаться на устройствах с разным разрешением (размером) экрана. 

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

 Прошли те времена когда на вопрос «А у тебя адаптивный сайт?» можно было услышать «А зачем? все равно с мобильников никто в интернет не заходит». Теперь заходят и еще как заходят, даже чаще чем с компьютеров.

Процент использования устройств в России за первое полугодие 2019 года:

  • Смартфоны 51,22 %
  • Десктоп 44,89 %
  • Планшеты 3,90 %.

График изменения использования устройств с начала 2016 по середину 2019, за 3,5 года

 

Принцип базовой реализации адаптивной верстки для разных устройств:

Реализации адаптивной верстки, ПК версия:

  1. Логотип сайта
  2. Основное расширенное меню
  3. Слайдер («резиновый»)
  4. Основной контент
  5. Правое дополнительное меню

 

Реализации адаптивной верстки, версия для планшета:

Основное меню переходит в мобильное всплывающее что бы не расплывалось в несколько строк. Отключается правое меню уступая больше места основному контенту, для улучшения читабельности.

  1. Логотип сайта
  2. Мобильное всплывающее меню
  3. Слайдер («резиновый»)
  4. Основной контент
  5. —

 

Реализации адаптивной верстки, мобильная версия:

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

  1. Логотип сайта
  2. Мобильное всплывающее меню
  3. —
  4. Основной контент
  5. —

 

 Сервисы проверки сайта на адаптивность.

Mobile-friendly — Google в автоматическом режиме проверяет страницу на адаптивность к мобильным устройствам и выдает результат адаптивен либо нет. Вам только остается ввести адрес страницы который надо проверить. 

Mobile.Usability — в Google Search.Console так же можно посмотреть какие есть проблемы с мобильной версией сайта.

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

Screenfly — внешний ресурс проверки сайта на адаптивность. Вводите адрес проверяемой страницы, выбираете устройство, разрешение экрана и смотрите как выглядит страница.

Проверить адаптивность сайта в браузере:

  • Google Chrome — F12 переходим в режим разработчика после комбинацию клавиш Ctrl+Shift+M;
  • Mozilla Firefox —  Меню -> Разработка -> Адаптивный дизайн; либо комбинация клавиш Ctrl+Shift+M.

 

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

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

Как адаптивность связана с SEO

Поисковики настраивают ранжирование, исходя из интересов и удобства пользователей.

Если страница плохо отображается на мобильном (шрифт экстремально мелкий, изображения выходят за границы экрана, кнопки маленькие), Google и Яндекс проявят заботу о людях — не отправят сайт в на верхние позиции, даже если контент на нем идеальный.

Mobile-friendly Google (мобайл френдли Гугл) — алгоритм, учитывающий удобство просмотра страницы на смартфонах. Он появился в 2015 году. А в 2020-м Google объявил о планах внедрения Mobile First — алгоритма, который понижает сайты, не адаптированные под мобильные устройства, даже в десктопном поиске.

Яндекс еще в 2016 году официально признал, что оптимизация сайта под мобильные устройства — один из важных факторов ранжирования. Алгоритм получил название «Владивосток» — в честь города с огромной мобильной аудиторией.

Слабая оптимизация сайта для телефона влияет и на поведенческие факторы. Если страница неудобная — растет процент отказов, падают время и глубина просмотров. Из-за негативных ПФ у сайта снижаются позиции.

Как проверить сайт на адаптивность?

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

Но у поисковых систем есть и более тонкие требования к адаптации:

  • не должно быть Flash-анимации и других элементов, которые не работают на смартфонах;
  • ширина контента соответствует экрану, контент читается без горизонтальной прокрутки;
  • всплывающие окна могут быть только на десктопной версии;
  • скорость загрузки контента на смартфоне — максимум 1 секунда;
  • дизайн не перегружен оформительскими и интерактивными элементами;
  • текст оптимизирован для просмотра на смартфонах: крупный шрифт (более 14 px), короткие абзацы, контрастный фон. Пользователи телефонов не должны напрягать зрение даже на солнце.

Есть несколько инструментов для проверки оптимизации сайта.

Google Mobile Friendly Test

Официальный сервис Google Mobile Friendly Test проводит проверку оптимизации для мобильных устройств Google. Нужно ввести URL или html-код и нажать «Проверить страницу». Инструмент анализирует юзабилити. Он сообщит, оптимизирована ли страница, и создаст отчет о проблемах при загрузке.

PageSpeed Insights

В Google проверка мобильной версии включает измерение скорости загрузки. Сервис PageSpeed Insights проверит скорость на десктопе и мобильной версии. Цель оптимизатора — добиться зеленой зоны по Google PageSpeed — это техническая задача, которая решается путем оптимизации кода и изображений. Если сайт не оптимизирован, он попадет в красную зону.

Google Search Console

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

Яндекс.Вебмастер

Проверка мобильных страниц в Яндексе проводится в соответствующем сервисе в разделе «Инструменты». Сервис проверяет технические и пользовательские параметры страницы, оценивает удобство чтения со смартфона. Требования к мобильной версии Яндекса включают наличие тега viewport, который задает видимую пользователю область страницы без горизонтальной прокрутки.

Неофициальные инструменты

Онлайн-сервисы Iloveadaptive, Adaptivator, Quirktools позволяют увидеть проект глазами мобильного пользователя. Показывают, как выглядит страница на экранах популярных устройств в разных операционных системах (IOS и Android).

Askusers

Более глубокую проверку с участием живых пользователей (вашей целевой аудитории) проводит компания Askusers. Тестировщики проверяют, удобно ли пользоваться сайтом со смартфона, фиксируют все плюсы и минусы в анкетах, записывают тест на видео, отвечают на вопросы клиента — владельца проекта. Также они проверяют, как шаблон ведет себя в разных браузерах (Google Chrome, Mozilla Firefox, Яндекс.Браузер). «Ручной» аудит дополняется выводами и рекомендациями экспертов.

Как оптимизировать сайты под мобильные устройства?

Существует три основных способа адаптации (отдельный мобильный сайт, адаптив, динамическое обновление) и два дополнительных (AMP и турбо).

Две версии сайта — мобильная и десктопная

Мобильная версия оптимизируется и продвигается в синхронизации с десктопной.

Плюсы:

  • Быстрая загрузка.
  • Невысокая нагрузка на сервер.

Минусы:

  • Невозможно воспользоваться типовым шаблоном. Чтобы переделать сайт под мобильную версию, его нужно программировать и верстать индивидуально.
  • Официальная позиция Google однозначна: применять конфигурацию сайта с разными URL для разных версий сайта не рекомендуется. Адаптивный дизайн предпочтительнее.

Адаптивный сайт

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

Это самый популярный способ оптимизации. Большинство стандартных современных шаблонов адаптивны.

Плюсы:

  • Адаптировать страницы можно самостоятельно — для этого достаточно использовать типовой шаблон.
  • Быстрая и недорогая реализация.
  • Корректно отображается на устройствах с любой диагональю.
  • Единый URL и HTML-код, продвигать нужно один проект, а не два.
  • Google рекомендует именно этот способ оптимизации.

Минусы:

  • Медленная загрузка из-за дублирования кода.
  • Невозможно вывести отдельный контент для смартфонов и планшетов.

Динамическое обновление

Динамическое обновление (RESS — Responsive Design and Server Side) — более сложный вариант адаптивного дизайна. Верстка тоже адаптивная, URL не меняется. Особенность в том, что корректную версию страницы через HTTP-запрос Vary выдает сервер (а не клиент, как в случае со стандартным адаптивом). При этом меняется не только CSS, но и HTML.

Плюсы:

  • Быстрая загрузка.
  • Можно выкладывать разный контент для десктоп- и мобайл-версий.

Минусы:

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

AMP

AMP (Accelerated Mobile Pages) — страницы для смартфонов, созданные по технологии Google. Очень быстро загружаются. Не подходят для большинства коммерческих сайтов. Рекомендуются для новостных и контент-проектов.

Плюсы:

  • Высокая скорость загрузки.
  • Простая бесплатная реализация.

Минусы:

  • Урезанная функциональность: не отображается меню, сайдбар, внутренний поиск, формы комментирования, некоторые виджеты.
  • Обезличенный дизайн.

Турбо-страницы

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

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

Плюсы:

  • Простая бесплатная реализация.
  • Быстрая загрузка.
  • Можно частично индивидуализировать дизайн.

Минусы:

  • Скромный функционал.
  • Не отображаются виджеты.
  • Неудобно интегрировать рекламные объявления.

AMP и Турбо могут стать удачным решением на информационных страницах. Но пока они не могут полностью заменить основные способы оптимизации интернет-площадки.

Практические советы

  • Проверьте файл robots.txt. В нем не должно быть директивы на запрет сканирования Javascript, CSS и других частей кода. При запрете поисковые боты могут не разобраться, есть ли на сайте адаптация под смартфоны.
  • Не используйте поп-апы, которые мешают просмотру контента.
  • Оптимизируйте первый экран: сократите контент, расположенный до заголовка, увеличьте расстояние между интерактивными элементами.
  • Оптимизируйте текст: шрифт должен быть достаточно крупным, контрастным к фону. Абзацы короче, больше воздуха.
  • Применяйте микроразметку, чтобы документ стал заметнее в выдаче.
  • Удалите элементы, не поддерживаемые мобильными браузерами: например, созданные с помощью Flash и Silverlight-плагинов.

Читайте на Askusers

«Недостаточно качественная страница»: что именно не нравится Яндексу и как это исправить?

Как настроить навигацию, чтобы пользователям было легко ориентироваться на интернет-площадке и чтобы ее любили поисковики? Читайте статью о навигации.

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

 

 

Закажи юзабилити-тестирование прямо сейчас

Заказать

Почему нужно адаптировать сайт под мобильные устройства

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

Использование адаптированного дизайна сайта является одним из факторов ранжирования, который положительно влияет на продвижения сайта как в Яндексе, так и в Гугл.

Что такое адаптивность сайта?

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

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

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

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

На своем сайте можно создать мобильную, адаптивную версию, или версию-приложение. Мы рекомендуем Вам обратить внимание именно на адаптивную верстку, которая является наиболее функциональной, простой и удобной.

Как проверить сайт на адаптивность?

Определить, адаптирован Ваш сайт под мобильные устройства или нет, можно несколькими способами.

  1. Вручную. Перейдите на большой монитор, и начинайте менять расширение в браузере, сдвигая рамку браузера слева и справа. Сайт при изменении расширения должен отображаться корректно, и не терять с экрана важную информацию. Зайдите на свой сайт через телефон или планшет различных размеров, и посмотрите, как он отображается, удобно ли на нем находиться, просматривать категории и делать заказы. 
  2. Панель разработчика. Нажмите F12 и посмотрите версии Вашего сайта на различных устройствах iPad,iPhone,Nexus,Galaxy, и прочие.  
  3. Специальные онлайн сервисы: Google Mobile Friendly, Яндекс Вебмастер (beta), Mobile Checker от W3C, mattkersley.com и прочие.

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

 

Улучшение адаптивности сайта

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

  1. При просмотре адаптированного сайта, дизайн его меняется, картинки видоизменяются и сужаются, блоки разделов и подразделов переставляются.
  2. Сам сайт гораздо быстрее прогружается, так как в мобильной версии отсутствуют лишние графические элементы, «тяжелые» картинки и flash.
  3. Навигация простая и комфортная для пользователя. Ресурс имеет комфортный поиск, вертикальную прокрутку, всю навигацию. Также посетитель должен видеть опцию заказа, корзину и номер телефона компании.
  4. В адаптированной версии посетитель может легко пройти по ссылке, перейти в другой раздел, использовать любой элемент управления.
  5. Тексты на адаптированном сайте читабельны, посетитель не должен испытывать дискомфорт при просмотре товара, характеристик, отзывов.

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

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

  • Продвижение
  • Веб-сайт

Олег Крицкий

Руководитель

Готовы начать?

Позвоните нам:

+7(987)10-55-799

Заинтересованы в сотрудничестве ? Вы можете заказать продвижение своего сайта прямо сейчас

Олег Крицкий

Руководитель

Готовы начать?

Позвоните нам:

+7(987)10-55-799

Заинтересованы в сотрудничестве ? Вы можете заказать создание своего сайта прямо сейчас

2-я часть гайда по Mobile First

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

Для анализа важно не только то, как видит ваш сайт пользователь, но и то, что увидит на сайте Googlebot (Smartphone), который не умеет нажимать кнопки и пользоваться свайпами.

Chrome Device Toolbar для эмуляции смартфона на ПК

Вот как это делается в Chrome. Нажмите правой кнопкой мыши в любом месте страницы и в появившемся меню выберите Inspect (Исследовать) либо откройте панель Developer Tools из меню Хрома.

В верхней левой части панели управления вы увидите иконку переключения девайсов.

Эмуляция просмотра мобильной версии сайта на компьютере

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

Вы также можете использовать BrowserStack

Конечно, инструмент Chrome отлично справляется с эмуляцией мобильных устройств на ПК, но все-таки это только эмулятор. Для более точного анализа удобства мобильной версии с десктопа рекомендуем использовать инструменты типа BrowserStack.

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

(Если у вас экстренная задача и нужно срочно посмотреть на мобильный сайт, можно использовать триальный доступ — за 30 минут вы успеете увидеть достаточно много).

Полезно почитать: особенности перелинковки для мобильной версии сайта.

Посмотрите на сайт глазами робота Googlebot (Smartphone)

Несмотря на то, что эта функция все еще относительно нова по сравнению с другими инструментами Search Console, «Fetch as Google» быстро стал одним из наиболее широко используемых инструментов на платформе, особенно для запроса индексации новых страниц сайтов.

(Обратите внимание, что на момент написания статьи функция была доступна только в старой версии Search Console и еще не была перенесена в новую Search Console.)

Процесс просмотра мобильных веб-страниц в Google похож на тот, что уже был в Search Console. Убедитесь, что вы выбрали Mobile: Smartphone (Мобильная версия: смартфон), прежде чем указывать URL, чтобы ваши страницы сканировал юзер-агент Googlebot (Smartphone).

Форма для просмотра мобильной версии сайта глазами робота

На скриншотах отобразится, как Google и пользователи видят ваш мобильный контент.

Здесь важно отметить, что это не то, как контент считывается Google (Smartphone). Этот инструмент использует службу веб-рендеринга Google (WRS), основанную на Chrome 41, функцию, которая применяется только системой индексации Google Caffeine. Таким образом, Fetch and Render объединяет в себе функции отображения работы мобильного сканера и индексатора.

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

Если у вас нет доступа к Search Console, сканируйте сайт с помощью Screaming Frog

Если у вас нет доступа к аккаунту Google Search Console, вы можете воспользоваться Screaming Frog. Правда, для этого вам придется предпринять больше действий. И заплатить — эта функция доступна только в платной версии.

Во-первых, вместо юзер-агента Screaming Frog выберите Googlebot (Smartphone). Для этого используйте меню Configuration > User Agent.

В открывшемся окне User-Agent Configuration выберите GoogleBot for smartphones (post April 18th 2016), как показано на скриншоте ниже, и нажмите OK.

Для дальнейшего сканирования вы можете использовать и другие юзер-агенты для мобильных, например, Googlebot for smartphones (pre April 18th 2016), Googlebot-Mobile for feature phone devices 1 and Googlebot-Mobile for feature phone devices 2.

Следующий шаг — включить рендеринг Javascript, чтобы робот Googlebot (Smartphone) мог сканировать и обрабатывать страницы сайта. Для этого зайдите в Configuration > Spider. Когда откроется окно Spider Configuration, выберите Rendering (третья вкладка).

Теперь на вкладке Rendering выберите JavaScript и размер окна Googlebot Mobile: Smartphone. Нажмите ОК. Все настройки готовы, а дальше все как обычно. (Обратите внимание, что этот инструмент от Screaming Frog также использует WRS от Google, но на базе Chrome 60, а не Chrome 41, который Caffeine применяет для рендеринга контента.)

Запустите сканирование сайта Screaming Frog, данные будут подгружаться постепенно. Это займет гораздо больше времени, чем при обычном рендеринге через JavaScript. Чтобы просмотреть отрендеренные страницы, выберите URL и откройте Rendering, используя нижнюю панель.

Результат проверки оптимизации сайта под мобильные с помощью Screaming Frog

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

Привыкайте анализировать адаптивность сайта с помощью Googlebot (Smartphone)

Когда мы говорили об использовании Screaming Frog, то обратили внимание, что в качестве юзер-агента следует использовать Googlebot (Smartphone). Этот подход необходимо применять вне зависимости от того, какой сервис вы используете.

Большинство краулеров, например, DeepCrawl, Ryte и Botify поддерживают использование нескольких юзер-агентов, так что всегда проверяйте в настройках, что вы выбрали именно Googlebot (Smartphone).

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

Выбрать Googlebot (Smartphone) для анализа сайта с помощью DeepCrawl можно с помощью меню Advanced Setting.

В заключительной части руководства мы расскажем, как проводить аудит сайта с фокусом на Mobile First.

Адаптивность сайта — без нее никуда

Современный сайт должен корректно отображаться на разных устройствах: на компьютере, в смартфонах, планшетах, нетбуках. Мало сделать красивый сайт, надо чтобы он адекватно работал не только на десктопных, но и в мобильных браузерах.

Сегодня большая часть российских пользователей (61%) выходит в интернет с мобильных устройств, а 35% —исключительно с мобильных. Поэтому адаптировать сайт под смартфоны и планшеты не просто можно — это обязательно.

    Топ-5 устройств, с которых российские пользователи выходят в интернет:
  • Android — 50.6%
  • Windows 7 — 16.9%
  • Windows 10 — 12.7%
  • iOS iPhone — 10.8%
  • Windows — 8 3.2%

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

Сайт, который динамически подстраивается под характеристики устройства, называется адаптивным. Адаптивная верстка меняет дизайн страницы в зависимости от платформы, разрешения и ориентации экрана. Благодаря такой верстке, не нужно делать отдельную версию сайта для каждого разрешения экрана. Вместо этого один дизайн сам подстраивается под характеристики устройства. Адаптивная верстка сайта делается с помощью стилей CSS и языка разметки HTML5.

Почему важно использовать адаптивный дизайн

Адаптивность сайта влияет на позицию сайта в поисковой выдаче. Поисковые системы учитывают оптимизацию под мобильные устройства при ранжировании результатов поиска. Для пользователей смартфонов и планшетов в мобильном поиске Яндекса и Google адаптированные сайты помечаются специальной отметками mobile-friendly в Гугл и «мобильная версия» в Яндексе. Им отдается предпочтение при ранжировании поисковой выдачи.

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

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

Как сделать сайт адаптивным на все экраны

Создание адаптивного сайта базируется на нескольких принципах:

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

2Медиа-запросы. Это правила, в которых указывается, для какого типа устройства будут применяться данные CSS стили. В них может писать разрешение экрана, тип устройства (print, screen), ориентация, соотношение сторон экрана и другие условия. Можно прописать правила сразу для нескольких устройств.
Самые популярные разрешения экрана: 320px, 480px, 600px, 768px, 900px, 1024px, 1200px. Например, можно прописать отдельный набор CSS параметров для экранов с шириной 480px, а другой — для экранов 1024px.

3Гибкая сетка. Это разметка сайта, где размер и расположение элементов подстраивается под ширину экрана. То есть используются относительные размеры, а не абсолютные. Размеры изображений, таблиц, текстовых блоков и других элементов на странице указываются не в пикселях, а в процентах. Расположение, масштаб, координаты блока задаются относительно какого-то элемента, например, верхней границы.
Например: ширина главного блока на сайте, где располагается основной контент, равняется 650 пикселям. А ширина боковой колонки: 350 px. При верстке адаптивного макета эти размеры будут указаны в процентах: 65% и 35% соответственно.

Таким образом получается сайт, контент которого автоматически подстраивается под размер и ориентацию экрана, тип устройства ввода.

Проверка адаптивности сайта

Cамый простой и быстрый способ провести тест адаптивности сайта — открыть сайт на компьютере в обычном браузере и постепенно сужать мышкой размер окна. Адаптивный сайт подстроится под размер окна и перейдет в мобильный формат.

Еще один способ — это открыть сайт в Google Chrome на компьютере и нажать F12. Вверху появится панель с настройками разрешения экрана, масштаба, модели смартфона. Меняя эти параметры, можно увидеть, как выглядит сайт на разных устройствах.

Или же можно воспользоваться специальными сервисами. Например, в Google Search Console есть инструмент проверки оптимизации для мобильных устройств. Там нужно просто ввести адрес сайта и получить результат.

В Вебмастере также инструмент проверки адаптивности — «Проверка мобильных страниц».

Другие сервисы проверки адаптивности сайта: Quirktools, Aresponsivedesign.is, Deviceponsive.

Если после проверки адаптации сайта под мобильные устройства обнаружилось, что ресурс неадаптивный и плохо показывается на смартфонах, то логичнее и экономнее всего — сверстать новый шаблон. Само содержание сайта останется прежним, но на него будет сделан новый адаптивный дизайн. Это проще и эффективнее, чем пытаться «исправить» статичный сайт. Цена такой услуги составляет примерно 30-50% цены нового сайта.

Нужен настоящий SEO-сайт и интернет-реклама? Пишите, звоните:

Наша почта:
Единая справочная: 8 (843) 2-588-132
WhatsApp: +7 (960) 048 81 32
Оставить заявку

Тестер адаптивного дизайна веб-сайтов | Media Genesis

О КОМПАНИИ


MEDIA GENESIS

Responsive Design Checker был первоначально создан в 2012 году как упражнение для разработчиков Media Genesis, чтобы выяснить, могут ли они создать инструмент, который можно было бы использовать для тестирования веб-сайтов для мобильного дизайна. По сути, разработчики хотели увидеть, насколько хорошо определенные веб-сайты могут адаптироваться при просмотре на мобильном устройстве (например, телефоне), а не только на рабочем столе компьютера.

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

В 2015 году в систему были внесены более поздние обновления, которые включают в себя различные предустановленные размеры экрана, такие как 27-дюймовый монитор Dell U2711, 17-дюймовая рабочая станция, 15-дюймовый Macbook Pro, 11-дюймовый Macbook Air и портретный и ландшафтный режимы iPad и iPhone от Apple, а также Nexus7.

Зачем нужна проверка адаптивного дизайна сегодня?

Адаптивный дизайн = хороший пользовательский опыт.Итак, если вы хотите предоставить своим пользователям удобные возможности (независимо от того, с какого устройства они обращаются к вашему сайту), вам понадобится адаптивный сайт.

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

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

Вам нужен разработчик веб-сайтов, графический дизайнер или команда профессионалов, чтобы создать идеальную цифровую маркетинговую кампанию для вашей компании? Media Genesis может помочь. С 1996 года мы работаем вместе с крупными и маленькими корпорациями по всему миру, помогая им рассказывать свои истории. Позвоните нам по телефону 248-687-7888 или напишите нам по адресу [email protected].

отзывчивого тестирования локально размещенного веб-сайта | Полное руководство

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

Согласно отчету Statista, в мире насчитывается более трех миллиардов пользователей смартфонов, и около 63% всего веб-трафика приходится на мобильные устройства. Как никогда прежде, важно тестировать скорость отклика локально размещенных веб-сайтов на мобильных устройствах.Если ваше веб-приложение не адаптируется к мобильным устройствам, высока вероятность того, что показатель отказов будет выше, и Google может не счесть ваш веб-сайт удобным для пользователей.

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

Как тестировать адаптивные веб-сайты локально? А как насчет локально размещенных веб-сайтов, которые еще не готовы для конечных пользователей?

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

Преимущества адаптивного тестирования локально размещенных веб-сайтов

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

  • Повышает посещаемость вашего сайта: Согласно SimilarWeb, более половины веб-трафика на веб-сайтах США поступает с мобильных устройств. Таким образом, наличие адаптивного веб-сайта на всех платформах поможет вам получить больше трафика, чем обычно. Так что заранее убедитесь, что ваши изменения выглядят хорошо, — это только поможет в этом.
  • Раннее обнаружение ошибок: Обеспечивая мобильный просмотр веб-сайта на локальном хосте, вы можете обнаруживать ошибки на ранней стадии.Это поможет вам лучше согласоваться с методологией тестирования Shift влево. Если ошибки обнаруживаются на ранней стадии, вы в конечном итоге экономите время и ресурсы по сравнению с их обнаружением на более позднем этапе.
  • Более низкий показатель отказов: Что ж, если мобильный вид вашего веб-сайта будет выглядеть так, как должен, то адаптивный веб-дизайн определенно поможет удержать пользователей и снизит показатель отказов этой страницы. Поэтому в этом отношении всегда рекомендуется проводить адаптивное тестирование локально.
  • Быстрая загрузка страницы:

    53% посещений прекращаются, если мобильный сайт загружается дольше трех секунд.
    — Даниэль Ан (Google)

    Пользователи могут ожидать, что ваш сайт будет загружаться быстрее. Особенно на мобильных устройствах, потому что разные типы сетей, то есть 3G, 4G и 5G, существенно изменят загрузку мобильного веб-сайта. Другой причиной является прием сигнала в сети, поэтому ваш мобильный веб-сайт может быть доступен посетителям в пути, пока они в пути, в путешествии и т. Д.Кроме того, в некоторых областях прием в сети может снизиться, что приведет к увеличению времени загрузки вашего веб-сайта.

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

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

Интересно прочитать: Окончательное руководство по созданию удобного для мобильных устройств веб-сайта.

Challenge с адаптивным тестированием для локально размещенного веб-сайта

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

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

Итак, как нам проводить адаптивное тестирование для локально размещенных веб-сайтов?

Знаете ли вы о главных проблемах адаптивного веб-дизайна?

Как протестировать адаптивный дизайн локально?

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

1-й метод — LT-браузер для локально размещенных веб-приложений

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

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

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

Встроенная функция отладки LT Browser позволяет проверять исправления на локальных веб-страницах на ходу. А если вы хотите поделиться отчетом о тестировании со своими коллегами или членами команды, вы можете отметить ошибки во время тестирования и поделиться им напрямую с членами вашей команды с помощью инструментов управления проектами, таких как Jira, Asana, Trello и т. Д.

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

  • Загрузка браузера LT и его установка в вашей системе.
  • Введите строку localhost в качестве URL-адреса в заголовке браузера LT для доступа к вашему серверу localhost.
  • Например, если сервером localhost является Apache через XAMPP с веб-сайтом в папке htdocs XAMPP, откройте локальный хост и добавьте URL-адрес с веб-страницей или папкой веб-сайта, которую нужно протестировать.

Вот как вы можете легко тестировать локально размещенные веб-сайты с помощью LT Browser.(См. Руководство по LT Browser, чтобы узнать об этом больше).

СКАЧАТЬ LT BROWSER

2-й метод — инструменты разработчика, доступные в браузере

Панель инструментов Toggle device, доступная в инструментах разработчика браузеров, является наиболее легкодоступным локальным инструментом тестирования адаптивного веб-дизайна. Это позволяет вам проверять мобильность ваших локальных веб-страниц на самых популярных смартфонах. Вы можете легко найти этот инструмент как в браузере Firefox, так и в браузере Chrome, нажав клавишу F12 на клавиатуре.

В браузере Chrome этот инструмент представлен под тем же именем, что и панель инструментов «Переключить устройство», тогда как в Firefox он описан как режим адаптивного дизайна. Здесь мы поговорим о браузере Mozilla Firefox.

После того, как вы нажмете клавишу F12, на вашем экране появится раздел инструментов разработчика. Здесь выберите режим адаптивного дизайна, и браузер отобразит мобильную версию вашего сайта.

Теперь в верхнем меню выберите параметр «Адаптивный», чтобы отобразить все доступные версии устройств, интегрированных с браузером, например iPhone 11 Pro, Samsung Galaxy, Apple iPads и т. Д.Вы можете выбрать конкретное устройство, чтобы протестировать адаптивный дизайн вашего локального веб-сайта.

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

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

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

«Ваша работа не заканчивается на том, чтобы ваш сайт отлично работал в Chrome и Android.Несмотря на то, что режим устройства может имитировать ряд других устройств, таких как iPhone, мы рекомендуем вам попробовать другие решения для эмуляции браузеров ».

3-й метод — туннель LambdaTest для тестирования локально размещенного веб-сайта

LambdaTest Tunnel — еще один отличный инструмент от LambdaTest, который позволяет вам подключать вашу локальную систему к серверам LambdaTest через туннель интеграции на основе SSH, чтобы вы могли тестировать адаптивный дизайн локально в широком диапазоне браузеров, операционных систем и устройств.

Он действует как безопасный туннель оболочки, который также можно использовать для тестирования PHP, HTML, CSS, Python или других подобных веб-файлов, сохраненных локально. Кроме того, он не требует выполнения каких-либо команд с терминала. Вам просто нужно установить безопасное соединение между вашей ОС и сервером Lambdatest с подземным графическим интерфейсом.

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

С помощью LambdaTest Tunnel вы можете выполнять следующие задачи:

  1. Подключитесь к Windows и протестируйте локально
  2. Подключитесь к Mac и протестируйте адаптивный дизайн локально
  3. Подключайтесь к Linux и тестируйте локально размещенные веб-сайты

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

Протестируйте адаптивный веб-сайт локально с помощью LambdaTest

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

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

В этой статье мы обсудили наиболее полезные методы, которые можно использовать для локального тестирования адаптивного дизайна. Мы вернемся с большим количеством; до тех пор Удачного тестирования! 🙂

Харшит Пол

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

Автор:
Харшит Пол

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

Как проверить отзывчивость вашего веб-сайта

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

Что такое адаптивное тестирование?

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

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

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

Важность адаптивного тестирования

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

Тестовые сценарии для проверки скорости отклика веб-сайта

  1. Убедитесь, что контент умещается на экране, а стиль шрифта согласован и читается на разных устройствах с правильным выравниванием.
  2. Измените размер окна браузера, уменьшая и увеличивая окно, чтобы быстро проверить наличие серьезных проблем в различных окнах просмотра.
  3. Проверить время загрузки. Убедитесь, что время загрузки на разных устройствах примерно одинаковое и находится в допустимых пределах.
  4. Убедитесь, что переключение мобильного телефона / планшета из ландшафтного в портретный режим не вызывает искажения текста и что контент корректируется соответствующим образом.
  5. Убедитесь, что все ссылки работают и ведут на ожидаемую страницу.
  6. Убедитесь, что изображения и контент, представленные в формате таблицы, видны и видео, если таковые имеются, загружаются правильно.
  7. Убедитесь, что всплывающие окна отображаются правильно.
  8. Убедитесь, что заполнение подходящее.
  9. Проверьте, как пункты меню отображаются в приложении.
  10. Убедитесь, что пользователь может перемещаться между различными пунктами меню и легко возвращаться на домашнюю страницу.
  11. Убедитесь, что адаптивный дизайн соответствует каркасам, предоставленным для телефонов, планшетов и т. Д.
  12. Убедитесь, что сайт реагирует на различные точки останова.
  13. Убедитесь, что на всех устройствах с регулируемым размером экрана поддерживается хороший внешний вид.
  14. Убедитесь, что значок гамбургера правильно размещен на мобильных устройствах для увеличения списка пунктов меню.
  15. Проверьте указанные ниже аспекты, чтобы обеспечить удобство работы пользователя:
    • Убедитесь, что изображения надлежащим образом умещаются в доступном пространстве.
    • Убедитесь, что заголовки и текст выровнены правильно.
    • Убедитесь, что веб-страницы прокручиваются должным образом.
    • Убедитесь, что области ввода текста или поля ввода отображаются правильно.
    • Убедитесь, что при вводе текста в поле ввода текста данные отображаются полностью.
    • Убедитесь, что нет горизонтальной прокрутки.

Выбор подходящих устройств и браузеров для тестирования скорости отклика

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

  1. Для начала подготовьте список устройств и браузеров, которые клиент или их клиенты преимущественно используют, как указано в документе с требованиями.
  2. Если требования к устройству или браузеру не указаны, но точки останова определены в требовании, попробуйте включить телефонные и планшетные устройства, которые подпадают под определенные точки останова. После того, как вы завершите работу с устройствами на основе точек останова, убедитесь, что список устройств предоставлен клиенту и для него принято утверждение.
  3. Выбирая новейшие устройства, выбирайте различные комбинации экранов разных размеров и платформ.
    • Например, вы можете выбрать тестирование на iPhone 8 (IOS 12+) с Safari, Galaxy S9 (Android 9+) с Chrome и iPad pro 9.7 2016 (IOS 12+) с Safari.
    • Убедитесь, что устройства протестированы как для альбомной, так и для портретной ориентации.
  4. Выбирайте различные комбинации браузеров и операционных систем.
    • Например, вы можете выбрать тестирование с помощью Chrome и Safari в Mac OS и Firefox и IE 11 в Windows OS.

Инструменты, доступные для адаптивного веб-тестирования

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

2. Использование Google DevTools: Одним из самых простых способов имитации мобильных устройств является использование DevTools в Chrome. То же самое может быть достигнуто с помощью режима адаптивного дизайна в Firefox.Это помогает нам увидеть, как веб-сайт выглядит на экранах разных размеров. Он также предоставляет возможность добавлять различные настраиваемые устройства.

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

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

5. Screenfly: Screenfly — это бесплатное веб-приложение, которое помогает обеспечить желаемый вид веб-сайта на всех устройствах. Просто набрав URL-адрес веб-сайта и выбрав желаемое устройство, мы можем проверить, как веб-сайт отображается на разных устройствах.

Это некоторые из легкодоступных инструментов для проверки отзывчивости.Однако существует множество доступных инструментов, которые можно использовать в зависимости от требований проекта. ViewPort Resizer, Responsinator, Screenfly и Google Resizer — это некоторые из бесплатных инструментов, в то время как такие инструменты, как Browserstack, LambdaTest и Ghostlab, являются платными.

Заключение

Адаптивное тестирование временами может быть сложной задачей. Однако важно убедиться, что пользователи могут получить доступ к веб-сайту с любого устройства, удобного для просмотра. Ручное тестирование скорости отклика на нескольких браузерах и устройствах занимает много времени и подвержено ошибкам.Мы можем использовать доступные автоматизированные инструменты, которые экономят много часов работы и усилий. Эти инструменты позволяют тестировать различные страницы на экранах разных размеров и в браузерах с минимальными ручными усилиями. Некоторые из доступных автоматизированных инструментов: BackstopJS, Wraith, Applitools, PhantomCSS. Выбирая подходящие методы и инструменты, вы сможете эффективно проверить отзывчивость своего сайта.

Прочтите блог о визуальном регрессионном тестировании с использованием Wraith для получения дополнительной информации об автоматическом визуальном тестировании.

Адаптивный дизайн: передовой опыт и рекомендации

Адаптивные веб-сайты — это веб-сайты, которые адаптируются ко всем размерам и разрешениям экрана, не только на настольных компьютерах, но и на мобильных устройствах, планшетах и ​​иногда даже телевизорах.

По данным Statista, мобильный трафик составлял 52,64% всего мирового трафика в 2017 году, а это означает, что веб-сайт , не оптимизированный для мобильных устройств , теряет примерно половину своего трафика . К концу 2018 года ожидается, что доля глобального трафика для мобильных устройств вырастет до 79%, что является исключительным увеличением.

Компании, у которых нет мобильных веб-сайтов, отстают с угрожающей скоростью, потому что 8 из 10 посетителей перестанут взаимодействовать с веб-сайтом, который плохо отображается на их устройствах. Для пользователей слишком легко нажать кнопку «Назад» и попробовать вместо этого конкурирующий бизнес, и Google даже ранжирует не отвечающие на запросы веб-сайты ниже .

Вы можете пройти тест Google для мобильных устройств здесь.

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

Взгляните на эту оптимизированную для мобильных устройств версию eBay в сравнении с тем, как бы она выглядела, если бы она не была оптимизирована для мобильных устройств . Вы бы даже рассматривали неоптимизированную версию?

eBay: не оптимизирован для мобильных устройств по сравнению с адаптивным веб-сайтом, оптимизированным для мобильных устройств.

Чтобы создавать веб-сайты, которые могут конкурировать в современном Интернете, веб-дизайнеры должны быть экспертами в области адаптивного веб-дизайна (RWD).С чего им начать?

Подход к адаптивному веб-дизайну, ориентированный на мобильные устройства

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

  1. У мобильных веб-сайтов больше проблем с удобством использования (в основном это связано с отсутствием свободного пространства на экране), поэтому практичнее и эффективнее сосредоточить основное внимание на мобильном дизайне.
  2. Легче масштабировать , мобильную версию, чем , уменьшать настольную версию (опять же, из-за нехватки места на мобильных веб-сайтах).
  3. Веб-дизайн, ориентированный на мобильные устройства, помогает переоценить то, что необходимо визуально и функционально.

Дизайнерам следует подумать о том, чтобы в адаптивном веб-дизайне ориентироваться на мобильные устройства. (Источник: Usabilla)

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

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

Сейчас мы рассмотрим несколько примеров адаптивного веб-дизайна.А пока давайте поговорим о том, какие устройства, размеры экрана и веб-браузеры актуальны сегодня.

Какие разрешения экрана подходят для адаптивного веб-дизайна?

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

  • 360×640 (маленький мобильный): 22,64%
  • 1366×768 (средний ноутбук): 11.98%
  • 1920×1080 (большой рабочий стол): 7,35%
  • 375×667 (средний мобильный): 5%
  • 1440×900 (средний рабочий стол): 3,17%
  • 720×1280 (большой мобильный): 2,74%

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

Например, разрешение 360×640 (которое в основном соответствует устройствам Samsung, использующим Android) выросло за последний год на 5,43%. Дизайнеры могут использовать подобные ценные идеи, чтобы определить ключевые точки останова перед тем, как приступить к дизайну веб-сайта.

Какие веб-браузеры популярны сегодня?

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

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

Вот глобальная разбивка доли рынка веб-браузеров для мобильных и настольных компьютеров.

  • Хром: 55,04%
  • Safari: 14.86%
  • Браузер UC: 8.69%
  • Firefox: 5.72%
  • Opera: 4.03%
  • Internet Explorer: 3,35%

Адаптивный дизайн — это не просто «все приспособлено» — это еще и адаптация к возможностям аппаратного обеспечения устройства и веб-браузера , а также к разрешению устройства . Одним из примеров этого может быть то, что, хотя Google Chrome поддерживает свойство CSS overscroll-behavior: (которое определяет, что происходит, когда пользователь слишком сильно прокручивает страницу к краю области просмотра), оно не поддерживается ни в одном другом веб-браузере.

Лучшие практики адаптивного дизайна

Устранение трения

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

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

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

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

Дизайн для больших пальцев

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

Большие пальцы могут дотянуться до центра экрана устройства лучше, чем до углов.(Источник: A List Apart)

Давайте посмотрим на несколько примеров:

  • Люди обычно ожидают, что основная навигация на рабочем столе будет вверху; однако на мобильных устройствах он должен быть внизу. Большие пальцы не дотягиваются до вершины.
  • Другие интерактивные элементы также должны быть легко доступны. Это означает, что они должны находиться в центре экрана, поскольку большим пальцам труднее дотянуться до краев и углов экрана устройства.
  • Чтобы их можно было легко нажимать, важные ссылки и призывы к действию должны иметь высоту не менее 44 пикселей (меньшие точки касания плохо влияют на удобство использования).

Рекомендуемая литература: Основное руководство по удобству использования мобильных устройств.

Воспользуйтесь преимуществами встроенного оборудования мобильных устройств

Мобильное оборудование (например, камера устройства или службы GPS) не зарезервировано специально для нативных приложений, и, как упоминалось ранее, адаптивный веб-дизайн — это не просто «сделать все подходящим». Речь также идет об адаптации к возможностям устройства. В случае мобильного веб-дизайна, поскольку мобильные устройства имеют простые в использовании камеры, некоторые микровзаимодействия, такие как ввод данных, на самом деле проще на небольших экранах, если веб-сайты используют преимущества доступного нативного оборудования.

Давайте посмотрим на несколько примеров:

  • Сканирование кредитных карт / карт для пополнения счета (так как бланки на мобильных устройствах часто сложны)
  • Обмен фотографиями в социальных сетях, потому что они уже есть на вашем устройстве
  • Двухфакторная аутентификация (поскольку вы уже используете мобильное устройство)
  • Быстрая проверка акций / аналитика (поскольку мобильные приложения упрощают информацию)
  • Выполнение поиска в Интернете с помощью голоса (поскольку использование громкой связи проще, чем набор текста)

Сделать макеты гибкими / адаптивными по умолчанию

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

Гибкий и фиксированный макет для адаптивного веб-дизайна.

Адаптивные точки останова должны использоваться для «перекомпоновки» макета и содержимого на новое устройство, но для учета всех размеров между ними (на всякий случай) макеты должны быть в противном случае плавными (то есть они естественно адаптируются / растягивать при изменении размера браузера).

Помните эти советы при разработке гибких / адаптивных макетов:

  • Процентные единицы позволяют элементам быть текучими.
  • Установка минимальной и максимальной ширины может включить сценарий «но не делайте меньше / больше, чем это».
    • Форматы изображений
  • SVG можно масштабировать вверх и вниз без потери качества, и они не зависят от разрешения (в отличие от JPG и PNG, которые не имеют).

Не забывайте о альбомной ориентации

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

Навигация

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

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

Помните, типографика тоже может реагировать

Несмотря на то, что UX-дизайнеры обычно используют пиксельные блоки для разработки веб-сайтов, в реальной сети одна точка больше не обязательно равна пикселю, потому что разные устройства имеют разное разрешение. IPhone X, например, имеет 458 PPI (пикселей на дюйм), поэтому, когда размеры пикселей становятся меньше, мы можем добиться более четкой графики в том же физическом пространстве (Apple называет эту технологию «Retina», а Android — «HDPI»).

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

Инструменты передачи дизайна, такие как Zeplin, Sympli, Marvel и InVision, могут помочь дизайнерам сотрудничать с разработчиками по вопросам, за которые они несут совместную ответственность. В то время как дизайнеры выполняют дизайн, а разработчики выполняют код, в целом рабочий процесс разработки продукта — это командная работа, требующая прочного взаимодействия.

Советы и передовые методы оптимизации производительности адаптивного дизайна

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

Ленивая загрузка неосновных изображений и видео

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

Условная нагрузка

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

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

Адаптивные изображения

Как упоминалось ранее, некоторые устройства отображают больше пикселей на дюйм, что может привести к тому, что изображения станут размытыми, если они не будут экспортированы с правильным разрешением. В зависимости от разрешения устройства для некоторых потребуются изображения с двойным (@ 2x), тройным (@ 3x) и даже четырехкратным (@ 4x) размером.Веб-браузеры теперь поддерживают элемент , который выбирает правильное разрешение изображения в зависимости от устройства.

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

Экспорт графических ресурсов из Sketch @ 2x для адаптивного веб-дизайна.

Заключение

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

Современные инструменты дизайна, такие как Adobe XD, Marvel и InVision, позволяют командам тестировать прототипы на реальных устройствах, обсуждать отзывы в контексте и, как правило, сотрудничать в команде, пока макет не будет работать во всех сценариях.

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

• • •

Дополнительная литература в блоге Toptal Design:

Режим адаптивного дизайна — Инструменты разработчика Firefox

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

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

Есть три способа переключения режима адаптивного дизайна:

  • Из меню Firefox: выберите Responsive Design Mode из подменю Web Developer в меню Firefox (или меню Tools , если вы отображаете строку меню или работаете в macOS).
  • На панели инструментов «Инструменты разработчика»: нажмите кнопку Режим адаптивного дизайна на панели инструментов Панели инструментов:
  • С клавиатуры: нажмите Ctrl + Shift + M (или Cmd + Opt + M в macOS).

При включенном режиме адаптивного дизайна для области содержимого веб-страниц устанавливается размер экрана мобильного устройства. Изначально он установлен на 320 x 480 пикселей.

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

Информация о выбранном устройстве выровнена по центру дисплея. Слева направо на дисплее отображается:

  • Имя выбранного устройства — раскрывающийся список, включающий все устройства, которые вы выбрали на экране «Параметры устройства».
  • Размер экрана — Вы можете редактировать значения ширины и высоты, чтобы изменить размер устройства, редактируя число напрямую или используя клавиши Вверх, и Вниз, , чтобы увеличивать или уменьшать значение на 1 пиксель при каждом нажатии или удержании клавиши и Сдвиньте , чтобы изменить значение на 10.
    • Колесо мыши изменяет значения размера на 1 пиксель за раз
    • Вы также можете изменить размер экрана устройства, взяв нижний правый угол области просмотра и перетащив его до нужного размера.
  • Ориентация (книжная или альбомная) — Этот параметр сохраняется между сеансами
  • DPR (соотношение пикселей) — Начиная с Firefox 68, DPR больше не редактируется; создать собственное устройство для изменения DPR
  • Регулирование — раскрывающийся список, в котором вы можете выбрать применяемое регулирование подключения, например 2G, 3G или LTE
  • Включить / отключить имитацию касания — Включает / отключает, будет ли в режиме адаптивного дизайна имитировать сенсорные события.Пока включено моделирование событий касания, события мыши преобразуются в события касания; это включает (начиная с Firefox 79) преобразование события перетаскивания мышью в событие перетаскивания касанием. (Обратите внимание, что когда имитация касания включена, этот значок на панели инструментов синий; когда имитация отключена, он черный.

В правом конце экрана три кнопки позволяют:

  • Кнопка камеры — сделать снимок экрана

    • Скриншоты сохраняются в папку для загрузки Firefox по умолчанию.

    • Если вы отметили «Снимок экрана в буфер обмена» на странице настроек инструментов разработчика, то снимок экрана будет скопирован в системный буфер обмена.

  • Кнопка настроек — открывает меню настроек RDM
  • Кнопка закрытия — закрывает режим RDM и возвращает к обычному просмотру

Меню настроек включает следующие команды:

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

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

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

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

Вы можете показать или скрыть панель инструментов разработчика независимо от переключения самого режима адаптивного дизайна:

Если включен режим адаптивного дизайна, вы можете продолжить просмотр, как обычно, в области содержимого с измененным размером.

Прямо над окном просмотра есть метка «устройство не выбрано»; щелкните здесь, чтобы увидеть список имен устройств.Выберите устройство, и режим адаптивного дизайна устанавливает следующие свойства, соответствующие выбранному устройству:

  • Размер экрана
  • Соотношение пикселей устройства (отношение физических пикселей устройства к пикселям, не зависящим от устройства)
  • Моделирование событий касания

Кроме того, Firefox устанавливает заголовок HTTP-запроса User-Agent, чтобы идентифицировать себя как браузер по умолчанию на выбранном устройстве. Например, если вы выбрали iPhone, Firefox идентифицирует себя как Safari.Для свойства navigator.userAgent установлено то же значение.

Устройства, перечисленные в раскрывающемся списке, являются лишь подмножеством устройств, которые можно выбрать. В конце раскрывающегося списка находится элемент с надписью Изменить список . Выберите это, чтобы увидеть панель, содержащую все варианты, которая позволяет вам отмечать устройства, которые вы хотите видеть, в раскрывающемся списке. Набор устройств и значения, связанные с каждым устройством, взяты с https://github.com/mozilla/simulated-devices.Вы также можете определить собственное устройство, как описано ниже.

Создание настраиваемых устройств

Вы можете создавать и сохранять настраиваемые устройства в режиме адаптивного дизайна, нажав кнопку Добавить настраиваемое устройство . У каждого устройства может быть свое:

  • Имя
  • Размер
  • DevicePixelRatio
  • Строка пользовательского агента
  • Сенсорный экран

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

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

Эмулируемые характеристики:

  • Скорость загрузки
  • Скорость загрузки
  • Минимальная задержка

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

Выбор Скорость загрузки Скорость загрузки Минимальная задержка (мс)
GPRS 50 КБ / с 20 КБ / с 500
Обычный 2G 250 КБ / с 50 КБ / с 300
Хорошо 2G 450 КБ / с 150 КБ / с 150
Обычный 3G 750 КБ / с 250 КБ / с 100
Хорошее 3G 1.5 МБ / с 750 КБ / с 40
Обычный 4G / LTE 4 МБ / с 3 МБ / с 20
DSL 2 МБ / с 1 МБ / с 5
Wi-Fi 30 МБ / с 15 МБ / с 2

Чтобы выбрать сеть, щелкните поле списка с надписью «Без регулирования»:

Как создать адаптивный веб-сайт для мобильных устройств

Создавать или не создавать мобильный сайт; этот вопрос находится в центре многих дискуссий.Однако есть и другой вариант: адаптивный веб-дизайн. Когда, почему и как следует разрабатывать адаптивный веб-сайт?

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

Зачем создавать адаптивный сайт?

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

Так почему вы решили создать веб-сайт таким образом?

Вы начинаете с нуля

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

Вы хотите снизить затраты

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

Вы хотите, чтобы он работал даже при выходе новых устройств

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

Процесс

Давайте поговорим о процессе создания адаптивного веб-сайта на примере веб-сайта отеля.В сентябре прошлого года компания Equator выпустила новый веб-сайт Macdonald Hotels. Macdonald Hotels — это британская гостиничная сеть, состоящая из 47 отелей и курортов в Великобритании и Испании. Мы создали для них новый сайт, который включал новую структуру сайта, обширное содержание отелей и новую систему бронирования. Вот шаги, которые мы прошли, а также некоторые соображения, которые следует учитывать при разработке адаптивного веб-сайта.

Это ключевые шаги:

  • Исследование / определение объема работ: Понимание дополнительных требований к адаптивному сайту
  • Каркас: Сеточные структуры и макеты для сайта с учетом разной ширины экрана
  • Внешний вид: Соображения стиля
  • Создание сайта: Проблемы с HTML и CSS

Исследования и предварительные исследования

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

  • Какие разные цели будут преследовать пользователя на разных устройствах?

    Подобные вопросы становятся все более излишними. Раньше мы предполагали, что мобильные пользователи ориентированы на выполнение задач, например Я хочу узнать адрес отеля; Я хочу что-нибудь быстро забронировать. Но теперь люди на любом устройстве с такой же вероятностью будут неторопливо просматривать Интернет, как и им нужно быстро выполнить задачу.Тем не менее, об этом стоит подумать, поскольку подобный подход к целям пользователей может помочь вам расставить приоритеты для контента сайта, независимо от того, какое устройство использует посетитель.

  • Какие технические соображения нам необходимо сделать для функциональности и содержания?

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

Каркас

Логику, лежащую в основе изменения стилей, может быть немного сложно определить, и магия этого действительно проявится в сборке сайта, но нам нужен способ начать определять различные этапы ширины макета. Мы выбираем 3 варианта ширины экрана: рабочий стол, iPad и iPhone. Мы чувствовали, что это соответствует нашим требованиям, но для вашего проекта вы должны подумать о том, какие значения ширины важны для вас — вам даже может потребоваться взглянуть на большую ширину экрана для использования телевизора в Интернете.

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

  • Начало работы

    Сначала определите структуру сетки для каждой ширины ключа. Мы создали 3 страницы для ширины экрана 1024 пикселей (рабочий стол), 768 пикселей (портрет iPad), 320 пикселей (портрет iPhone), затем нам нужно было определить структуру сетки для каждой из этих ширины.

    Очень простая структура сетки с одинаковой шириной столбцов на каждом макете упростила нам планирование переноса компонентов при изменении ширины.

  • Создание главного шаблона

    При создании каждого каркаса вам нужно подумать о столбцах и о том, как компоненты в них будут адаптироваться по мере уменьшения ширины страницы & mdashe.грамм. что происходит, когда у вас меньше места? Если у вас четыре столбца с контентом? Когда вы переходите на трехколоночную ширину? Между дизайнером и разработчиком интерфейса всегда должно быть постоянное общение, чтобы ответить на любые вопросы о том, что вы можете делать с компонентами визуально и в CSS.

  • Начиная с домашней страницы

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

  • Основная навигация

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

    Другие компоненты заголовка выровнены по правому краю и будут просто сдвигаться по мере уменьшения ширины страницы.

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

  • Нижний колонтитул

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

  • Прочие компоненты

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

  • Протестируйте прямо сейчас

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

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

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

Внешний вид и ощущения

Нет необходимости создавать визуальные эффекты для каждого каркаса. Основная цель — охватить все стили, которые потребуются для создания HTML и CSS. Будет немного пересечения для каркасов и визуальных элементов, некоторые стили потребуются для мобильных устройств, где не было необходимости в начальном каркасе.

  • Стилизация страницы: Подумайте о том, чтобы сделать стили более простыми для мобильной версии — в CSS3 замечательно то, что вам не нужно много изображений, чтобы получить отличные стилизованные эффекты, но для их загрузки все же требуется некоторое время.

  • Размышляя о шрифте: Убедитесь, что ваш размер шрифта будет читаемым на каждом устройстве. На мобильном устройстве они должны быть намного больше, чтобы их можно было читать.

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

Создание сайта

Создание HTML и CSS — это самостоятельная задача, поэтому я не буду вдаваться в подробности, но вот несколько вещей, о которых стоит подумать.

  • Влияние размеров изображения: Сайт должен будет загружать полноразмерные изображения, даже если CSS уменьшает их размер, поэтому старайтесь сохранять размеры изображений как можно меньшими.Однако могут быть некоторые изящные уловки JavaScript, чтобы сделать сайт более плавным. На этом сайте мы изначально загрузили изображение наименьшего размера, а затем использовали JavaScript, чтобы решить, нужно ли тогда изображение большего размера.

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

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

Стоит взглянуть на взгляд нашего фронтенд-разработчика Джейми Бойда на фронтенд-разработку веб-сайта Macdonald Hotels для обеспечения адаптивного дизайна.

Так что все это значит?

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

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

Изображение на домашней странице UX Booth с сайта needoptic на Flickr.

Супер-руководство универсального дизайна и специальных возможностей

Бизнес-обоснование универсального дизайна

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

Как оптимизировать свой сайт для мобильных устройств: полное руководство

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

В январе 2007 года Стив Джобс вышел на сцену Macworld Expo. В своем фирменном стиле соучредитель, генеральный директор и постоянный шоумен Apple пообещал миру три вещи: обновленный iPod, телефон и мини-компьютер.

Он перечислил атрибуты каждого предмета: «Широкоэкранный iPod с сенсорным управлением. Революционный мобильный телефон. И передовое устройство для интернет-коммуникаций ».

Но когда пришло время большого открытия, он не представил три отдельных продукта.Он с триумфом протянул один гаджет: iPhone. «Вы понимаете?» — спросил Джобс у толпы. «Это не три отдельных устройства. Это одно устройство! И мы называем это iPhone ».

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

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

Мобильный дизайн: 14 лет спустя

Сегодня многие люди используют свои смартфоны как единственный компьютер. 3 миллиарда человек имеют смартфоны и 1,3 миллиарда владеют компьютерами.

Мобильный трафик растет из года в год, говорит Пит Полгар, директор по маркетингу Clikz Digital, агентства цифрового дизайна и маркетинга, базирующегося в Литл-Фоллс, штат Нью-Джерси, и готово превзойти настольный трафик.

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

Если ваш веб-сайт не оптимизирован для мобильных устройств, вы упускаете из виду, — говорит Полгар. Он отмечает, что Google не будет высоко оценивать ваш сайт, если он не оптимизирован для мобильных устройств. «Если у ваших пользователей плохой опыт работы с мобильными устройствами, они, скорее всего, не вернут ваш сайт», — добавляет он.

Что вообще означает мобильный веб-дизайн?

Адаптивный дизайн означает, что независимо от размера экрана — от телефона до часов, от планшета до рабочего стола — сайт заполнит экран и представит информацию в ясной форме.

«Это не значит, что вы получаете листовку или информационный бюллетень, которые напечатаны и имеют постоянный размер холста», — объясняет Мэтт Фелтен, дизайнер продуктов из Лос-Анджелеса. «Распространение iPhone означает, что дизайнеры должны приспосабливаться к экранам различных размеров и придумывать новые методы для множества различных устройств.”

Создать сайт с нуля? Think Mobile-First

Брайан Клейтон, генеральный директор GreenPal, девять месяцев создавал сайт своей компании с нуля. «Сразу за воротами возникли серьезные проблемы», — говорит он. «Мы предположили, что большинство наших пользователей будут покупать услуги по уходу за газонами со своего настольного компьютера или ноутбука. Но очень быстро стало ясно, что больше людей заходят на сайт со своих мобильных телефонов и планшетов, чем с настольных или портативных компьютеров — 4 к 1.”

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

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

Связано: DreamHost’s Ultimate Small Business Resource Guide

«До того, как наш веб-сайт был перестроен под мобильные устройства, конверсия в мобильном браузере составляла менее 4%», — говорит он.«Это означает, что люди, которые пытались зарегистрироваться, в 96% случаев отказывались от участия».

После перестройки сайта, чтобы он был ориентирован на мобильные устройства, Клейтон обнаружил, что 82% людей, которые инициировали процесс регистрации, чтобы получить бесплатную оценку стоимости, завершили весь процесс со своих мобильных устройств и планшетов.

«Наш продукт, ориентированный на мобильные устройства, — единственная причина, по которой мы даже сейчас участвуем в игре», — говорит он.

Отточите свою аудиторию

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

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

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

Спросите отзывы клиентов

Зондра Уилсон, владелица Blu Skincare в Лос-Анджелесе, обнаружила, что ее сайт не оптимизирован для мобильных устройств, только когда она начала запрашивать отзывы клиентов.

«Я просила своих клиентов написать отзыв, а они говорили, что не могут найти, где его написать», — вспоминает она. «Я спрашивал их о моем блоге или статьях, которые я публиковал, и им было трудно их найти. У них были проблемы с просмотром моего сайта на своих мобильных телефонах.Им пришлось много прокручивать вниз, прежде чем появилась моя первая фотография или какая-либо информация о моей компании. Они не знали, как перемещаться по моему сайту. Многие были разочарованы и не прошли мимо первой страницы ».

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

Связано: 30 лучших веб-приложений для малого бизнеса в 2020 году

Think Маленький экран

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

В конечном счете, лучшая стратегия проектирования проста: убрать весь лишний беспорядок.

«Вам нужно проектировать для малых», — говорит Фельтен. «Вы должны быть немного более сосредоточенными. Вы должны сократить количество информации и контента ». После того, как ваш мобильный сайт будет создан, вы можете обнаружить, что вам не нужно в конце концов добавлять дополнительные компоненты к настольной версии.

«Малым предприятиям придется пересмотреть свои текущие маркетинговые стратегии, поскольку площадь их экранов значительно уменьшилась», — говорит Полгар.

Виталий Виноградов, генеральный директор Modern Place Lighting, обнаружил, что переход на дизайн, ориентированный на мобильные устройства, привел к увеличению конверсий на 30% по сравнению с настольными компьютерами. «Одна важная вещь — удалить лишние плагины, всплывающие окна или любые другие ингибиторы экрана на мобильной версии сайта», — говорит он.

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

Усовершенствуйте свой эстетический дизайн

Рост популярности мобильных устройств привел к появлению таких дизайнерских компаний, как Apple и Google. «Сегодня потребители ожидают более изысканного дизайна», — говорит Фельтен.

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

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

Связано: как повысить коэффициент конверсии вашего веб-сайта с помощью правильного шрифта

Создание единообразного взаимодействия с пользователем

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

Проблема?

Ваш сайт для настольных ПК может иметь совершенно другой вид по сравнению с сайтом для мобильных устройств.Например, приложение Gmail на телефоне отличается от мобильного сайта и обычного сайта. По словам Фелтена, простой и отзывчивый дизайн устраняет резкие различия в пользовательском опыте.

Think Social

Подавляющее большинство блогов читаются и распространяются через социальные сети, говорит Фелтен.

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

Связано: 10 простых советов по работе с социальными сетями для трудолюбивого малого бизнеса

Ваш бизнес должен присутствовать в социальных сетях на соответствующих платформах, чтобы вы могли охватить максимальное количество людей. «Для некоторых предприятий имеет смысл иметь Facebook, а другим требуется Instagram», — говорит он. «Это создает несколько точек входа на ваш сайт и способ продемонстрировать весь спектр ваших услуг.”

Вам нужно приложение для этого?

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

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

Что дальше?

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

7 способов оптимизации вашего веб-сайта для мобильных устройств

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

Мы рекомендуем вам найти время, чтобы реализовать как можно больше из этих методов, чтобы повысить шансы на то, что ваш веб-сайт будет работать хорошо на всех устройствах (и это одобрено индексом Google для мобильных устройств). Давай приступим к работе!

1. Проверьте свой сайт с помощью инструмента Google для мобильных устройств

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

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

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

Чтобы протестировать свой сайт, вам нужно только ввести его URL-адрес и выбрать Run Test . Обычно процесс завершается через несколько секунд, после чего вы увидите результаты.

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

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

Откроется страница, на которой вы сможете увидеть, какие именно ресурсы Google не смог загрузить.

На этом этапе вы можете по очереди разобраться с каждой перечисленной проблемой. Например, вы можете отредактировать файл robots.txt , чтобы разрешить Google доступ к заблокированным файлам, или исправить любые ошибки перенаправления.

2. Используйте адаптивную тему WordPress

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

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

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

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

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

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

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

Связано: Как выбрать правильную тему WordPress для вашего сайта

3.Выберите надежный веб-хостинг

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

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

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

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

Мы знаем, что у вас много вариантов VPS

Вот чем выделяется предложение DreamHost VPS: круглосуточная поддержка клиентов, интуитивно понятная панель, масштабируемая оперативная память, неограниченная пропускная способность, неограниченное количество доменов хостинга и хранилище SSD.

4. Увеличьте время загрузки вашего сайта

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

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

Проверка скорости мобильной связи вашего сайта

Первое, что вам нужно сделать, это узнать, насколько хорошо ваш сайт работает в настоящее время. Еще раз, Google здесь, чтобы помочь вам со своим инструментом Mobile Speed ​​Test.

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

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

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

Оптимизация времени загрузки вашего сайта

Давайте рассмотрим некоторые из основных методов, которые вы можете использовать для повышения скорости вашего сайта.

  • Реализовать кэширование . Когда вы используете кеширование, некоторые файлы вашего веб-сайта будут сохранены в более удобном месте (например, на локальном устройстве каждого посетителя), поэтому их не нужно загружать каждый раз, когда открывается новая страница. Доступно множество бесплатных плагинов кэширования, хотя некоторые планы хостинга, такие как DreamPress, включают эту функцию по умолчанию.
  • Используйте сеть доставки контента (CDN) . Вместо того, чтобы доставлять ваши файлы с одного центрального сервера, CDN позволяет хранить их копии на нескольких серверах, расположенных географически.Это делает время загрузки более сбалансированным независимо от местоположения конкретного пользователя, а также снижает использование полосы пропускания.
  • Сжимайте изображения . Большие файлы изображений часто являются виновниками медленной загрузки. Сжимая их, вы можете уменьшить их размер, не влияя на их качество. Есть ряд бесплатных и дополнительных решений, которые помогут вам в этом, включая плагин ShortPixel и инструмент TinyPNG.
  • Сократите свой код . Оптимизируя код CSS, HTML и JavaScript своего сайта, вы можете сделать его более эффективным и сократить время загрузки на драгоценные секунды.
  • Поддерживайте все аспекты вашего сайта в актуальном состоянии . Использование устаревшего программного обеспечения для запуска вашего веб-сайта не только делает вас уязвимыми для проблем безопасности, но также не позволяет ему работать с максимальной эффективностью. Постоянно обновляя свои плагины, темы и CMS, вы можете избежать этих проблем.

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

Обновите свой сайт

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

5. Измените дизайн всплывающих окон для мобильных устройств

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

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

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

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

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

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

6. Включить ускоренные мобильные страницы (AMP)

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

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

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

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

7. Создайте мобильное приложение

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

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

Хотя можно написать мобильное приложение с нуля (или нанять для этого разработчика), гораздо более простым решением является использование инструмента, который поможет вам превратить ваш сайт в приложение. Одним из таких решений, оптимизированных для пользователей WordPress, является AppPresser.

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

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

Приглашаем вас сердечно

Присоединяйтесь к группе DreamHost в Facebook, чтобы общаться с единомышленниками-владельцами веб-сайтов и получать советы как от коллег, так и от экспертов!

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

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

У вас есть вопросы по созданию мобильного сайта? Присоединяйтесь к нашей группе в Facebook и давайте начнем разговор!

.

No related posts.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *