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

Комментарии 130

На злобу дня

А в целом это пример как надо писать для людей (пункты, заголовки, списки)
Да, я решил перевести эту статью именно после топика пользователя посмотреть профиль kotopes. :)
Быстро и качественно
Все приходит с опытом. Я сам помню как делал первый сайт с кучей баннеров лет 10 назад)
А автору статьи спасибо за труд, добавил в закладки
НЛО прилетело и опубликовало эту надпись здесь
Про line-height вы зря. Оно хорошо задаётся в процентах от кегля, а межстрочное расстояние по умолчанию и правда маловато.
Текст во всю ширину окна браузера читается тяжело, а вот ваш пост, занимающий примерно половину, читается отлично.
Это надо добавить/изменить в тексте... :)
Отличный комментарий.
Как-то не очень здорово в статье о типографике допускать грубейшую ошибку в типографике:
"95 % того, что обычно называют веб-дизайном, — это типографика." Знак процента нельзя отрывать от числа.
Не знал :) Но как-то этот пробел в глаза очень бросается.
Отлично. Хорошо изложено. Согласен.
если обобщить советы для начинающих, не только этих, по-мне это будет звучать коротко: если не уверен, делай проще (да-да, и не стоит переоценивать себя)
Проблема состоит в том, что сделать просто — сложно, и требует большого опыта. :( Это во всём проявляется: от балета до яхтенного спорта.
таки правда, но уже из разряда "изящно просто" ;)
обобщенная фраза - делай проще говорит только куда двигаться, а на вопрос "что именно делать" отвечают уже советы статьи выше
Спасибо, отличная статья!
я обычно как дизайнер использую 11 размер во всех проектах.
У меня 11pt обычно.
Важно не задавать строго размер шрифта в CSS, и проектировать дизайн так (и потом верстать его так), чтобы он хорошо смотрелся при размере шрифта от 9 до 14 pt или даже больше.

body { font-size: 11pt; } — это злое зло, и от него нужно избавляться, чем быстрее — тем лучше.
Вы указали на "зло", а как же будет "добро"? Покажите пример хорошего стиля, если не сложно. :)
body { }
body { font-size: medium; }
h1 { font-size: 140%; }
h1 { font-size: 120%; }
Последнюю строчку попутал. :)
h2 { font-size: 120%; }
Спасибо, надо будет попробовать )
Указывать размер меленький — это плохо, но дело хозяйское.
Указывать размер в пунктах — это очень плохо. Вы представляете, как ваш текст будет выглядеть на проекторе? А на экране в 32"?
Если хотите маленький текст, ставьте font-size: smaller или font-size: 80%. Тогда он будет масштабируемым.
хорошо, что Fx позволяет указать минимально допустимый размер шрифта равный 14 и не париться с зумом
Про шрифт:
зажать Ctrl и повертеть колесиком мышки так сложно? :-)
Прочитайте ещё раз второй абзац первого пункта, там всё написано. ;)
Хотеть, это еще не значит, что это можно сделать. А писать про сферических коней в вакууме мы наверное все умеем.

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

Попробуйте сверстать страницу (не пустую конечно :), которая нормально будет смотреться на 17" в 1280x1024 и на 30" в 2560*1920. А если монитор повернут портретно? А для КПК? А как насчет китайских или японских шрифтов?

Нормальное масштабирование в вебе существует во Flash'e, ну еще в Silverlight.

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

Серьезно, я хотел бы оказаться неправым.

P.S. По идее использование JavaScript тоже нежелательно.

Для меня проще нажать Control и покрутить колесико.
Не пеняйте на зеркало. Не можете сделать, не понимаете как и сделать - идите учиться или выбирайте другую профессию.
А самые умные, б@#$%ь, идут грузить чугуний!

Нормальный ведь вопрос, предполагающий нормальный ответ.

Извините, но вы только что сказали: я знаю как это сделать, НО НИКОМУ НЕ СКАЖУ.

Ну так давайте - рассказывайте, показывайте.
Нашел у Вас три вопроса, даю три ответа:

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

