Как стать автором
Обновить

Комментарии 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), ибо если есть желание масштабировать ширину в зависимости от ширины браузера, стоит думать о «резиновой» верстке.

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

не поменяется если настройки не поменять :-)
даже на мобильниках?
у большинства
в Epiphany — 10px
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
Извините, а разрешение 1024*768 уже больше не котируется на просторах интернета? Я просто спрашиваю! :)
НЛО прилетело и опубликовало эту надпись здесь
Это вам так хочется думать.

Большинство продолжает сидеть на 1024.
Ну и некстати наступил бум нетбуков, которые в большинстве своём на 1024.
НЛО прилетело и опубликовало эту надпись здесь
Напомнило старый анекдот, про учительницу, большую и меньшую половины…
упомянутый в статье Якоб Нильсен, равно как и другие авторы не раз и не 10 раз указывали, что на разрешениях более 1024* пользователи крайне редко разворачивают браузер на полную ширину, что подтверждается и моими наблюдениями.
так что сайчас — 1024 тот приоритет, игнорировать который — моветон.
НЛО прилетело и опубликовало эту надпись здесь
да просто речь зашла о разрешениях.
а указующих размеры шрифта в px — сам не люблю (и никогда так не делаю).
НЛО прилетело и опубликовало эту надпись здесь
что Вы, весьма двусмысленно:
«Котируются, не возможно подстраиваться под каждого, нужно подстраиваться под большинство. А большинство уже давно минимум на 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.
980 :)
Зачем еще 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 в данном контексте я бы перевел как иметь вкус или иметь свой стиль, свой взгляд на что-либо без оглядки на то, что об этом подумают другие.
Я бы перевел как «дизайнер с претензиями»
НЛО прилетело и опубликовало эту надпись здесь
«дизайнер с attitude» — наверное, имеется в виду «дизайнер с характером»
А смысл будет типа «упёртый дизайнер которому покласть на посетителей»? Другого смысла пока не вижу.
наверное, дизайнер, которому более важно его собственное мнение
Использовал «дизайнера-самодура» :-) Спасибо.
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
Мониторы на 24" не предназначены для чтения длинных строк, это да. Собственно, статья о том и есть, что верстальщик должен заботиться о том, чтобы сайт адекватно смотрелся на таких размерах. Для широкого монитора вполне достаточно ввести максимальную ширину колонки и перераспределить интерфейс по ширине.
Сижу уже около года на широкоформатном 22-хдюймовом мониторе. Практически всегда окно браузера распахнуто на всю ширину и в большинстве случаев к длинным строчкам уже привык. При достаточном интерльяже длинные строчки уже не сбивают. Хотя, если верить рекомендациям, делать строки длиннее 10-12 слов всё же не есть гут. Наверное, я один такой атипичный )
А какие плюсы вы получаете от распахнутого браузера? Минусы вы уже высказали.
Большая рпбочая площадь. Больше информации располагается на одном экране. Если честно, я так смотрю сайты не из-за того, что нашёл в том какие-то плюсы, а потому, что всегда так делал. До этой статьи как-то и в голову не приходило, что окно можно сузить наполовину )
действительно, зачем вам 24'', если пользоваться не умеете ;)
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
Это вам сейчас так кажется. А если бы сайт умещался и по ширине и по высоте, а не только по ширине? Думаю в отсутствие скроллинга и жаловаться станет не на что.
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
когда первый раз это видишь в реальности, то думаешь «ну что за мудак так сделал?»
без обид, просто действительно такое видел уже, и может быть это очень и удобно, но привыычка…
А я бы поглядел на такое. Конечно, с нынешним HTML'ем такого не добиться (чтобы текст, дойдя до нижней границы, обернулся во вторую, третью колонку).

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

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

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

Гораздо надежнее знать, что все будет уменьшаться и увеличиваться и предусмотреть это поведение. В разумных пределах.
Спасибо.
дизайнер с attitude — дизайнер-позер?
Да, размер шрифта это то, что меня больше напрягает, практически на всех сайтах (и на хабре тоже) в 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
Столько всего об удобстве чтения написал, а шрифт выбрал просто ужасный…
имеется в виду Oliver Reichenstein
Да уж. Если я туда посмотрел в scc, это

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

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

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

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

к чему это я: люди все разные и не гоже это, верстать под среднего человека. а очень даже хорошо верстать так, чтобы наилучшая читаемость сайта достигалась отдельным пользователем лёгким движением руки.
А мне вот его воллпапер радует!
тьфу, нравится =)
Зарегистрируйтесь на Хабре, чтобы оставить комментарий

Публикации