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

[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]

Цитата:

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

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

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

[mazzy]

Цитата:

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

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

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

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

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

[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 основной страницы.
не понимаю почему туда не попадает кастомный шрифт. по идее, должен быть.

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

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

[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

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

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

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

для нашего форума важным является код, вставленный в сообщения. а также скриншоты.
например, типичное 1, 2, 3

код обладает свойством - его плохо переносить по строчкам.
и обрезанный (wrap) код, и перенесенный код - плохо читается.

пример плохой верстки кода:
https://github.com/mazzy-ax/ax7db-re...r/db-reset.cmd

вот пример верстки, которую я мог бы назвать "образцом для подражания"
http://www.artlebedev.ru/kovodstvo/sections/159/
текст - в узкой колонке с крупным шрифтом.
изображения/код - на всю ширину.

но сделать такую верстку в рамках существующего дизайна форма слишком затратно.

есть и еще одно соображение - лично меня раздражают широкие неиспользуемые поля на большом мониторе. поэтому на больших мониторах я никогда не максимизирую браузер.
и очень не люблю сайты, которые принудительно ограничивают ширину. хотя и пользуюсь, и понимаю зачем они так делают. например, http://promodj.com/

=====================
в итоге, лично я бы предпочел в большинстве случаев оставить ширину форума, равной ширине отображаемой области в браузере. если пользователь захочет сделать форум более узким, то:
= на больших мониторах он просто не будет максимизировать браузер и выставит удобный размер браузера.
= а на планшетах и телефонах браузеры исходят из "логической ширины" в 320/780px, делая дефолтный шрифт конского размера. там точно делать форум узким не стоит.

=====================
готов выслушать соображения в пользу ограничения ширины.

[Lucky13]

Цитата:

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

для нашего форума важным является код, вставленный в сообщения. а также скриншоты.
например, типичное 1, 2, 3

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

Цитата:

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

есть и еще одно соображение - лично меня раздражают широкие неиспользуемые поля на большом мониторе. поэтому на больших мониторах я никогда не максимизирую браузер.
и очень не люблю сайты, которые принудительно ограничивают ширину. хотя и пользуюсь, и понимаю зачем они так делают. например, http://promodj.com/

Меня раньше тоже раздражали пустые поля, но потом привык. Такова современная реальность. Раньше разрешение мониторов постепенно росло и сайты адаптировались под этот предсказуемый рост. А сейчас, мало того, используются практически все известные разрешения (за счет мобильных устройств, а также телевизоров, проекторов и пр), так еще физические размеры экрана у всех разные. Поэтому ограничение минимальной и максимальной ширины экрана используется как некоторый компромисс для того, чтобы сайт нормально смотрелся на все устройствах. За примерами далеко ходить не надо, yandex, mail.ru.

Цитата:

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

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

Не факт, что пользователь об этом догадается. Обычно в пользу ограничения ширины говорят: растянутый сайт выглядит колхозно и несовременно, как будто, либо у верстальщика руки кривые, либо сайт давно забросили, что может отпугнуть пользователей. Так это или нет, вопрос спорный, но я замечал, что сейчас сайты, имеющие фиксированную ширину 1000px (под старые мониторы) выглядят как древние и заброшенные. Растянутые во всю ширину (по крайне мере мне) такими пока не кажутся, но кто знает, что будет через несколько лет.

P.S. Кстати, окно, в котором вводится текст сообщения не мешало бы увеличить по ширине. Можно относительную ширину, например, сделать. Там похоже фиксированная ширина сейчас.

[mazzy]

Цитата:

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

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

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

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

из-за этой несимметричности возможностей пользователя и не хотелось бы вводить дополнительные ограничения.

Цитата:

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

P.S. Кстати, окно, в котором вводится текст сообщения не мешало бы увеличить по ширине. Можно относительную ширину, например, сделать. Там похоже фиксированная ширина сейчас.

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

[mazzy]

Цитата:

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

Меня раньше тоже раздражали пустые поля, но потом привык. Такова современная реальность. Раньше разрешение мониторов постепенно росло и сайты адаптировались под этот предсказуемый рост.

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

однако уверен, что сайты должны не мешать браузерам
в частности, должны не задавать явные размеры шрифтов и/или элементов.

[Lucky13]

Цитата:

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

однако уверен, что сайты должны не мешать браузерам
в частности, должны не задавать явные размеры шрифтов и/или элементов.

Согласен. Но min/max-width - это не попытка сайта помешать браузеру, это скорее возможность, которую дает браузер сайту, чтобы он одинаково отображался на различных экранах. Не каждый контент на сайте можно как угодно масштабировать не теряя в качестве. Иногда при определенной ширине экрана элементы просто не умещаются, а иногда наоборот разъезжаются и сайт становится не похож сам на себя. Это на форуме, где есть только текст все просто, а в более сложных случаях это не так.

[mazzy]

Попробую подвести итог.

Цитата:

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

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

Цитата:

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

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

Я думаю что пока будет достаточно уникальных идентификаторов и max-width, который не меняет поведение в дефолтном масштабе на HD-мониторах.

Идентификаторы позволят легко задать свои параметры в пользовательских css.

==================
В ближайшее время нас ожидает:
= автоскрытие колонок на узких устройствах - телефонах, планшетах - таким образом, чтобы устройства сразу устанавливали вменяемый масштаб, а не "дико мелкий" шрифт.
= постараемся сделать что-то разумное с полем для ввода текста (быстрый ответ, расширенное редактирование, inline-редактирование, wyswyg).

если получившиеся media query будут вменяемыми, попробуем вернуться к max-width

[Lucky13]

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