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

[mr9d]

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

• Меньшими физическими размерами экранов (по сравнению с мониторами)
• Повышенной плотностью пикселов
• Отсутствием мыши, управлением с тач-экранов
• Возможностью поворачивать экран набок

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

1. Адаптация текущего дизайна под мобильные устройства.
2. Поиск дизайнера
3. Доработки отдельных элементов в рамках текущего дизайна.
4. Разработка полноценного нового дизайна.

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

• Не привлекаем к работе дизайзера, ориентируемся на текущий внешний вид портала.
• Внешний вид на широких экранах изменить не должен.
• Внешних вид на мобильных устройствах должен стать не хуже, чем был.
• Вся имеющаяся функциональность должна сохраниться.
• Работа ведется в публичном репозитории: https://github.com/mr9d/acomics-ssr
• В процессе работы могут решаться и другие задачи, если это возможно.
• Страницы адаптируются в порядке их важности, либо в логическом порядке, если это требуется.

Запланированная последовательность работы:

• О проекте | /about
• Правила портала | /rules
• Контактная информация | /contact
• Страница комикса с комментариями | /~{comicsname}/{page}
• Страницы лентой | /~{comicsname}/list
• О комиксе | /~{comicsname}/about
• Содержание | /~{comicsname}/content
• Комментарии | /~{comicsname}/comment
• Персонажи | /~{comicsname}/character
• Подписка на комикс | /~{comicsname}/subscribe
• Баннеры | /~{comicsname}/banner
• Предупреждение о возрастном ограничении | /~{comicsname}/ageRestrict
• FAQ | /~{comicsname}/faq
• Каталог комиксов | /comics
• Главная страница | /
• Поиск комиксов | /search
• Прямой эфир | /live
• Каталог по категории | /comics/{category}
• Регистрация | /auth/reg
• Вход | /auth/login
• Выход | /auth/logout
• Переотправка письма активации | /auth/resendActivation
• Восстановление пароля по email | /auth/passwordRecovery
• Подписки по страницам | /-{username}/list
• Подписки по комиксам (агрегированная) | /-{username}/list2
• Подписки рекомендованные | /-{username}/featured
• Главная страница профиля | /-{username}
• Публикации | /-{username}/serial
• Комментарии | /-{username}/comment

Далее

• Настройки
• Голосовалка
• Мессенджер
• Информационные страницы
• Обложки
• Инструменты публикации

[mr9d]

Прямо сейчас эта задача в приоритете.

[mr9d]

Работа по мобильному адаптиву ведется в новом публичном репозитории: https://github.com/mr9d/acomics-ssr

[mr9d]

Готова страница "О комиксе": https://acomics.ru/~roovolts/about

[mr9d]

Готова читалка в режиме "по одной странице": https://acomics.ru/~dgt

[mr9d]

Актуализировал описание задачи.

[mr9d]

Замечания по итогам публичного тестирования адаптивной версии страницы отображения комикса с комментариями:

• В целом, впечатления пользователей положительные.
• Возник запрос переключения между десктопной и мобильной версией. Двух разных версий для читалки точно не будет из-за сложности поддержки. Но скорее всего, решение других проблем должно помочь.
• Несколько человек пожаловались на необходимость скроллить чтобы увидеть страницу комикса целиком. Проблема возникла из-за увеличения размеров текста в шапке и меню комикса. Это должно быть исправлено в новом дизайне первым приоритетом. В идеале, шапку сайта, шапку комикса, меню комикса и номер выпуска нужно собрать максимально компактно в один блок.
• Как вариант решения прошлой проблемы, было предложение сделать автоматический подскролл к началу страницы при перелистывании. Нужно исследовать, насколько user-friendly манипуляция со скроллом при загрузке страницы. Но может подойти как легкое временное решение.
• Было предложение скрывать главное меню при свайпе вниз и показывать при свайпе вверх.
• Обозначение номера выпуска без названия не выглядит очень полезным: как будто просто занимает место.
• Была жалоба на отсутствие кнопки "случайный выпуск" в мобильной версии. Пока не понятно, куда это кнопку поместить, но стоит учесть этот момент в новом дизайне.
• Были жалобы на расположение элементов в главном меню. Уже запланировано исправить это в новом дизайне.
• Была жалоба на белое поле если реклама не загружена. Нужно вернуть подложку для баннера с просьбой выключить блокировщик рекламы, чтобы она хотя бы занимала место.
• В некоторых комиксах маленький текст. Скорее всего, с этим ничего не сделать, если комикс изначально создавался для старых мониторов с низкой плотностью пикселов. Нужно подумать над масштабированием таких комиксов. Возможно, писать авторам про допустимые размеры текста при загрузке страниц.
• При увеличении комиксов на мобильных экранах с высокой плотностью пикселов лучше видны "артефакты" сжатия. Аналогично прошлому пункту, часть ответственности за качество картинки остается на авторах. Можно подумать над тем, чтобы увеличить лимиты при загрузке изображения. Также может помочь инструкция для авторов по подготовке выпусков. Как вариант, принимать изображения в максимальном качестве и сжимать их самостоятельно.

[mr9d]

Готова читалка в режиме лентой.

[mr9d]

Готово содержание комикса.

[mr9d]

Готова страница с комментариями.

[mr9d]

Готова страница с персонажами комикса и FAQ.

[mr9d]

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

[mr9d]

Открытый пост на бусти по процессу работы над каталогом со скриншотами.

[mr9d]

Доделал адаптивность на страницах каталога:

https://acomics.ru/sandbox
https://acomics.ru/comics
https://acomics.ru/featured
https://acomics.ru/search?keyword=test

[mr9d]

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

Когда обновляется страница, автоматически активируется поле для поиска.
Это неудобно, потому что:

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

UPD. Баг исправлен: https://github.com/mr9d/acomics-ssr/blob/main/src/Layout/Main/Component/CatalogSearchForm/CatalogSearchForm.js

[mr9d]

Открытый пост на бусти про процесс работы над главной страницей.