100 причин почему у школы СамЛИТ плохой вебсайт

100 причин почему у школы СамЛИТ плохой вебсайт

Предисловие

Я не бог дизайна и я не Билл Гейтс. Однажды я зашел на сайт своей школы и не смог сдержать слез: этот дизайн ужасает. В этой статье я собрал 100 пунктов, которые надо срочно исправить, чтобы сайт не был настолько плох в плане дизайна и навигации. Исправление всех этих пунктов не сделают сайт СамЛИТа шедевром, но его будет не стыдно показать друзьям.

Если у вас есть вопросы, пожелания, критика сайтов, написанных мной, пишите на [email protected]. Я все исправлю, обещаю.

Н – категория навигация. Весь сайт является нарушением первого закона Стива Круга о веб-юзабилити: он заставляет посетителя думать, и даже размышлять.

У – категория внутреннего устройства сайта. Весь сайт является нарушением всех правил о форматировании кода и безопасности. Хаос в исходниках путает создателя, и, безусловно, путает абсолютно всех, кто когда-либо будет работать с ними.

Б – категория безобразного внешнего вида. Весь сайт является нарушением законов дизайна и общепринятых норм. Безобразно здесь означает очень плохо, я старался не придираться к мелочам.


UPD Feb 2021: Я попытался начать проект по переработке сайта, нарисовал макеты, описал функции, но проект не получилось реализовать из-за нехватки специалистов в самлите (никто не приходил в гугл мит) Если вы такой же энтузиаст как я, пожалуйста, обратитесь за материалами на указанную выше почту и я с радостью вышлю вам всю информацию.

UPD Jul 2021: Читайте продолжение статьи: Пароли Маркова


Навигация

Н Кнопка Top Panel

Н Карта внутри контактов

Н Телефоны и почта словами

Н «Шапка сайта»: ID сайта

Н «Шапка сайта»: разные логотипы сайтов внутри одного домена

Б «Шапка сайта»: логотип

У Расположение изображений

У Корень директорий

У Неиспользуемые файлы

У Незащищенный протокол

Б Поиск безобразен

Н Футер сделан неправильно: Контактная информация

Н Футер сделан неправильно: Архив новостей

Н Футер сделан неправильно: иконки соц. сетей два раза на странице

Б Излишняя версия для слабовидящих

Б Излишние темы

Н Дизайн страницы новостей неплохой, но нужно лучше

Б Форматирование статей

Б Пагинация новостей

У Оптимизация

Н Страница «Учителям»

Н Адреса страниц главного сайта

Н Из-за плохих адресов теряется указатель ВЫ ЗДЕСЬ

Н Сайт выпускников

Н Поле «Выберете год и класс» и форма

Н Пагинация не работает на сайте выпускников

Н Медалисты на сайте выпускников

У Ошибка в CSS на сайте «Патриот»

У Скрипты и стили – не ассеты

Н Проблемы с навигацией в «шапке» сайта Патриот

Б Flip-кнопки и страница «Сведения об образовательной организации»

Н На странице «Документы» лучше все структурировать

Н Страница «Руководство и педсостав» существует в двух видах

Б Страница «Платные общеобразовательные услуги» содержит пустую вкладку

Н На сайте Д.О. виджет для связи перекрывает ссылки футера

Н Навигация сайта итоговой аттестации

Б Не соблюдены отступы на сайте итоговой аттестации

Б Ссылки в футере сайта итоговой аттестации смешиваются

Н Скрытый контент (спойлеры) на странице «Электронный учебник»

Б Сайт «Эпоха. Общество. Человек.» не доделан и содержит плейсхолдеры

У Форма не отправляется

Н Соц сети содержат ссылки на сами себя

Б Текст перед картинкой – это плохая идея

Н Недоступная кнопка должна быть недоступной

У Скрипт для связи работает, а форма – нет

Н Навигация на сайте «Компьютерная страна»

Н Сайт ТехноМир должен быть закрыт

Н Бесполезные иконки у уроков на сайте дистанционного обучения

Н Используйте тег alt на всех изображениях вместо версии для слабовидящих

У Не используйте шаблоны и CMS если не понимаете, как они работают!!

У XSS на сайте дистанционного обучения

У Код СамЛИТа: тег style

У Код СамЛИТа: скрипты на странице

У Код СамЛИТа: грязные скрипты

У Код СамЛИТа: мешанина HTML тегов

У Код СамЛИТа: inline CSS

У Комментарии в HTML коде сайта «Патриот»

У Излишние комментарии в JS коде сайта «Патриот»

Б Футер сайта «Патриот» и DESIGN BY DANIL V.SUHARENKO

У Комментарии в HTML коде сайта «Выпускники»

У Комментарии в HTML коде на сайте «Эпоха. Общество. Человек.»

У Каждое модальное окно имеет свой элемент

У Скрипты внутри страницы

У Пустые (почти) файлы на сайте «Э.О.К»

Н Техномир: Форма имеет неправильный дизайн

Б Визуальные и орфографические ошибки на сайте «Техномир»

Н Кнопка или пункт?

Б Временно недоступная кнопка без иконки доступна

Б Баги анимации

Н Категории по классам

Б Кириллица не поддерживается шрифтом

Б В колонках используются HTML-entities

Б Баг с прокруткой

У Изображения не загружаются на сайте «Компьютерная страна»

У Нет поисковой оптимизации для сайта СамЛИТа

У Нет поисковой оптимизации для сайта «Патриот»

У Нет поисковой оптимизации для сайта «Выпускники»

У Нет поисковой оптимизации для сайта «Итоговая аттестация»

У Нет поисковой оптимизации для сайта «Компьютерная страна»

У Нет поисковой оптимизации для сайта «Эпоха. Общество. Человек»

У Нет поисковой оптимизации для сайта «ТехноМир»

У Нет протокола opengraph для сайта СамЛИТа

У Нет протокола opengraph для сайта «Патриот»

У Нет протокола opengraph для сайта «Выпускники»

У Нет протокола opengraph для сайта «Итоговая аттестация»

У Нет протокола opengraph для сайта «Компьютерная страна»

У Нет протокола opengraph для сайта «Эпоха. Общество. Человек»

У Нет протокола opengraph для сайта «Техномир»

У Код сайта «Итоговой аттестации»

У Код сайта «Компьютерная страна»

У Код сайта «ТехноМир»

Б Слайдер на главной

У Шеринг путем отправки письма не работает

Б Кнопки для шеринга дублируется

Н На странице «Регламент работы психолога» две неправильные ссылки

Н Излишние спойлеры на сайте итоговой аттестации

Б Мобильная версия сайта «Выпускники»

Б Мобильная версия сайта «Патриот»

У Сайт не использует Cloudflare

Б Главная причина: создатели сайта не прислушались ко всем моим советам раньше

1. Н Кнопка Top Panel

Кнопка сбивает с толку, потому что не понятно, что она делает. Она открывает меню с контактной информацией, но посетитель не ожидает увидеть ее там. Кроме того, на кнопке есть надпись Top Panel (с англ. Верхняя панель), а значит кнопка не объясняет смысл самой себя. Лучше переименовать кнопку в «Контакты» было бы лучше.

