У вашего нового сайта современный актуальный дизайн. Пуленепробиваемая верстка. Хрустально чистый код, способный в легкую держать 50 000 уников. Осталось только написать ясные и четкие тексты.

Это правило поможет вам. Не смотря на то, что оно простое, оно очень эффективно.

Стив Круг и Якоб Нильсен учат нас: если пользователь быстро не понял, нужна ли ему информация – он уйдет. Текст будет прочитан очень бегло, буквально одно-два предложения.

Как правильно составить текст для сайта? Что поставить вперед, а что приберечь на потом? Когда я впервые задался этим вопросом, мой отец, в прошлом журналист ТАСС, рассказал о правиле пирамиды. Его, в свое время, научили коллеги из BBC (Би-би-си, а не вэ-вэ-эс, если что).

Меньше года назад меня вовлекли в проект, для которого необходимо было писать клиента на Flex. Так как я был новичком в этом деле, то в процессе работы я находил что-то новое и совершенно неизвестное мне. В то время я и открыл для себя Flex Data Binding (связыванием данных). Я думаю, что каждый, кто работает с Flex очень скоро сталкивается с Data Binding.
Связывание данных заключается в том, что мы можем с легкостью связывать два объекта (источника данных) между собой, что позволяет поддерживать их синхронизацию. Примером может служить связывание между собой элементов пользовательского интерфейса путем создания некоторых правил поведения, что способствует созданию более интерактивного пользовательского интерфейса.
Имея некоторый опыт в этой области, я решил разобрать все типы механизма связывания данных во Flex. Думаю эта статья будет интересна не только новичкам, но и профессионалы почерпнут из неё что-нибудь для себя.

Наверное каждый начинающий веб-дизайнер, выставляющий свою работу на оценку, слышит в свой адрес — Шрифты должны быть без сглаживания. С тех пор, многие из них сглаживание более не используют.
Конечно не все, есть определенные люди, т.е. дизайнеры, которые делают как бы не макеты сайтов, а картинки сайтов. В таких случаях сглаживание шрифтов гармонично соседствует с уменьшенным масштабом макета и окантовкой в виде непопулярного броузера. Я не знаю зачем это делается, возможно так лучше принимают заказчики. В любом случае — не важно, таким людям этот материал будет неинтересен.
А полезен он будет тем дизайнерам, которые более не используют сглаживание, но ещё не знают, что все же его нужно использовать. Дело в том, что отображение текста в броузере работает совсем не так, как работает отображение оного в фотошопе. По следующей таблице можно понять в чем разница.

Как видно, 7й Эксплорер и Сафари стоят особняком в методе рендеринга текста. Но доля использования остальных броузеров в интернете более 70%, поэтому мы будем опираться на них.
В итоге мораль такова: Для размеров шрифта 9-16 следует делать текст без сглаживания, для 17 и более — Sharp. Надеюсь это изыскание поможет вам ещё более точно воссоздать конечный вид проекта и поможет мне реже видеть огромные зубчатые шрифты в макетах продвинутых новичков.

1) Первая и самая большая ошибка клиентов состоит в том, что они сосредотачивают свои усилия на выборе студии, а не формулировке задач, которые должен решать сайт. Выбор студии чаще всего осуществляется двумя способами: либо опросить студии для выяснения соотношения «цена/качество», либо посоветоваться со знакомыми, у которых уже есть опыт создания сайтов. И в том, и в другом случае предсказать результат очень сложно. Можно конечно надеяться на простое везение, когда выбор в итоге приведет к компетентным специалистам, которые смогут проконсультировать, помочь правильно определить цели сайта и подготовить техническое задание. Но чаще всего результатом работы является некий ресурс в интернете, который не только вызывает недовольство как у клиента, так и у веб-студии, но еще и стоит обычно немалых денег. А еще через несколько месяцев (в среднем от 6 до 24) клиент заказывает новый сайт, пытаясь не наступить на те же грабли, но снова на них наступает.

Я искренне считаю, что блоггер обязан давать читать себя как можно большим количеством способов.
Чтобы на первых порах собрать немалую аудиторию, блоггеру поможет публикация его постов на различных блог-площадках. Этот пост будет интересен ещё и тем, кто отказывается от ухода на stand-alone блог, потому что ручной кросс-пост не устраивает, а терять аудиторию не хочется.
Для себя, как для начинающего блоггера я выбрал следующие интернет-ресурсы для кросс-поста: LiveJournal (с него, собственно, я и ушёл), Liveinternet.Ru, BlogPost.Com (ну и blogger.com естественно) и русский Blog.Ru.

