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

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

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

Например в полиграфии это давно практикуется.
Хороший дизайнер знает, на какой бумаге будет печататься, что можно дать полноцветом, что дать шелкухой, где возможно применить ультра-лак, где дать конгрев, где высечку. И у всех этих возможностей есть свои ограничения.
НЛО прилетело и опубликовало эту надпись здесь
Уважаемый, вы знаете много хороших веб-дизайнеров, которые не знают что нужно учесть в дизайне? Да и эффектность - вещь спорная.

К тому же, ЭТО - работа не только дизайнера. Это работа ПМ, правильное формулирование требований к проекту и работа с заказчиком.
Увы, но да. Много.
Именно по причине того, что раз за разом приходится объяснять одно и тоже и побудило написать эту статью.
Это памятка, которой пользуюсь в работе я сам и требую от наших дизайнеров.

Считай, что это «правильное формулирование требований к проекту» по-умолчанию.
Госты вообще подрывают все представление о дизайне. Госты убивают свободу мысли
Госты?
Я не думаю, что кому-то вредят стандарты. Впрочем, любые правила содержат в себе исключения. По определению.

Просто всё должно делатся осознанно.
Свобода мысли иногда убивает пользователей. Обычно тогда, когда дизайнер делает не ради них, а ради дизайна.
Именно по этой причине я и писал эту статью, чтобы дизайнер учитывал удобства поль зователя, доступность информации и упрощал труд разработчикам ))
Хорошая статья)
А реки текут и лошади кушают овес
теперь дело за заметкой "Памятка админу сайтов"
Хорошо собрал, верно. Я предпочитаю лично
а) ограничить минимальное сжатие и максимальное растяжение
б) задавать в меню рост шрифта в пикселях, чтобы не расползалось
в) не масштабировать шрифты т.к. есть увеличение всей страницы (слава богу в IE додумались заменить им дурное увеличение шрифта)
г) плевать на w3c, пользоваться HTML 3.2 по большей части и просто проверять, чтобы везде работало идентично. Да, конечно, если у меня сайт прошёл валидатор w3c, то я могу смело сказать пользователю «если у тебя не работает, то у тебя плохой браузер, ты должен его поменять». Но я так не скажу. Я сделаю, чтобы работало и у тех и у этих, а внизу подпишу, что не рекомендую IE в качестве полноценного браузера и предлагаю его сменить на Opera или FireFox.

Надеюсь, что SVG и png с альфаканолом войдут в обиход. Флэш — хорошо, но поиск в нём нормально не провести в отличии от SVG, являющегося XML-совместимым.
п.с.
д) создавать отдельные CSS таблицы для принтера и мобилок, выносить почти всё оформление в CSS (это помогает легко менять и исправлять вид страницы, а так же менять вид в зависимости от девайса).
причем тут работа дизайнера? это работа верстальщика..
По поводу версии для печати не могу ничего сказать, но версию для кпк и смартфонов ИМХО дизайнер должен прорисовывать, а верстальщик уже на основе макета его верстать собственна
Безусловно.
"Раньше мы использовали величину в 760px, теперь используем 1000px."
Смело. Но спорно, имхо.

В защиту своего мнения:

1. 1024x768 585 650 47,92%
2. 1280x1024 196 199 16,05%
3. 800x600 114 011 9,33%
4. 1280x800 106 924 8,75%
НЛО прилетело и опубликовало эту надпись здесь
смотря кто ца
люди живут и в регионах
Мы сами живем в регионе ))
кстати, 800 Х 600 вполне адекватно, если пользователь открывает боковую панель в любом браузере.
Я думал над этим. Серьезно.
Признаюсь, что я, как дизайнер, всё равно больше склоняюсь к поддержки 1000px )))