Еще одно серьезное нарушение: эта кнопка появляется только на главной странице, что еще больше сбивает посетителя.

2. Н Карта внутри контактов

Карта внутри «верхней панели» — это всего лишь скриншот из сервиса Яндекс.Карт. Он дает мало информации посетителю. Этот скриншот бесполезен из-за адреса школы рядом. Можно поместить здесь фотографии школы снаружи. Лучший вариант: избавиться от карты совсем или сделать интерактивный виджет.

3. Н Телефоны и почта словами

В «верхней панели» посетитель видит сплошной текст. Лучше заменить слова тел. и e-mail значками телефона и конверта.

4. Н «Шапка сайта»: ID сайта

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

Логотип – это ID сайта, принято считать его ссылкой на главную страницу, куда посетитель, потерявшись, может легко выйти. Здесь же не совсем понятно – это изображение или баннер? Что из этого логотип: текст или картинка?

5. Н «Шапка сайта»: разные логотипы сайтов внутри одного домена

Пока мы не отошли от темы логотипов в навигации, вот еще одна деталь: разные логотипы сайтов внутри одного домена. Этого нельзя допускать, потому что посетитель может подумать, что уже ушел с сайта. Каждый отдельный сайт должен иметь свой домен или поддомен.

Решением является перенос сайта «Выпускники» на graduates.samlit.net или изменение логотипа на главный.

Полезный совет: чтобы выпустить wildcard сертификат (вид сертификата безопасности, распространяющийся на все поддомены), нужно написать в списке доменов “*.samlit.net”. Таким образом, знак звездочки заменяет все возможные поддомены.

6. Б «Шапка сайта»: логотип

Логотип цвета #008dcf перекрывает фоновую картинку цвета #ba1f25. Минимальный коэффициент контрастности, согласно стандартам веб-разработки, равен 3,0. На сайте СамЛИТа К.К. логотипа с белым фоном равен 3.68, но К.К. логотипа с красной лентой уже равен 1.73, а это меньше нормы.

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

7. У Расположение изображений

На сервере СамЛИТа все изображения хранятся в папке images.

Это можно понять по адресу на сайте

И не только изображения: http://www.samlit.net/images/docs/

Это плохо для такого огромного сайта, включающего в себя еще 10 подсайтов. Все ассеты сайта (шрифты, изображения, звуки, видео и другие медиа-файлы) принято хранить в папке assets, внутри которой будут папки fonts, audio, video, images. В папке static приянто хранить подключаемые модули и скрипты, таблицы стилей.

На самом деле, эта проблема не касается всех сайтов СамЛИТа: на сайте «Патриот» с этим лучше, но мы еще вернемся к этому сайту в пункте 28

8. У Корень директорий

Я думаю, у создателя сайта просто не было времени написать в поисковике «как запретить доступ к просмотру папки в apache» или «как сделать перенаправление с http на https», поэтому вкратце опишу это здесь:

Используйте конфигурацию сайтов или файл .htaccess

Когда я впервые писал этот пункт, я вообще-то искал как то же сделать в nginx, потому что, согласно заголовкам, которые отдает сайт, веб-сервер работает на nginx,

но по адресу http://samlit.net/Patriot/assets/images/ внизу мы видим надпись apache

В конечном счете я понял, что samlit.net работатет на двух веб-серверах одновременно...

Думаю, если собрать скриптом все директории на сайте, я найду много интересного, но пока нашел только отчеты и список учащихся на 2019 год

Пожалуйста, не используйте пустые index.html, просто напишите

Как я узнал, что это именно пустые файлы, а не настройка в конфиге?

Сервер отдает страницу с кодом 200 (HTTP OK).

И еще вот это:

Обращение к создателям сайта: если вы не можете изменять конфиги, потому что ими управляет Joomla, прочитайте пункт 50.

9. У Неиспользуемые файлы

Увидев цифру 3 в названии файла , я предположил, что это третья версия логотипа сайта. Путем несложных умозаключений, я пришел к тому, что хорошей идеей будет попробовать подставить цифру 1 и 2 вместо тройки. Допустим, вам не жалко места на сервере (к оптимизации мы еще вернемся в пункте 20), вы не удаляете неиспользуемые файлы с сервера, но зачем оставлять их в публичном доступе? Это же неудачные версии логотипа, они точно здесь не нужны. Это файлы по адресу

10. У Незащищенный протокол

У сайта samlit.net есть действительный (на момент написания статьи) сертификат

Но сам сайт не поддерживает автоматическое перенаправление с протокола http на https (кое-где даже наоборот).

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

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

В коде сайта, который чрезвычайно трудно разобрать (о нем в пунктах 52-64), некоторые таблицы стилей действительно подключаются по относительному пути, к примеру /modules/mod_special_visually/assets/css/style.css?v0.3.5, а не http://modules/mod_special_visually/assets/css/style.css?v0.3.5

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

11. Б Поиск безобразен

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

А еще почему-то поле для ввода загорается синим цветом, когда посетитель наводит курсор. Кому это показалось хорошей идеей?

Текст не контрастирует с фоном: К.К. равен 1.39

А в коде страницы вот такое

Для полей ввода существует аргумент html , он поддерживается бóльшим количеством браузеров, чем onfocus.

Информация с сайта https://caniuse.com

Серых квадратиков (поддержка неизвестна) больше, чем красных (не поддерживается)

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

Но поле для поиска — это еще не самое плохое, хуже представление результатов. Результаты поиска находятся не на отдельной странице. После того, как вы нажимаете внутри поля enter (а это отчасти противоречит первому закону Стива, возможно, стоит добавить кнопку внутрь поля, хуже точно не сделаете), главная страница перезагружается, а результаты под контентом страницы!

Я не стану писать о всех недостатках, таких как отсутствие пагинации, непонятные фильтры «SP Page Builder» и «Материалы K2», ничего не дающие посетителю. Поиск надо переработать с нуля (если это позволяет шаблон, а если нет, прочитайте пункт 50) или удалить совсем.

12. Н Футер сделан неправильно: Контактная информация

В футере сайта (структурный элемент, расположенный в нижней части страниц, используется как блок дополнительной информации и перелинковки) копируется информация из «верхней панели». Сюда стоит перенести всю информацию из «верхней панели» и поместить карту прямо под текстом. Нет ничего страшного в длинных футерах (но не слишком). Если туда нельзя поместить карту из-за ограничений шаблона или CMS, стоит сделать отдельную страницу с контактной информацией и оставить ссылку на нее в футере. Не бойтесь ссылок: как говорит Стив Круг, неважно, сколько я сделал кликов, пока каждый из них ведет меня к ожидаемому результату.

13. Н Футер сделан неправильно: Архив новостей

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

Сначала я хотел похвалить создателя сайта за использование grid, flexbox или таблицы, потому что подумал, что этот блок написан качественно.

Однако, открыв исходный код, я был разочарован.

