Pull to refresh

Comments 133

/* имеется ввиду сайт автора, но ведь врёт, редиска! */

html>body {
font-size: 16px;
}

не врет. это дефолт у всех браузеров.
Имеется в виду, что размер все таки не оставили как есть а задали вручную. Пусть и стандартные 16px.
можно написать как 12 pt или православный 1 em — ничего не поменяется.
возможность масштабирования в говнобраузере (IE6) появится :)
(на малых разрешениях (а именно они чаще всего встречаются на старых компах с необновленным до 7-й версии говнобраузером) 16 — бывает слишком много)
particletree.com/features/dynamic-resolution-dependent-layouts/
и?
там — белым по черному:

body{
font-size:.8em;
}


в относительных единицах, то есть.
а вообще, использовать JS в данном случае, на мой взгляд, — чисто программистское извращение (что-то вроде подвешивания on-click-события на надпись рядом с чекбоксом, вместо использования тега label), ибо если есть желание масштабировать ширину в зависимости от ширины браузера, стоит думать о «резиновой» верстке.

конечно же, это только мое личное мнение.
/* можно написать как 12 pt или православный 1 em — ничего не поменяется */

не поменяется если настройки не поменять :-)
у большинства
в Epiphany — 10px
UFO landed and left these words here
UFO landed and left these words here
Извините, а разрешение 1024*768 уже больше не котируется на просторах интернета? Я просто спрашиваю! :)
UFO landed and left these words here
Это вам так хочется думать.

Большинство продолжает сидеть на 1024.
Ну и некстати наступил бум нетбуков, которые в большинстве своём на 1024.
UFO landed and left these words here
Напомнило старый анекдот, про учительницу, большую и меньшую половины…
упомянутый в статье Якоб Нильсен, равно как и другие авторы не раз и не 10 раз указывали, что на разрешениях более 1024* пользователи крайне редко разворачивают браузер на полную ширину, что подтверждается и моими наблюдениями.
так что сайчас — 1024 тот приоритет, игнорировать который — моветон.
UFO landed and left these words here
да просто речь зашла о разрешениях.
а указующих размеры шрифта в px — сам не люблю (и никогда так не делаю).
UFO landed and left these words here
что Вы, весьма двусмысленно:
«Котируются, не возможно подстраиваться под каждого, нужно подстраиваться под большинство. А большинство уже давно минимум на 1280-1024 сидит, и ломает глаза о мелкий шрифт.»
ударение в этой фразе идет на «А большинство уже давно минимум на 1280» — поэтому коммент (сложно назвать его постом :) ) заминусовали (ибо фраза, на которую сделано ударение — и правда, не соответствует действительности).

а вот напиши Вы что-то вроде:
«Невозможно подстраиваться под каждого, нужно — под большинтво. А большинство сейчас используют разрешение 1024* (что подтверждает статистика). Увы, на многих сайтах недодизайнеры используют такие кегли и так задают их размер, что читать весьма некомфортно»
коммент бы заплюсовали :)
Я и на 1400 разворачиваю — поверьте, вполне адекватно почти всё отображается.
а я что-то писал о неадекватности? :)
Вы писали что пользователи редко разворачивают браузер. Я имел в виду что причин отказываться от разворачивания нет.
а я вот не вижу причин разворачивать на >20 дюймах браузер, зачем? есть тысяча способов это пространство занять…
А смысл? Я понимаю, если вы что-то, скажем, верстаете, и тут же смотрите в браузере. А так — это место можно использовать разве что под контакт-лист, другие вещи будут только мешать.
а я не понимаю смысл >20 дюймового моника только для браузинга по инету :) компьютеры они многозадачные ;) люди в принципе тоже… и на монике больше 20 на полном экране только играю и смотрю фильмы… зачем нужен браузер на полную ширину в таком виде, просто не понимаю… тот же хабр вполне хватает ширины 1280…

плюс не забываем, что половина пользователей все еще сидит на разрешении 1024, и что является гуманнее правильнее верстать браузер на 1280 и заставлять половину пользователей пользоваться горизонтальным скролингом, или смотреть на слишком большие шрифты, либо половине пользователей по краям, либо с одного края браузера (если уж он на полный экран раскрыт) показать пустую область?
Монитор конечно используется далеко не только для браузинга, я программирую больше. При этом давать среде разработке менее 1000 пикселей ширины — плохая идея. Таким образом, под браузер места не остаётся совершенно. А кроме того на экране ещё нужен блокнот с логами, файл-менеджер… Лично мне удобнее всё это держать полностью развёрнутым на весь экран и пользоваться Alt+Tab и не мельчить.