Хотя справедливо ниже заметили, что это зависит от задач сайта.
Для новостного или корпоративного сайта поддержка 800*600 весьма оправдана. Но, например, на промо-сайте она лишняя.
Давным-давно натыкался на статью, в которой достаточно грамотно объясняется значение в 990 пикселей. Под основные браузеры, под основные боковые панели и вертикальные прокрутки. К сожалению, статью сейчас найти не удалось.
Основное разрешение сейчас 1024 на 768.
Угу. Именно от этого я отталкивался, подбирая размер.
+500
Видел несколько 15" ЛСД мониторов с нативным расширением 1024x768 настроенных на 800x600. Общался с пользователями. Говорят, что так крупнее шрифты. На 1024x768 переходить не хотят. Так что не только в физических параметрах мониторов дело.
Гм... А ведь и правда, есть такое дело.
это в основном США, канада и европа.
Кстати, не вижу противоречия.
Я имел в виду, что уже весьма неперспективно использовать максимальное сжатие в 760px — т.е. поддержку мониторов, с разрешением 800х600 — слишком жесткие ограничения на оформление.

Сейчас более актуально сделать дополнительное представление сайта (благодаря div-ной верстке и css) для PDA и мобильных устройств.
На самом деле, при выборе базового разрешения нужно ориентироваться на тех, для кого делается сайт.
Например, если проект представляет собой бухгалтерскую документацию, нужно ожидать того, что 800х600 будет достаточно частым явлением.
Если делается промо-сайт модного ноутбука на 800х600 можно забить.
Тоже логично.
<a href=http://www.liveinternet.ru/stat/ru/resolutions.html?period=month&slice=ru&id=3&show=%D0%BF%D0%B5%D1%80%D0%B5%D1%81%D1%82%D1%80%D0%BE%D0%B8%D1%82%D1%8C+%D0%B3%D1%80%D0%B0%D1%84%D0%B8%D0%BA&per_page=50&report=resolutions.html%3Fslice%3Dru%3Bperiod%3Dmonth>Статистика Liveinternet по сайтам Рунета
1024*768 — 42.9%
1280*1024 — 30.2%
1280*800 — 8.9%
1152*864 — 4.0%
800*600 — 4.0%

При этом ещё год назад у 800x600 было 7%, а 2 года назад - -12%. Так что уже через год станет процента 2 и можно будет совсем пренебречь (в конце концов наличие горизонтального скроллинга хоть и неприятно, но не слишком препятсвует отображению и просмотру сайта).

Хотя всё равно не понял, почему для оптимизиции под ширину экрана 800 пикселей выбран размер в 960 (-40 пикселей или 5%), а под 1024 — 1000 (-24 пикселя или 2.3%). Хотя неважно, не буду занудствовать сверх меры :)
У меня например разрешение экрана 1280*1024, а размер окна браузера иногда выставлен (в WebDeveloper плагине) на 1024*768.
Нужно способствывать прогрессу и расчитывать min на 1024x768, но вообще примером хорошего тона в дизайне+верстке я счтитаю сайты, которые смотрятся при любых разрешениях, на любых браузерах.
Собственно я тоже стремлюсь к этому.
Просто, как я и оговаривался — минимальное и максимальное разрешение напрямую зависит от задач.

Думаю, что надо дополнить этим статью.
поддерживаю 800х600 будет жить для сайтов до 3% после уменьшения может не учитываться, но мобильные устройства еще могут изменить ход мыслей
На счет альтернативного представления информации для мобильных устройств я ответил где-то в комментариях.
Хорошая статья, и вправду. Интересно, получается ли на практике соблюдать 100% этих правил? Признаться по секрету, в моей работе не соблюдается и 10%. Не совсем в тему — сегодня мне отдали одну книгу из редактуры/корректуры, так вот, там редакторы/корректоры требуют 100% соблюдения ГОСТов. Скажу вам, такая тоска зеленая получается... Совдеповское оформление книги, кислое и скучное.
Чаще всего получается.
В любом случае, нарушение правил и исключения делаются осознанно.
Отличная статья. Вот только одно маленькое замечание.
Ссылки в тексте всегда подчеркнуты и должны отличаться по цвету от основного текста.
А на сайте дизайн-бюро «make» такое происходит только при наведении.

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

Ааа... :)

Всяческих вам удач.
Спасиб )
Нашёл, куда влепить коммент :-)
Всяческих вам удач.