Сегодня наткнулся на один сайт, фон которого скроллится при ресайзе окна браузера, прикольно, ничего не скажешь, но этого мне было мало. Поэтому, захотелось сделать так, что бы фон скроллился постоянно безо всяких гифов и флешей. Включил свою любимую музыку и… вуаля! :)
То, что я здесь накатал использует jQuery, и писалось это очень быстро. Поэтому, сильно не пинайте :)

Где это можно применить? Ну уж точно не на всём сайте, но для открытки либо странички-визитки\презентации — я считаю, самое оно :)

Итак, допустим, вы руководитель проектов, у вас есть команда (программист, верстальщик, дизайнер, кто то еще) и вы создаете сайты. Проблема в том, что руководителю проектов необходимо знать совершенно все аспекты создания сайта, начиная от дизайна, и кончая безопасностью, чаще всего – так не бывает. Если руководитель проектов бывший дизайнер, он справиться с такими аспектами как дизайн и юзабилити, но вот в техническом плане у него (у вас) будут проблемы. Бывает и так, что руководителем становиться менеджер, конечно, он великолепно управляет людьми, у него ярко выраженные лидерские способности… но в техническом аспекте ему приходиться полагаться на свою команду, это хорошо, если команда – настоящие профессионалы, а если нет, то спрос будет не с команды, а с ее руководителя. В этой статье, я постараюсь описать несколько моментов, которые помогут вам оценить качество создаваемых вами (вашей командой) сайтов.

Думаю многие из вас пользуются иконками от фамфамфам. Там есть хорошие иконки флагов всех стран, но все они размера 16х16.

Но вот появились увеличенные варианты — 24x24, 32x32, 48x48!
Скачать можно здесь(968 кБ)

PS
Ждем увеличенной версии иконок на все случаи жизни :-)

При подгонке сайтов до единого вида во всех браузерах, верстальщик использует не один css хак.
Но зачем обычному пользователю с IE получать избыток кода для других браузеров firefox, opera, safari?!
Это проблема легко решается с помощью динамического css.

Однажды мне понадобилось сделать прозрачные боковые поля для одного дизайна. Я решил использовать прозрачность CSS.