Здесь не просто совсем не используются мощные возможности CSS, наоборот, здесь использовано худшее из HTML. Коды пробелов, наголо и без тегов. Почему-то сначала один пробел, а потом два раза подряд два пробела и снова один. Хуже могло быть только изображениями.

Специально для создателя сайта я написал этот сниппет кода таблицы стилей:


.parent {
  /* минимальная ширина блока без сжатия контента */
  width: fit-content;

  /* grid - (с англ. википедии) grid может создавать более асимметричные макеты, чем предыдущие варианты сетки и макета, такие как float */
  display: grid;

  /* 5 колонок размером 1 условная единица */
  grid-template-columns: repeat(5, 1fr);

  /* 4 ряда размером 1 условная единица */
  grid-template-rows: repeat(4, 1fr);

  /* отступ между колонками в пикселях */
  grid-column-gap: 30px;

  /* отступ между рядами в пикселях */
  grid-row-gap: 35px;
}

Результат на скриншоте ниже. Выглядит также, но на код теперь не стыдно смотреть.

Сниппет на codepen: https://codepen.io/VityaSchel/pen/BazJgBb

О бесконечных аргументах style=”” внутри кода мы еще поговорим в пункте 54.

14. Н Футер сделан неправильно: иконки соц. сетей два раза на странице

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

Подразумевается, что они относятся к контактам, но почему тогда не в блоке Контактная Информация? А может это кнопки для шеринга в соц сетях? Тогда почему на странице выше они тоже есть?

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

Решением в этой ситуации является добавление заголовка «СамЛИТ в соц сетях» или перенос в контактную информацию.

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

15. Б Излишняя версия для слабовидящих

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

Я вижу это так: создатель сайта увидел в шаблоне возможность подключить версию для слабовидящих, подумал, что это кому-нибудь обязательно поможет, включил и забыл. Почему бы и нет?

Теперь эта кнопка занимает много ценного места в футере.

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

Если вам так нужна версия для слабовидящих, которой нет ни у одного известного мне сайта, кроме СамЛИТа, перенесите кнопку в подходящее место, где она не будет отвлекать посетителей. А еще прочитайте пункт 49 про доступность, если правда хотите сделать доброе дело.

16. Б Излишние темы

Этот выбор тем, перекрываемый кнопкой «вернуться в начало», бесполезен, и его стоит удалить. Он не меняет ничего, кроме цвета ссылок. Тут нет ни темной темы, ни темы для слабовидящих, которой можно было бы заменить кнопку (это не совет, не думайте их добавлять, пока не исправите все 100 пунктов!!!)

17. Н Дизайн страницы новостей неплохой, но нужно лучше

Начнем с плюсов дизайна этой страницы:

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

На этом все.

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

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

В font-size лучше использовать единицы em, а не px

Конкретно на сайте СамЛИТа можно оставить название страницы того же размера, что и заголовки, но обязательно сделать название жирным.

18. Б Форматирование статей

Соберу все свое недовольство статьями на сайте СамЛИТа в этот пункт. Они отформатированы не по единому стилю: что-то красное, что-то жирное, а что-то красно-жирное.

Вам, скорее всего, известно про правило 3 цветов, оно должно соблюдаться на всем сайте. Не стоит использовать красный цвет в статьях, лучше пользоваться жирным шрифтом, курсивом, заголовками и не пользоваться подчеркиванием. Человек, зашедший на сайт должен сразу понимать, о чем идет речь в тексте. Помните, что нельзя использовать большие неоформленные блоки текста.

Также прочитайте пункт 49: все изображения в статьях должны иметь тег alt. На этом сайте их нет, потому что у меня трафик в 1000 раз меньше :)

А для сайта СамЛИТа рекомендую сделать размер текста чуть больше и сократить максимальную ширину блока новости.

19. Б Пагинация новостей

Если верить онлайн-инструментам, подсчитывающим размер веб-страниц, страница новостей на сайте СамЛИТа весит 42 МБ!

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

20. У Оптимизация

Скриншот трех ненужных для работы сайта файлов в директории docs по адресу http://samlit.net/Patriot/assets/docs/

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

57 файлов суммарно размером 2.9 МБ за 2 секунды против 11 секунд без оптимизации изображений

Я достиг этого, немного сжав и уменьшив размер каждого изображения до того размера, который виден на сайте. К примеру, изображение размером 1920х1080 я сжал до 460х360 – размера тега img.

Оптимизировать можно не только изображения. Взгляните на три самых больших файла в каталоге docs:

Они и правда важны для работы сайта, и их нельзя удалить. Но почему бы не изменить размер кадра 10-минутного видео, чтобы сжать его до приемлемых 300 МБ или даже 100 МБ? Почему бы не залить 47 минутное видео под названием “последний звонок v2” на YouTube? Почему бы не удалить первую версию видео, сэкономив 485 МБ? Да, мы экономим немного, но, возвращаясь к примеру с моим сайтом: если сжать одно-два изображения, сайт будет грузиться те же 10-11 секунд, а вот оптимизировав все части сайта, я добился шикарных результатов.

В пункте 99 я еще расскажу про самые большие файлы, которые нужно уменьшить.

21. Н Страница «Учителям»

Страница «Учителям», являющаяся почти копией страницы «Лицеистам», имеет ненужную и отвлекающую посетителя форму входа.

Ее лучше спрятать или вынести на отдельную страницу и оставить ссылку.

Еще на этой странице есть выбивающаяся из ряда других элементов кнопка «Классным (руководителям)», которая не проработана.

Если навести на нее курсор, текст становится нечитаемым. Я подсчитал К.К. и он равен 1.06

Это всего на 0.06 больше, чем одинаковые цвета. И можно заметить, что слово «руководители» выбивается из рамки. К этим кнопкам мы вернемся в пункте 31.

А еще здесь не работает ссылка «файловые ресурсы», но она работает на странице «Лицеистам»

Также на странице «Лицеистам» не работает ссылка «Электронная библиотека»

Я думаю, лучшим решением будет просто удалить страницу «Учителям», а форму для входа перенести.

22. Н Адреса страниц главного сайта

Страница «Лицеистам» имеет адрес http://samlit.net/index.php/template-features

Страница «Учителям» адрес http://samlit.net/index.php/contact-us

А страница «Родителям» адрес http://samlit.net/index.php/joomle-stuff

Все эти три адреса совершенно не соответствуют названиям страниц, не говоря об уродском  /index.php/

Это сбивает посетителя и мешает работе поисковых роботов.

Я думаю, не стоит далее приводить аргументы, почему стоит сменить адреса страниц. Очевидно, что это срочно нужно сделать.

А что касается новостных страниц, то они все должны иметь текстовый адрес, а не дату.


23. Н Из-за плохих адресов теряется указатель ВЫ ЗДЕСЬ

Если зайти на страницу «Дошкольнику», то указатель ВЫ ЗДЕСЬ (синее свечение) в навигации еще есть.

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

Указатель ВЫ ЗДЕСЬ в навигации крайне важен, чтобы посетитель не потерялся на сайте и всегда знал, как дойти до страницы Х.

24. Н Сайт выпускников