Мои присоединения :-)
Мэйк — супермолодцы, на каждую работу смотреть приятно.
Я сейчас разглядывал их жж. Подбор персонажа просто в восторг привел :)
Приятно слышать.
Спасибо )
класс!!
Не перехвали )
Да, тоже с удовольствием потолкался по Вашему портфолио.
И сайтег так, с юморком сделан (я о разделе "Вакансии").
Жаль, что некоторые работы нельзя посмотреть вживую, ибо фирмы-заказчики походу приказали долго жить.
Но вот лично у меня создалось впечатление (повторюсь, это исключительно ИМХО, никого не хочу обидеть), что кое-что в нем - в некотором роде фейк? Я про логотипы и иконки неких программ для неких мифических контор :) (я никому не скажу, честно-честно)
Часто сайты нельзя посмотреть в живую по причине того, что были ухайдоханы заказчиком в процессе наполнения содержанием и эксплуатации.

Фейка в нем нет. Все размещенные работы были заказаны, были утверждены и были оплачены. Вот какая-то часть информации — и правда фейк. Особенно в ряде ранних проектов, которые выполнялись на фрилансерской основе.
А вот это, да фейк ))) и то, частичный.
Вопросов больше не имею :)
Удачи, креатива и клиентов побогаче!
)))) Спасибо )
Просто... Просто...
Уважаемый, что за косноязычие?
Сайт- лицо студии. И наскоро его не делают. Это как банк в сарае. Грустно... а вроде соседи, но такой своеобразный подход к презентации бизнеса.
Давно хотел научиться писать мелким серым шрифтом на Хабре. Пробовал small, sub, sup, span со стилями... Не получается...

Оказалось: <font color="GRAY" size="1"> Какой кошмар...
Хорошая статья, только вот готов поспорить с минимальной шириной сайта в 1000 пикселей... Боюсь, расчитывать на разрешение 800х600 всё ещё актуально, поскольку довольно часто встречаю такое разрешение на мониторах пользователей, да даже, порой, и в интернет кафе.
Всё ещё :))

Актуальность никуда не денется. У меня на сабноуте 800х480, а он используется именно для почты и серфинга :)
А для 800х600 автор приготовит альтернативный ЦСС ... вот только он вам его не отдаста - не положено - у вас ведь нормальная операционная система и агент. Вот будь вы ПДА ... :–))
статья хорошая и полезная... Ну, и реклама конторы, такая совсем ненавязчивая :-)
Если и есть толика рекламы, то скорее всего косвенная, скорее упоминание о источнике.
Рекламой их конторы уже я занялся на добровольных началах :)
Не трогайте посмотреть профиль iderins :)
В «конторах» с успехом обходятся без таких глупостей как там всякие сетки ;)
Черный юмор руководителя компании? )))
Ну да, ну да. Не нравится мне слово это «кониора», просто бесит 8).
спасибо, статья очень полезная
И вам спасибо. Значит не зря писал.
Сам такой хотел написать, а еще верстальщикам :)
Пара вопросов.
Не понял что имеется ввиду под "табами"?

И что такое "выноска"?
то что вы видите в хабре наверху:
Все +54 / Коллективные +41 / Персональные +13
это и есть табы. ну или то что мы видим во многих десктопных приложениях. например в браузере с закладками
«tab» здесь переводится как «вкладка».
у меня такое ощущение, что статья абсолютно бесполезная ( Да простят меня все (хотя вряд ли) Но что уж делать таково моё мнение...
Вполне возможно что для опытного дизайнера, либо человека совсем из другой сферы, статья полезной не будет.

Статья написана как «памятка дизайнерам нашего бюро».
Вы весь мусор планируете из загашников вытряхивать сюда? ;)
Для НЕОПЫТНОГО дизайнера толку от Вашей статьи будет немного.
Нужно глубже копать.
Да, и еще заметил подмену понятий - если статья для дизайнера (графического), то ему знать такие параметры как "«Сжатие-растяжение»", "max", "Реакция на пользователя" не нужна. Это - уровень прототипа и работа ПМ+кодера(+технического дизайнера, если такой есть).
Статья размещена в рубрике веб-дизайн и адресована дизайнерам сайтов.
Плюс статья не адресована дизайнерам с каким-то опредкленным опытом, большим или малым.

