Дизайн — статьи о сайтах
Читатель, который открывает сайт библиотеки с телефона, обычно стоит на остановке, в коридоре или у входа в здание. Ему нужно быстро выяснить, работает ли библиотека сегодня, есть ли книга и как продлить срок. Если на узком экране приходится увеличивать текст пальцами и искать нужный раздел в длинном меню, он закроет сайт и не вернётся. Ниже описано, как этого избежать.
С какими задачами посетители приходят с телефона
Перед тем как менять дизайн, выпишите 5–7 действий, ради которых люди заходят на сайт. Для библиотеки список обычно такой:
- узнать часы работы и адрес, в том числе в праздничные и санитарные дни;
- найти издание в электронном каталоге и увидеть, есть ли оно в наличии;
- войти в личный кабинет и продлить выдачу;
- посмотреть афишу и записаться на мероприятие;
- открыть электронные ресурсы или скачать документ, например правила пользования;
- позвонить или написать сотруднику.
Проверьте этот список по статистике посещений своего сайта, если счётчик установлен, или спросите у сотрудников абонемента, о чём чаще всего просят по телефону. Именно эти действия должны занимать главные места на мобильной версии.
Что разместить на первом экране
На телефоне первый экран занимает примерно 600–700 пикселей по высоте. Слайдер с фотографией читального зала и приветствие директора съедят его целиком. Вот условный пример главной страницы вымышленной «Городской библиотеки» при ширине экрана 360 пикселей, сверху вниз:
- строка статуса: «Сегодня открыто до 19:00» и кнопка «Как добраться» со ссылкой на карту;
- поле «Поиск по каталогу» на всю ширину экрана;
- три крупные кнопки: «Продлить книги», «Записаться на мероприятие», «Электронные ресурсы»;
- три ближайших события с датой, временем и кнопкой «Подробнее»;
- телефон, при нажатии на который сразу начинается звонок.
Новости, история библиотеки и сведения об учредителе уходят ниже или в раздел меню. Строку о часах работы лучше выводить автоматически из расписания, чтобы в выходной не висело вчерашнее «открыто».
Каталог и личный кабинет на узком экране
Чаще всего ломается именно каталог, потому что многие библиотеки подключают внешнюю систему, которая выглядит как программа для настольного компьютера. Проверьте три вещи. Первая: помещается ли форма поиска в экран без горизонтальной прокрутки. Вторая: читаются ли результаты, когда автор, название, год и шифр хранения выстроены в одну колонку, а не в широкую таблицу. Третья: понятно ли, как попасть в личный кабинет.
Если каталог принадлежит стороннему поставщику и переделать его нельзя, оформите вокруг него страницу-обёртку. На ней нужны короткое пояснение, как искать, и заметная ссылка на кабинет. Спросите у поставщика, есть ли мобильный шаблон. Для полей входа задайте правильные типы ввода, чтобы телефон подставлял нужную клавиатуру и позволял менеджеру паролей сохранить данные. Кнопки и ссылки в результатах делайте не меньше 44×44 пикселей, иначе по ним трудно попасть пальцем.
Афиша, документы и PDF
Афиша часто публикуется картинкой-плакатом. На телефоне текст на ней мелкий, не копируется, а скринридер для незрячих читателей его не прочтёт. Дублируйте плакат текстом: название, дата, время, место, возраст аудитории, способ записи. Если запись по телефону, оформите номер как ссылку для звонка.
Правила пользования, положения о конкурсах и прайс-листы платных услуг обычно лежат в PDF, сверстанном под лист A4. На телефоне такой файл приходится масштабировать. Для важной информации сделайте HTML-страницу, а PDF оставьте как приложение для скачивания с указанием формата и размера файла. Сканы документов без текстового слоя замените нормальными файлами.
Скорость и проверка на реальных устройствах
В залах и подвальных помещениях мобильный интернет бывает слабым, поэтому тяжёлые страницы там открываются долго. Сожмите фотографии, загружайте их по мере прокрутки страницы, не ставьте автовоспроизводимое видео и убирайте лишние виджеты. Измерить скорость можно в бесплатных инструментах, например в Lighthouse в браузере Chrome. Результат — ориентир для доработок, а не гарантия положения сайта в поисковой выдаче.
Эмулятор экрана в браузере полезен, но не заменяет живую проверку. Возьмите хотя бы один старый Android-смартфон, один iPhone и попросите сотрудницу старшего возраста выполнить задания: найти часы работы, продлить книгу, записаться на лекцию. Наблюдайте, где она остановится, и не подсказывайте.
Проверочный список для мобильной версии
- В мета-теге viewport задана ширина устройства, страница не масштабируется вручную.
- Часы работы, адрес и телефон видны без перехода в раздел «Контакты».
- Поиск по каталогу доступен с главной и работает без горизонтальной прокрутки.
- Размер основного текста не меньше 16 пикселей, контраст с фоном достаточный.
- Кнопки и ссылки достаточно крупные и расположены с промежутками.
- Афиша дублируется текстом, а не только картинкой.
- Важные документы доступны как веб-страницы, у PDF указан размер.
- Формы входа и записи используют подходящие типы полей и понятные сообщения об ошибках.
- Главная страница открывается за разумное время при медленном соединении.
- Версия для слабовидящих, если она есть, тоже работает на телефоне.
Если большинство пунктов не выполнено, начните с первого экрана главной страницы и каталога. Эти изменения заметнее всего для читателей и требуют меньше всего работы по сравнению с полной переделкой сайта.
