Верхняя шапка и Главное меню на Cs-Cs.Net: Идеи для вёрстки (Обновление)

Меня затрахало верхняя шапка и меню Cs-Cs.Net. Я уже нашёл тех, кто мне его переделает (так, чтобы смотрелось с телефонов нормально). Но я не знаю, ЧТО попросить. Поэтому вопрошаю к тем, кто тут ещё что-то читает. Вдруг у вас будет какой-то опыт, так как мне 15 лет было похер на новый WEB, и все тренды и удобства я пропустил.
Вот как это ща выглядит:



Что должно быть в некоторых отдельных группах:
  • Название проекта (останется как есть)
  • Телефон, Мыло, Ссылка на страницу Контактов
  • Ссылки на СоцСети (Два ЮТуба, Два Телеграма)
  • Меню для заказчиков (верхнее) — туда добавится побольше пунктов про Щиты, Автоматику, СценоСсвет
  • Меню для читателей (нижнее) — все эти вот Правила, Донаты, Коллеги и так далее

Я НЕ знаю, как это сделать по-новому так, чтобы при меньшей ширине это смотрелось корректно. Если кто знает про дизайн — подскажите. Вот что я видел или думаю:
  • Всё будет переноситься на строку ниже — Гавно, потому что тогда будут висящие строки типа «Сборка щитов, Автоматика,… (новая строка) СценоСвет», а потом вторая строка меню. Это будет пиздец некрасиво.
  • Соединить всё в одно меню и переносить его текст на другие строки — Не затеряется ли здесь инфа для заказчиков и просто инфа? Не охуеют люди рыться в таком меню?
  • Сделать раскрывающееся меню, в которое превращается обычное, когда сайт смотрят с телефона — Вроде как к этому снова возвращаются, но не убого ли это? Не потерятся ли клиент (и вы), когда увидите кнопку «Меню» и голую шапку сайта?

В общем, я в прострации, и из-за этого не могу сформировать ТЗху на переделку. Посоветуйте что-нить из вашего опыта использования сайтов и навигации.
Может пихать ЛЮБЫЕ ссылки на сайты-примеры, лишь бы было пояснение, куда смотреть.
  • нет
  • avatar
  • 0

2 комментария

avatar
Привет! Надо определить что является критичным функционалом в мобильной версии. Если исходить из того что пользователю в первую очередь нужно 1) понять как с тобой связаться 2) увидеть свежие публикации 3) найти нужную инфу а тебе нужно 4) чтобы пользовать увидел статус загрузки/работы по своему проекту и как тебе задонатить тогда можно организовать шапку следующим образом. Во-первых, для мобильной и для десктопной версии шапку сделать закрепленной вверху экрана и постоянно видимой при скролле. В закрепленную часть положить телефоны, номера карт для доната и иконки соцсетей. В мобильной версии номер телефона скрывается за иконкой звонка, номера карт для доната скрываются за иконкой доната и показываются в модалке по клику на иконку. Во-вторых, рядом положить ссылку на сообщество. Это сильно разгрузит шапку десктопного сайта, сохранить постоянную видимость всей контактной информации и решит проблему с ее доступностью в мобильной версии. Третье — под эту шапку в мобильной версии можно положить тонкой строкой статус занятости и названия текущих проектов в работе. Все остальное (навигация по контенту) — в обычное мобильное меню с подразделами. Можно подумать о том чтобы шапка с мобильным меню была закреплена не вверху, а внизу сайта. Раньше это выглядело странно, но с появлением везде и всюду телефонов-лопат, которые уже нельзя одной рукой держать и тянуться к кнопкам вверху экрана, нижнее расположение шапки становится полезным. Вообще, такие штуки текстом описывать плохо, лучше быстро отрисовать макет в той же фигме)
  • Syo
  • +1
avatar
Привет! Спасибо тебе за мысли! Мы тут с девчонкой верстаем потихоньку КОНЦЕПТ.


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


Конкретно мои мысли ещё такие (совпадают с твоими). Я уйду от блога на главной странице! Вместо этого на главной будет примерно вот что:
* Подробный список контактов и куда обращаться по каким вопросам
* Список последних постов
* Полный статус Мастера (с комментарием)
* Баннер Лучшие Проекты (и то, может, выкину его)
* Список обновлённых постов
* Тэги
А блог переедет в отдельное подменю. Тогда для заказчиков сайт станет информативнее.
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.