Последний ваш абзац вообще не понял к чему. Собственно статья как раз и есть о том, что надо верстать адекватно под любое разрешение экрана.
И как вам браузинг на 1400? Подозреваю что хорошо :-) Но вас не напрягают нижеследующие две альтернативы?

— или бесконечно длинные строки
— или 800 бедных пискселей посередине в случае жёсткой вёрстки

Всёж-таки инет делается самыми разными людьми и в основном для 1024-1280.
позвольте, однако, не согласиться :)
1. чрезвычайно удобно, когда слева — панель закладок (при этом область, показывающая страничку сужается)
2. в сети намного чаще встречаются сайты с фиксированной шириной, адаптированные под 1024*; если окно браузера при этом занимает всю ширину (скажем, 1600), по бокам — просто пустое место (цвет, узор). дело вкуса и эргономики, но мне не нравится такое нерациональное расходование пространства экрана, ибо можно разместить сбоку виджеты, окошко IM, ту же самую панель закладок/загрузок/чего угодно еще.

все вышесказанное особенно актуально для широкоформатных мониторов.
И с чем вы не согласились? У меня тоже сбоку контакт-лист IM висит, но от этого окно браузера не перестаёт быть развёрнутым.
я не согласился с тем, что область, в которой браузер отображает просматриваемую страницу, занимающая всю ширину экрана — это комфортно и рационально.
Наверное мы друг друга немного не поняли. Для меня «развёрнутый браузер» не означает что область просмотра занимает весь экран по ширине — я считаю всё что вы предложили правильным. Думаю, я бы на 24" экране даже панели Gnome перевесил набок. Другое дело, что «развёрнутый браузер» в такой ситуации будет занимать примерно 2/3 — и всё равно останется развёрнутым. При этом на мониторе 1920 px шириной это всё равно будет минимум 1300-1400 px. Мне кажется не грех всё-таки занять это место фоном, ограничив ширину сайта — я думаю, что это лучше, чем торчащий из-за браузера на 100-200 px рабочий стол.
я вас тоже не правильно понял ;)
+1
у меня 1920 разрешение, смотрю всё прекрасно.

Вообще хочется по меньше статей и побольше реальной практики =)
У меня теперь тоже 1920 :) Вполне отлично смотрится тот же хабр.
P.S. Мы с вами некропостеры :)
Вы забываете о том, что аудитории разных сайтов — тоже разные.

Пока абсолютное большинство по миру продолжает сидеть уже на 1024. Но в эпоху дешевых 19" LCD это, такими темпами, через год изменится.
Приятно поговорить с телепатом.

Нет, не забываю.

19дюймовые панели уже год чтоли, как дешевые. Нынче время 20 и более дюймовых дешевых панелей.
Год назад они были не самыми дешевыми, и люди предпочитали 17"-модели. Сейчас же «девятнашки» стали настолько массовыми, что за прошедший год процентное соотношение их владельцев выросло на 20%.

А 20" и выше пока совсем не массовые. 22" начинаются от $350 и выше. Хорошая 24-ка — $800

PS: к счастью не телепат :)
В любом случае — рисовать дизайн нужно в 1000px.
Зачем еще 20? 24 пикселя вполне достаточно для скроллинга и границ браузера :)
я обычно оставляю еще 20 на всякий случай (на тот, который возникает при увеличении границ и размеров лифтов)
19 дюймовые TN мониторы год назад стоили порядка 5-7 тыщ, сейчас за эти деньги продаются 20-22 дюймовые.

А вот два года назад была эра 17 дюймовых.

Про «хорошие» я вообще не говорю, они в массе никому не нужны, кроме соответствующих профессионалов и дрочующих эстетов :)
не забывайте про мобильные девайсы, пока одни увеличиваются, другие уменьшаются %)
Для мобильных девайсов нужна мобильная версия :) Или вы о нетбуках?
Нужна-то нужна, да кто её делать будет? В нашем реальном мире. Поэтому о том что «другие уменьшаются» всё же забывать не стоит.

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

