Аудит сайта vedonlyontibonukset.com

Сайт — https://www.vedonlyontibonukset.com/

№ 1

Белая подложка контента сжимает содержимое, лишает воздуха

— Решение: сделать фон сайта белым и убрать тени из контента. Показал в следующем скрине. Так контент будет восприниматься легче, без сковывающих рамок.

№ 2

Маленький отступ между блоками. Не хватает воздуха, все прижато друг к другу.

— Решение: увеличить отступы и межстрочный интервал. Показал в следующем скрине.

Дизайн страницы улучшит комбинация приёмов: убрать грязные тени, поменять фон, добавить отступов.

№ 3

Дублирование логотипа. По факту сейчас заголовок повторяет логотип,

— Решение: на его место нужно поставить подзаголовок «Suomen kattavin urheiluvedonlyöntiin keskittyvä sivusto». Так пользователь увидит и логотип и заголовок, ему не нужно будет тратить время, чтобы посмотретьн на дублирование дважды.

№ 4

Иконки состояний мне непоняны, нужно сделать их информативнее, добавить слова.

— Решение: добавит слова

Обыграть это как-то так.

№ 5

Информация в карточках по центру + все сжато.

 — Решение: выравнять по левому краю, добавить больше свободного пространства, выделить важные для пользователя даные. Матч в заголовке будет важнее, чем лига, потому что логотип лиги уже есть в карточке. Также можно добавить иконки к данным, чтобы можно было быстрее считывать информацию.

№ 6

Сейчас скругление не на всех углах, это бросается в глаза.

— Решение: сделать скругление по всем углам.

№ 7

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

— Решение: затемнить изображение, выравнять текст по левому краю, сделать текст белым. Возможно увеличить заголовки. Кнопки убрать и сделать кликабельным всю карточку новости. А заголовок сделать с подчеркиванием, чтобы ссылка была нагляднее.

№ 8

Отступы списка конфликтуют с другими вертикальными элементами. Сделать их меньше, пикселей 5.

№ 9

Слишком жизные подчеркивания, отвлекают от самого текст ссылок.

— Решение: сделать подчеркивания аккуратнее.

№ 10

В подвале seo-текст отвлекает от ссылок и формы подписки.

— Решение: форму подписки увеличить, написать о преимуществах, сделать небольшой редизайн. Seo-текст разместить ниже мелким шрифтом, так как для поисковиков не имеет значения, 12 он пикселей или 18.

№ 11

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

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

№ 12

Когда на карточке нет кнопки, она воспринимается как вверх высокой карточки.

— Решение: добавить серую кнопку, так будет видно, что он недоступен сейчас.

№ 13

Ошибки валидатора w3c

№ 14

Синее пространство не имеет какой-то цели или важности. По кнопке нужно целиться.

— Решение: кнопку лучше сделать на всю ширину и высоту синей области. чтобы я не целился в центр, а мог нажать. Следующий скрин.

№ 15

При ширине 979 пикселей текст в карточках новостей разваливается.

— Решение: переделать карточки так, чтобы изображение было отдельно.

№ 16

Я спустился в подвал и хочу быстро вернуться наверх, но не знаю как это сделать. Нет ни закреплённой шапки, ни кнопки «вверх».

— Решение: добавить кнопку «вверх», которая будет скроллить вверх страницы или закрепить шапку при скролле.

№ 17

На 768 пикселях разваливаются карточки. Их сложно воспринимать.

— Решение: переработать карточку на мобильном, сделать их шириной 50% на планшете, 100% на мобильном.

№ 18

Из-за маленького отступа я не понимаю, где заканчивается одна карточка и начинается другая.

— Решение: учеличить отступ между карточками.

№ 19

Из-за ширины карточек и маленькими отступами все смешивается. Из-за цветных шапок карточек «вес» кнопки снижается и я её уже не замечаю.

— Решение: попробовать избавиться от цветных шапок, увеличить ширину карточки при ширине <768 и добавить отступы между строками.

№ 20

Из-за отсутствия границ я не понимаю, где верх, где низ, и на какую карточку я ставлю вето.

— Решение: добавить границы,

№ 21

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

При клике на кнопку «valikko» при открытии она не меняется, то есть я не вижу очевидных элементов для закрытия меню.

— Решение: изменить цвет текста на чёрный, ссылки сделать синими, либо оставить чёрными, так как это меню. Внутренник список изобразить по-другому, поменяь текст кнопки. Результат в следующем скрине.

№ 22

Убрать грязные тени у текста

№ 23

Добавить отступ между табами на мобильном.

№ 24

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

Это гипотеза, надо тестировать на пользователях.

№ 25

Примерно 30% css не используется и может быть удалён. Скорее всего сетка и фреймворки.

№ 26

Сейчас активна первая ссылка, но она не показана явно.

— Решение: изменить стиль активной кнопки, сделать его как при наведении

№ 27

На мобильном при прокрутке контента вкладок, когда я опустился вниз, для того, чтобы включить другую вкладку надо пролистать наверх. Это долго и нудно.

— Решение: когда пользователь прокрутил вкладки, мы фиксируем в верхней части табы.

Первый скрин: как сейчас, второй: как можно сделать

Css-стили

По мере аудита я выписывал css-стили, которые я заменил. Возможно они пригодястя вам при разработке.

.main {
  background-color: #fff;
}

.main-text {
  padding: 15px;
}

.main-text p {
  line-height: 1.6;
}

.topplista-casinon, .main-text {
  box-shadow: unset;
}

.topplista-casinon {
  margin-bottom: 40px;  
}

.tab-link, .tab-link.w--current, .tab-link-2, .tab-link-3 {
  box-shadow: unset;
  margin-right: 15px;
}

.w-tab-content {
  margin-top: 20px;
}

.text-link-footer {
  color: rgb(209 207 207);
  border-bottom: 1px solid rgba(209,207, 207, 0.3);  
}

.collection-item-23 {
  margin-bottom: 10px;
}


@media screen and (max-width: 991px) {
  .navbar-mobile {
    padding: 0;
  }
  .navbar-mobile-main-link {
    padding: 15px 0;
    width: 100%;
    display: block;
    margin: 0;
    border-radius: 0;
    border: none;
    color: #000;
  }
  .navbar-mobile-link-popup, .dropdown-link-50 {
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
    color: #222;
  }
  .navbar-mobile-drop-list.w--open {
    padding-left: 20px;
    margin-bottom: 20px;
    background-color: #fff;
  }
  .text-block-105, .text-block-106, .text-block-104, .bold-text-22, .bold-text-21, .bold-text-27  {
    color: #000;
  }
}