Как улучшить адаптивную версию сайта

Как улучшить отзывчивую версию вашего сайта? - 9 советов

1. Определите приоритетные типы контента.

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

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

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

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

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

2. Не показывайте все, что видно на настольных компьютерах

Этот совет непосредственно вытекает из предыдущего.

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

Означает ли это, что пользователь смартфона должен видеть точно такую же информацию, как и посетитель сайта с настольного компьютера?

Абсолютно нет.

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

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

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

3. Предоставляйте пользователям изображения соответствующего размера

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

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

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

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

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

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

4. Сделайте адреса электронной почты и контактные номера доступными для просмотра

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

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

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

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

Эти изменения кажутся незначительными, но поверьте мне - пользователи это оценили.

5. Уменьшите вес графики

И снова мы на мгновение погружаемся в графику.

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

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

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

В результате изображения загружаются быстрее, а сервер "съедает" меньше ресурсов.

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

По этому поводу я могу порекомендовать вам один из наших текстов: как оптимизировать графику на сайте?

6. Убедитесь, что поля в формах имеют правильные типы

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

На клетках все уже по-другому.

Если поле в HTML помечено типом "число", то при выборе такого поля мобильный браузер по умолчанию запускает цифровую клавиатуру.

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

Таким образом, пользователю придется сделать на один шаг меньше. Если на странице в определенном месте посетитель должен ввести номер телефона, то установка типа поля как 'number' просто экономит время. После этого весь процесс заполнения формы проходит более гладко.

Поэтому не забывайте помечать нужные поля нужными типами.

Вот текст, который может показаться вам интересным: Формы на веб-сайтах - как их эффективно оформить?

7. Настройте размер шрифта и высоту строк.

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

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

Поэтому необходимо сделать все возможное, чтобы помочь пользователям в этом.

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

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

8. Рассмотрите возможность добавления поисковой системы

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

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

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

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

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

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

9. Настройте размер кнопок

Как говорится, последнее, но не менее важное.

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

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

Поэтому правило простое - кнопки должны быть не только видимыми, но и правильного размера.

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

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

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

Сам факт использования так называемой "сетки" при строительстве участка не поможет.

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

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