Ознакомьтесь с нашей политикой обработки персональных данных
Регистрация

Адаптивный дизайн Diary

↓ ↑ ⇑
13:29 

Мысли вслух

// Репост, чтобы не потерялось.

Если запилить новый дизайн так сложно, потому что легаси/время/деньги/инопланетяне, то почему бы не сделать финт ушами и не сделать проще?

  1. Не менять разметку и стили, совсем. Но сделать нормальный выбор тем, которые, по сути, будут просто ещё одним CSS файлом, который будет применяться только к самим дневникам, но не системным страницам. Запросить у юзеров помощи поделиться своими какими-то своими темами (могу поделиться своей), выбрать хорошие и встроить.

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

    Только с !important в таких стилях, возможно, придётся распрощаться, чтобы в пользовательских стилях переопределять можно было это дело попроще. Либо при подключении пользовательского CSS (который платная услуга) файл темы не подключать вовсе, но сделать возможным импортировать стиль любой «системной» темы, которую ты дальше уже редактируешь как хочешь.

  2. Вместо полноценной мобильной адаптации сделать так, чтобы на маленьких экранах боковая панель скрывалась за кнопку, кроме, быть может, аватарки, названия дневника и автора. После этого можно чуть-чуть уменьшить минимальную ширину дневника, чтобы мобильным устройствам легче дышалось. Прописать meta viewport.
  3. Опционально на системных страницах для больших экранов можно сделать чуть-чуть шрифт покрупнее и ширину контента пошире.
  4. Добавить на главной для незарегистрированных пользователей какое-нибудь завлекалово.

Дёшево и сердито.


@темы: предложения и пожелания, дизайн

11:33 

Искусство некромантии, том 3

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

скриншот

Скриншоты в разных разрешениях: https://imgur.com/a/buRdgoD

Файлы: https://mega.nz/#!QZRlSIbT!hoHOgQl_F3d24RjYxd4TS70cV_GSclCYGpyGDwJYGM4

Live: https://jsfiddle.net/gue91x8t/

Заметки


Мобильное меню по кнопке не выскакивает, потому что не реализовано (на весь экран надо, наверное). Выпадающие меню в правом меню тоже не выпадают по этой же причине. Пусть программист делает :lol:

Если заголовки слишком яркие, то их цвета можно и поменять. И фон. Но, опять же, это и без меня управятся.

Код


показать

@музыка: Awe of she

@темы: главная, дизайн, предложения и пожелания

00:01 

CSS переменные для настроек темы

// Продублирую и сюда что ли

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

https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

@темы: предложения и пожелания, CSS

19:13 

Больше классов

Добавьте больше информационных классов некоторым блокам для удобства стилизования CSS'ом в зависимости от различных условий (в дополнение, а не вместо).

  • Например, хотелось бы видеть на блоках с постом (сейчас это .singlePost) ещё какой-нибудь отдельный класс, если этот пост закрыт. restricted-post, например.
  • На блоке с комментарием (сейчас это .singleComment), что это комментарий владельца дневника. Скажем, owner-comment.
  • Если комментарий от Гостя, то на блок с комментарием класс guest-comment.
  • На блоке с автором и аватаркой (.commentAuthor) — если автарки нет в этом посте/комментарии. Например, no-avatar.

@темы: предложения и пожелания, CSS

18:03 

Массове удаление комментариев

Если возможно, добавьте, пожалуйста в новом дизайне функцию массового удаления комментариев (открыть весь тред не постранично, выделать ХХ комментариев и "удалить все"). Платную или нет - не важно. Иногда очень нужна, а нету надоело по 300+ комментариев удалять по одному.

@темы: комментарии

15:56 

По поводу шрифтов, расположения элементов и т д

У меня следующие предложения я зло...чий дизайнер.
1) Если говорить о шрифтах, то две гарнитуры — это ок норм. НО использовать два подвида гарнитуры, один гротеск, а другой с засечками — не норм. Это ок, когда что-то из этого заголовок, а что-то текст.
Геометрия шрифта не совпадает, заголовки вытянутые и прямоугольные, а PT более «низкий» и квадратный. Можно оставить для заголовков sans, для текста serif, если уж очень хочется засечки. Хотя имхо, они только для текстов.

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

2) Навигация интуитивно менее удобна, чем старая.

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

