Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 153
Надо разработать ГОСТы для веб-дизайна, и комиссию, которая будет следить за их соблюдением. :)
Зачем? ))) Пусть каждый поступает, как считает нужным.
Главное их соблюдать в рамках нашего бюро )
Главное их соблюдать в рамках нашего бюро )
Just use W3C, а ИЕ все равно все ГОСТы поймет как гостЫ.
Собственно, а при чем тут вёрстка и ИЕ?
если возник такой вопрос, я правильно понимаю, что при виде "ИЕ" Вы НЕ подумали об Internet Explorer?
Просто статья не планировалась, как «памятка верстальщику» )
Это именно свод правил, которые должен учитывать дизайнер.
Это именно свод правил, которые должен учитывать дизайнер.
ну пусть будет так, только я считаю, что верстальщик должен иметь возможность влиять на дизайнера, так как их полет фантазии часто может привести к совершенно неоправданным сложностям при верстке. А тут без ИЕ уже не обойтись, он все равно все по своему сделает.
Скорее дизайнер, должен иметь представление о верстке.
Как минимум, чтобы учитывать возможности и ограничения в реализации. В идеале, чтобы находить эффектные, но логичные, с точки зрения реализации, решения в дизайне.
Например в полиграфии это давно практикуется.
Хороший дизайнер знает, на какой бумаге будет печататься, что можно дать полноцветом, что дать шелкухой, где возможно применить ультра-лак, где дать конгрев, где высечку. И у всех этих возможностей есть свои ограничения.
Как минимум, чтобы учитывать возможности и ограничения в реализации. В идеале, чтобы находить эффектные, но логичные, с точки зрения реализации, решения в дизайне.
Например в полиграфии это давно практикуется.
Хороший дизайнер знает, на какой бумаге будет печататься, что можно дать полноцветом, что дать шелкухой, где возможно применить ультра-лак, где дать конгрев, где высечку. И у всех этих возможностей есть свои ограничения.
Уважаемый, вы знаете много хороших веб-дизайнеров, которые не знают что нужно учесть в дизайне? Да и эффектность - вещь спорная.
К тому же, ЭТО - работа не только дизайнера. Это работа ПМ, правильное формулирование требований к проекту и работа с заказчиком.
К тому же, ЭТО - работа не только дизайнера. Это работа ПМ, правильное формулирование требований к проекту и работа с заказчиком.
Госты вообще подрывают все представление о дизайне. Госты убивают свободу мысли
Хорошая статья)
А реки текут и лошади кушают овес
теперь дело за заметкой "Памятка админу сайтов"
Хорошо собрал, верно. Я предпочитаю лично
а) ограничить минимальное сжатие и максимальное растяжение
б) задавать в меню рост шрифта в пикселях, чтобы не расползалось
в) не масштабировать шрифты т.к. есть увеличение всей страницы (слава богу в IE додумались заменить им дурное увеличение шрифта)
г) плевать на w3c, пользоваться HTML 3.2 по большей части и просто проверять, чтобы везде работало идентично. Да, конечно, если у меня сайт прошёл валидатор w3c, то я могу смело сказать пользователю «если у тебя не работает, то у тебя плохой браузер, ты должен его поменять». Но я так не скажу. Я сделаю, чтобы работало и у тех и у этих, а внизу подпишу, что не рекомендую IE в качестве полноценного браузера и предлагаю его сменить на Opera или FireFox.
Надеюсь, что SVG и png с альфаканолом войдут в обиход. Флэш — хорошо, но поиск в нём нормально не провести в отличии от SVG, являющегося XML-совместимым.
а) ограничить минимальное сжатие и максимальное растяжение
б) задавать в меню рост шрифта в пикселях, чтобы не расползалось
в) не масштабировать шрифты т.к. есть увеличение всей страницы (слава богу в IE додумались заменить им дурное увеличение шрифта)
г) плевать на w3c, пользоваться HTML 3.2 по большей части и просто проверять, чтобы везде работало идентично. Да, конечно, если у меня сайт прошёл валидатор w3c, то я могу смело сказать пользователю «если у тебя не работает, то у тебя плохой браузер, ты должен его поменять». Но я так не скажу. Я сделаю, чтобы работало и у тех и у этих, а внизу подпишу, что не рекомендую IE в качестве полноценного браузера и предлагаю его сменить на Opera или FireFox.
Надеюсь, что SVG и png с альфаканолом войдут в обиход. Флэш — хорошо, но поиск в нём нормально не провести в отличии от SVG, являющегося XML-совместимым.
п.с.
д) создавать отдельные CSS таблицы для принтера и мобилок, выносить почти всё оформление в CSS (это помогает легко менять и исправлять вид страницы, а так же менять вид в зависимости от девайса).
д) создавать отдельные 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%
Смело. Но спорно, имхо.
В защиту своего мнения:
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. 800х600 - это либо или экран КПК, либо совсем старые 15" ЭЛТ старые мониторы, которые ток на барахолках и в сервисных центрах под запчасти разве что и есть, их давно не продают и срок эксплуатации стремится к нулям. ЛСД даже 15" все идут начиная с 1024, основное разрешение сейчас 1280. Если речь о КПК, то там есть и 320х240, но для них более гуманно создать лайт версию сайта.
смотря кто ца
люди живут и в регионах
люди живут и в регионах
кстати, 800 Х 600 вполне адекватно, если пользователь открывает боковую панель в любом браузере.
Основное разрешение сейчас 1024 на 768.
+500
Видел несколько 15" ЛСД мониторов с нативным расширением 1024x768 настроенных на 800x600. Общался с пользователями. Говорят, что так крупнее шрифты. На 1024x768 переходить не хотят. Так что не только в физических параметрах мониторов дело.
это в основном США, канада и европа.
Кстати, не вижу противоречия.
Я имел в виду, что уже весьма неперспективно использовать максимальное сжатие в 760px — т.е. поддержку мониторов, с разрешением 800х600 — слишком жесткие ограничения на оформление.
Сейчас более актуально сделать дополнительное представление сайта (благодаря div-ной верстке и css) для PDA и мобильных устройств.
Я имел в виду, что уже весьма неперспективно использовать максимальное сжатие в 760px — т.е. поддержку мониторов, с разрешением 800х600 — слишком жесткие ограничения на оформление.
Сейчас более актуально сделать дополнительное представление сайта (благодаря div-ной верстке и css) для PDA и мобильных устройств.
На самом деле, при выборе базового разрешения нужно ориентироваться на тех, для кого делается сайт.
Например, если проект представляет собой бухгалтерскую документацию, нужно ожидать того, что 800х600 будет достаточно частым явлением.
Если делается промо-сайт модного ноутбука на 800х600 можно забить.
Например, если проект представляет собой бухгалтерскую документацию, нужно ожидать того, что 800х600 будет достаточно частым явлением.
Если делается промо-сайт модного ноутбука на 800х600 можно забить.
Статистика 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%). Хотя неважно, не буду занудствовать сверх меры :)
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%). Хотя неважно, не буду занудствовать сверх меры :)
Нужно способствывать прогрессу и расчитывать min на 1024x768, но вообще примером хорошего тона в дизайне+верстке я счтитаю сайты, которые смотрятся при любых разрешениях, на любых браузерах.
поддерживаю 800х600 будет жить для сайтов до 3% после уменьшения может не учитываться, но мобильные устройства еще могут изменить ход мыслей
Хорошая статья, и вправду. Интересно, получается ли на практике соблюдать 100% этих правил? Признаться по секрету, в моей работе не соблюдается и 10%. Не совсем в тему — сегодня мне отдали одну книгу из редактуры/корректуры, так вот, там редакторы/корректоры требуют 100% соблюдения ГОСТов. Скажу вам, такая тоска зеленая получается... Совдеповское оформление книги, кислое и скучное.
Скажу вам по секрету, что на заглушке на нашем сайте осталось жить около месяца ) Просто было сделано два года назад, и весьма наскоро.
Просто, чтобы хоть показать список работ.
Просто, чтобы хоть показать список работ.
Мы работаем над тем, чтобы очень скоро,когда рак на горе свиснет, на этом месте открылся большой и интересный сайт нашего дизайн-бюро.
Ааа... :)
Всяческих вам удач.
Спасиб )
Нашёл, куда влепить коммент :-)
Мои присоединения :-)
Мэйк — супермолодцы, на каждую работу смотреть приятно.
Всяческих вам удач.
Мои присоединения :-)
Мэйк — супермолодцы, на каждую работу смотреть приятно.
Я сейчас разглядывал их жж. Подбор персонажа просто в восторг привел :)
Не перехвали )
Да, тоже с удовольствием потолкался по Вашему портфолио.
И сайтег так, с юморком сделан (я о разделе "Вакансии").
Жаль, что некоторые работы нельзя посмотреть вживую, ибо фирмы-заказчики походу приказали долго жить.
Но вот лично у меня создалось впечатление (повторюсь, это исключительно ИМХО, никого не хочу обидеть), что кое-что в нем - в некотором роде фейк? Я про логотипы и иконки неких программ для неких мифических контор :) (я никому не скажу, честно-честно)
И сайтег так, с юморком сделан (я о разделе "Вакансии").
Жаль, что некоторые работы нельзя посмотреть вживую, ибо фирмы-заказчики походу приказали долго жить.
Но вот лично у меня создалось впечатление (повторюсь, это исключительно ИМХО, никого не хочу обидеть), что кое-что в нем - в некотором роде фейк? Я про логотипы и иконки неких программ для неких мифических контор :) (я никому не скажу, честно-честно)
Часто сайты нельзя посмотреть в живую по причине того, что были ухайдоханы заказчиком в процессе наполнения содержанием и эксплуатации.
Фейка в нем нет. Все размещенные работы были заказаны, были утверждены и были оплачены. Вот какая-то часть информации — и правда фейк. Особенно в ряде ранних проектов, которые выполнялись на фрилансерской основе.
Фейка в нем нет. Все размещенные работы были заказаны, были утверждены и были оплачены. Вот какая-то часть информации — и правда фейк. Особенно в ряде ранних проектов, которые выполнялись на фрилансерской основе.
А вот это, да фейк ))) и то, частичный.
Просто... Просто...
Уважаемый, что за косноязычие?
Сайт- лицо студии. И наскоро его не делают. Это как банк в сарае. Грустно... а вроде соседи, но такой своеобразный подход к презентации бизнеса.
Уважаемый, что за косноязычие?
Сайт- лицо студии. И наскоро его не делают. Это как банк в сарае. Грустно... а вроде соседи, но такой своеобразный подход к презентации бизнеса.
Давно хотел научиться писать мелким серым шрифтом на Хабре. Пробовал small, sub, sup, span со стилями... Не получается...
Оказалось: <font color="GRAY" size="1"> Какой кошмар...
Оказалось: <font color="GRAY" size="1"> Какой кошмар...
Хорошая статья, только вот готов поспорить с минимальной шириной сайта в 1000 пикселей... Боюсь, расчитывать на разрешение 800х600 всё ещё актуально, поскольку довольно часто встречаю такое разрешение на мониторах пользователей, да даже, порой, и в интернет кафе.
статья хорошая и полезная... Ну, и реклама конторы, такая совсем ненавязчивая :-)
Если и есть толика рекламы, то скорее всего косвенная, скорее упоминание о источнике.
Рекламой их конторы уже я занялся на добровольных началах :)
Не трогайте
iderins
Не трогайте
iderins
В «конторах» с успехом обходятся без таких глупостей как там всякие сетки ;)
спасибо, статья очень полезная
Сам такой хотел написать, а еще верстальщикам :)
Пара вопросов.
Не понял что имеется ввиду под "табами"?
И что такое "выноска"?
Пара вопросов.
Не понял что имеется ввиду под "табами"?
И что такое "выноска"?
то что вы видите в хабре наверху:
Все +54 / Коллективные +41 / Персональные +13
это и есть табы. ну или то что мы видим во многих десктопных приложениях. например в браузере с закладками
Все +54 / Коллективные +41 / Персональные +13
это и есть табы. ну или то что мы видим во многих десктопных приложениях. например в браузере с закладками
Да-да! Еще верстальщикам.
Чтобы одни и теже вещи по несколько раз не повторять )
Примеры страниц с табами
http://www.konkurs.legalalliance.com.ua/
http://www.help-line.ru/clients/alphabet…
Чтобы одни и теже вещи по несколько раз не повторять )
Примеры страниц с табами
http://www.konkurs.legalalliance.com.ua/
http://www.help-line.ru/clients/alphabet…
«tab» здесь переводится как «вкладка».
у меня такое ощущение, что статья абсолютно бесполезная ( Да простят меня все (хотя вряд ли) Но что уж делать таково моё мнение...
Вполне возможно что для опытного дизайнера, либо человека совсем из другой сферы, статья полезной не будет.
Статья написана как «памятка дизайнерам нашего бюро».
Статья написана как «памятка дизайнерам нашего бюро».
Вы весь мусор планируете из загашников вытряхивать сюда? ;)
Для НЕОПЫТНОГО дизайнера толку от Вашей статьи будет немного.
Нужно глубже копать.
Да, и еще заметил подмену понятий - если статья для дизайнера (графического), то ему знать такие параметры как "«Сжатие-растяжение»", "max", "Реакция на пользователя" не нужна. Это - уровень прототипа и работа ПМ+кодера(+технического дизайнера, если такой есть).
Для НЕОПЫТНОГО дизайнера толку от Вашей статьи будет немного.
Нужно глубже копать.
Да, и еще заметил подмену понятий - если статья для дизайнера (графического), то ему знать такие параметры как "«Сжатие-растяжение»", "max", "Реакция на пользователя" не нужна. Это - уровень прототипа и работа ПМ+кодера(+технического дизайнера, если такой есть).
Там написано «в тексте».
Т.е. для навигации, либо облака тегов, либо заголовках-ссылках вовсе не обязательно. В некоторых случаях их применение может только создать визуальный шум.
Т.е. для навигации, либо облака тегов, либо заголовках-ссылках вовсе не обязательно. В некоторых случаях их применение может только создать визуальный шум.
Глупости пишете.
А вести себя корректно? Хотя, судя по карме, мы этого не умеете.
Ссылка в тексте должна выглядеть именно как ссылка. Потому что в противном случае:
1. Можно случайно ткнуть в текст (например, выделяя его) и попасть в замаскированную ссылку.
2. Часто нет времени или желания читать текст полностью, достаточно прочитать "по диагонали" и при этом найти в нем ссылку, которая вас интересует.
По-моему, этих пунктов предостаточно.
Ссылка в тексте должна выглядеть именно как ссылка. Потому что в противном случае:
1. Можно случайно ткнуть в текст (например, выделяя его) и попасть в замаскированную ссылку.
2. Часто нет времени или желания читать текст полностью, достаточно прочитать "по диагонали" и при этом найти в нем ссылку, которая вас интересует.
По-моему, этих пунктов предостаточно.
Дело в том, что если выделить ссылку нестандартным способом, то пользователь может или не сразу, или вообще не догадаться что это ссылка.
Я думаю, что вам обоим не о чем спорить.
Нужно знать правила, чтобы осознанно и целесообразно от них отступать.
Нужно знать правила, чтобы осознанно и целесообразно от них отступать.
Дизайн-бюро «Make» надо в первую очередь нанять учителя русского языка. Не в обиду, просто на сайте на самом деле много ошибок.
Добавила в букмарки... Спасибо, полезная памятка...
Редко приходится читать толковый текст. Хорошая статья.
Код Украины +380. Соответственно, Симферополь +380 652, мобильный +380 50.
О! Мегахабрареспекты!
Скопипастил и бережно сохранил.
Скопипастил и бережно сохранил.
спасибус/респектус, это то, что искал начинающий веб-дизайнер : )
Прочитал и заплакал...
Если бы хоть что-нибудь из написанного делал дизайнер проекта, над которым приходится сейчас работать...
Спасибо, отличная статья.
Если бы хоть что-нибудь из написанного делал дизайнер проекта, над которым приходится сейчас работать...
Спасибо, отличная статья.
спасибо, полезная информация, хотя некоторые пункты типа 100 px я бы назвал спорными.
Раздать всем веб-дизайнерам, и огромная армия верстальщиков скажет вам огромнейшее спасибо!
Подобного уже навалом...
"Акциндентный — шрифт для заголовков" - Чего??? Акцидентные шрифты в нете?
"Акциндентный — шрифт для заголовков" - Чего??? Акцидентные шрифты в нете?
пример неплохой акцинденции: http://csszengarden.com/?cssfile=/198/19…
Ничего нового не нашел. Таких попыток "собрать воедино" было уже не один десяток.
Но , потыкав наугад проекты студии, был разочарован. Ожидал большего от громких заявлений.
P.S. Пишите памятку для верстальщика, у Ваших проектов проблемы с валидаций CSS/HTML
Но , потыкав наугад проекты студии, был разочарован. Ожидал большего от громких заявлений.
P.S. Пишите памятку для верстальщика, у Ваших проектов проблемы с валидаций CSS/HTML
Я конечно понимаю что сайт-заглушка, но сделайте в всплывающем окошке (или как оно называется) кнопку «закрыть», а то я с минуту тупил как же его убрать. А текстик отличный, дополню, распечатаю, и повешу на стену в назидание некоторым…
Спасибо, отличная работа. Очень пригодиться в жизни как дизайнерам, так и менеджерам.
вопрос по поводу шрифтов. В style прописывать возможность его увиличения, или делать чтобы шрифт у всех отображался одинаково?
Еще вопрос про шрифты. волнует меня достаточно давно :(
Объясните кто-то, плиз, на пальцах:
1. Как работают пункты на странице (font-size: 10pt)
2. от чего считается размер шрифта при использовании em? ИМХО не всегда от родительского элемента, потому что при верстке все это как-то скачет (( хотя, допускаю, что я был невнимателен
3. Как корректно (при использовании em) задать размер БАЗОВОГО шрифта? в пикселях или пунктах?
а еще об ограниченной "резиновости": каким образом это реализуется? в спецификации ЦСС прописаны min- и maxwidth, но ИЕ их игнорит совсем полностью? интересуют рабочие методы )))
спасибо всем за внимание )
Объясните кто-то, плиз, на пальцах:
1. Как работают пункты на странице (font-size: 10pt)
2. от чего считается размер шрифта при использовании em? ИМХО не всегда от родительского элемента, потому что при верстке все это как-то скачет (( хотя, допускаю, что я был невнимателен
3. Как корректно (при использовании em) задать размер БАЗОВОГО шрифта? в пикселях или пунктах?
а еще об ограниченной "резиновости": каким образом это реализуется? в спецификации ЦСС прописаны min- и maxwidth, но ИЕ их игнорит совсем полностью? интересуют рабочие методы )))
спасибо всем за внимание )
Если речь идет о самой верстке, то
в structure.css
в ie.css
Но памятка касалась в первую очередь проектирования дизайна сайта, а не реализации его в верстке.
в 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%");
}Но памятка касалась в первую очередь проектирования дизайна сайта, а не реализации его в верстке.
- Мы не используем на страницах пункты.
- В пропорциях условного «Обычного» размера шрифта в броузере и системе. При чем, надо заметить, что em — это абстрактное значение, которое можно трактовать, как «размер символа в строке».
- Не в пикселях и не в пунктах ))) мы задаём в % от базового размера.
Спасибо за статью!
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Памятка дизайнеру сайтов