Навигация сайта выпускников безобразна. Это даже сайтом назвать сложно. Работают только две первых ссылки, а третья ведет уже на страницу шаблона:

С сайта со списком выпускников нельзя вернуться на главный сайт СамЛИТа, что окончательно запутает посетителя и он может уйти.

Ссылка на главную страницу сайта «Выпускники» направляет нас на index.html, но здесь лучше не указывать название файла и его расширение.

А еще здесь тоже можно просмотреть все директории: /samlit/careers/images/

25. Н Поле «Выберете год и класс» и форма

Почему то, что должно быть надписью является плейсхолдером внутри поля для ввода? На этот вопрос можно дать только один ответ: создатель сайта, укравший шаблон, не знает про тег label и тег p.

Сама форма не работает. Если нажать на кнопку «Найти информацию», страница перезагружается. В чем был смысл указывать ссылку на этот сайт в шапке главного сайта?

26. Н Пагинация не работает на сайте выпускников

Пагинация внизу страницы не работает: при нажатии, страница перезагружается.

Это недоработка сайта, а не шаблона. Или уберите ее, или сделайте работающей.

27. Н Медалисты на сайте выпускников

Страница медалистов не имеет ни ссылки на главную страницу сайта выпускников, ни ссылки на главную страницу сайта СамЛИТа

Но ссылка на главную зачем-то добавлена в виде элемента навигации в первом уровне к остальным. Лучше всего будет убрать ссылку на сайт выпускников из меню сайта СамЛИТа до того, как все страницы будут переработаны.

28. У Ошибка в CSS на сайте «Патриот»

На главной странице «Патриот» в параграфе мы видим шрифт без засечек sans-serif, но чуть ниже кнопки имеют шрифт с заческами serif.

Сначала я подумал, что кто-то забыл добавить разные варианты шрифтов, если один не загрузится, но оказалось, что в коде просто нет запятой между Arial и sans-serif. Эта ошибка здесь с сентября.

У вас установлен шрифт Poppins? Он не импортируется внутри кода, а значит, у людей, установивших этот шрифт, текст на странице будет выглядеть иначе.

29. У Скрипты и стили – не ассеты

На сайте «Патриот» стили и скрипты загружаются из папки /assets/js, /assets/css, но вместо этого они должны находиться в папке /static/css, /static/js

30. Н Проблемы с навигацией в «шапке» сайта Патриот

Логотип сайта по высоте превосходит список ссылок в несколько раз. Лучше выровнять ссылки по середине или сделать логотип меньше. Также навигация занимает слишком много места.

Еще, если нажать на ссылку, то начнется прокрутка, но навигация закрывает часть контента:

Я не прокручивал ни пикселя ниже после нажатия «Ресурсы музея» в навигации

И как и на остальных сайтах, в навигации нет ссылки для возвращения на главный сайт СамЛИТа.

На этом мои претензии к визуальной части сайта закончились, если не придираться к мелочам как кнопка вместо ссылки. Но с сайтом «Патриот» еще не все, потому что в пунктах 57-58 я покажу проблемы его исходного кода.

31. Б Flip-кнопки и страница «Сведения об образовательной организации»

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

Это решается установкой свойства Но тогда слова будут «ломаться» по середине. Также иконки не соответствуют описанию, а на одной из кнопок иконки нет вообще (это ведь не фича? 🙃)

Кроме прочего, у кнопок неконтрастный текст.

И конечно все расположено без использования grid, а именно grid в данном случае могло бы исправить ситуацию!

32. Н На странице «Документы» лучше все структурировать

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

Никакому человеку не захочется увидеть этот список, который еще и не отсортирован по алфавиту:

33. Н Страница «Руководство и педсостав» существует в двух видах

На первой пед. состав представлен вертикальным списком:
http://samlit.net/index.php/typography/2018-09-17-12-38-46

На второй в виде таблицы: http://samlit.net/index.php/component/tlpteam/

Таблица (2) воспринимается лучше, чем список.

Возможно, эта страница – набросок, и она будет использована в будущем, я на это очень надеюсь.

34. Б Страница «Платные общеобразовательные услуги» содержит пустую вкладку

Вкладка «2018 год» на этой странице пустая, ее стоит убрать, чтобы не отпугивать посетителя, но и оставлять 2 вкладки тоже было бы глупо. Лучшим решением будет разделить страницу на два раздела: 2020 год и 2019 год.

35. Н На сайте Д.О. виджет для связи перекрывает ссылки футера

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

36. Н Навигация сайта итоговой аттестации

Если ссылки в навигации – не ссылки на страницы, стоит убрать «Главная», ведь блок в начале не может называться главной?

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

37. Б Не соблюдены отступы на сайте итоговой аттестации

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

38. Б Ссылки в футере сайта итоговой аттестации смешиваются

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

Стоит добавить отступы между элементами и уменьшить размер шрифта:

Лучше сократить и переписать эти ссылки, так как посетитель может не найти те самые «ключевые слова», за которыми пришел на сайт и которые искал, просматривая контент.

39. Н Скрытый контент (спойлеры) на странице «Электронный учебник»

Посетитель может спутать эти спойлеры с кнопками.

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

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

40. Б Сайт «Эпоха. Общество. Человек.» не доделан и содержит плейсхолдеры

Кнопки с 1994 год – 2004 год вызывают окно с текстом-плейсхолдером:

Кнопки с 2003 год – 2006 год дублируют другие кнопки и содержат недостоверную информацию.

Оставляя эти окна, вы рискуете потерять посетителя, который сразу уйдет с сайта, увидев несоответствия и такие недоработки.

Если олимпиады действительно проводились с 1994 года по 2010 год, стоит написать о том, что информации о них нет, а лучше убрать кнопки вовсе.

41. У Форма не отправляется

Форма на сайте «Эпоха. Общество. Человек» не работает. При нажатии на кнопку «Отправить» страница перезагружается, потому что у формы нет аргумента action, а на кнопке нет события (я проверил исходящие подключения, после нажатия ничего не происходит)

Этот блок необходимо срочно убрать или исправить баги, потому что посетитель просто уйдет и не вернется, если страница сбросит форму после нажатия кнопки «Отправить».

42. Н Соц сети содержат ссылки на сами себя

Иконки соц сетей на сайте «Эпоха. Общество. Человек» должны содержать ссылки на аккаунты проекта в соц сетях, но создатель сайта забыл изменить шаблон, поэтому они ведут на главные страницы соц сетей. Это может запутать посетителя.

43. Б Текст перед картинкой – это плохая идея

Мне уже самому надоело, но я еще раз измерю К.К:

Уже ближе к минимальной норме, но еще далеко. Коэффициент контрастности равен 2.05.

Например, можно размыть и затемнить фоновую картинку (в фотошопе! Если вы сделаете это фильтрами, страница начнет лагать)

44. Н Недоступная кнопка должна быть недоступной

Когда я нажимаю на кнопку «Регистрация и отправка работ закрыта» я не ожидаю, что страница перезагрузится. Кнопка не должна реагировать на мои действия. Это значит, что она не должна загораться, когда я навожу на нее курсор.

