В конце августа был брошен клич: дизайнеры, давайте спасём Георгия в шапке сайта, ведь это главный символ современной непреходящей эпохи как оружие возмездия на толстеющего и пожирающего людские ресурсы Змия, а тут он скатился почти до плинтуса - футера сайта. Многие осуждающе качали головами и говорили - негоже, негоже так поступать с нашим символом. И дизайнеры со стилусами наперевес - появились.
Помимо этого, проведено много других работ по доработке дизайна, и вы можете посмотреть на новую версию по адресу design.aftershock.news, в "шапке" сайта (верхней панели), которая окончательно была спроектирована руками камрада дизайнера asim, нашли отражение обсуждавшиеся идеи, в развитии которых принимали активное участие Poligraf, ДК.
Хотите принять участие в доводке проекта до релиза (до момента, когда проект появится на домене aftershock.news) - просто зайдите на design.aftershock.news и начните пользоваться, как обычным Афтершоком. О замеченных багах просьба сообщать в комментарии к этой статье. Их останется меньше к моменту релиза.
Под катом - детали того, что сделано, а что планируется сделать позже, чтобы сайт стал ещё удобнее.
В конце июля уже было обновление сайта, основным автором и исполнителем которого был давний участник сайта Великий Кукурузо, веб-разработчик по специальности. Он сделал замену устаревших стилей CSS для оформления, ввёл 2 варианта цветового оформления темы сайта - светлую и тёмную, написал и использовал скрипты (Javascript) для поддержки мобильных телефонов. За последние годы существования сайта это - большой шаг вперёд, сделанный всего за 2 месяца. Перед этим у него была известная разработка юзерстилей сайта с тёмным оформлением (стили CSS, размещаемые не на сайте, а в браузерном расширении), что помогло сделать эту работу.
В то же время, за такой короткий период нельзя было решить многочисленные и сложные задачи сайта, часть которых остались нерешёнными и сейчас. Я принимал участие в разработке той первой версии в основном как тестировщик предварительных результатов. По окончании разработки в июле мы решили развить успех и продолжить внедрять улучшения и исправления на сайте. Кроме технических доработок, была задача оформить дизайн, прежде всего, верхней части сайта, "шапки", по которой встречают содержание новые посетители.
В статье про шапку, Георгия и дизайн Алекс выбрал камрада asim как исполнителя дизайна верхней части. Остальная часть, кроме технических доработок, была поправлена моим (atorn) скромным вкладом, хотя профессионально дизайном я никогда не занимался, и часть советов по оформлению я получил от asim, а строгую и неподкупную приёмку осуществлял Алекс. Все участники работали на добровольной основе в свободное время, поэтому работа не была столь быстрой, как это бы делали нанятые профессионалы. Интерес у каждого был - сделать посещаемый нами сайт таким удобным, как это представлялось в наших мечтах, юзер-стилях и дизайн-макетах.
Итак, есть некоторые доработки сайта за прошедшие 3 месяца, которые опубликованы для тестирования на design.aftershock.news и через какие-то дни или недели, если не будет критических замечаний, появятся на рабочем сайте aftershock.news.
Есть и достаточно продолжительные планы на 2-4 месяца, чтобы в этом же неспешном режиме расправиться с остальными известными недостатками сайта. По ним я планировал к релизу новой версии сделать отдельную статью, чтобы потом на неё ссылаться и там собирать отзывы и предложения. Но кое-что упомяну и здесь, чтобы показать, что озвученные ранее проблемы не забыты и в планах сохраняются.
Какие новые функции и достижения сделаны в этой доработке?
Есть длинный и скучный рабочий документ, где, в основном, перечислены эти функции и достижения. Он - для будущих разработчиков, поэтому всё описано в суховатом насыщенном стиле. Чтобы было интереснее читать, вытащу из него самое значительное - в текст, а остальное - под спойлер.
-
Зум (увеличение масштаба) страницы - особенно полезен для мобильных устройств. В новых мобильных браузерах обычно уже есть 2 автоматических режима просмотра страниц: мобильный режим с искусственно уменьшенной шириной окна в 4-5 раз, чтобы шрифт был читаемым с экрана, и "десктопный режим", ещё называемый в настройках браузера, "как на ПК". Там шрифт мелкий - вот для этих целей используется "Зум", чтобы стилем CSS zoom увеличить масштаб от 100% до 280%. (Браузер Firefox этой функции не имеет.)
-
Тема оформления - основное, с чего началась работа по настройкам. Есть 2 основные темы: светлая и тёмная, названные как "День" и "Ночь". Одна из них выбирается и по настройке "ОС" - в соответствии с системными настройками операционной системы ПК или смартфона.
-
Кроме названных 3 основных настроек для экспериментов, дальнейшей доработки и по пожеланиям пользователей иметь менее контрастные темы, созданы (для начала) также темы "Рассвет", "Песок", "Море".
-
Второе основное, для чего были задуманы настройки - выбор шрифта. На самом деле, достаточно одного шрифта или максимум 2-3, но для интереса добавлены ещё ряд шрифтов разного рода (рубленые, с засечками, моноширинные), которые можно попробовать для чтения. Всего - 11 вариантов интересных и читабельных шрифтов. Часть из них (7) - загружается с сервера (веб-шрифты), поэтому одинаково будут выглядеть на разных устройствах. Остальные - подбираются на локальных ПК из имеющихся из нескольких вариантов (конкретный приоритет выбора легко можно увидеть в DevTools браузера, но это - скорее, для интересующихся темой и специалистов, а для всех - достаточно просто названия и того, как будут выглядеть тексты со шрифтом этого названия.
Исторически оставлен привычный Arial, но более качественно выполнен Roboto (веб-шрифт), он используется для сайта по умолчанию.
-
Размер шрифта - кроме "Зума", масштаб текстов изменяется размером шрифта. Полезно владельцам крупных или мелких мониторов. Картинки и размеры колонок этой настройкой не меняются, поэтому результат может оказаться более качественным.
- Детальность настроек. 3 градации,. Чтобы новым пользователям в настройках не вываливать сразу десятки пунктов, подробность разделена на 3 градации: базовые настройки, расширенные и "для экспертов". В последней добавляется небольшое число тестовых и экспериментальных функций. Некоторые даже не доработаны, но нужны для тестирования на телефонах. Поэтому спрятаны туда. Можно раскрыть все и познакомиться с подсказками, которые появляются в списке по наведению мыши.
Есть и такие экэотические (были просьбы сделать), как скрытие шапки сайта. То есть, красота оформления, на которую мы лишний месяц потратили, некоторым пользователям не нужна, они хотят голую правду, информацию из статей, без Георгия в голове. И они её получат, в таком урезанном и извращённом виде.
Ознакомившись с тем, что хорошего можно настроить под себя, вы затем один раз настраиваете браузер, и какое-то время настройки будут не нужны - браузер их запомнит. Если установили новую ОС или новый браузер - придётся снова один раз что-то настроить (или импортировать из настроенного) и пользоваться.
Если нужно скопировать настройки в разные браузеры, в настройках есть функция экспорта-импорта. Сначала их экспортируют (в текст), получают примерно в таком виде:
{"_d":"Fri Oct 23 2020 10:37:34 GMT+0300 (Москва, стандартное время)", "themeLastLight": "light", "themeLastDark": "sea", "font": "Segoe", "settDetail": "expert", "toTop": "no", "hideReformal": "hide"}
, а в другой браузер - импортируют. Через секунду они уже применяются к странице и всем вкладкам сайта.
Другие настройки и функции (под спойлером)
Что ещё не сделано и планируется в следующих доработках?
- В редакторе - в поле ввода комментариев и статей - ещё не исправлена "багофича" от разработчиков редактора, про которую они уверяют пользователей, что не показывать нативное контекстное меню по клику правой кнопки мыши - это хорошо. У них даже плагина нет, который это отменяет, придётся делать патч.
- попробуем сделать так, чтобы ответ на комментарий не требовал вызова промежуточной страницы без текста статьи.
- будет настройка, включающая "более воздушный" режим показа, когда между колонками - больше пустого пространства.
- поборемся с багами несохранения частично набранного текста статьи.
- могут появиться режимы (по настройкам) более компактного отображения частей сайта - малые аватары, компактное упоминание подписей администрации, сжатый дизайн комментариев (меньше пустоты вокруг).
* прямая связь с астралом - не, это уже есть* темы оформления "Розовый пони" и "Хакерская консоль"
Задачи для доработоу черпаются из предложений, которые пишут пользователи в комментариях к статьям на АШ на технческие темы оформления сайта (как эта). Полный список задач и планов их выполнения будет опубликован в отдельной статье.
По запуску функций в экзотических средах типа WinMobile
Бывают запросы и на такие работы - в основном - исправить баг, чтобы на каком-то старом устройстве это вообще заработало. Владельцам таких устройств при появлении проблем - просьба связаться со мной напрямую по ЛС или для начала - здесь в комментарии. Наличие у вас такого устройства для тестирования может помочь за несколько шагов решить какую-нибудь проблему (читал, что такая была с новым дизайном и старым устройством в каком-то месте интерфейса).
Просим принять участие в тестировании и использовании сайта на адресе
design.aftershock.news,
чтобы к моменту релиза на нём осталось меньше недоработок! И, может быть, возникнут другие идеи по новым функциям или особые пожелания.
Комментарии
Почему-то при чтении статей Firefox не предлагает возможность переключиться в режим "читалки". :( Большие статьи в нём читать удобнее, было бы здорово, если бы кто-нибудь разобрался, почему так происходит.
Насколько знаю, он эвристически искал в этом режиме блоки, похожие на главную ленту. Значит, не нашёл.
На планшете:
1. Невозможность выйти из цитирования при ответе так и не починили.
2. По-прежнему, при попытке вставить текст из буфера, всплывает нафиг ненужное окно, вместо того, чтобы просто молча вставить текст из буфера.
Решается просто. На строке будущего цитирования нажмите Enter для создания новой строки. Затем вернитесь на строку вверх и создайте цитирование. При этом следующая строка у вас уже готова. Просто переходите к ней обычным тычком на неё.
Да трюки-то я и сам знаю, хотелсь бы без шаманизма.
Кстати, можно проще: делаем цитату, вставляем разрыв страницы (последняя иконка), стираем разрыв страницы.
1. Починили лет 10 как:
2. Будет сделано позже. В статье об этом есть.
Два раза жмете ентер, да и выходите. Или что то другое?
В шапке Победоносец в середине и логотип слева сделаны в одной цветовой и стилевой гамме. Смотрится как два логотипа, лично мне не нравится такое решение.
Сам Победоносец в шапке стилизован ужасно, согласен с эмоциями предыдущих комментаторов. Я бы такие важные элементы доверял профессионалам, цена вопроса копейки, можно скинуться по 50 руб. с носа и заказать.
солидарна, это просто Нечто невнятное красного цвета.
раз: нужна более тонкая прорисовка Победоносца, иначе - стиль всей графики не выдержан, что есть признак непрофессионализма;
два: центральное место его выбрано кмк неудачно, яркий красный цвет делит визуально "шапку" пополам, и что именно остаётся за его спиной?.. смысла нет. Может лучше его сдвинуть на правый край? тогда появится символ побед над внутренними "змиями"?..
Небольшой размер - потому что хотели поместить в невысокую шапку.
За спиной - элеватор. Но это знают не только лишь все.
Выбор дизайнерских решений происходил 27-28 августа. Из представленных вариантов выбрали этот. Сейчас выбирать уже поздно, но если нетрудно, было бы интересно посмотреть. Если будет не худшего качества и в стиле сайта, то Алекс может согласиться по праздникам менять оформление, а я поддержу.
Автор шапки - профессионал, как и те, кто в августе другие варианты предлагали. В копейки я бы это не оценил, а примерно 40-50 тыс, без гарантии, что результат понравится. А тут Алекс выбрал то, что понравилось, и затем шла доработка. По временным затратам - примерно на такую сумму, но делалась бесплатно.
Если вы имеете в виду, что на фрилансе найдёте за копейки (тыс. 5) - найдёте, но результат с доработкой будет ещё более непредсказуем.
И, наконец, если бы вы принимали работу, результат был бы другим, как и результат разных других приёмщиков и заказчиков. А тут заказ был именно таким, какой видим по результату. Даже здесь https://design.aftershock.news/?q=node/898667 вы можете видеть похожий ранний дизайн. Который затем с улучшениями дорос до имеющегося.
Я всего лишь высказал свое мнение относительно увиденного.И я не писал о шапке, к шапке в целом вопросов нет, я писал об изображении в центре.
Напрашивается Георгия таки развернуть на 180° и, может быть, выполнить его в векторном варианте с цветами более двух.
Предложу объединиться с Cat-Advocate для написания альтернативных оформлений ). О, да у вас и аватар альтернативный - опыт есть.
Спасибо за предложение. Но я не дизайнер и не художник, я - инженер и "продвинутый" юзер (с 1990 года
). Перевернуть аватарку, подрегулировать яркость, контрастность, цветность фотографий в фотошопе - эт я ещё могу, но не более. С Автокадом - да, дружу, но это - чертежи, 3d-модели, т.е. совсем другое.
Так все ничего себе, понравилось.
Единственное, что раздражает: при каждом переходе со страницы на страницу предлагается разрешить использовать плагин Adobe Flash Player -- в модальном окне.
Во-первых, накуа он вообще?
А во-вторых, накуа спрашивать на каждой странице?
Это в старом браузере? Попробуйте поискать настройки отключения его в ОС или в браузере.
Я, к сожалению, в силу имеющегося железа не могу обновиться до последней версии браузера.
Маки, они долговечные :-)
1 При переходе на
теплую, ламповуюпрежнюю версию открывается Главная, а не читаемая статья.1а При открывании статьи из почты она видна только в новом стиле и на прежний опять же только через Главную.
2 Подсините в профиле ссылки, а то 50 оттенков серого.
3 При переходе на текстовый вариант стажа вернуть нормальную форму флага.
Значок просмотров (зелёная дуга) режет глаз, его вообще можно убрать, и так всё понятно. Шапка блоков "лидеры" (слева и справа, "лидеры просмотров" и пр.) тоже некрасивая - раньше была чёткая синяя линия и прямоугольнички на ней, а теперь всё расплывчато. Змей не прорисован, чёрный и непонятный комок получился. Почему земной шар с центром на Западную Африку и Атлантический океан, а не на Евразию? Флаг пользователя и шкала вокруг него слишком большие (очень выделяются в данной строке), а сама шкала может вызывать негативные чувства у новых пользователей. Лично я против сразу видимого указания на "стаж" пользователя, пусть будет только в профиле.
Присоединяюсь.
Наверное, Алекс поддержит доработку не только шапки. Присоединяйтесь. Нарисуйте описанное словами, а мы оценим и возьмём полезные идеи для вёрстки.
Ещё ждёт очереди оформление комментария (есть недостатки) и анонса статьи.
Всем любителям Георгия и поклонникам старины.
Выше залил в лучшем качестве.
У меня на самсунговском хроме, иногда зависает меню по свайпу вправо. Крестик для выключения не срабатывает.
А ещё, если попытаться любое меню по левому или правому свайпу закрыть свайпом в противоположную сторону, то меню не просто закрывается, а замещается другим меню применённого свайпа. Нельзя ли как-то это решить?
Чтобы сначала закрывалось предыдущее меню, а по повторному свайпу открывалось новое.
Изначально так и было, сейчас с одновременным переключением - несколько ненормальное поведение. Спасибо за замечание.
Кнопку поднял на треть диаметра (появится где-то завтра на design). Меню не трогаю - основываюсь на дизайне и вёрстке предшественников, а там была выбрана такая высота и даже кнопка меньше.
Отдельно висящая нижняя кнопка - очень плохо, на мой взгляд, т.к. можно случайно ткнуть на проплывающую под ней ссылку. Лучше просто отключите эту кнопку в настройках.
А вообще, мобильный дизайн, каким бы простым он ни был, нужно глубоко переделывать. Есть умения и возможность - присоединяйтесь. Имеющееся решение всем не нравится по ряду параметров.
Георгий - вылитый Всадник апокалипсиса.
хорошо, шапка славная
только на глобусе, возле пиктограмки"А" - видно африку
может заменить что б было видно Россию\Евразию?
Будет неузнаваемый глобус, очевидно.
а, ну раз очевидно...
извините, не узрел
:)
Зачем менять то, что хорошо работает?
Видимо, заняться больше нечем.
Схема "Ночная" очень удачная (по мне). Цветовые решения идеальны. Не меняйте.
После новой шапки, зашел на настоящую и ощутил разницу. Настоящая тянет энергию, ну на ней и нарисованы символы откачки.
Новая более энергичная и Георгий Победоносец, прям генератор энергии. Трудится у всех на виду. Стихией огня полыхает.
Что повернут влево тоже хорошо. Присматривает за символом Афтершока. И цвета одного они. Читатель их улавливает взглядом и скрепляет автоматически. Еще и активизирует.
Да, поэтому было желание полностью переделать шапку. Старая (desktop.aftershock.news) тоже была на уровне, хотя немного непрактична.
По шапке могу сказать следующее. Композиция по задумке – нормально, реализация – махровая любительщина. Георгия, похоже взяли первого попавшегося (не самого удачного) и тупо отзеркалили, отсюда копье в левой руке и прочие несуразности. С остальными элементами видимо аналогично. Использовали то, что нашлось и составили как получилось. По хорошему тут все нужно перерисовать с нуля. Что как профессиональный дизайнер и предлагаю сделать. Могу все оформить как нужно совершенно бесплатно. Афтершок читаю давно и регулярно и мой интерес тут заключается в том, что мне самому не пофиг как выглядит сайт, на который захожу практически каждый день. В общем, если решите что дело того стоит – обращайтесь. Сделаю не так чтобы очень быстро, но в разумные сроки.
P.S. Шрифт Roboto в обновленном варианте наконец стал читаться нормально. А значки в заголовках сообщений выглядят совершенно вырвиглазно по сравнению с текущей версией.
Ссылку давал на статью, где начали поиск решения. Прошло 1.5 месяца, из них добрая половина - на поиски решения дизайна шапки, включая работу дизайнера. Что каждая деталь требует проработки - согласен, но обошлись разумным объёмом затрат. И, мне кажется, что эту задачу решили. Но есть, например, задачи более гармоничного оформления информационных блоков. Если вы это умеете - поговорите с Алексом. asim (дизайнер) подписывался исходно на "шапку" и нужный разумный объём сил в неё вложил. А есть ещё: комментарии, общая раскладка страницы статьи, блок анонса статьи (как список на Пульсе и главной). И эти блоки в сайдбарах я бы тоже улучшил.
Да, по Roboto и на текущем сайте отказались от light-шрифта с весом 300. Но в настройках я сохранил переход на него. При качественном мониторе, наверное, будет читабельным. У меня на большом - не сильно плохо, хотя всё равно взгляд цепляется за артефакты при размере 15px.
Я тогда кстати сразу откликнулся. Но в первый же день понял, что пока раздумываю над балансировкой деталей, более шустрые пользователи успеют накидать кучу идей, концепция оформления не один раз поменяется и т.д., а в итоге все решат не дожидаясь моих эскизов и даже исполнителя выберут. Так что счел за благо постоять в стороне, а сейчас просто прокомментировал результат. Верстка сайтов к сожалению не мой профиль и тут уж скорее мои предложения окажутся махровой партизанщиной )) Тем не менее возможно у меня появятся какие-нибудь соображения по поводу чисто эстетической стороны оформления, дам знать в таком случае. А вот графика – другое дело. Как минимум мог бы переделать Георгия, который в предложенном варианте многим не нравится. Это, во всяком случае, можно сделать достаточно быстро и не потребует существенных изменений всего остального. Так же как и материальных затрат со стороны администрации )
Roboto light возможно нормально смотрится на мониторах с разрешением 4К. На всех остальных независимо от диагонали и типа матрицы с ним скорее всего будут проблемы.
Георгий ужасен. Вызывает ассоциации скорее с редбуллом, чем с георгием.
Я так понимаю, это тот самый момент на который все должны обратить внимание и не заметить чего-то на самом деле важного? :)
А где Вы были 27-го августа, чтобы предложить свой вариант оформления? ) Там были такие картинки, они не прошли по высоте.
В конце лета все вообще-то очень заняты. Так как готовятся к началу «новой жизни», кто к школе или садику для своих детей, кто к новым задачам после отпуска, кто к отопительному сезону, кто к тому что начальство вернётся с отпусков и спросит... Самое не подходящее время для общественных дел.
касаемо шапки:
первое, что увидел в верхнем левом углу - крысу из мультфильма про путешествие Нильса с дикими гусями (когда одна палочка и восемь дырочек), нависающую над знаком АШ. Только приглядевшись, в самом деле, ну не крыса же, - разглядел глобус. Замысел реализован неудачно
Логотип - приемлемо.
Нефтеперегонный завод - появились свет и тень, и это хорошо. Однако исчезла воздушная перспектива. Надеюсь, вернется, в новой редакции.
Может не столь актуально возвращать всадника в шапку? На странице он присутствует и всегда его вижу. А в этой редакции оформления сайт АШ становится похожим на сайт некой секты. Тем более, что сочетание белого, черного и красного вызывает недвусмысленные ассоциации. Не случайно в фильме Алана Паркера "Стена" боевики маршируют именно под красно-черно-белым флагом.
Черно красное сочетание да фашистское Папаша Мюллер одобрит
В принципе, меня и текущий дизайн устраивает. Вот единственное, что несколько коробило:
Сначала думал, что это за маленький такой бразильский флажок? А оказалось, что это иконка количества просмотров)
Ксяоми ми 9т со всеми обновлениями.
Вообще-то АШ в экран перестал вписываться и с текущем дизайне уже как около месяца. Периодически. Закономерности не уловил.
Жуть как достает. Мелко или не видно.
И ещё.
Кнопку (сохранить) от рекламного баннера чуть отделите. Плиз. Уже забрался в этих баб тыкать.
Или сайт так омонечивается?
По 1-му скриншоту - подобное сегодня исправил для MS Edge - он не понимал выбора светлой-тёмной темы. С вашим браузером может быть похожая история, но защиту от прозрачного фора я поставил - интересно, что случилось на этот раз?
Как временное решение, предложу выбор не темы OC про умоляанию, а любой другой - должно помочь. (Но на то и тестирование - мы решили выбрать трудный, но прогрессивный путь автоопределения темы ОС, взятой по умолчанию. Но не все бразеры это умеют. Chrome, Firefox, Edge - ОК. Попробуем и другие настроить.)
По рекламе - не я политику с баннерами провожу, для себя я её просто режу ).
С грехом пополам принудительно выбрал тему ночь.
На экран лезет только при размере шрифтом -3.
В старом дизайне пальчиками масштабировалось, а здесь нет :(
Непонятка со свайпами. Свайпаешь слева направо - слева вылазит. Свайпаешь справа налево - левое прячется, но правое вылазит. Свайпаешь опять слева направо - правое прячется, но левое вылазит. И та свайпаешь и свайпаешь... Прикольно.
А по рекламе вопрос не в рекламе, а в кнопке (сохранить) коммент. Очень близко к рекламному баннеру. Хочешь сохранить, а попадаешь пальцем в рекламу.
Спасибо.
ПС. А в Хроме с темой нормально, но на экран не влезает даже при шрифте -3.
ППС. А вот это оранжевая шапка обязательно? Я с 2004-го оранжевый цвет ненавижу!
Обновил код, который может обойти этот баг, но проверить не на чем. Попробуйте, пожалуйста, снова войти в тему оформления "ОС" в Настройках, что получится?
И добавил в Зум масштабы 70, 80 и 90%.
Оранжевость - это от браузера же шапка?
Страницы