Доработка стандартных шаблонов и стилей контента на сайтах Проекта. Дополнение к статье "Интерфейс сайтов Проекта : штатный функционал".
Начало обсуждения: "Изменены общие шаблоны и стили интерфейса":
Доработаны и поправлены все основные шаблоны страниц и форм центрального сайта Проекта. Исправлены найденные проблемные фрагменты кода в стандартных шаблонах движка. Изменён внешний вид некоторых элементов управления, текстовые линки заменены на кнопки с иконками. Основные изменения сделаны в новом разделе ("Хорошие сайты") и во всех шаблонах "Файлового архива", в других разделах формы и внешний вид страниц также приведены к общему единому стилю. Серьёзно переделаны шаблоны страниц материалов (статей), улучшено стилистическое оформление сводных страниц (списки разделов и категорий).
Доработаны и поправлены все основные шаблоны страниц и форм центрального сайта Проекта. Исправлены найденные проблемные фрагменты кода в стандартных шаблонах движка.
Изменён внешний вид некоторых элементов управления, текстовые линки заменены на кнопки с иконками.
Основные изменения сделаны в новом разделе ("Хорошие сайты") и во всех шаблонах "Файлового архива", в других разделах формы и внешний вид страниц также приведены к общему единому стилю.
Серьёзно переделаны шаблоны страниц материалов (статей), улучшено стилистическое оформление сводных страниц (списки разделов и категорий).
Здесь будем обсуждать все новшества и доработки общего стилевого оформления наших сайтов, а также (вполне вероятные) огрехи и "шероховатости" этого оформления.
Содержимое статьи будет периодически меняться, но основное здесь – это ваши комментарии, по ним будут сделаны (возможные) доработки и исправления дизайна.
В связи с этим весьма приветствуются любые конструктивные предложения по этой теме, поэтому пишите не стесняясь – всё обсудим и покритикуем, а если ваша идея понравится – обязательно сделаем "в натуре".
Итак, поехали – "о бедном дизайне замолвите слово". :)
Анонс в новостях: "Дизайн R24: всё то же самое, только быстрее"
Завершено обновление всех сайтов Проекта под улучшенный дизайн версии R24 (рабочее название допиленного варианта, соответствует комплекту всех необходимых ресурсов для отрисовки контента). На момент публикации этой части статьи заменены, обновлены и проверены на работоспособность типовые шаблоны на центральном сайте Проекта, в нашей "Песочнице" и на всех авторских сайтах Проекта.
Изменения затронули бо́льшую часть скриптов и стилей, основные доработки сделаны в части решения накопившихся проблем* совместимости текущего движка с "классическими" браузерами минимально заявленных к поддержке версий (CR49/FF52), а также с целью общей оптимизации требуемых для отрисовки страниц скриптов, стилей и шрифтов.
* Связаны с текущими изменениями базовых скриптов и стилей движка uCoz, направленными на тупое "осовременивание" всего подряд, без учёта каких‑либо особенностей сайтов. По этой причине часть интерфейса наших сайтов просто "перекосило", а отдельные кастомные функции перестали работать. В общем, мы по мере возможности вернули "всё взад" и восстановили работоспособность публичной части страниц наших сайтов на "типа устаревших" браузерах. Доработка скриптов и стилей страниц редактора материалов пока ещё в процессе, будет закончена в обозримом будущем.
Все используемые ресурсы теперь минифицированы (итоговый общий размер рабочего комплекта уменьшен практически вдвое), сделана динамическая подгрузка скриптов и стилей "по контенту" и по отдельным разделам/страницам сайтов. Кроме того, часть ресурсов, зависящих от типа клиентского браузера и версии его движка, теперь грузится динамически. Также динамически загружаются ресурсы "чатика" (только для зарегистрированных пользователей), промо‑баннеров и блока "Мозаика Проекта".
Помимо общих шаблонов полностью переработан модуль отрисовки страниц в версии для слабовидящих ("глазик"). Теперь все настройки "адаптации" (размер шрифтов, вывод картинок и изменение фона) автоматически сохраняются на стороне клиента и применяются "на лету", сразу же при переключении режима и без перезагрузки текущей страницы (в "штатном" скрипте при отключении этого режима перезагрузка требуется). Изменён и дизайн (теперь адаптивный, зависит от ширины экрана) панели инструментов "глазика": сама панель стала автоскрываемой, расположена там же, в нижней части экрана, если режим адаптации включен – панель отображается в виде синего бордюра над "подвалом" страницы (полностью всплывает при наведении курсора мыши).
Также полностью переписан скрипт и шаблон для вывода/отправки ссылок "поделиться через соцсети" (на базе скриптов uSocial). Из "оборота" убраны "лишние" сети (не работающие или ограниченно работающие в России), добавлены новые элементы (копирование ссылки в bb‑коде, отправка в Яндекс‑мессенджер), поправлены устаревшие ссылочные шаблоны, удалена кнопка "добавить в закладки" (фича всё равно не работает в современных браузерах)), упрощена функция вывода на печать, полностью отключён внешний тормозной сервис PrintFriendly (ранее был оставлен исключительно из‑за функции "сохранить в PDF", в новых браузерах эта возможность присутствует "из коробки", в диалоге печати браузера). Попутно изменён и улучшен дизайн кнопок и панелей при разных разрешениях экрана (и в зависимости от клиентского девайса), в 20 (!) раз уменьшен и существенно упрощён CSS этого шаблона, отключён сбор/запрос/вывод статистики "кликов" (всё равно он никому не интересен, в т.ч. и нам)).
По стилям. Одной из задач текущего обновления дизайна было приведение содержимого наших CSS (и элементов оформления страниц, связанных с ними) в соответствие с требованиями стандартов W3C. Это было успешно сделано и на текущий момент все кастомные CSS проходят проверки валидности без каких‑либо ошибок. Сомневающиеся могут посмотреть результат проверки текущего основного файла стилей (кнопочка слева в этом абзаце). Более того, мы немного изменили поведение "подвальных" элементов и теперь такая же кнопочка с аналогичной ссылкой отображается в правом углу "подвала" всех сайтов Проекта при наведении курсора на логотип хостера (только для анонимных юзеров, для зарегистрированных, как и раньше, вместо этого выводится гифка со статистикой посещаемости). Для приведение в соответствие со стандартами добавлена автообработка типовых шаблонов движка с зачисткой "жёстко зашитых" стилей в HTML‑элементах страниц. Операция выполняется "прозрачно" для енд‑юзера и даёт дополнительную гарантию стабильного и корректного отображения элементов дизайна.
По шрифтам. Используемый ранее для отрисовки элементов интерфейса шрифт "Material Icons" заменён на более лёгкий кастомный вариант. Новый шрифт содержит только те глифы, которые реально используются в интерфейсе всех наших сайтов, это позволило уменьшить размер* загружаемого файла шрифта с 60 до 3kB. По этому же принципу "урезан" подгружаемый шрифт для иконок соцсетей блока "Поделиться ссылкой" – этот шрифт также заменён на новый, размер* загружаемого файла уменьшен вдвое, с 6 до 3kB. Кроме того, теперь все шрифты подключаются без промежуточной конвертации в CSS (экономичнее в 1,5 раза).
* Размеры приведены для файлов формата woff2, для форматов woff/ttf аналогичное соотношение (и даже лучше)).
В результате всех сделанных доработок реально повышена общая "отзывчивость" сайтов и улучшено их быстродействие на стороне клиента (для зануд – исключительно по субъективным оценкам, "на глаз", фактические бенчмарки загрузки и отрисовки не проводились в силу отсутствия более ранних замеров для сравнения с текущей производительностью).
Действует только для зарегистрированных пользователей, не затрагивает публичные части сайтов.
Доработаны, проверены и обновлены на всех сайтах Проекта дополнительные шаблоны, скрипты и стили для редактора материалов. Изменения связаны c возвратом совместимости текущего движка сайтов с "классическими" браузерами минимально заявленных к поддержке версий (CR49/FF52), а также с целью введения новых дополнительных функций для страниц редактирования в некоторых разделах (в частности – в "блогах").
На момент публикации этой части статьи решены основные проблемы несовместимости для браузеров CR49+, все базовые функции, "сломанные" в них стандартными обновлениями движка, проверены и работают правильно. Часть функционала, связанная с различиями возможностей разных версий браузеров, пока находится в стадии обдумывания и экспериментов (чтобы нам самим чего‑нибудь там не поломать)).
Кроме того, внесены дополнительные изменения в блок отправки приватных сообщений. Эти изменения также связаны с обеспечением работоспособности функций ПМ на всех версиях поддерживаемых браузеров. Доработки проверены и добавлены в шаблоны всех сайтов Проекта.
