Как исправить «Цели касания имеют неправильный размер» в WordPress

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

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

Введение в проблему «Цели касания имеют неправильный размер»

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

Если у вас большой опыт веб-разработки, вы можете запустить Lighthouse в Chrome DevTools или из командной строки. Однако PageSpeed ​​Insights также работает на базе Lighthouse и часто является хорошей альтернативой для новичков.

Чтобы получить расширенную оценку вашего веб-сайта, все, что вам нужно сделать, это ввести URL-адрес вашего сайта и нажать «Анализ» :

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

Если вы прокрутите страницу вниз, вы найдете раздел Mobile Friendly . Здесь вы увидите информацию о целях касания:

Как видите, наш анализ выявил проблему «Цели касания имеют неправильный размер». Если вы развернете этот раздел, вы найдете более подробную информацию о каждой из ваших целей касания.

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

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

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

Как исправить проблему «Цели касания имеют неправильный размер»

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

1. Увеличьте размер целей касания
2. Увеличьте расстояние между целями касания

1. Увеличьте размер целей касания.

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

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

Увеличьте размер кнопок в WordPress

Чтобы изменить размер кнопок на вашем веб-сайте, вам нужно открыть настройщик WordPress. Вы можете сделать это, перейдя в «Внешний вид» > «Настройщик» на панели инструментов. Далее выберите Кнопки :

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

Чтобы еще больше оптимизировать цель касания, вы можете увеличить ее высоту линии . Это увеличит размер цели по вертикали. Кроме того, если вы отредактируете значение Letter Spacing , вы сможете увеличить размер кнопки по горизонтали:

Затем не забудьте нажать «Опубликовать» , чтобы сохранить изменения.

Увеличьте размер ссылок в WordPress

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

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

Вы можете сделать это непосредственно в соответствующей публикации или на странице. Например, вы можете добавить блок «Цикл запросов», чтобы пользователи могли видеть список опубликованных вами сообщений в блоге:

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

Одна из лучших особенностей использования ссылки в заголовке вашего сообщения — это то, что увеличить размер цели касания очень просто. Все, что вам нужно сделать, это нажать на заголовок ссылки. Затем перейдите к «Изменить уровень заголовка» на панели инструментов:

Здесь вы можете увеличить размер ссылки, выбрав формат H1 или H2.

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

Здесь используйте раскрывающийся список РАЗМЕР (PX) , чтобы изменить настройку с «Нормального» на большую:

Затем обязательно сохраните изменения.

2. Увеличьте расстояние между целями касания.

Второй способ исправить проблему «Цели касания имеют неправильный размер» в Lighthouse — увеличить расстояние между целями касания. Chrome говорит, что обычно достаточно 8 пикселей. Однако для меньших целей вам может потребоваться еще больше увеличить расстояние, чтобы пройти проверку Маяка. Есть несколько способов сделать это.

Настройте свойство заполнения

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

Вы можете сделать это с помощью кнопок, открыв настройщик WordPress. Затем отправляйтесь в Кнопки . Вы найдете свойство Padding вверху общих настроек:

Чтобы устранить проблему «Цели касания имеют неправильный размер», просто увеличьте отступы вокруг кнопки. Убедитесь, что вы находитесь в PX , а не в EM или REM .

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

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

Обязательно нажмите «Опубликовать» , чтобы сохранить изменения.

Используйте блок WordPress Spacer

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

Например, у вас могут быть две кнопки, расположенные друг над другом:

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

В этом случае вы можете добавить блок-разделитель между кнопками, чтобы исправить проблему «Цели касания имеют неправильный размер». Просто нажмите на значок + между блоками. Затем найдите «спейсер»:

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

Как вы можете видеть, теперь между целями касания стало больше места.

Заключение

Подводя итог, вот два способа решить эту проблему:

1. Увеличьте размер целей касания.
2. Увеличьте расстояние между целями касания.

Есть ли у вас вопросы о том, как решить проблему «Цели касания имеют неправильный размер»? Дайте нам знать в комментариях ниже!