beauty,

Сайт Елены Корниловой. Легкий обзор сайта. Часть 2 — а что внутри

Samurai Samurai Jun 27, 2020 · 6 mins read
Сайт Елены Корниловой. Легкий обзор сайта. Часть 2 — а что внутри
Share this

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

Итак посмотрим что на внутренних страницах. Выберу пожалуй пункт “Схемы” на главной странице. Получаем следующее: Внутренняя страница — схемы Страница — “Схемы”

Аха, неожиданно, я вообще предпочитаю девушек, но и статуя тоже сойдет.

Попробуем разобраться что тут к чему. Так, ну давайте выберем какую-нибудь сноску, например “Мозг”, уж очень он привлекателен. Внутренняя страница — схемы Выбираем сноску — “Мозг”

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

Кстати, если вы наведете на сноску “Беременность и дети”, то статуя давида поменяется на венеру милосскую — мило, но почему именно статуи? (хотя конечно есть у меня конечно предположение что это философская отсылка к истокам красоты)

Еще вот интересный момент, о котором разработчики обычно говорят что это не “баг”, а “фича”, вполне возможно, не спорю, но что дает эта фича кроме непонятного аппендикса перекрывающего футер? Внутренняя страница — схемы Баг прилепленного сайдбара

То есть инфу в футере вы не увидите. А должно быть так чтобы дойдя до футера блок сместился бы наверх, технически это несложно сделать при современных возможностях javascript, да и в целом технологии сейчас позволяют делать более прогрессивные вещи а не только прилиплять блоки. Просто посмотрите как это реализованно на примере моего сайта с блоком “Рекомендованные.”

Ну давайте откроем уже какую-нибудь статью. Я выбрал “Ясный разум & Обучаемость”. Попадаем на вот такую симпатичную страницу. Внутренняя страница — "Ясный разум & Обучаемость" Страница “Ясный разум & Обучаемость”

Ну неплохо, давайте познакомимся поближе. Начнем с заголовка — проблема видна невооруженным взглядом, знак апперсанда “&” повис и создал некрасивый разрыв между словами. Внутренняя страница — "Ясный разум & Обучаемость" Обозначение проблемы заголовка”

Смотрится это просто вырвиглазно, не решена проблема с висячими одиночными символами. Решение напрашивается само собой: Внутренняя страница — "Ясный разум & Обучаемость" Пример правильного заголовка

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

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

Под основным заголовком “Ясный разум & Обучаемость”, который по структуре и иерархии в верстке сайта имеет обозначение “h1” с чем я абсолютно согласен, расположен как выяснилось, тоже заголовок, но уже с обозначением “h6” с чем я уже абсолютно не согласен.

Поясню: в разработке сайтов издревле сложилась традиция которую чтят большинство разработчиков и дизайнеров. Традиция следующая — заголовки нужны для структуры материала и иерархии по степени важности, и имеют обозначение от “h1 до h6, и располагаются на странице по убыванию, самый крупный и самый важный заголовок это “h1” менее важный “h2” и так далее. Заголовки имеют большое значение для поисковых роботов. Роботы понимают что более важно, а что нет (это упрощенно). Думаю идея понятна.

Теперь давайте подумаем зачем заголовок “h6” расположили под заголовком “h1”? Ответ довольно прост — потому что размер заголовка “h6” идеально подошел под дескриптор. Что в корне не верно. Никогда так не делайте, особенно начинающие верстальщики, это типичная ошибка новичков — привязывать размер заголовков к размеру текста на сайте без учета иерархической структуры.

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

Дескриптор (в контексте заголовка) — это краткое описание, ракрытие заголовка более детально, то есть по сути отвечающий на вопрос — о чем?

Что можно предпринять в этой ситуации? Что поставить вместо тега заголовка “h6” который идеально подошел по размеру? Очень простое решение: обернуть дескриптор в div или p, создать для него отдельный класс, назвать в соответствии с вашей методологией, например title-descriptor-post ну или еще как-нибудь, не суть, и задать для него нужные стили в том числе и гарнитуру шрифта, желательно в относительных единицах.

С этим разобрались. Листаем дальше. И сходу натыкаемся на замечательные блоки: Блоки на внутренних страницах Блоки пояснялки

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

Ну и в открывшемся модальном окне не подгрузилась иконка закрытия, ну да не страшно, бывает. Хотя, нет, страшно) Страшно что войдет в привычку — “И так сойдет”.

Теперь давайте почитаем текст статьи, точнее полистаем и посмотрим на структуру и в целом оценим.

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

Начну опять с заголовков, они есть и это радует, удручает другое, заголовки “h5” ну как бы ok, но почему они ниже чем заголовок “h6”? Который как мы выяснили раньше, находится под основным заголовком “h1”. Таким образом структура довольно ощутимо ломается. Заголовки h5 Наглядное обозначение заголовков в тексте

Теперь в целом о тексте, я понимаю желание автора привлечь к тексту внимание, но зачем столько способов привлечения на одной странице в небольшой статье? Давайте посчитаем: Стили для блоков статей 2 стилевых решения акцентирования блоков

Первый абзац вводный, ok. Второй абзац выделили фоном, ну тоже не спорю если информация заслуживает внимание.

Дальше: Стили для блоков статей Еще два

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

Еще ниже: Стили для блоков статей Следующие два”

Пятый вариант — список, ну как бы да, список вообще на сайте нужен, но ни как еще один способ привлечения внимания, а как нечто что способно упростить восприятие информации. Шестой вариант — это стрелка. Еще одно неимоверно разное стилевое решение и все на одной странице.

И тут же ниже: Стили для блоков статей И вот еще

Это уже симбиоз двух ранее озвученных вариантов. У меня только один вопрос: “Вы издеваетесь?” Семь разных вариантов акцентирования важной информации на одной странице маленькой статьи. Семь стилевых решений, это на выбор что ли? И тогда еще один вопрос: а эта информация прямо вся важна?

И как вишенка на торте: Кнопка в конце статьи Кнопка “Каталог” для перехода на страницу “Схемы”

Кнопка “Вернуться в каталог”, какой? Мы на секундочку в “Схемах” находимся.

Это не последний обзор этого сайта. Первая часть. Вот уже готова и третья часть. Также я решил отдельно написать обзор-вывод для этого сайта. Вот так вот он мне надоел полюбился.

P/S/ Пробежался по другим статьям — стилевых решений на странице добавилось. Ну как так то? Складывается ощущение что автор не определился как ему выделять нужную информацию и он решил делать это всеми доступными ему способами, причем сразу и на одной странице. OMG.

Всем лайта! Оставляйте свои комментарии и предлагайте сайты для обзора, на самые интересные я сделаю Light Review.

P2/S2/ Для обзора я использовал win 7x64 с браузером Google Chrome Версия 83.0.4103.116

Samurai