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

mr9d commented 1 year ago

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

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

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

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

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

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

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

[x] О проекте | /about
[x] Правила портала | /rules
[x] Контактная информация | /contact
[x] Страница комикса с комментариями | /~{comicsname}/{page}
[x] Страницы лентой | /~{comicsname}/list
[x] О комиксе | /~{comicsname}/about
[x] Содержание | /~{comicsname}/content
[x] Комментарии | /~{comicsname}/comment
[x] Персонажи | /~{comicsname}/character
[x] Подписка на комикс | /~{comicsname}/subscribe
[x] Баннеры | /~{comicsname}/banner
[x] Предупреждение о возрастном ограничении | /~{comicsname}/ageRestrict
[x] FAQ | /~{comicsname}/faq
[x] Каталог комиксов | /comics
[ ] Главная страница | /
[x] Поиск комиксов | /search
[ ] Прямой эфир | /live
[x] Каталог по категории | /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 commented 1 year ago

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

mr9d commented 10 months ago

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

mr9d commented 10 months ago

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

mr9d commented 9 months ago

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

mr9d commented 9 months ago

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

mr9d commented 9 months ago

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

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

mr9d commented 9 months ago

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