3) Визуальное соотношение блоков немного странное. Глаз все время цепляется за разделение по цветам в странном месте. Верхняя часть (меню) делится на два блока цветом, но по этой линии разделения дальше по странице ничего не происходит (обычно сайты верстают по сетке). Лучше сверстать так, чтобы было целостное визуальное разделение, и делить не в непонятном месте, а визуально узнаваемом. Сейчас это то ли треть, то ли четверть, то ли восьмая.. :)

4) «Мои избранные» — это целое облако на всю страницу.
Мне кажется, визуально этот раздел вообще теперь доминирует над всей страницей, и это негармонично. Раньше информация была распределена ровными полосками, а теперь БАЦ ИЗБРАННЫЕ. Новости сверху давятся, снизу что — вообще не видно на мониторе высотой 1024px.



Иконки и цветовая гамма и стиль в целом — нравятся.
Впрочем, градиент (только более нежный) в красно-малиновую часть можно и вернуть.
:china:

22:11 

Про шрифты

Не жалоба, скорее, вопрос.
На некоторых страницах (например, здесь: beta.diary.ru/list/) создаётся впечатление, что используется много разных шрифтов, прям в глазах рябит. Если посмотреть CSS, оказывается, что основных шрифта всего два - PT Sans и Oswald, но на этой странице есть ещё один (увы, я не отличаю их визуально, но я уверена, что их там не два!).

Вопросы:
1) Как подбиралось сочетание шрифтов? Я не дизайнер и не могу сказать, хорошо это или плохо, но тут есть таблица, составленная дизайнером: pomelnikov.com/images/Uroki/Font-pairs/Font-pai... (уж не знаю, насколько оно авторитетное).
2) Почему используется больше двух шрифтов? Насколько я слышала, больше двух использовать не рекомендуется...
3) Такой же вопрос про цвета, на странице "Все дневники" прям 50 оттенков серого и красного (или как его назвать?). Претензий нет, но интересно, как они подбирались?

09:29 

Цветовые схемы

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

Возможность изменения цветовых схем служебных элементов для пользователей
1. Изменить на светлые темы как в старом дизайне  26  (15.66%)
2. Дать пользователям возможность изменять цветовые схемы самостоятельно  64  (38.55%)
3. Дать пользователям выбор между светлой и тёмной темой в настройках  58  (34.94%)
4. Ничего не менять, всё хорошо  18  (10.84%)
Всего:  166
Всего проголосовало: 115

@темы: Цветовые схемы

13:19 

Несовпадение числа дискуссий

Не уверен, проблема это или нет, но счётчик дискуссий на главной работает как-то странно. В свёрнутом виде показывает не то число, которое в развёрнутом. В итоге когда дискуссии свёрнутые цифра не совпадает с той, что в верхней панели.
Вот, тут видно, что отображается 3, хотя по факту там 38
С телефона то же самое.




Windows 7, Мозилла последняя, Android 4, Хром последний

@темы: [-] Проблема, Браузер: Chrome, Браузер: Firefox, браузерная версия, главная страница, дискуссии, мобильная версия

20:29 

Неочевидность прокрутки страницы

Дополз и я до смартфона...
Samsung Galaxy, встроенный браузер Samsung Internet

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


Дополнительно:
Очень удивила пиктограмма привидения из пак-мэна в у-мылах, неожиданно ведущая в настройки. Или я чего-то не понял, или это как-то странно. Может быть лучше туда всё же шестерёнку, как наиболее распространённый символ настроек? Ну и плюсую всем тем, кто хочет вынесенную на панель иконку избранного и вернуть нормальный значок собаки для тега [J] вместо серой кляксы, вызывающей неприятные ассоциации врачебного плана.

@темы: мобильная версия, главная страница

18:34 

Некоторые (не все а скорее всего, только эта одна) цитаты Собаки не переносятся по строчкам:


На скриншоте главная страница до аутентификации на сайте, но и после логина проблема никуда не девается.
iOS, Safari

00:03 

Кнопка "Выход/Вход"

Об этом вроде не писали, но, может, я пропустила.
В новой версии дизайна кнопка "Выход" спрятана, сразу её не найдёшь. И лично для меня это очень неудобно. Возможно, таких пользователей меньшинство.
Но я так же не вижу совсем кнопок "Вход", а точнее "Войти под другим именем:", может, я их и просто не нашла? Но вот ими как раз точно постоянно пользуются все участники Фандомных битв.
Может, есть возможность вынести "Выход" отдельной пиктограммой, тем боле там понятный значок?
Да и кнопка для перелогивания "Войти под другим именем:" - насущная необходимость, на мой взгляд.