Впрочем, этот мой комментарий тоже достаточно идеалистичен. Как выгодно так и сделают. Или насколько ума и способностей хватит.
Простите, что вмешиваюсь.
Я приведу простую статистику по своему сайту:
Разрешение 1024 x 768 использует 44%
Разрешение 1280 x 1024 использует 38%

Остальные разрешения используют единицы.

p.s. аудитория сайта узко специализирована…
Кстати те, у кого мониторы от 20, редко разворачивают браузеры на весь экран, это просто неудобно
интересно, кто придумал эту глупость?
судя по минусу, я должен почувствовать себя ущербным и тут же сжать окно браузера вдвое…

Простите, а какой монитор у вас?
Я использую два 20" монитора и ничего, часто бывает что на каждом из них открыт браузер, развёрнутый на весь монитор…
Я проводил опрос на эту тему:
habrahabr.ru/blogs/webdev/48862/
Согласно нему, 80% пользующихся разрешением 1280+ разворачивают бро на весь экран.

80% = 277 / 72+277
Так говорят те, у кого маленький… гхм… монитор.
Резиновый дизайн в природе существует.
Ну так и статье больше двух лет уже.
Как узнал, а?!   Я дату искал, найти не мог :-)
Как войдете — направо.
>Если честно, то ничего нового… Об этом говорят лет 7 уже.
Вы и хабровцы разные источники читаете.
Здесь тема «Даешь 100% резину» поднимается раз в неделю. А то что «Чересчур широкие колонки утомляют глаза и ещё имеют неблагоприятный психологический эффект» — для очень многих тема для холивара.
Экран — не книга. На экране текст должен быть крупнее, т. к. его невозможно «поднести ближе к глазам», как книгу. Эту статью я читал с увеличение текста средствами браузера.
Насчет attitude. Точного соответствия в русском нет, но to have an attitude в данном контексте я бы перевел как иметь вкус или иметь свой стиль, свой взгляд на что-либо без оглядки на то, что об этом подумают другие.
Я бы перевел как «дизайнер с претензиями»
UFO landed and left these words here
«дизайнер с attitude» — наверное, имеется в виду «дизайнер с характером»
А смысл будет типа «упёртый дизайнер которому покласть на посетителей»? Другого смысла пока не вижу.
наверное, дизайнер, которому более важно его собственное мнение
Использовал «дизайнера-самодура» :-) Спасибо.
UFO landed and left these words here
UFO landed and left these words here
UFO landed and left these words here
UFO landed and left these words here
UFO landed and left these words here
UFO landed and left these words here
UFO landed and left these words here
UFO landed and left these words here
Мониторы на 24" не предназначены для чтения длинных строк, это да. Собственно, статья о том и есть, что верстальщик должен заботиться о том, чтобы сайт адекватно смотрелся на таких размерах. Для широкого монитора вполне достаточно ввести максимальную ширину колонки и перераспределить интерфейс по ширине.
Сижу уже около года на широкоформатном 22-хдюймовом мониторе. Практически всегда окно браузера распахнуто на всю ширину и в большинстве случаев к длинным строчкам уже привык. При достаточном интерльяже длинные строчки уже не сбивают. Хотя, если верить рекомендациям, делать строки длиннее 10-12 слов всё же не есть гут. Наверное, я один такой атипичный )
А какие плюсы вы получаете от распахнутого браузера? Минусы вы уже высказали.
Большая рпбочая площадь. Больше информации располагается на одном экране. Если честно, я так смотрю сайты не из-за того, что нашёл в том какие-то плюсы, а потому, что всегда так делал. До этой статьи как-то и в голову не приходило, что окно можно сузить наполовину )
действительно, зачем вам 24'', если пользоваться не умеете ;)
UFO landed and left these words here
UFO landed and left these words here
UFO landed and left these words here
UFO landed and left these words here
Это вам сейчас так кажется. А если бы сайт умещался и по ширине и по высоте, а не только по ширине? Думаю в отсутствие скроллинга и жаловаться станет не на что.
UFO landed and left these words here
UFO landed and left these words here
UFO landed and left these words here
когда первый раз это видишь в реальности, то думаешь «ну что за мудак так сделал?»
без обид, просто действительно такое видел уже, и может быть это очень и удобно, но привыычка…
А я бы поглядел на такое. Конечно, с нынешним HTML'ем такого не добиться (чтобы текст, дойдя до нижней границы, обернулся во вторую, третью колонку).