И еще:
>Извините, но вы только что сказали: я знаю как это сделать, НО НИКОМУ НЕ СКАЖУ.
Я этого не говорил, можете перечитать мои слова.

Материалов в сети - уйма, есть ответы на все вопросы. Найти их помогают поисковые системы.
Вы прям сыщик :)
Слава великому Dodj, он мне открыл существование поисковых машин.
И считаете, смотрю, тоже неплохо.

Теперь серьезно.

Основной вопрос был вот этот: "Покажите хоть один сайт, который нормально бы смотрелся в популярных браузерах при таком разбросе внешних параметров".

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

По ссылке вы привели пример хорошей верстки. Ничего больше.

Вот моя точка зрения. У меня на 27" мониторе документ по вашей ссылке занимает 27% ширины экрана при настройках по-умолчанию в IE/FireFox.

Откройте его же на 17" (очевидно что разрешение будет другим, и физический размер монитора и пикселей будет другим). Вы хотите сказать, что он также будет занимать 27% ширины экрана и размер шрифта будет такой же как у меня на экране? Я не про логический размер в пунктах, а про тот, который я реально вижу на экране своего монитора? Только в случае, если это будут одни и те же физические пропорции мне не нужно будет подвигаться/отодвигаться от монитора или менять масштаб страницы или размер шрифта.

Теперь понятно о чем я изначально говорил?

Сам принцип рендеринга контента в окне браузера не позволяет это сделать нормально. Для этого существуют Flash, Silverlight и т.п. плагины, которые справляются с масштабированием гораздо лучше.

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

То, что написано в статье о масштабировании информации невозможно нормально реализовать при помощи HTML+CSS.

Как говориться, в споре истина не рождается, но и не умирает. В результате каждый все равно остается при своем мнении.

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

Так что правы вы, правы. Ушел Гуглить

P.S.
1. Холивар окончен. Хотелось бы общаться с людьми, которые умеют понимать смысл сказанного, а не тупо редиректить в Гугл.

2. Вообще понятие "удобно" субъективно по своей сути. То, что для меня размер шрифта нормальный, для кого-то он может быть слишком крупным/мелким.
Я не приводил ссылок. И перестаньте делать вид что Вы читаете мысли. Получается х:%№;:во.
Извините, перепутал ник.
А где колесико на тачпаде ноута?
Обычно крайняя правая часть точпада
А зачем? Я должен читать, а не вертеть колеса.
а зачем? В ресторане тоже можно самому ходить на кухню за тарелками, но смысл?
Не все это умеют и не во всех браузерах это работает, увы.
Сложно. А до того, как начала активно юзать интернет, вообще о Ctrl +, роликах и прочем не слышала. И если мне не нравится сайт, верстка, дизайн, расцветка в том числе, я просто уйду, особо не напрягаясь. Потому что сейчас не 98-й год и у любого портала конкурентов масса.
Спасибо за перевод! Только бы знак процента слитно с циферкой написать, а то глаз режет.
Знак процента с циферкой в таких случаях пишется раздельно, перестраивайте глаза. :)
Всё (или почти всё) о пробеле
Цифры, числа и числительные

Из авторитетов могу сослаться на «Справочник издателя и автора» Мильчина — Чельцовой.
из первой ссылки:
Нужно учесть, что по поводу отбивки знаков процента и валют в среде типографов нет полностью устоявшегося правила, так что набор знака процента и символов валют вплотную к числу не является ошибкой, если такое употребление проводится единообразно на всём сайте. Однако, мы считаем, что использование пробела в данном случае улучшает читаемость текста.