А лучше всего просто убрать ее, зачем она захламляет страницу?

Обращение к клубу web-мастеров: представьте посетителям хороший внешний вид нашего сайта…

45. У Скрипт для связи работает, а форма – нет

Когда я нажимаю на кнопку «Отправить»,

скрипт mail.php возвращает ошибку с просьбой ввести имя

и я даже знаю почему…

Как вообще можно было додуматься передавать ключи аргументов в кириллице и с пробелами? Почему бы не использовать эмодзи как ключи

46. Н Навигация на сайте «Компьютерная страна»

Если закрыть глаза на этот дизайн выпадающих меню,

то все равно остается проблема с навигацией: не работает кнопка «АРХИВЫ».

Судя по коду, она не работает намеренно и временно, но тогда ее лучше убрать или сделать явное предупреждение об этом. Как говорится в книге Стива Круга, посетитель может навести курсор на элемент, но это плохо, потому что он «просматривает контент» глазами. К тому же, на мобильных устройствах нет курсора.

И уберите этот значок из футера, у него значение аргумента href равно решетке


47. Н Сайт ТехноМир должен быть закрыт

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

Вы не знакомы с общепринятыми правилами веб-разработки? Удивительно!!!!!

Посетитель может запутаться, если прочитает весь промо текст и узнает, что мероприятие состоялось в 2019 (2017).

Я думаю, я уже достаточно раз сказать «посетитель запутается» поэтому позвольте напомнить: посетитель – не вы, и сайт он просматривает по-другому. Посетитель не знает что зачем нужно.

О других визуальных ошибках на сайте читайте в пунктах 65-73 включительно

48. Н Бесполезные иконки у уроков на сайте дистанционного обучения

Эти иконки только захламляют страницу, вместо них лучше поставить ассоциирующиеся картинки (даже из интернета). Эти же картинки никак не ассоциируются со школьными предметами.

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

49. Н Используйте тег alt на всех изображениях вместо версии для слабовидящих

Для тех, кто не знает, как используется тег alt в рендере веб-страниц:

Он имеет два главных применения

  • Когда изображение по каким-либо причинам загрузилось не полностью или не загрузилось, этот текст появится вместо него:



  • Когда посетитель использует программу для чтения текста с экрана, она будет читать этот текст на месте изображения

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

Его также нужно использовать и в статьях. Каждое изображение должно иметь тег alt.

50. У Не используйте шаблоны и CMS если не понимаете, как они работают!!

Когда вы видите на сайте баг, вы открываете код и начинаете искать в чем дело. Но если вы не понимаете, как работает шаблон, то вы не найдете источник проблемы.

CMS помогают вам быстро заполнять сайт контентом, но только если вы умеете с ними работать.

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

51. У XSS на сайте дистанционного обучения

…И теперь, каждый раз, когда я захожу в личные сообщения на сайте дистанционного обучения я вижу эту форму и слышу «АННИГИЛЯТОРНАЯ ПУШКА» на максимальной громкости…

Весной 2020 я попробовал ввести в поле для сообщения на сайте д.о. и нажал кнопку «Отправить». Следующие несколько дней мои одноклассники слышали видео с ютуба, видели гифки с пони, получали диалоговые окна, отправляли мне от своего имени сообщения с любым текстом и распространяли мои скрипты. Вот к чему приводит отсутствие проверки на html код внутри отправляемого сообщения. И я еще не тестировал сайт ДО sql-инъекции…

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

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

52. У Код СамЛИТа: тег style

24 строка кода, исходный код страницы samlit.net/

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

Предполагаю, что этот код отвечает за адаптивность страницы. Его лучше вынести в файл /static/stylesheets(или css)/screen_adaptation.css

А этот код – за спиннер во время загрузки страницы

57 строка кода, исходный код страницы samlit.net/

Лучше вынести его в /static/stylesheets/loading.css

402 строка кода, исходный код страницы samlit.net/

Код слайдера точно нужно вынести в отдельный файл /static/stylesheets/slider.css

53. У Код СамЛИТа: скрипты на странице

102 строка кода, исходный код страницы samlit.net/

У всех размещаемых прямо в HTML коде скриптов и стилей должна быть веская причина находиться не в отдельном файле. Здесь же 21610 символов «упакованного» кода, который непонятно что делает. Может он уже давно не нужен и только нагружает браузер пользователя, а может делает что-то очень важное. Это невозможно понять, потому что он сильно сжат.

С помощью сервиса JSNice (веб-сайт, позволяющий сделать код более читаемым после обфускации или сжатия: поддерживает переименование переменных, форматирование по стандартам разработки) я понял, что он отвечает за слайдер, так почему бы не передвинуть его в файл /static/scripts/slider.js?

54. У Код СамЛИТа: грязные скрипты

Взгляните на кусок кода ниже

157 строка кода, исходный код страницы samlit.net/

Кажется, он делает что-то связанное с адаптацией. Это неочевидно, потому что названия checkElements и boxSize нам ничего не дают. Это плохой пример кода, он должен быть переписан.

Хуже всего то, что этот код находится не наверху и не внизу кода страницы, а внутри нескольких тегов!

Я отказываюсь читать код JavaScript на сайте СамЛИТа дальше, так как он был в основном импортирован из шаблона.

55. У Код СамЛИТа: мешанина HTML тегов

411 строка кода, исходный код страницы samlit.net/

Даже если создатели сайта решили, что данные слайдера должны меняться напрямую в HTML коде, а не подгружаться скриптом, этот слайдер занимает ¼ кода страницы!

56. У Код СамЛИТа: inline CSS

Я и сам использую inline-CSS на своем сайте-портфолио, но это необходимо, потому что проще скриптом установить значение margin-top: Xpx, чем создавать тысячи таблиц стилей и подгружать их. Но я делаю это скриптом, а не в HTML коде.

406 строка кода, исходный код страницы samlit.net/

В этом и вся разница: на сайте СамЛИТа некоторые аргументы style пустые, зачем они здесь?

А вот еще пример из футера главного сайта (колонка с ссылками на архивы). Зачем здесь прописывать каждому элементу одинаковый аргумент style, когда здесь очевидно подошел бы класс или даже css-селектор?

Появляется после загрузки страницы

Если вы не можете избавиться от этих позорных вещей из-за шаблона, вернитесь к пункту 50 и перепишите сайт без шаблона.

57. У Комментарии в HTML коде сайта «Патриот»

Вот что говорит про комментарии Роберт С. Мартин в своей книге «Чистый код»: Комментарии – признак неудачи.

82 строка, исходный код страницы samlit.net/Patriot/

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

58. У Излишние комментарии в JS коде сайта «Патриот»

Роберт называет такие комментарии «Шумом»

Файл /assets/js/main.js на сайте «Патриот»

Потому что они лишь утверждают очевидное, не предоставляя никакой информации.

А этот комментарий что нам даст?

Здесь вместо этих комментариев нужно использовать названия переменных:

64 строка, файл /assets/js/main.js

Этот скрипт нужно переписать с нуля, используя ООП и разделив все функции, содержащие больше одной задачи на несколько функций.