Кто знает. Может это и не так плохо на практике, если обставить грамотно…
Поглядеть то можно, но в жизни неудобно. Если делать большими столбцами, как например в журнале «Наука и жизнь», то придётся пролистывать вверх страницы, если она слишком длинная, что неудобно по определению. А когда делают многостолбцовую разметку небольшой высоты, то очень трудно непроскочить на следующий блок столбцов, если конечно, они по высоте не превышают десятка строк… видел это воплощение где то, и с тех пор отрицательно отношусь
UFO landed and left these words here
>Вместо этого, уберите голову от монитора, откиньтесь назад и продолжите чтение

Сижу я значит на табуретке…
Как же вы Windows 98 устанавливали тогда?
На сколько я помню, ребята из микрософта там все предусмотрели, фраза была «сядьте в кресло и откиньтесь на спинку».
Лучше бы они к винде кресло предлагали впридачу
> Мы не хотим изменять настройки браузера каждый раз когда посещаем новый сайт!
Что значит для каждого сайта? В нормальных браузерах размер шрифта меняется легко и непринужденно для каждого окна по отдельности. Если вам нужно долго читать статью, не поленитесь нажать ctrl и крутануть колесо вверх. А если вы выбираете что почитать? Как вы будете искать нужную информацию среди огромного шрифта основной статьи? Ведь меню придется делать еще больше.
неужели меню можно выделить только размером шрифта? о_0
шриф все равно великоват.
ширина колонки должна быть такой что бы при чтении, можно было не крутить шеей и глаза что бы сильно не разбегались.
Шрифт явно мал по ссылке. И я даже не говорю о том, что указание размера шрифта в px — убожество.
Сейчас все браузеры умеют делать адекватный зум, даже если размер шрифта указан в пикселях. Последним популярным браузером, который этого делать не умел, был IE6, и сейчас он стремительно теряет популярность. Так что сейчас указывать размер шрифта в пикселях — вовсе не грех.

Да, IE6 — до сих пор значимый игрок, но если размер шрифта на сайте адекватен и читабелен, и с большой долей вероятности устроит подавляющее большинство аудитории, вполне можно указать его и в пикселях.
Поправьте: (с одной части страницы нга другую)
Хорошим советам место в избранном.
Я, если честно, не очень понимаю эти вольные размеры шрифта. Ведь что-то может поехать (в вёрстке), что-то стать больше чем надо, что-то меньше…
Ничего гарантированно не «поедет» только на вашем личном браузере. И то до тех пор, пока вы с зажатым «Ctrl» мышиный ролик не покрутите.

Гораздо надежнее знать, что все будет уменьшаться и увеличиваться и предусмотреть это поведение. В разумных пределах.
Да, размер шрифта это то, что меня больше напрягает, практически на всех сайтах (и на хабре тоже) в FF стоит +2, +3, при том, что это простительно на ноутбуках где на 13 дюймах 1280, а на 19шке 1280х1024 или 1920х1200 на 24 размер будет одинаков в целом, но все равно не хватает.

спасибо за статью, очень полезная ;)
Высота строки по умолчанию в HTML слишком мала

В HTML нет стандартной высоты строки, она есть в файле стилей по умолчанию, т.е. в CSS.
Не согласен. Мысленно перенеситесь во время когда HTML уже был, а CSS ещё не было. Или просто набейте гипертекстовый файлик без использования CSS. На выбор.

Какая-то высота строки там будет. И мы все знаем какая она — именно та что и имелась ввиду в статье.
Мысленно перенесёмся в то время, когда даже HTML ещё не было и тогда… гм, тогда весь разговор вообще потеряет смысл. Понимаете? Говорить про ситуацию 12-летней давности при обсуждении современной статьи — немного странно.
А почему бы и не вспомнить ситуацию 12 летней давности, если она хорошо показывает что ЦСС здесь ни при чём? По-мне так весьма доходчиво показывает.