Я просто сформулировал ряд параметров, которые дизайнер должен планировать и учитывать в ходе разработки.
Содержимое не соответствует названию.
Если для неопытных ДИЗАЙНЕРОВ, то тогда еще напишите

1. То чо планируется быть текстом писать ТОЛЬКО стандартными шрифтами
2. Стараться избегать сложных форм дизайна, которые сложно реализовать на практике.
3. Т.д. и т.п.
Увы. Значит вы невнимательно читали.
НЛО прилетело и опубликовало эту надпись здесь
Там написано «в тексте».
Т.е. для навигации, либо облака тегов, либо заголовках-ссылках вовсе не обязательно. В некоторых случаях их применение может только создать визуальный шум.
НЛО прилетело и опубликовало эту надпись здесь
Гм... Вас же никто не обязывает поступать так, как написано в статье.
Очень многие поступают полностью иначе.

Я лишь делился своим виденьем.
НЛО прилетело и опубликовало эту надпись здесь
Да? Перечитайте вступление ) это буквально абзац-два.

Я не претендовал ни на истину ни на панацею.
Просто я сформулировал и записал то, что мне приходится объяснять и использовать самому почти каждый день.
Глупости пишете.
НЛО прилетело и опубликовало эту надпись здесь
А вести себя корректно? Хотя, судя по карме, мы этого не умеете.

Ссылка в тексте должна выглядеть именно как ссылка. Потому что в противном случае:
1. Можно случайно ткнуть в текст (например, выделяя его) и попасть в замаскированную ссылку.
2. Часто нет времени или желания читать текст полностью, достаточно прочитать "по диагонали" и при этом найти в нем ссылку, которая вас интересует.
По-моему, этих пунктов предостаточно.
НЛО прилетело и опубликовало эту надпись здесь
Дело в том, что если выделить ссылку нестандартным способом, то пользователь может или не сразу, или вообще не догадаться что это ссылка.
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
Странно. А у меня Опера-9+ и ИЕ-6
Может быть разные стили или настройки?
Впрочем, я не уверен, что это принципиально.
Я не понимаю о чем вы. На google.ru все ссылки подчеркнуты и раскрашены в традиционный синий цвет.
НЛО прилетело и опубликовало эту надпись здесь
Я думаю, что вам обоим не о чем спорить.
Нужно знать правила, чтобы осознанно и целесообразно от них отступать.
Дизайн-бюро «Make» надо в первую очередь нанять учителя русского языка. Не в обиду, просто на сайте на самом деле много ошибок.
А статья полезная, спасибо.
И то хорошо )
Есть такое дело.
Благо это не на долго )
нет ничего более постоянного чем временное :)
Спасибо за то, что обратили внимание.
Не смотря, на то, что текущая версия сайта временная, мы провели корректуру текстов.
Добавила в букмарки... Спасибо, полезная памятка...
Спасибо. Приятно слышать )
Редко приходится читать толковый текст. Хорошая статья.
Гм... Спасибо )
Приятно слышать.
Код Украины +380. Соответственно, Симферополь +380 652, мобильный +380 50.
Если по международному стандарту — то вы бесспорно правы.
Видимо общая инерция в использовании.

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

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

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

Спасибо, отличная статья.
Возможно, что нужно этот материал нужно подсунуть своим дизайнерам.
Или сразу брать такого дизайнера, который это учитывает.
Тут все сложнее — дизайнер "взял" нас на разработку, да и сам находится в Англии.
спасибо, полезная информация, хотя некоторые пункты типа 100 px я бы назвал спорными.
Да, я сам заявил о 1000 поспешно.
Конечно ширина min/max завист напрямую от задач сайта.

Вскоре я дополню статью.
Раздать всем веб-дизайнерам, и огромная армия верстальщиков скажет вам огромнейшее спасибо!
Подобного уже навалом...