Рекомендую автору этого скрипта прочитать книгу «Чистый код», где явно описано, как нужно строить программу.

Если создатель сайта «Патриот» использовал шаблонный код, это значит, что main.js и все остальные скрипты нужно переписать, а затем вернуться к пункту 50.

59. Б Футер сайта «Патриот» и DESIGN BY DANIL V.SUHARENKO

В футере сайта, который, почему-то также обрамлен комментариями о начале и конце блока, есть такая строка:

Но мы уже знаем из пункта 13, что коды пробелов в HTML здесь использовать нельзя и entity используются совсем для других целей. Например, чтобы отобразить внутри HTML блока угловую скобку <, нужно использовать не символ скобки, а HTML-entity.

В нашем же случае нужно использовать margin

Кроме того, ссылка на главный сайт должна выглядеть как ссылка или хотя бы сама себя объяснять (под этим я имею в виду, например, слово «перейти на сайт»):

А еще в футере автором дизайна страницы указан человек, который дизайном страницы не занимался.

Файл /assets/css/new-style.css на сайте «Патриот»

Файл /assets/css/animate.css на сайте «Патриот»

Но мы оставим это на его совести.

60. У Комментарии в HTML коде сайта «Выпускники»

44 строка кода, исходный код страницы samlit.net/samlit/careers/

118 строка кода, исходный код страницы samlit.net/samlit/careers/

1016 строка кода, исходный код страницы samlit.net/samlit/careers/

Создатель сайта сделал худшее из возможных: закомментировал эти куски кода и оставил их на странице. Как пишет Роберт Мартин в своей книге «Чистый код», теперь кто-то из разработчиков сайта найдет их и побоится его удалить, вдруг они делает что-то важное и потом пригодятся?

Суммарно этот неиспользуемый код занимает 115 строк! Это без учета «маркеров», обозначающих секции, о которых мы говорили в пункте 57.

61. У Комментарии в HTML коде на сайте «Эпоха. Общество. Человек.»

Напоминаю: маркеры не нужны. Они излишни, особенно те, что имеют в себе слова start и end.

40 строка, исходный код страницы samlit.net/samlit/ntk2/

А за закомментированный код создателю этого сайта должно быть стыдно. Эту проблему мы уже обсуждали в прошлом пункте.

144 строка, исходный код страницы samlit.net/samlit/ntk2/

309 строка, исходный код страницы samlit.net/samlit/ntk2/

62. У Каждое модальное окно имеет свой элемент

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

Стоит сделать 1 модальное окно, чтобы все изменения в нем применялись ко всем сразу. Контент в нем меняйте скриптом.

Избавляйтесь от повторений – еще один совет Роберта.

63. У Скрипты внутри страницы

1892 строка, исходный код страницы samlit.net/samlit/ntk2/

Скрипты внутри страницы – плохо, мы обсуждали это в пункте 53.

Но стоит похвалить разработчика за неплохие названия переменных, хотя можно было и лучше объяснить, что происходит в скрипте (я имею в виду, названиями, без текстовых комментариев!)

В любом случае, этот скрипт должен быть вынесен в отдельный файл /static/scripts(или js)/screen-adaptation.js

64. У Пустые (почти) файлы на сайте «Э.О.К»

Файл samlit.net/samlit/ntk2/js/custom.js

Этот файл пустой, но, судя по описанию в большом комментарии, во время разработки шаблона подразумевалось, что сюда вы поместите свои собственные скрипты. Этот файл добавляет 1 лишний запрос, а значит лишнее время ожидания загрузки.

Его стоит удалить, чтобы не путать разработчиков.

Я не рекомендую перемещать сюда скрипты со страницы, потому что название файла (custom.js) дезинформирует.

65. Н Техномир: Форма имеет неправильный дизайн

Форма на странице сайта техномира имеет ряд недоработок.

  • Поле «Тема сообщения» лучше убрать
  • В плейсхолдере поля для текста сообщения орфографическая ошибка
  • Введя все данные правильно и нажав кнопку отправить, посетитель получает ошибку зеленого цвета на английском языке без объяснения причин и сброшенную форму

Перепутав цвета успешной отправки и ошибки, вы путаете посетителя. Необходимо срочно исправить ошибку в скрипте mailer.php или убрать форму с сайта

66. Б Визуальные и орфографические ошибки на сайте «Техномир»

В первой колонке слово адрес написано с двумя с. Это, кстати, словарное слово.

Адрес никак не отформатирован и выглядит сплошным текстом.

Во второй колонке телефоны «ломаются» и часть текста переносится на новую строку.

67. Н Кнопка или пункт?

Посетителю трудно догадаться, что нужно нажать именно на значок, потому что он «загорается», если навести курсор не только на него, но и на текст рядом. Лучше сделать кнопкой все, что входит в блок.

68. Б Временно недоступная кнопка без иконки доступна

Эта кнопка по аналогии с остальными должна иметь белую версию. А лучше сделать ее недоступной, ведь прямо под ней написано «Временно не доступно» (кстати, недоступно пишется слитно). Уберите надпись или сделайте ссылку некликабельной и незагорающейся.

69. Б Баги анимации

Не стоит использовать @keyframes в длинных анимациях, потому что оно имеет одно плохое свойство: оно либо «играет», либо «на паузе». Если использовать transistion, анимация будет всегда проигрываться правильно.

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

70. Н Категории по классам

Разделить номинации по категориям – хорошая идея, но она отвратительно реализована. Если вы решили делать колонки, то явно разделите контент на колонки, добавив две вертикальных черты между ними. Иначе получается таблица.

Я случайно увидел эти заголовки по классам, до этого я думал, что они относятся к другому блоку.

К тому же, заголовки «уплывают» вверх, если открыть номинацию. Вместо блока с информацией о номинации следует использовать отдельную страницу или модальное окно.

Если вас интересует более удачное решение, то придется переделать весь раздел: оставьте номинации, но теперь сделайте 3 заголовка и внутри этих блоков по 3 номинации, как это показано на моем макете ниже:

Заметьте несколько деталей на моем макете:

  • Отступ от левого края у контента больше, чем у заголовка
  • Отступ каждого заголовка от контента другого заголовка большой и заметный
  • Все заголовки жирные

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

71. Б Кириллица не поддерживается шрифтом

По задумке автора шаблона, шрифт должен был быть sans-serif:

Но создатель сайта, у которого установлены все когда-либо созданные шрифты, посчитал, что достаточно одного, не импортируемого на страницу Montserrat.

В style.css есть попытка импортировать шрифт,

1 строка, файл samlit.net/robot/robot2019/css/style.css (отформатировано)

Но директории Montserrat на этом сервере нет, поэтому на странице используется serif из стандартных стилей браузера.

72. Б В колонках используются HTML-entities

Пробелы (&nbsp;) вместо margin.

Решением является замена заголовка на три надписи, и установка родителю свойства display: grid или display: flex (разумеется, только одного этого свойства не хватит)

Я написал сниппет, как это могло бы выглядеть:


73. Б Баг с прокруткой