Но каково было узнать, что все элементы внутри прозрачного блока тоже становятся прозрачны и это никак не изменить :-(, тогда мне пришлось использовать прозрачный png.

Недавно я наткнулся на замечательную технику, позволяющую устранить эту проблему, ею я и хочу с вами любезно поделиться.

Часть I — Часть II — Часть III — Часть IV — Часть V — Часть VI

Часть IV

Итак, настала пора выяснить, какие шрифты и с какой долей вероятности могут оказаться установленными в тех или иных операционных системах либо в результате каких-то особых ситуаций (например, при установке пакетов Microsoft Office, Adobe Creative Suite или CorelDRAW! Suite), либо в «девственно чистых» ОС (что, несомненно, наиболее приемлемый вариант). А также узнать, какие из этих шрифтов пригодны для использования и в каких конкретно случаях.

Часть I — Часть II — Часть III — Часть IV — Часть V — Часть VI

Часть III

Оказалось, что аж ещё со времён Windows 98 в стандартный комплект включается шрифт под названием Lucida Sans Unicode, который особо нигде не используется. Попробуем заменить им эппловский Lucida Grande.

Часть I — Часть II — Часть III — Часть IV — Часть V — Часть VI

Часть II

Во-первых, увеличились размеры экранов, улучшилась чёткость отображения и качество передачи цветов. В наше время всё реже используются старые ЭЛТ-дисплеи с небольшим разрешением, выпуклым экраном, мерцанием или ограниченной цветопередачей (помните CGA/EGA/VGA?). Фактически, количеством таких мониторов по сравнению с современными плоскими ЖК-дисплеями уже сегодня можно смело пренебречь. Изменились и негласные стандарты de facto и для разрешения: если в самом начале сайты создавались под размер экрана в 640х480 пикселей, потом для 800х600, то сегодня используется стандарт 1024х768. С появлением широкоэкранных (wide) мониторов начал было маячить новый стандарт 1280х960, но большую популярность в последнее время приобрели компактные устройства вроде Asus eeePC или Apple iPhone, так что не исключён факт возвращения в качестве стандарта разрешения меньшего, чем 1024х768. Впрочем, в данном случае это не столь важно, поскольку в любом случае на сегодняшний день разрешение экрана напрямую зависит от его физического размера, а величина одной отображаемой точки достаточно мала по сравнению с пикселями десятилетней давности, что позволяет на любых современных устройствах отображать шрифты одинаково качественно. Это, кстати, приводит и ко второму фактору.

Часть I — Часть II — Часть III — Часть IV — Часть V — Часть VI

Часть I

Как-то ко мне обратился знакомый дизайнер с просьбой разобраться в странной по его мнению ситуации. Клиент просил «сделать так же, как у Apple», но с использованием собственных способов расположения блоков, изображений, цветовой гаммы и текста. В общем, дизайн в итоге получался совершенно непохожий на apple.com, но этого, собственно, и добивался клиент. И вроде бы у дизайнера получилось, но… Клиенту по-прежнему не нравилось, он всё равно требовал переделать макет. По его ощущения «что-то было ну совсем не так». А что именно — тот объяснить был не в силах. Вот и возник вопрос у моего коллеги по поводу того, как угодить капризам клиента и понять его чаяния. Оказалось всё не так просто, но вполне объяснимо. Я и раньше сталкивался с данной проблемой. Поэтому решил попробовать изложить свои мысли по этому поводу.

Итак, какова ситуация в области современной веб-типографики и какими способами следует решать возникающие проблемы?

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

Из этой статьи вы узнаете:

• О плохих приемах современной верстки;
• О том, как даже не будучи профессионалом, за 5 минут определить плохо ли сверстан сайт или нет.

Большинство веб-сайтов нашпиговано мелким текстом, читать который — сплошное мучение. Для чего? Нет никаких причин для того, чтобы ужимать так много информации на один экран. Это — просто дурацкое коллективное заблуждение, восходящее к временам, когда экраны были очень, очень маленькими. Поэтому…

Не заставляйте нас изменять размер шрифта

Мы не хотим постоянно менять настройки размера шрифта в браузере при посещении каждого нового сайта.

Не доказывайте нам, что переполненные страницы лучше выглядят

Сайты со страницами, под завязку набитыми информацией, не привлекательны визуально — они ужасны. Заполнение страниц всякой всячиной никогда не влияло на юзабилити положительно. Это просто лень-матушка заставляет вас вываливать на наши головы всю эту информацию. Мы хотим, чтобы вы подумали и заранее решили, что именно является наиболее важным. Мы не хотим делать вашу работу за вас.

Не втирайте нам, что прокрутка страниц — это плохо

Потому что в таком случае все сайты плохие. В прокручивании веб-страницы нет ровным счётом ничего страшного. Ни-че-го. Так же, как нет ничего страшного в перелистывании страниц книги.

Не говорите нам, что текст не важен

95 % того, что обычно называют веб-дизайном, — это типографика.

Не требуйте, чтобы мы начали носить очки

Лучше вместо этого перестаньте тереться носом об экран, откиньтесь в кресле назад (!) и продолжайте чтение этой статьи в расслабленной позе.

Большинство дизайнов ориентировано на использование фиксированных значений при верстке: ширина и высота блоков, размер шрифта. Это позволяет сверстанному шаблону «не разваливаться» при изменении масштабов просмотра и сохранять свойство кроссбраузерности. Однако в этом есть один большой минус – при большом разрешении экрана маленькие фиксированные блоки теряются на большой площади и остаются незамеченными. Тут даже не спасет «резиновая» верстка, т.к. сайт будет выглядеть еще более нечитабельным, например на 19'' мониторах при разрешении большем 1280 по ширине. Для меня это актуально, т.к. на ноутбуке 17'' с разрешением 1400х800 просматривать «резиновый» сайт очень неудобно. И желание оставаться на таком сайте отпадает быстро. Существует ли способ, позволяющий управлять масштабами не только текста, но и всего сайта?

Навеяно этим: habrahabr.ru/blog/css/36860.html

Для начала напомню, что для создания двойной/нестандартной рамки для изображений нужно {...cut...}, либо положить картинку в контейнер и задать для контейнера отступ и фоновое изображение.

И так далее. There is a better way!

Навеяно этим.

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

Как сделать? min-width и min-height.

#site {
  margin: 0 auto; /*это чтоб центрировать контент при превышении max-width*/
  min-width: 980px;
  max-width: 1500px;
}

Но ведь IE их не поодерживает. А expression слишком нагружает браузер… Спокойно, други! Я выведу вас к свету из тьмы!
Пишем далее.



А в ie.js помещаем

window.attachEvent('onload', mkwidth);
window.attachEvent('onresize', mkwidth);

var minwidth = document.getElementById("site").currentStyle['min-width'].replace('px', '');
var maxwidth = document.getElementById("site").currentStyle['max-width'].replace('px', '');
function mkwidth(){
    document.getElementById("site").style.width = document.documentElement.clientWidth < minwidth ? minwidth+"px" : (document.documentElement.clientWidth > maxwidth ? maxwidth+"px" : "100%");
};

В чём особенная вкусность приведённого метода? А в том, что минимальное и максимальное значение нужно задавать только в одном месте, ну и вообще.

Пользуйтесь, короче, на здоровье!