"Акциндентный — шрифт для заголовков" - Чего??? Акцидентные шрифты в нете?
Ничего нового не нашел. Таких попыток "собрать воедино" было уже не один десяток.
Но , потыкав наугад проекты студии, был разочарован. Ожидал большего от громких заявлений.
P.S. Пишите памятку для верстальщика, у Ваших проектов проблемы с валидаций CSS/HTML
Я конечно понимаю что сайт-заглушка, но сделайте в всплывающем окошке (или как оно называется) кнопку «закрыть», а то я с минуту тупил как же его убрать. А текстик отличный, дополню, распечатаю, и повешу на стену в назидание некоторым…
А чем дополните?
Поделитесь ))) может я тоже дополню.
Спасибо, отличная работа. Очень пригодиться в жизни как дизайнерам, так и менеджерам.
Рад, что пригодилась.
присоединяюсь :)
Значит всё не зря ) Спасибо.
вопрос по поводу шрифтов. В style прописывать возможность его увиличения, или делать чтобы шрифт у всех отображался одинаково?
Да. В style есть возможность указывать масштабируемость шрифта, в процентах и em. И безусловно нужно добиваться того, чтобы на всех броузерах отображение сайта происходило одинаковым.
То есть вы считаете, пользователь должен името возможность увеличения шрифта в браузере?
Да, я так считаю. Более того, сами броузеры эту возможность предоставляют.

Просто, когда у тебя монитор 21 дюйм (1600px+), а ты открываешь сайт? шириной 800px и с размером шрифта в 11px, остро понимаешь, зачем надо масштабироване шрифта.

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

1. Как работают пункты на странице (font-size: 10pt)
2. от чего считается размер шрифта при использовании em? ИМХО не всегда от родительского элемента, потому что при верстке все это как-то скачет (( хотя, допускаю, что я был невнимателен
3. Как корректно (при использовании em) задать размер БАЗОВОГО шрифта? в пикселях или пунктах?

а еще об ограниченной "резиновости": каким образом это реализуется? в спецификации ЦСС прописаны min- и maxwidth, но ИЕ их игнорит совсем полностью? интересуют рабочие методы )))

спасибо всем за внимание )
Если речь идет о самой верстке, то

в structure.css
div.mainBodyContainer{
width: 100%;
max-width: 1500px;
min-width: 1000px;
text-align : center;
margin: 0em auto 0em auto;
}


в ie.css
div.mainBodyContainer{
width:expression(document.body.clientWidth < 1002? "1000px" : document.body.clientWidth > 1502? "1500px" : 100%");
}


Но памятка касалась в первую очередь проектирования дизайна сайта, а не реализации его в верстке.
т.е. если ширина больше 1502 или меньше 1002, мы заставляем ИЕ считать ее как 100% ?
нееет )))

если ширина меньше 1002, то ширина равняется 1000
если ширина больше 1502, то ширина равняется 1502

а если она в промежутке от 1002 до 1502, то она равна 100% )
автору респект
  1. Мы не используем на страницах пункты.

  2. В пропорциях условного «Обычного» размера шрифта в броузере и системе. При чем, надо заметить, что em — это абстрактное значение, которое можно трактовать, как «размер символа в строке».
  3. Не в пикселях и не в пунктах ))) мы задаём в % от базового размера.
т.е. все относительные шрифтовые единицы считаются от "обычного"?
и как нам задать, чему равен этот обычный для нашего сайта? ну или хотя бы узнать, от чего отталкиваться )

ЗЫ про ширину понял )
у нас стоит, чаще всего
html, body {font:81%;}

При чем, не 80%, а именно 81%, что дает поправку на Оперу.
спасибо )
я попробую
Спасибо за статью!
Приходи, Даня, с пивом к нам в офис. И не такое раскажу.
И вообще: возвращайся. Харе фрилансить, только руку испортишь, и нервную систему посадишь, на недосыпах ))
А что на фрилансах нервная система портиться? ааааа %)
На изготовлении простых и быстрых макетов 23 часа в сутки.
От сюда всегда шея в мыле и «рука портится».
Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.