Новая тема для мониторов с большим разрешением, планшетов и телефонов

[mazzy]

Посмотрел в статистику по разрешениям экранов и слегка прифигел - 70% посетителей используют мониторы, которые можно считать большими. Причем около 10% заходят с телефонов и планшетов
http://www.liveinternet.ru/stat/axfo...l?period=month
http://www.liveinternet.ru/stat/axfo...period%3Dmonth

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

Сделал стиль, который пока назвал Default 2 (beta oct-20).
Переключатель в новый стиль находится в нижнем левом углу страницы.


Особенность стиля:

• выключены все настройки размера шрифтов. Используются настройки по умолчанию.
• по возможности выключены настройки отступов. те, что есть переведены в относительные единицы измерения, которые зависят от базового размера шрифта в браузере
• используется всего три размера шрифта - normal, small, large. Реальные размеры определяются браузером.
• в заголовке уменьшено количество пунктов, которые "распирают" страницу по горизонтали
• включена адаптивная реклама - должна подстраиваться под имеющиеся размеры.

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

• как выглядит форум на разных устройствах и в при разном расположении устройств - вертикально/горизонтально?
• есть ли места, которые "выпирают" и нормальной верстки?
• можете ли приложить скриншоты форума на разных устройствах?
• что бы вы хотели изменить в этом стиле, чтобы форум было удобно просматривать на всех ваших устройствах (включая HD-мониторы)?

Спасибо

[Lucky13]

Цитата:

Сообщение от mazzy

что бы вы хотели изменить в этом стиле, чтобы форум было удобно просматривать на всех ваших устройствах (включая HD-мониторы)?

Может лучше ограничить максимальную ширину основного блока? Не очень удобно на широком мониторе читать длинные строки.
См картинку

[mazzy]

Цитата:

Сообщение от Lucky13

Может лучше ограничить максимальную ширину основного блока? Не очень удобно на широком мониторе читать длинные строки.

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

1. задал уникальные id для блока с контентом и блока с шапкой (#axforum_content, axforum_header). теперь вы можете указать свою ширину в пользовательских css.
2. в шаблоне "Default 2" указал max-width:120em. Думаю, что относительные единицы измерения лучше абсолютных. Чтобы увидеть эффект на HD-мониторе нужно уменьшить масштаб на один-два шага.

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

[Lucky13]

Цитата:

Сообщение от mazzy

в шаблоне "Default 2" указал max-width:120em. Думаю, что относительные единицы измерения лучше абсолютных. Чтобы увидеть эффект на HD-мониторе нужно уменьшить масштаб на один-два шага.

А почему выбрана именно такая ширина? Против относительных единиц ничего не имею, но почему именно 120? Изначальная моя задумка была такой, чтобы по умолчанию на HD-мониторе текст сообщений не растягивался во всю ширину экрана. С моей точки зрения, нужно 100em, может быть даже 80. Да, выглядит непривычно, но зато удобнее текст читать. Насколько я знаю, сейчас практически все сайты, либо с блоками справа и слева, тогда текст в центральном блоке становится уже, либо с ограничением по ширине.
Я понимаю, что с помощью css я могу себе сделать как больше нравится, но интересно узнать почему остановились именно на ширине 120em.

[mazzy]

Цитата:

Сообщение от mazzy

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

Цитата:

Сообщение от Lucky13

А почему выбрана именно такая ширина? Против относительных единиц ничего не имею, но почему именно 120? Изначальная моя задумка была такой, чтобы по умолчанию на HD-мониторе текст сообщений не растягивался во всю ширину экрана.

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

я не уверен, что мы говорим об одном и том же.
100em и 80em - это уже с увеличенным шрифтом?
я правильно понимаю, что вы хотите одновременно и шрифт увеличить и ширину уменьшить? не перебор?

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

[Lucky13]

Цитата:

Сообщение от mazzy

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

Говорим только про увеличенный шрифт. Какой был раньше даже для HD монитора слишком мелко, если больше, то вообще перебор.
Ширина страницы и размер шрифта - это несвязанные понятия. Размер шрифта в новом стиле считаю смотрится нормально. Но возьмите сообщение, где много текста и он растянут во всю ширину и попробуйте прочитать. По-моему, не очень удобно читать, когда строки длинные.
Кстати, заметил. В ваших сообщениях текст как бы в столбик, потому что строчки короткие, и их одинаково удобно читать при любой ширине. Почему вы так пишите? Вы много раз ставите перенос строки. Чисто интуитивно?
Просто интересно. Не все так пишут.

[mazzy]

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

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

[Lucky13]

Цитата:

Сообщение от mazzy

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

Я имею в виду и шрифт сделать как сейчас в новом стиле, и ширину ограничить. Просто шрифт - это одна проблема, а ширина страницы другая - читать текст, растянутый на все ширину экрана неудобно. Обычно максимальную ширину страницы ограничивают чтобы удобнее было читать текст на широком мониторе.

[gl00mie]

Ну ладно, новые стили под большие моники, но зачем было старые-то стили удалять? Теперь на 15" рабочего ноута все снова выглядит уныло с pure vanilla Arial

[mazzy]

Цитата:

Сообщение от gl00mie

Ну ладно, новые стили под большие моники, но зачем было старые-то стили удалять? Теперь на 15" рабочего ноута все снова выглядит уныло с pure vanilla Arial
Вложение 11008Вложение 11009

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

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

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

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

[mazzy]

Цитата:

Сообщение от gl00mie

снова выглядит уныло

кстати, а давай протестируем?
переключись в стиль Default 2.

подключи пользовательскую css (как это сделать. проще всего в IE)

#axforum_content {
font-family:Candara, arial, verdana, geneva, lucida, 'lucida grande', helvetica, sans-serif
}

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