Так что оба правы :)
Где вы раньше были? Я уже один глаз перестроил! Что же терь делать? =))
так и оставьте, будете то одним то другим смотреть
о какой прокрутке идет речь?
Если о горизонтальной, то "аффтар убей себя ап стену"!
а если о вертикальной - то могу сказать, что нигде не встречал рекомендаций о том, что ее не должно быть.
О вертикальной. Бытовало в своё время такое убеждение, что максимум информации должен размещаться «над сгибом», то есть на первом экране, до пролистывания вниз.
Было такое действительно. Почему-то считали что пользователю легче глаза сломать чем скролл крутить. Но скорее всего дело было в том что скролов на мышках почти не было, и тянуть полосу прокрутки было людям влом
Ну, пожалуй, не максимум, но что-то действительно способное заинтересовать должно быть вверху. Ну и флеш, на мой взляд, растягтвать не стоит.
Я тоже считаю, что если есть возможность, то стоит приложить все усилия, но избавить главную страницу от вертикальной прокрутки. Хотя бы главную... Хотя бы на 1280x1024...
Лучше эти усилия приложить к внимательному отношению к текстам, потому что отсутствие прокрутки не спасет некачественные тексты(чит. типографику) :-)
Самое главное - если есть текст, который не вмещается на основной экран - пользователь должен знать о его существовании. То есть, если на экране - сплошной блок текста, явно уходящий вниз - это нормально. но если посреди экрана абзац, а в нижней части - чистое пространство, подавляющему большинству пользователей и не придёт в голову задействовать прокрутку, т.к. такая страничка выглядит завершённой.
Посему, если вёрстка предполагает разделение текста на куски, между которыми предполагается наличие свободного пространства - неплохо бы постараться проследить за тем, чтобы при смене разрешения разрыв между блоками текста не пришёлся на нижний край страницы. Иначе весь текст за разрывом останется непрочитанным.
То же самое относится к ситуациям, когда веб-страница в верхней части содержит большую картинку(по вертикали равную высоте экрана), а под ней текст. Чаще всего текст этот остаётся непрочитанным, так как страница выглядит завершённой, большинству пользователей и в голову не приходит, что её нужно скроллить.
Ну как же, некогда распространённое мнение, что страница сайта не должна занимать более, чем один экран – то есть не должно быть вертикальной прокрутки :)
Кстати, в этом смысле мне кажется весьма комичной новая тенденция фигачить красочную шапку на две трети экрана по высоте. O tempora, o mores! :)
Помнится, 4-5 лет назад за это корили сами-знаете-кого – и правда, приходилось на главной странице проматывать огромные баннеры :)
Горизонтальная прокрутка имеет место быть, но только очень осторожно надо её использовать.
К примеру: http://www.td-promo.ru/training/, http://www.bluevertigo.com.ar/bluevertig…
Ну это так... в плане исключений.
"текст картинками" такое же редчайшее явление, что вряд ли его стоило упоминать в одном из пяти пунктов данной статьи...
Вообще, даже если неопытный пользователь захочет так сделать6 то ему гораздо больше придется заморочаться. а неопытные сайтомэйкеры как правило идут по пути "наименьшего сопротивления"
Нуууу, какое же редчайшее. Пункты меню в виде картинок — сплошь и рядом. Как минимум.

Студия Actis, например, входит в десятку студий Рунета.
ну не знаю... у них это имеет практическое назначение...
Основная текстовка у них все же текстом...
это все проделки НЛО)))
Декодер нам поможет. :)
НЛО прилетело и опубликовало эту надпись здесь
Речь как раз о том, что нет в этом никакого практического значения, и быть не может. Я этот текст ни увеличить, ни скопировать не могу. Просто надо дизайн делать нормальный.
Ну все таки я думаю, что иногда не стоит ограничивать полет творческой мысли дизайнера рамками технической неосуществимости.
В нашем случае практическое значение именно в том, что если бы там был текст, то при увеличении его сайт выглядел бы ужасно...
А копировать тот текст вам вряд ли понадобиться;)
Редчайшее явление?
Увы, нет. Сплошь и рядом - то меню картинкой, то контактные данные, то заголовки, то информация.
Частенько читаешь описание, допустим, товара на сайте производителя - заинтересуешься, думаешь поискать его в инет-магазинах, купить собираешься - но пытаешься скопировать название, чтоб поискать - и оп! - оказывается, что единственные места в описании, где его 15-символьное название со сложными аббревиатурами написано полностью - заголовок и пункт меню. И оба выполнены картинкой.
Недавно в поисках одного товара встречала полностью описание, выполненное картинкой. Особенно удручает на официальных сайтах.
Впрочем, это лучше, чем когда описаний товаров как таковых на сайте нет вообще - присутствует только доступная для скачивания ПДФ-ка весом в пару метров, где среди множества картинок присутствует описание модельной линейки, структурированное только менеджерам фирмы понятным способом. Столкнулась с таким на сайте крупного европейского производителя бытовой техники.
Текст картинками ещё ничего. Есть те, кто всё делает на флеше, да ещё скролл свой, в котором колесо не работает. Вот это — совсем клиника.
Вы, наверное, про промо-сайты? Это нормально в таком случае, на мой взгляд. Разве что требуется канал пошире, чтоб ролики нормально проигрывались.