На сайте «Техномир» после нажатия на любую кнопку, вопреки ожиданиям посетителя, экран прокрутится ниже блока с номинацией.

Я не прокручивал ни пикселя ниже после нажатия «Эстафета»

Также это затрудняет понимание того, где находится блок с информацией о номинации.

74. У Изображения не загружаются на сайте «Компьютерная страна»

Надпись «The image could not be loaded» появляется, если нажать на стрелочку вправо или влево

В галерее клуба преподавателей сразу два изображения не загружается, но посетитель этого не понимает: между изображениями пустота. Что она значит? Дальше новый раздел? Это — «знаки вопросов» посетителя, а от них, как я упомянул в пункте 37, нужно избавляться.

75. У Нет поисковой оптимизации для сайта СамЛИТа

Результаты поиска «СамЛИТ», Google

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

Из-за его отсутствия вместо описания в результатах поиска навигация и бессмысленный текст.

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

Также стоит добавить тег keywords, подобрав слова с помощью сервисов как wordstat от Яндекса.

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

Из-за его отсутствия бот добавил в поиск индекс папки samlit.net/robot/ с ссылками на все файлы внутри каталога

Ссылка в Яндексе ведет на сайт по защищенному протоколу https, по которому недоступны стили, это значит, что почти 100% людей, перешедших по ссылке в Яндексе, уйдут сразу же.

76. У Нет поисковой оптимизации для сайта «Патриот»

По запросу «СамЛИТ Патриот» сайт не найден, потому что он не был добавлен в поиск как отдельный от СамЛИТа, а бот не нашел страницу samlit.net/Patriot/index.html кравлер из-за отсутствия sitemap.xml.

77. У Нет поисковой оптимизации для сайта «Выпускники»

В Google по запросу «СамЛИТ Выпускники» сайт находится, хоть и с неустановленным тегом description

А в Яндексе только если добавить «сайт» в запрос

В мета тегах сайта нет ключевых слов, также на сайте слишком много h2 тегов (для каждого университета), лучше использовать не более 10 заголовков второго уровня.

Из-за неоптимизированных ресурсов страницы, сайт загружается 5.51 секунду, в то время как максимальное время загрузки для сайта в 2020 году – 3 секунды, а лучше оптимизировать это до 2 секунд.

78. У Нет поисковой оптимизации для сайта «Итоговая аттестация»

Результаты поиска «СамЛИТ Государственная Итоговая Аттестация», Google и Яндекс

В теге keywords не указаны ключевые слова, часто используемые на сайте.

Также на сайте нет файла sitemap.xml и страницы для кода ошибки 404

79. У Нет поисковой оптимизации для сайта «Компьютерная страна»

Результаты поиска «Компьютерная», Google и Яндекс

В коде нет тега description и на сайте. Возможно, нет файла sitemap.xml

80. У Нет поисковой оптимизации для сайта «Эпоха. Общество. Человек»

В Google по запросу «Эпоха. Общество. Человек» в результатах новость, но не сайт

А в Яндекса даже новости нет. Это потому, что бот Яндекса не индексировал страницы новостей на сайте СамЛИТа.

Сайта нет в результатах поиска, потому что его название (для бота-кравлера) звучит как «Э|О|Ч» из-за тега title.

Результаты поиска по запросу «СамЛИТ ЭОЧ», Google

Самые часто встречающиеся слова на сайте – это куски «текста-рыбы»: ipsum - 68 раз, dolor - 51 раз, atque - 51 раз, quis - 51 раз

Ключевые слова должны быть подобраны и указаны в теге keywords
На сайте слишком много заголовков h1, их должно быть не больше 5.

На сайте нет файла sitemap.xml

81. У Нет поисковой оптимизации для сайта «ТехноМир»

Сайт «Техномир» в результатах Google находится на втором месте, после сайта одноименной компании и карт.

В результатах Яндекса по запросу «Техномир» сайта нет, но он появляется, если добавить слово СамЛИТ

На сайте нет ключевых слов и файла sitemap.xml

82. У Нет протокола opengraph для сайта СамЛИТа

OpenGraph (протокол, управляющий и контроллирующий данные, формирующиеся в превью в посте в социальных сетях) мега-полезен, когда вашим сайтом делятся посетители. А с тем количеством кнопок для шеринга, которое размещено на сайте СамЛИТа, протокол просто необходим.

При размещении ссылки ВКонтакте, превью выглядит так:

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

В Facebook уже более понятно какой адрес, но зато описание сайта взялось из последних новостей

В Телеграме превью не загружается вообще.

В статьях без заголовка слово СамЛИТ дублируется, а вместо превью первая попавшаяся в коде страницы иконка – логотоп ВКонтакте.

Для статей стоит добавить в head следующие метатеги:


<meta property="og:title" content="СамЛИТ - Название статьи"/>
<meta property="og:description" content="1 предложение статьи"/>
<meta property="og:image" content="URL баннера"/>
<meta property="og:image:width" content="ширина баннера"/>
<meta property="og:image:height" content="высота баннера"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content= "перманентная ссылка"/>
<meta property="og:locale" content="ru_RU"/>
<meta property="og:site_name" content="Сайт СамЛИТа"/>

Внутри кавычек должны быть изменяющиеся данные, доступные уже при загрузке страницы.

83. У Нет протокола opengraph для сайта «Патриот»

Превью ссылки на сайт «Патриот» ВКонтакте имеет пустое изображение

На самом деле это белая версия логотипа сайта, но она сливается с белым фоном.

В Facebook превью не дает никакой информации посетителю, который впервые услышал об этом сайте.

Потому что не указан тег og: description, рассказывающий вкратце о чем сайт.

В og:banner можно поместить логотип сайта и фото ветеранов войны.

Правильным значением og:type будет article или website

84. У Нет протокола opengraph для сайта «Выпускники»

В превью сайта «Выпускники» ВКонтакте логотип одного из университетов

А название не дает посетителю почти ничего, его лучше поменять на «Выпускники СамЛИТа» или «СамЛИТ – Выпускники»

На Facebook то же

В качестве баннера можно выбрать фоновое изображение на странице, а тип сайта – article или website

Для отладки рекомендую пользоваться инструментом Facebook Sharing Debugger

85. У Нет протокола opengraph для сайта «Итоговая аттестация»

В превью сайта «Итоговая аттестация» не поместилось изображение, его стоит уменьшить, а название сайта поменять на «СамЛИТ – Итоговая аттестация»

На Facebook из-за отстутствия og:description было взято обычное свойство description, в котором написан промо-текст шаблона

Свойству og:type стоит присвоить значение article, но website здесь тоже подходит

86. У Нет протокола opengraph для сайта «Компьютерная страна»

В превью сайта «Компьютерная страна» ВКонтакте не влезло изображение

И название лучше изменить на «Компьютерная страна 2020», потому что аббревиатура KS ничего не дает незнающему посетителю.

А Facebook для изображения выбрал загрузочную иконку.

Свойству og:type больше подходит website, чем article

87. У Нет протокола opengraph для сайта «Эпоха. Общество. Человек»