[gl00mie]

Цитата:

Сообщение от mazzy

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

Может, мне только так повезло, но у меня прежний выбранный стиль слетел на default-ный, причем даже на тех страницах, которые я не закрывал, а просто перегрузил. Возможно, это связано с тем, что я использую Opera на хромовском движке, а не MSIE или Chrome.

Цитата:

Сообщение от mazzy

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

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

Цитата:

Сообщение от mazzy

кстати, а давай протестируем? переключись в стиль Default 2. подключи пользовательскую css.

Я исторически пользуюсь Оперой, она с некоторых пор использует движок Хрома, но при этом пользовательские css из нее вроде как выкинули. Для подобных случаев у меня еще есть более тяжеловесный инструмент - Proxomitron, но ставить его, к примеру, на планшете, только чтобы читать axforum с нормальными шрифтами, не хотелось бы.

Цитата:

Сообщение от mazzy

что бы ты еще поменял?

По-моему, новый стиль не прописался для всплывающих окошек на главной странице:

[mazzy]

Цитата:

Сообщение от gl00mie

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

понял. буду учитывать.

Цитата:

Сообщение от gl00mie

Чем-то напоминает отказ от настроек галочками в пользу файлов appconfig

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

Цитата:

Сообщение от gl00mie

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

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

буду признателен, если подскажешь где такие настройки еще есть.

Цитата:

Сообщение от gl00mie

Я исторически пользуюсь Оперой, она с некоторых пор использует движок Хрома, но при этом пользовательские css из нее вроде как выкинули. Для подобных случаев у меня еще есть более тяжеловесный инструмент - Proxomitron, но ставить его, к примеру, на планшете, только чтобы читать axforum с нормальными шрифтами, не хотелось бы.

понял. надо подумать.

Цитата:

Сообщение от gl00mie

По-моему, новый стиль не прописался для всплывающих окошек на главной странице:

понял. проверил.
всплывающие окошки - это div в пределах body основной страницы.
не понимаю почему туда не попадает кастомный шрифт. по идее, должен быть.

подумаю. спасибо.

твои стили останутся.
буду их тестить, когда буду вносить изменения.

[mazzy]

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

пожалуйста, попробуйте.
есть ли замечания-предложения?



================
кроме того, модифицирована тема Default 2 (beta mar) так чтобы на мониторах с большим разрешением не нужно было бы масштабировать текст.
кроме того, Default 2 (beta mar) следует за размерами шрифтов, которые установлены в браузере.

пожалуйста, попробуйте.
есть ли замечания-предложения?

[Pokersky09]

Мобильный на android 6.0.1 FHD:
Safari
Opera
"Интернет"

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

[Bobkov]

Цитата:

Сообщение от mazzy

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

Поглядел на айфоне 5 (ширина 320px). Симпатично. На мой вкус - великоваты margin на body. Как говорится, "сейчас в таком уже никто не воюет" :-)
Конструктивно - я бы предложил сделать 0.5em со всех сторон для узких экранов.

[mazzy]

установил на стиле Default 2.
так?

[komar]

Работает в мобильном Opera, не работает в мобильном IE

[Stitch_MS]

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

Upd: впрочем, нашел как попасть туда же со второго клика. Можно жить.

[mazzy]

Цитата:

Сообщение от komar

не работает в мобильном IE

опачки... спасибо.

Цитата:

Сообщение от Stitch_MS

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

Upd: впрочем, нашел как попасть туда же со второго клика. Можно жить.

Да, крепко думал.
пункт "новые" остался внутри меню "Навигация", которое доступно только для зарегистрированных.

Буду рад если выскажете свои предложения.
Ограничение одно - дизайн псевдоадаптивный. Это значит, что доступно только скрытие элементов и нельзя преобразовать блочный элемент в inline (верстка форума по прежнему табличная).