А вот за не знание того что и где лучше использовать для пользователя мозг форматировать, всё равно не пользуются)
использовать применять
Учтите, что для чтения с экрана слишком высокий контраст тоже нехорош (#000 на фоне #fff, например), потому что текст начинает «моргать». #333 на фоне #fff будет в самый раз.

Спорное, по-моему, утверждение. У меня ничего не "моргает". Зачем осветлять текст, пусть даже ненамного?
Не знаю, это вопрос к автору. Возможно, имеются в виду ЭЛТ-мониторы. Честно говоря, пока не сталкивался с недостатками слишком большого контраста — разве что на мелком кегле шрифта…
Насчет ЭЛТ. Как раз только что прочитал статью в журнале "Радио", где автор предлагает обклеивать старинные 14-дюймовые мониторы тонировочной пленкой (для автомобилей), чтобы они не мерцали и за ними можно было работать. И вообще, весь журнал на тему "голь на выдумку хитра". Задумываешься... чем живет страна, пока на хабре рассуждают о зарплатах в $2k и миллионных стартапах.

Сорри за суровый офтопик, это так, ночные размышления.
Ну дык экономический рост, куда-ж от него денештья.
дык на хабре рассуждают, а страна живёт :)
Журнал Радио - это такая своеобразная кунсткамера. Вы помните почему его называли "Коневодством"? :)
Изредка в мои руки попадает свежий номер, и с вероятностью 80% я там нахожу схему плавного включения лампочек. Одну и ту же. За разными подписями. Впервые я её увидел в том самом Радио более 25 лет назад. Либо у них совсем нет редактора, либо редактор страдает ретроградной амнезией в тяжёлой форме.
Мне кажется, что от использования меньшей контрастности смотреть чуть легче.

А ещё светлый цвет на чёрном лучше воспринимается в темной обстановке, но это уже другая тема.
Мы хотим иметь возможность [...] выделять текст курсором мышки при чтении.

Спасибо, доктор!
Значит я не один такой? :)
Знаете, при этом все сами пользователи часто не понимают чего хотят. Я у себя в блоге специально сделал по-умолчанию крупный легко читаемый шрифт и большое межстрочное расстояние. Первые недели после запуска меня многие просили уменьшить шрифт, мол слишком большой... хотя шрифт в самый раз, просто на большинстве сайтом шрифт мелкий и пользователи к этому привыкли.
Умом понимаю, что хорошо, глаза немного в шоке ;) Действительно, привычка.
Еще не поменяли размер шрифта?
Тогда мы идем к вам.
Вы не изменили размер шрифта с тех пор? Если нет, то и не меняйте - все смотрится отлично и читается неплохо. Только отступ текста от сайдбара мал.