В превью сайта «Эпоха. Общество. Человек» ВКонтакте, как и в пункте 83, изображение сливается с белым фоном

И аббревиатура ЭОЧ ни о чем не говорит.

Как и в пункте 85, лучше добавить сайту описание

88. У Нет протокола opengraph для сайта «Техномир»

Превью сайта выглядит неплохо, но это совпадение, потому что теги description и author пустые.

Их стоит заполнить, а в og:type указать website

89. У Код сайта «Итоговой аттестации»

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

В HTML коде сайта ГИА суммарно 305 строк закомментированного кода.

Как и в пункте 64, на этом сайте подключаются 2 пустых файла: скрипт и таблица стилей

Файл samlit.net/samlit/gia/css/custom.css

Файл samlit.net/samlit/gia/js/custom.js

В некоторых местах форматирование кода HTML неправильное

Неправильное разделение строк и пустой тег параграфа, не имеющий стилей.

И за дизайн отвечал сайт htmlcoder.me,

а не человек, указанный в футере

Файл samlit.net/samlit/gia/js/custom.js

90. У Код сайта «Компьютерная страна»

Как уже говорилось в пункте 57, маркеры в коде – плохая идея. Они либо излишни, либо значат, что код сам по себе непонятный.

12 строка, исходный код страницы samlit.net/samlit/ks/

128 строка, файл samlit.net/samlit/ks/style.css

И еще в коде слишком много пустых строк. Лучше вообще избавиться от них или сократить до одной подряд.

78 строка, исходный код страницы samlit.net/samlit/ks/

Как и на других сайтах, в коде много комментариев. Если так необходимо оставить кусок кода, который точно будет использован позже, можно сделать его невидимым с помощью display: none, но намного более лучшим решением будет удалить его из кода и сохранить где-то еще.

172 строка, исходный код страницы samlit.net/samlit/ks/

В таблицах стилей есть неиспользуемые стили (много)

736 строка, файл samlit.net/samlit/ks/style.css

91. У Код сайта «ТехноМир»

Виджет ВКонтакте импортируется дважды на строках 56 и 592 и оба раза неудачно, потому что не указан скрипт виджета.

Согласно документации на странице https://vk.com/dev/Community, в коде также должен быть импортирован openapi.js

В коде есть пустые теги

476 строка, исходный код страницы samlit.net/robot/robot2019/index.html

и излишние комментарии

164 строка, исходный код страницы samlit.net/robot/robot2019/index.html

609 строка, исходный код страницы samlit.net/robot/robot2019/index.html

В коде HTML этого сайта есть скрипт, инициализирующий карты Google, но он не в отдельном файле и в нем неправильно отформатированные отступы.

92. Б Слайдер на главной

Слайдер на главной странице не имеет единого стиля и у него больше 10 элементов, что мешает восприятию посетителя. Вот три элемента в одном слайдере:

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

А в конце вот это! Такой слайдер путает посетителя. Лучше сделать фотографию фоновой, оставляя место под текст, а на кнопке всегда одна из этих надписей: «Узнать больше» или «Подробнее».

Вот отличная статья от Джона Вильямса, работающего в Google, о каруселях на главной странице (на английском языке): https://webflow.com/blog/carousel-slider-design-best-practices

Главное то, что карусель помогает не организации, а пользователю.

93. У Шеринг путем отправки письма не работает

На каждой странице с новостью есть кнопка  «отправить письмо другу»,

но после заполнения формы, письмо мне так и не пришло. Скорее всего, это происходит потому, что современные почтовые службы не принимают неподписанные письма, у которых отправитель не совпадает с доменом. Простыми словами, если в письме подписаться «Владимир Путин», но на конверте написано, что его отправил «Саша Шнюк», то почтальон его выбросит.

Лучше убрать эту форму, чтобы не захламлять страницу лишними элементами.

94. Б Кнопки для шеринга дублируется

Верхняя часть страницы

Нижняя часть страницы

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

95. Н На странице «Регламент работы психолога» две неправильные ссылки

На этой странице две ссылки: Опрос о качестве оказания психолого-педагогической и консультативной помощи и Оценка качества услуг психолого-педагогической, методической и консультативной помощи в МАОУ СамЛИТ г.о. Самара.

Первая ссылка ведет на закрытую форму.

Ссылку лучше удалить.

По второй ссылке форма содержит устаревшее название образовательного учреждения.

Лицей уже переименовали в «ГАОУ СО “СамЛИТ (Базовая школа РАН)”»

Это может сбить посетителя, ведь он может подумать, что попал в опрос не той школы или это устаревшая страница, не обновляемая никем.

96. Н Излишние спойлеры на сайте итоговой аттестации

Все спойлеры на странице сайта итоговой аттестации содержат одну ссылку

Лучше убрать спойлеры и оставить только ссылки, только не забудьте сделать подчеркивание или добавить им жирности.

Также невозможно открыть два спойлера одновременно: если открыть второй, первый закрывается сам.

Это мешает посетителю, к тому же работает только в одном блоке.

97. Б Мобильная версия сайта «Выпускники»

Сайт «Выпускники» не адаптирован для мобильных устройств: Ширина блоков больше ширины страницы, иконка меню смещена, ширина кнопок слишком маленькая.

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

98. Б Мобильная версия сайта «Патриот»

Сайт «Патриот» тоже не адаптирован для мобильных устройств: видео и некоторые кнопки больше размера страницы, в футере все смещено. Лучше переписать стили с нуля и использовать media queries если нужны стили для мобильных экранов.

99. У Сайт не использует Cloudflare

http://samlit.net/images/news/oct_2020/11.jpg

Вот это изображение размером 4874x3249 на сайте отображается в размере 500x333! Это на 98% меньше, поэтому стоит изменить исходное изображение до этих размеров, экономя ресуры посетителя и память на сервере.

http://samlit.net/images/news/oct_2020/6.jpg

А это изображение размером 3509x2481 отображается в размере 545x385, что на 97% меньше.

Cloudflare (компания, предоставляющая услуги CDN, защиту от DDoS-атак, безопасный доступ к ресурсам и серверы DNS) позволит нашему сайту бесплатно

  • Значительно ускорить загрузку страниц сайта (на 50% и быстрее)
  • Получить доступ к CDN и сэкономить ресурсы сервера
  • Получать аналитические отчеты
  • Защититься от DDoS

А еще все изображения кэшируются и впоследствии загружаются не через интернет.

100. Б Главная причина: создатели сайта не прислушались ко всем моим советам раньше

Cамое плохое во всей ситуации то, что создатели сайта не прислушались ко всем этим рекоммендациям раньше. Я отправил письмо со списком недоработок 18 сентября, а на момент написания статьи начало ноября.

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

Следующая часть статьи

Вам может показаться, что все, что я написал – это бессмысленная чепуха, но, на самом деле, в 2020 году именно веб сайт организации стал главным источником информации о ней.

Если вам было интересно, и вы согласны со мной, сделайте вывод о работе наших программистов и не допускайте подобных ошибок, если хотите работать веб-дизайнером.