1. АДАПТИВНОСТЬ
Я давно мечтал об адаптивности сайта. Мне казалось это какой-то магией, которую я не в силах постичь. Плюсом архитектура сайта не позволяла сходу накатить адаптивную вёрстку, так как каждый модуль и каждую страницу необходимо было вручную менять и тестировать.

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

И вот ниже пример как БЫЛО и как СТАЛО, если мы заходим с телефона на главную страницу.

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

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

Но здесь есть одна оговорка - не все страницы на данный момент поддерживают адаптивную вёрстку. Такие страницы как "Турниры прогнозов", "Альтернативные турниры прогнозов", "Fantasy Club", "Ссылки", "Профиль пользователя", а так же прочие админские штуки, которые вы не видите, пока не готовы и открываются как раньше. До них руки дойдут в одном из следующих обновлений. Не всё сразу.

Остальные же страницы можете пощупать сами. Мне, например, непривычно видеть сайт таким. Надо привыкать.

2. НОВОЕ МЕНЮ
Наконец-то я избавился от того допотопного и дышащего на ладан меню, что было раньше. С больших экранов оно ещё работало более менее - мышкой открывались подменюшки без проблем. Но стоило зайти с телефона, то чтобы попасть в подменю, нужно было постараться. Ниже вновь БЫЛО и СТАЛО.

Старое меню сверху, а снизу прокачанное новое. Я постарался лаконично разделы сайта разложить по пунктам. Отдельно вывел молодёжку - теперь в состав, статистику, матчи и турниры молодёжки можно провалиться прямо из своего меню.

Пункт меню "Болельщикам" было решено переименовать в пункт "Фан-клуб". Не в последнюю очередь из-за длины слова "Болельщикам". В этот пункт я добавил "Билеты", а остальное в целом всё как и было.

Панель авторизации и профиля теперь переехала на строку меню. Теперь всё что касается пользователя компактно распологается в верхнем правом углу меню.

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

С меню, наверное, всё. Остальное в нём можно поизучать самостоятельно.

3. ПАНЕЛЬ ВИДЖЕТОВ
Именно так я её назвал. Так как у нас сайт с самых первых версий состоял из двух колонок, то при введении адаптивности с этим нужно было что-то делать, ведь две колонки на экраны телефона не поместятся (одну-то колонку бы уместить). Обычно вспомагательную панель при адаптивной вёрстке убирают вниз под основную колонку. Сперва я так и хотел сделать, но потом подумал, что на этой правой панели у нас на сайте есть важные вещи, до которых листать в самый низ сайта не очень хочется. Поэтому было решено сделать выдвижную панель виджетов. Выдвигается она после нажатия на кнопку справа экрана в мобильной версии:

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

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

А если на странице матча, то на панели будут виджеты с матчами и таблицами - это ещё одно нововведение. Теперь на панели можно будет увидеть турнирную таблицу, матчи тура и личные встречи команд в турнире. Ниже пример такой панели - для примера я взял матч "СКА-Уральский Трубник" - "СКА-Нефтяник" от 21 февраля, когда уральцы были сильнее 3:2. Мы видим личные матчи команд на турнире, таблицу регулярного чемпионата, а так же все игры дня. Всё кликабельно.

Подобные уникальные и удобные виджеты хотелось бы сделать для большинства страниц. Посмотрим как пойдёт.

4. СТРАНИЦЫ ТУРНИРОВ
Изменению подверглись и страницы турниров. Теперь у каждого типа турнира есть своя страница, на которой можно по сезонам просмотреть все подробности. Под типами турнира я имею в виду такие турниры как "Суперлига", "Кубок России", "Высшая лига", "Кубок Губернатора" и так далее. Теперь каждый турнир это отдельная единица на сайте. Ну и сами страницы турниров немного изменились в угоду адаптивности.

5. МАТЧ-ЦЕНТР
Страницы игр теперь отображают больше информации (а в будущем должно быть ещё больше). Ниже страница матча "Енисей" - "СКА-Уральский Трубник" - первой игры для "Трубника" в прошлой Суперлиге.

К матчу загружен официальный протокол, который можно скачать, а так же присутствует информация о прогнозах (если нажать, то попадёшь на страницу прогнозов по этой игре).

Но самое интересное расположено снизу - появились вкладки.

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

В мобильной версии все плитки располагаются в столбик.

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

На вкладке "Фото", как не сложно догадаться - опубликованные на сайте фотоальбомы, связанные с матчем.

Ну а на вкладке "История" располагается история взаимоотношений команд (по крайней мере на основе тех встреч, которые есть на сайте). Этот блок так же был раньше, только сейчас он выглядит иначе. Плюс добавилась информация о крупнейшей победе каждой из команд, самом результативном матче, самой результативной ничьей. А ещё теперь визуально можно увидеть на чьей стороне преимущество по личным встречам благодаря небольшой красно-серо-синей шкале.

И, разумеется, весь список матчей прилагается (с индикацией победившей команды цветом сбоку карточки матча)

Отдельной задачей теперь стоит заполнение информации по каждому матчу, чем я займусь чуть позже.

6. СТРАНИЦА КОМАНДЫ
Модифицировал так же страницу команды. Теперь есть возможность заполнять ссылку на сайт у команды. Так же на странице появились вкладки. Во вкладке "Форма команды" показаны шесть последних матчей команды, во вкладке "История" всё та же история противостояний команды с "Трубником", а так же влкдака "Болельщики" показывает всех болельщиков, которые в своём профиле указали эту команду как "любимый клуб".

В ЗАКЛЮЧЕНИЕ
Помимо описанного выше, было доработано, переработано или создано множество мелких деталей, а над многим ещё предстоит поработать. Наверняка я мог забыть рассказать про ещё что-то важное, но вроде из основного всё. Некоторые виджеты на правой панели, такие как "Предыдущий матч" и "Статистика игроков" ждут своей очереди на переработку - они буквально следующие в списке "жертв". Будем работать дальше.

Во что бы то ни стало.

Если есть какие-то мысли по написанному выше - прошу делиться в комментариях ниже (которые, кстати, тоже требуют переработки).

Спасибо, что дочитали.