UPD. Понял вашу проблему. У вас увесистые посты, поэтому страница своей длиной начинает напоминать туалетную бумагу.
Он в итоге какого размера относительно умолчательного размера в браузере? 100 %?
В вашем блоге основной текст смотрится болдом (видимо из-за семейства «Cambria»), что вероятно и вызвало нарекания посетителей. В обычных семействах такой кегль смотрится значительно лучше.
Еще бы отступы после параграфов, совсем бы хорошо было.
НЛО прилетело и опубликовало эту надпись здесь
это зависит ещё и от зрения читающего. я - человек с хорошим зрением - предпочитаю шрифт немного меньше стандартного размера: мне он удобнее. крупный шрифт не люблю, т.к. при нём на строку вмещается меньше слов и приходится чаще "возврат глазами" делать.
плюс есть ещё такой чисто психологический момент: крупный шрифт часто подсознательно воспринимается как "детский", "несерьёзный".
ну и - опять, видимо, мой личный баг: такое ощущение, что у меня "фокус зрения" маленький. буква, по вертикали маленькая, читается проще, как бы "целиком". буква, по вертикали большая - сперва воспринимается её средняя часть, потом взгляд разглядывает верхнюю и нижнюю, из-за чего скорость чтения падает.
возможно, имеет значение ещё и то, что я вообще быстрочитающий человек.
Зашел, посмотрел. Сложилось ощущение, что вы считаете меня слепой малограмотной блондинкой. Закрыл сайт.

Всё дело в том, что удобство основывается на привычках. Например привычный, наиболее рспространенный размер шрифта - он мне наиболее удобен. Потому что именно исходя из него я выбрал монитор, разрешение экрана, настроил яркость контрастность и прочее. Чтобы комфортно прочитать ваш блог, я должен: отодвинуться на кресле на метра назад или уменьшить пропорции страницы в браузере или изменить размер шрифта (Но как я тогда прочитаю ссылки справа, когда захочу перейти на другой пост?).
"все сами пользователи часто не понимают чего хотят" - во первых не все, во вторых - многие знают но не могут сформулировать, в третьих - именно потому что некоторые не знают, существуют умные дизайнеры и разработчики.
Я хоть и люблю крупный шрифт, но у вас явно перебор. Пора писать статью "не заставляйте нас уменьшать размер шрифта".
Но хуже всего то что шрифт справа в навигации _намного_ меньше шрифта статьи. Глаз физически не может читать и то и другое, приходится перефокусироваться каждый раз с текста на навигацию, а это очень дискомфортно. Кстати, очень распространенная ошибка.
От себя еще могу сказать, что нужно быть осторожным с оригинальными шрифтами. Всевозможные Comic Sans MS, Old Engish и т.д. нужно использовать очень осторожно, а лучше не использовать вовсе. Да и Arial мне лично нравится больше, чем Times New Roman.
verdana, tahoma, arial - в интернете уже стандарт на 90% сайтов
Надо исходить не из того нравится ли шрифт, а какую функцию он должен выполнять. С засечками, для лучшего чтения, или без? Нормальному дизайнеру один шрифт не может нравится больше другого, для каждого есть свое предназначение.
А разве есть исследования, доказывающие, что с экрана шрифт с засечками лучше читается? Мне субъективно кажется, что наоборот.
Есть :-)
Текст с засечками образует границы строки, снизу и сверху букв, соотв. взгляд цепляется и читать легче. А вообще можете поискать в книгах по типографике, там это объяснено более детально.
Это в книгах. В печатной продукции, в общем. А на экране — я далеко не уверен, что засечки добавляют простоты чтения. На экране типографика низкого разрешения.
От себя добавлю, что, по возможности, цвет шрифта нужно делать черным. Вдруг кто-то захочет напечатать, а лазерный принтер выдаст светлый нечитаемый текст.
Нет, для этого надо делать отдельный CSS для версии для печати. :)
Часто хочется выделить кусок текста прямо со страницы и его распечатать. А делать «версию для печати» вообще везде — перебор.
НЛО прилетело и опубликовало эту надпись здесь
Да, отличные советы, но вот текст оригинала написан шрифтом Georgia, который меня изрядно раздражает в длинных текстах.
"2. текст цвета «Silver» на белом фоне" - а заголовок - "4. Ясный цветовой контраст" почти сильвером по белому и написан :-)
У автора было «Snow white» — я посмотрел сейчас, это цвет #FFFAFA. На нём и правда не очень контрастно. :)
Да лучше обычные заголовки использовать, да и всё. Зелёненькие которые )))
Сужу конечно по себе, но по-моему автор всё правильно сказал. И все мои предпочтения совпали, даже не знаю что добавить. Разве, что была бы карма, поставил бы плюс. Молодец Heath!
Тонкий намек, хоть и откровенный)))
Намёк :) но статья действительно хорошая, и плюс бы автору с удовольствием поставил.
Вообще хотел бы написать сам пару статей про дизайн и про браузеры, хотя это скорей в блог Веб-разработка, ну это так, "пользуясь случаем".
Я бы сказал, что речь не про стандарт, а про рекомендации.
Бывают случаи, когда невозможно на странице некоторые текстовые блоки резиново сделать, например.
Да и если сильно увеличить размер шрифта, страница плыть начинает, с этим ничего не поделаешь. Как и с тем, что в Опере можно просто масштаб всей страницы менять.
В общем верно все, что в статье написано. Но есть исключения. Именно исключения)
Как утомили эти рекомендатели, которые советуют делать колонку текста не на весь экран. Люди тупо следуют советам и имеет отвратнейшие 400px колонки.