Окей, переформулирую — высота строки, если не указана, имеет к CSS столько же отношения, сколько и к HTML. То есть никакого. А имеет отношение к особенностям браузеров, которые, о чудо, ведут себя в этом случае примерно одинаково.

По хорошему, стандарт HTML неплохо бы прочитать, но не думаю что высота строки там регулируется кроме как что-то типа «д. б. достаточно удобной для чтения».
В спецификации HTML вообще не идёт речь о визуальной составляющей.
Поэтому искать там информацию о высоте строки — довольно глупое занятие, потому как это язык разметки гипертекста, который не имеет к умолчаниям браузера ну совсем никакого отношения. Ну вообще никакого.

В общем, речь с самого начала шла о том, что вы (или автор текста) очень неудачно выразились:

Межстрочное расстоние в HTML слишком мало по умолчанию

…поскольку ни в какой спецификации высота строки не регулируется.

Корректнее было бы сказать:

Во всех браузерах высота строки по умолчанию слишком мала»
Категорически согласен!   :-)
Основное впечатление от статьи — это раздражение от комментариев, касающихся сложностей перевода. Да и других, сбивающих стиль изложения материала.

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

P.S. Совокупность заголовков-цитат здесь, по сравнению с оригинальной статьёй, мне кажется, выглядит не очень аккуратно. Тем более тогда, когда в конце используется такое форматирование, как «___от переводчика___».

P.P.S. Не подскажете, есть ли возможность в Chrome увеличить базовый размер шрифта или запомнить масштаб страницы?
Спасибо. По крайней мере насчёт комментариев перевоччика задумался.

Что вы имеете ввиду под «Совокупность заголовков-цитат здесь, по сравнению с оригинальной статьёй, мне кажется, выглядит не очень аккуратно»?

В хроме: параметры → базовые → языки и шрифты. И это действительно непросто!
1. Дело в том, что когда я меняю аналогичные параметры шрифта в Фоксе, то текст, к примеру, на Хабре становится крупнее. А вот Хромские установки никак не влияют — какой бы шрифт не указывать.

2. Неаккуратно, на мой взгляд, выглядит конструкция «Пять простых правил
1. Оставьте размер...», где заголовок раздела (правила) хочется отделить от акцентированного первого пункта списка и сам пункт явно просится быть набранным более черно. В оригинальном английском тексте картина совсем другая, отчего особенно обидно. :)
Шрифт — это святое. Я об этом тоже писал давно, вот
здесь, многие мысли совпадают (правда, теперь понимаю, что неправ, говоря о том, что выравнивание текста по ширине — есть хорошо).
Главное, что остаётся, как мне кажется, верным — если шрифт подобран хорошо и удобочитаемо, то не нужно распечатывать статью, а это — сохранение леса.
«король юзабилити многие годы плевал на юзабилити собственного сайта, но рьяно учил всех обратному»

«по 10-15 слов в строке (это для английского языка; для русского, где слова в среднем длиннее, стоит взять величину поменьше).»
думаешь там просто так единицей изменения являются слова, а не символы?

img-fotki.yandex.ru/get/2709/sairi-na-tenshi.10/0_1d78a_31d551bf_orig
Столько всего об удобстве чтения написал, а шрифт выбрал просто ужасный…
Да уж. Если я туда посмотрел в scc, это

body {
font-size: 100%;
font-family: Georgia, serif;
color: #333;

Такой шрифт с засечками, да ещё и серый даже при увеличенном размере читается хуже любимых всеми Верданы или Тахомы.
Serif шрифты очень даже хорошо читаються и не только подходят для заголовков. И вообще компоновка serif и sans тоже хорошо выглядит!
Включите Clear Type сглаживание. Вы поменяете свое мнение.
Мы не хотим нажимать на кнопки «больше/меньше»
Это jooml'у чтоли умеют ввиду?
Line height — не высота строки, а интерлиньяж или, на худой конец, межстрочное расстоние.

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

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

к чему это я: люди все разные и не гоже это, верстать под среднего человека. а очень даже хорошо верстать так, чтобы наилучшая читаемость сайта достигалась отдельным пользователем лёгким движением руки.
А мне вот его воллпапер радует!
тьфу, нравится =)
Only those users with full accounts are able to leave comments. Log in, please.