Мне важна
1. Кнопка "Выход" отдельно  28  (22.22%)
2. Кнопка для перелогивания отдельно  35  (27.78%)
3. Оба пункта важны  49  (38.89%)
4. Оба пункта неважны  14  (11.11%)
Всего:  126
Всего проголосовало: 93

15:02 

Ночной режим

В общем, думаю, все знают, что это.

Для полуночников и просто людей с высокой светочувствительностью хотелось бы иметь версию служебных страниц с инвертированной яркостью: светлым по тёмному (к примеру, основное наполнение меню многоточия на бете, как оно сейчас).

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

"Ночной режим" как опция
1. Очень нужно (пользоваться буду постоянно), с запоминанием выбора  18  (16.51%)
2. Очень нужно (пользоваться буду постоянно), без запоминания выбора  2  (1.83%)
3. Было бы хорошо (временами нужно), с запоминанием выбора  19  (17.43%)
4. Было бы хорошо (временами нужно), без запоминания выбора  13  (11.93%)
5. Совершенно не нужно  57  (52.29%)
Всего:  109

@темы: ночной режим, светлым по тёмному

23:40 

iPhone, Safari.
Не уверена, что эта фича уже относится к новому дизайну, но зарепоочу:
1) Заходим в U-mail;
2) Жмём на пиктограмму нового сообщения (кстати, эти пиктограммы не интуитивно-понятны (если на десктопе есть tooltip, то на мобилке надо гадать), я бы ожидала что-то вроде карандашика для нового сообщения, но не в этом суть;
3) Жмём на пиктограмму прикрепления картинки;
4) Жмём “БИ” в открывшемся меню;
5) Пробуем скроллить вниз и видим, что скроллится страница сзади, а не меню.

23:24 

Auto-zoom в Safari на iOS

Safari на iOS автоматически зумит страницу при нажатии на поле ввода, если размер шрифта поля ввода меньше 16px. После завершения ввода страница назад не уменьшается, и выглядит как-то так:


Чтобы увидеть страницу целиком, я сама должна её уменьшить.
Не критично, но неудобно.

22:41 

Поле ввода ресайзится некорректно

Размер поля ввода (например, "Чёрный список" на странице "Настройка U-mail" (beta.diary.ru/options/site/?umail) можно изменить, потянув за нижний правый угол.
Но:
1) возможно сделать поле шире, чем левая колонка, которая отведена под текст настроек;
2) растянутое поле ввода оказывается скрыто рекламой, находящейся в правой колонке.

Проблема существует по крайней мере в Chrome, Safari и Firefox.



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

22:38 

Последняя новость покрупнее

А что если… сделать последнюю (в смысле самую актуальную, т.е. первую в списке) новость покрупнее на главной? Т.е. как-то так: показать изображение


@темы: главная, дизайн, предложения и пожелания

02:35 

Список избранных на главной странице и в профиле

1. Очень не хватает блока, кто из избранных и ПЧ онлайн. Верните, пожалуйста!
2. Печалят интервалы между никами, страница растягивается, ее приходится долго прокручивать вниз. Если ники и названия сообществ - в несколько слов с пробелами, это еще и неаккуратно выглядит, потому что интервалы сильно больше пробелов. Нельзя ли вернуть разделение запятыми? И в профиле список интересов по-старому, с запятыми, а затем идет массив ников с интервалами. Режет глаз.
3. Много шрифтов. :( Имхо, хватило бы и двух.
4. А сокращать списки избранных и ПЧ - это обязательно? Всех сразу, не подгружая, видеть удобнее.

20:27 

Кнопки для редактирования/форматирования текста

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


Новый (в новых коментариях и новых записях кнопки у меня выглядят точно так же траурно):


Пы.Сы. Хром на десктопе.

17:31 

Нет стоимостей платных сервисов, и баг с описаниями

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

2. Если кликнуть на название сервиса, то появляется развёрнутое описание, но всю страницу перематывает на начало. При повторном клике оно пропадает, а страницу так же перематывает вверх.

У всех версий "Вклада в развитие" одинаковое описание — возможно, его стоит вынести вверх, над конкретными разновидностями, и разворачивать вместе с ними?

@темы: недоделка, страница платных сервисов

E-mail: info@diary.ru
Rambler's Top100