Я умею делать себе удобно, не надо думать за меня.
НЛО прилетело и опубликовало эту надпись здесь
Да, удобно. Если мне надо прочитать 2 предложения - я прочитаю и так. А если собрался читать много-много, то сделаю удобный для себя размер.

Те же, кто создают 400px колонки, видимо, никогда не пробовали свой сайт на мониторе шириной 1900px с шрифтом размером 24.
НЛО прилетело и опубликовало эту надпись здесь
Да, у него приемлемо.

А слишком узкие колонки для меня — больная тема, у меня один монитор wide и на куче сайтов всё плохо с вёрсткой, а второй монитор развёрнут в портрет и тоже всё не слава богу.
Поэтому в идеале ширину колонки нужно задавать в em'ах — желательно, чтобы она была не слишком длинной и не слишком короткой.
Да, тех кто в em'ах я ещё понимаю, это хоть какой-то компромисс. Но всё равно насилие.
Ещё точнее, нужно задавать min-width и max-width в em'ах, а ширину в процентах, чтобы колонка резинилась. Впрочем, это от дизайна зависит.

Почему «насилие»? Как раз не насилие — пользователь может иметь любой размер шрифта, и всё равно колонка будет приятного размера для чтения
Я распечатаю этот текст и раздам его коллегам, которые любят делать так, как им нравится, а не так, как удобно клиентам.
Спасибо огромное за этот пост!
НЛО прилетело и опубликовало эту надпись здесь
Окститесь, это перевод. :)
НЛО прилетело и опубликовало эту надпись здесь
"...стопроцентно_читабельных_сайтов" - вот вроде правильно неразрывные пробелы поставлены в заголовке, а из-за этого в лентах с комментариями колонка слой с названиями тем сдвинулся, нехорошо.
Если критично, могу исправить.
Да нет, просто маленькие недочеты верстки сайта. Такое наоборот оставлять надо - быть может, скорее исправят.
А также они не удаляются для названия письма-уведомления, получается  
>Учтите, что для чтения с экрана слишком высокий контраст тоже нехорош
>(#000 на фоне #fff, например), потому что текст начинает «моргать».
Это проблема производителей мониторов.
Черный текст на белом фоне — самое нормальное решение.
Хотя "#333 на фоне #fff" тоже будет неплохо.
извините, а текст в картинках это как?
имеется ввиду использование картинок внутри текстового блока или текстовый блок представляет собой картинку?
Текстовый блок представляет собой картинку.
такое редко встретишь.

не хватает только здесь одного - важности картинки рядом с текстом. чаще посетитель смотрит сначала на картинку, после переводя взгляд на заголовок и уж потом на текст. конечно, картинка должна быть грамотно подобрана и заголовок написан соответствующим образом.
Совершенно нередко, я выше кидал ссылку на тот же Actis.ru.
Отличная статья. Спасибо большое ;)
Пожалуйста, я только перевёл. :)
Зарегистрируйтесь на Хабре, чтобы оставить комментарий

Публикации

Истории