Web Desing For You WDFY

Дизайн по аналогии

ADMIN — Thu, 05 Aug 2010 18:22:58 GMT

Дизайн по аналогии

Часто клиент может выразить свои пожелания, только сравнивая желаемый ресурс с уже существующими. Это может касаться как самой концепции ресурса — «MySpace, но для сектора B2B», так и некоторых деталей — «Логин должен быть таким же как на Gmail».

Это свойственно не только дизайну, если человек не очень хорошо знает язык, на котором говорит, то вместо прямого указания на предмет, можно услышать причудливые и многословные описания. В спецификациях составленных клиентами часто можно встретить забавные описания, когда они хотят сказать «база данных зарегистрированных пользователей с отчетами X, Y и Z» или «JavaScript меню, которое деградирует в отформатированные с помощью CSS списки».

Аналогии и сравнения отличный способ придать четкий облик расплывчатым концепциям и пожеланиям. В конце концов, функции всех форумов, контактных форм или интернет магазинов во многом сходны, различается только содержание сайта.

Зачем мириться с дизайном на основе аналогий?

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

С другой стороны, указание на похожие элементы может быть очень полезны при объяснении клиенту решений дизайнера. Иногда заказчик предоставляет спецификации, в которых все уже предусмотрено и если вы решите сделать, что-то не так как он представлял, то это вызывает вопросы. Если вы объясните, что процесс заказа сделан «как в Expedia», то сможете обосновать заказчику принятые при разработке решения и заодно подкрепить их авторитетным примером.

Когда аналогии атакуют

Как и любого другого у метода сравнений и аналогий есть недостатки. Если клиент говорит, что хочет аукцион «как eBay»,— что именно это означает? Художник подумает «Кричащая цветовая схема», программист «Поддержка до 20 миллионов пользователей», пользователь «Рейтинг и отзывы на каждого продавца». А что из этого имел ввиду клиент? Вы можете потратить много времени, составляя спецификации проекта похожего на eBay, и при этом не угадать, что именно было нужно клиенту.

К тому же обсуждение проекта на основе аналогий может вызывать у заказчика неприемлемые ассоциации и пристрастия. Если вы скажете, что новый интернет магазин будет на 95% работать как Amazon, заказчика может одолеть желание доработать оставшиеся 5%, будучи уверенным, что тогда его магазин достигнет объемов и возможностей Amazon.

Более того, способность перенимать возможности простым сравнением может спровоцировать заказчика на включение нерелевантных или бесполезных дорогостоящих возможностей в спецификации проекта. К примеру, множество мелких электронных магазинов поддерживают возможность оплаты различными валютами, которая ими никогда не используется. Это значительно усложняет разработку, и если вы ориентируетесь на рынок Аризоны, то едва ли захотите тратить дополнительные $5000, чтобы ваш магазин «такой как Zen Cart» поддерживал работы с британской налоговой системой.

В конце концов, клиент который может выразить свои пожелания только в виде сравнений может просто не знать лучше всего подходящих ему примеров. Торговец, вероятно, скажет, что он хочет систему похожую на его любимый электронный магазин, но он приводит такое сравнение потому, что у него нет достаточного опыта в этой области. Едва ли он видел достаточно много различных сервисов и возможно не знает об удобных кнопках для покупки в один клик или других полезных элементах, которые хорошо подходят к его нуждам. Обладая большим опытом в этих вопросах, вы должны предложить клиенту возможности, о которых он не знал, и спасти его от неподходящих аналогий.

Возвращаемся в реальный мир

Вы должны держать под контролем все двусмысленности, которые возникают в процессе обсуждения аналогий, иначе вы будете обречены на безуспешные попытки создания мутанта работающего как YouTube плюс Newegg помноженный на DeviantArt с бюджетом $750. К счастью, на практике стратегия отбора хороших аналогий очень проста, используйте только те, которые кажутся вам достаточно конкретными и полезными.

Начать с аналогий имеет смысл, даже если вы разрабатываете, что-то принципиально новое. Но в этом случае особое значение приобретает второй этап разработки, когда поняв, что нужно клиенту, вы должны выразить это в более конкретной форме и включить в спецификации проекта. Не помешает и рассмотрение отдельных частей проекта, который был выбран в качестве примера, от вопроса «что именно отсюда вы хотите скопировать» вреда в любом случае не будет. Разработчики часто склонны усложнять вопросы, и бывают очень удивленны, когда оказывается, что все, что клиент хочет взять от проекта за $300 000, это цветовая схема и расположение меню.

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

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

Не забывайте сделать выводы из того, какие аналогии предлагает клиент, если большинство из предложенных им сайтов содержать Flash и 700K графики на каждой странице, то можно сделать вывод, что для него внешний вид куда важнее, чем пользователи с модемами на 28.8кбит. Читайте между строк, чтобы получить максимум информации о предпочтениях клиента.

Еще один способ обсуждения не больше, не меньше

Обсуждение на основе аналогий и сравнений может помочь максимально вовлечь заказчика в процесс разработки, не выходя за границы его познаний. Тем не менее, на практике нужно постоянно балансировать, не позволяя этой технике стать панацеей, но используя ее полезные стороны.

Вопросы на которые нужно ответить перед редизайном

ADMIN — Thu, 05 Aug 2010 18:20:13 GMT

Вопросы на которые нужно ответить перед редизайном

Редизайн может быть достаточно запутанным процессом, поэтому перед его началом важно составить четкий план и определиться с целями и средствами. В этой статье я хочу перечислить вопросы на которые следует найти ответы прежде чем приступить к работе над новым дизайном сайта.

1. Какова цель редизайна?

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

2. Вы хотите внести небольшие изменения или переделать все?

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

3. Какие черты существующего дизайна наиболее эффективны?

Возможно, некоторые элементы сайта работают достаточно хорошо и вы решите включить их в новую версию. Было бы неплохо составить список особенностей сайта которые вам нравятся и не нравятся, чтобы использовать его при создании нового дизайна.

4. Какие черты существующего дизайна наименее эффективны?

Определите слабые места вашего сайта, чтобы исключить их повторение в его новой версии.

5. Кто ваши целевые посетители?

Вы не должны забывать о посетителях на протяжении всей разработки дизайна сайта. Чтобы сделать сайт эффективным вам нужно как можно точнее знать кто ваши посетители, что им нужно от сайта, какой стиль дизайна они предпочитают.

6. Как сделать сайт более дружелюбным?

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

7. Нужно ли внести изменения в логотип/брендинг?

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

8. Нужно ли менять цветовую схему?

В вопросе № 2 я говорил о том, что в большинстве случаев нужно сделать чтобы новый сайт выглядел привычно для постоянных посетителей и использование похожей цветовой схемы¹ один из лучших способов этого достигнуть. Чтобы освежить сайт стоит добавить несколько новых цветов или немного изменить оттенки.

9. Какое разрешение экрана используют посетители?

Очень важно знать как пользователи просматривают ваш сайт. Эту информацию легко получить с помощью систем статистики, к примеру, Google Analytics. Особенно важно учитывать типичные разрешения пользователей если разметка будет фиксированной ширины.

10. Какова скорость подключения у ваших клиентов?

Зная скорость подключения клиентов, вы сможете решить какие элементы можно использовать на сайте, а каких стоит избегать, чтобы не создавать проблем для посетителей.

11. Что должно быть основой дизайна?

Любой дизайн выделяет одни элементы страницы и затеняет другие². Одна из основных ваших задач дизайнера, правильно расставить эти акценты, чтобы привлечь внимание посетителей к наиболее важным элементам сайта.

12. Как сделать навигацию более эффективной?

Навигация — это один из основных элементов сайта и от его удобства в значительной степени зависит удобство всего сайта. Если на сайте было добавлено значительное количество контента или внесены в него существенные изменения, то вполне возможно, что навигация утратила свою актуальность. Перед разработкой нового дизайна обязательно обратите внимание на навигацию и ее удобство.

13. Чего посетители хотят от сайта?

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

14. Как получить постоянных посетителей?

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

15. Кто будет заниматься поддержкой и развитием?

Будете ли вы работать над сайтом в одиночку или этим будет заниматься кто-то другой? Если в работе над сайтом задействованы несколько человек, обязательно используйте комментарии³. Код всегда должен быть максимально понятным, но если вы работаете не один это становиться особенно важным.

16. Нужна ли CMS?

Многие владельцы сайтов предпочитают использовать CMS, к примеру, WordPress⁴, потому что это позволяет создавать и редактировать контент сайта без привлечения специалиста. CMS может сэкономить много времени если вы планируете разместить на сайте много материала.

17. Как улучшить SEO?

При разработке сайта никогда не стоит забывать о поисковиках. Существующий дизайн может быть оптимизированным для поисковиков или нет, но новый обязан учитывать SEO. Можно ли оставить существующие заголовки или нужно сделать их более эффективными? Как можно улучшить, внутреннюю ссылочную структуру? Где нужно использовать заголовки? Этот список вопросов может быть значительно расширен.

18. Какие будут ключевые слова и фразы?

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

19. Какие страницы и поисковые фразы сейчас привлекают трафик?

Если на сайте есть страницы занимающие хорошие места в выдаче поисковиков и создающие хороший трафик, не стоит вносить в их содержание значительные изменения, поскольку это может сказаться на ранжировании. Постарайтесь максимально использовать преимущества этих страниц в новом дизайне.

20. На какие страницы есть входящие ссылки?

Старайтесь как можно полнее использовать страницы сайта на которые есть большое число входящих ссылок, по возможности сохраните их URL, если это не возможно используйте редиректы.

21. Что нужно сделать чтобы посетители возвращались.

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

23 важных вывода из результатов eye-tracking исследований

ADMIN — Thu, 05 Aug 2010 18:17:04 GMT

23 важных вывода из результатов eye-tracking исследований

Eye-tracking исследования¹ горячая тема в мире веб-дизайна, но у них есть одна проблема, не всегда очевидно как применить результаты при разработке реального сайта. В этой статье автор пытается дать несколько советов основанных на результатах таких исследований и позволяющих увеличить эффективность вашего сайта.

Текст привлекает внимание прежде чем графика.
Несмотря на то, что вы можете думать иначе, пользователь в первую очередь обращает внимание на текст². Большинство пользователей приходят на сайт в поисках информации, а не изображений, поэтому важный текст должен быть наиболее заметным.
Изначально взгляд сфокусирован в левом верхнем углу страницы.
В этом нет ничего удивительного, большинство приложений разработаны так, что пользователю постоянно приходится обращать взгляд в эту область. Если вы хотите создать успешный сайт то при разработке дизайна нужно об этом помнить и, стараясь создать уникальный стиль, не нарушать привычек пользователей.
В первую очередь пользователи просматривают верхнюю левую и верхнюю часть страницы и только потом смотрят ниже и правее.
Исследования показывают, что зона внимания пользователи имеет вид буквы F³. Наиболее важные элементы сайта должны находиться в этих ключевых областях.
Читатели игнорируют баннеры.
Реклама позволяет владельцам сайта заработать на хлеб с маслом, но исследования показывают, что в большинстве случаев пользователи игнорируют баннеры фокусируясь на них только на доли секунды. Если вы хотите заработать на рекламе, подходить к ее размещению, оформлению и типу нужно творчески.
Броское форматирование и шрифты игнорируются.
Почему? Потому что пользователи принимают их за рекламу, не содержащую нужной им информации. Исследования показывают, что крупные, цветные буквы усложняют поиск информации, причина кроется привычке пользователя игнорировать все похожее на рекламу. При разработке дизайна важно чтобы «блеск» не отвлекал внимание от важной информации и не делал ее похожей на рекламу.
Показывайте числа цифрами.
Цифровая информация воспринимается проще, чем та же информация прописью. Помните о том, что вы пишите, преимущественно, для читателей сканирующих сайт. Старайтесь упростить поиск информации, чтобы они сохраняли заинтересованность.
Размер шрифта влияет на способ просмотра.
Мелкий шрифт способствует сфокусированному просмотру, тогда как крупный упрощает сканирование. Используйте эту особенность, чтобы склонить пользователей к нужному вам типу просмотра.
Пользователи воспринимают подзаголовки, только если они им интересны.
Выбирайте релевантные и интересные подзаголовки.
Обычно люди просматривают страницу небольшими частями.
Это можно использовать в своих целях, создавайте области, которые ловят внимание пользователя, сканирующего сайт, например, выделенные области или списки.
Короткие параграфы лучше длинных.
Информация, размещенная на сайте, должна быть рассчитана на быстрое восприятие, поскольку большинство интернет-пользователей стараются экономить время. Параграфы и предложения должны быть короткими, за исключением случаев, где обратного требует контекст.
Одноколоночные форматы лучше фиксируют взгляд, чем многоколоночные.
Не перегружайте пользователя информацией. В некоторых случаях «проще» значит «лучше».
Реклама в верхней и левой частях страницы лучше всего привлекает внимание.
Если вы размещаете на сайте рекламу, старайтесь чтобы она была в верхней левой части страницы, там она лучше всего обратит на себя внимание. Конечно, то, что пользователь видит рекламу еще не значит, что он будет на нее кликать, поэтому не стоит слишком жертвовать дизайном, чтобы получить более заметную рекламу.
Реклама, размещенная возле интересных областей сайта, более заметна.
Чтобы увеличить заметность рекламы размещайте ее возле наиболее востребованных и интересных областей страницы. При этом пользователи не потеряют возможность найти то, что им нужно, а вы получите более эффективную рекламу.
Текстовая реклама просматривается пользователем более внимательно, чем другие типы рекламы.
Как было сказано ранее, большинство интернет-пользователей не тратят время на просмотр элементов похожих на рекламу, поэтому текстовая реклама, хорошо сочетающаяся с остальными элементами страницы и не раздражающая читателя значительно более эффективна.
Большие изображения лучше привлекают внимание.
Люди предпочитаю большие, информативные изображения, на которых доступны детали, вместе с тем изображения должны быть связаны с текстом рядом с которым размещены, иначе шанс того, что они будут проигнорированы возрастает.
Понятные, простые лица на изображениях лучше привлекают внимание.
Абстрактные и артистичные фотографии могут хорошо сочетаться с дизайном, но не всегда обращают на себя внимание читателя. Если вы используете фото людей, они должны быть понятными и простыми. Нужно обратить внимание и на то, что лучше работают фото реальных людей, а не моделей.
Заголовки притягивают взгляд.
Первое, что пользователь ищет на странице это заголовок⁴. Они не должны подавляться другими элемента страницы, постарайтесь, чтобы заголовки были достаточно заметными.
Пользователи тратят много времени, смотря на кнопки и меню.
Поэтому при разработке дизайна вам стоит обратить на них особое внимание. Кроме того, что они привлекают внимание пользователя это еще и одни из важнейших элементов сайта.
Списки хорошо задерживают внимание пользователя.
Один из способов задержать внимание пользователя на сайте — это частое использование списков в статьях. Используйте числа или буллиты, чтобы подчеркнуть важную информацию, это упростит «сканирование» сайта.
Большие блоки текста игнорируются.
Исследования показывают, что большинство интернет-пользователей не готовы тратить время на изучение больших блоков текста, как бы информативны и хорошо написаны они не были. Разбиение на небольшие параграфы, выделение важных областей, подзаголовки и списки позволяют задержать внимание пользователя.
Задержать внимание может форматирование.
Чтобы пользователь не пропустил наиболее важную информацию, используйте различные способы ее выделения: жирный, курсив, цветной, но не переусердствуйте, избыточное использование этих элементов сделает страницу нечитабельной и будет отталкивать посетителей.
Пространство полезно.
Несмотря на желание втиснуть что-нибудь в каждый уголок страницы, лучше оставить немного пространства. Перегрузка сайта приведет только к тому, что пользователь будет игнорировать значительную часть контента. Поэтому старайтесь сделать сайт простым и оставить достаточно пространства⁵, на котором могли бы отдохнуть глаза пользователя.
Лучшее место для навигации — верхняя часть страницы.
Вы, конечно, хотите чтобы пользователь не только просматривал первую страницу, но и продолжал изучение сайта в поисках интересной ему информации. Удержать пользователя поможет, простая в использовании и заметная, благодаря размещению в верхней части страницы, навигация.

100% Easy-2-Read

ADMIN — Thu, 05 Aug 2010 18:11:07 GMT

100% Easy-2-Read

Oliver Reichenstein, 6 мая 2007

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

Не говорите нам, что можно настроить размер шрифта

Мы не хотим изменять настройки браузера каждый раз, когда заходим на сайт!

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

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

Не говорите нам, что скроллинг это плохо

Ведь, это значит что все сайты плохие. Нет ничего неправильного в необходимости скроллинга, точно также как нет ничего плохого в перелистывании страниц книги.

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

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

Не говорите нам, что нужно взять очки

Просто перестаньте облизывать экран, откиньтесь назад и читайте в расслабленной позе.

Пять простых правил

1. Стандартный размер шрифта для длинных текстов

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

Создание хорошей страницы, использующей крупные шрифты, действительно сложная задача, но, преодолев все трудности, вы получите простой и удобный сайт¹. Легко втиснуть на страницу всю возможную информацию, сделать страницу простой и понятной пользователям, сложно. Поначалу стандартный размер шрифта может вас шокировать, но уже через день вы не захотите видеть ничего мельче 100% или 1em для основного текста. Он выглядит крупным, но скоро вы поймете, почему все производители браузеров выбрали именно такой размер шрифта по умолчанию.

2. Активное пространство

Текст должен дышать. Использование пространства это не просто прихоть дизайнеров или дело вкуса, наличие воздуха вокруг текста уменьшает нагрузку на читателя и позволяет ему лучше сфокусироваться на смысле. Нет никакой необходимости заполнять все окно разным хламом. То, что пространство смотрится лучше это не побочный эффект, а следствие функционального дизайна.

Брокманн: «Ширина колонки это не только вопрос дизайна и формата, это в такой же степени вопрос читабельности»

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

Замечательно если ширина колонки изменяется так, чтобы строки никогда не заканчивались за пределами окна.

Хороший Нильсен — Плохой Нильсен. Король юзабилити недавно добавил немного пространства на своем сайте и установил максимальную ширину колонки, немного увеличил и высоту строки, что очень хорошо сказалось на читабельности текстов.

Ширина колонки должна быть такой, чтобы каждая строка содержала 10-15 слов. Для резиновой разметки, и размера шрифта 100%, колонка в 50% ширины окна дает хороший результат на большинстве разрешений.

3. Удобная высота строки

Вот что об этом говорят специалисты по чтению:

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

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

4. Четкий контраст

Об этом даже не стоит говорить. Но если вы все еще используете одну из следующих комбинаций:

светло серый текст на легком сером фоне
серый текст на белом фоне
серый текст на желтом фоне
желтый текст на красном фоне
зеленый текст на красном фоне и тому подобное…

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

Примечание: Для экранного текста слишком сильный контраст (черный и белый) не всегда лучшее решение, потому что текст начинает мерцать. Попробуйте #333 на #fff.

5. Не делайте текст в виде изображений

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

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

Борьба за читабельность

Если вы хотите, чтобы больше сайтов были удобными и читабельными, внесите свой вклад в популяризацию заботы о пользователях, разместите на своем сайте ссылку на эту страницу, чтобы люди знали, что читабельность очень важна. Если вы присоединитесь к акции 100E2R, я буду счастлив, добавить вас в список участников.

Как присоединиться к E2R

Оставляйте комментарии, содержащие ссылку и пару строчек описания, если ваш сайт соответствует принципам 100E2R, я добавлю его в список на этой странице независимо от того нравиться мне его дизайн или нет. Конечно никакого спама, пopно или политики.

Элементы веб-типографики

ADMIN — Thu, 05 Aug 2010 18:07:21 GMT

Элементы веб-типографики

Нужно признать, что типографика и веб далеки друг от друга. Мы ограничены пятью шрифтами, многие из которых дешевая копия «нормальных» гарнитур, нет и полного контроля за кернингом и лидингом, а главное, что бы мы не делали, всегда есть шанс, что в разных браузерах и операционных системах это будет выглядеть по-разному. Так что же делать веб-дизайнеру, когда он сталкивается с непреодолимой задачей, сделать красивым текст на сайте?

Совет 1: Не ограничивайте себя в выборе размера шрифта

Поначалу мы были ограничены 7 размерами шрифта, которые задавались через тег

Относительные размеры шрифтов позволяют пользователю адаптировать их размер в соответствии со своими потребностями, поэтому не забывайте проверить как выглядит сайт при различных размерах шрифта. «Em» называется так потому, что 1em равен ширине строчной буквы «m» (equal m), при установках по умолчанию 1em равен 12pt.

Размер не ограничен целыми числами, к примеру, 0.8em отлично подходит для основного текста, и обычно будет равно 10pt. CSS позволяет использовать шрифты любого размера, который требует дизайн, а не ограничиваться 24pt.

Совет 2: Работайте с межбуквенным расстоянием

Межбуквенное расстояние, возможно, один из наиболее эффективных инструментов для улучшения внешнего вида шрифтов, особенно крупных.

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

Несмотря на эти ограничения, межбуквенные расстояния могут быть эффективно использованы, для оживления крупных шрифтов, делающих заголовки слишком скучными. Увеличение шрифта приводит к неприятным разрывам и дорожкам между символами, уменьшение межбуквенного расстояния позволяет избавиться это этих неприятных эффектов, благодаря чему часто можно отказаться от использования текста в виде графики или Flash.

Совет 3: Высота строк и расстояние между словами

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

Расстояние между словами, конечно, не столь полезно как межбуквенное, и требует более тонкого подхода, но иногда добавив немного пространства между словами можно улучшить читабельность текста. Если строки достаточно длинные то чуть увеличенное расстояние между словами уменьшит количество слов в строке, и читателю будет проще ориентироваться в тексте.

Варьируя расстояние между словами и высоту строк можно точно контролировать плотность текста на странице. Обычно я указываю высоту строки в процентах, 120-140% будет достаточно в большинстве случаев. Читабельность длинных текстов можно улучшить немного увеличив высоту строки (но не более 200%). Малая высота строки (100% и меньше) помогает избавиться от больших разрывов между строками крупных заголовков.

Все методы уменьшающие плотность текста должны использоваться осторожно и осмотрительно, никто не любит читать текст растянутый в 3-4 раза или наоборот чересчур сжатый. Установки по умолчанию были выбраны не случайно, а потому, что в большинстве случаев они соответствуют наиболее читабельному тексту, поэтому изменяя их вы должны четко представлять, что делаете, чтобы не ухудшить читабельность вместо ее улучшения.

Совет 4: Попробуйте использовать старого фаворита по новому

Я уже упоминал о том, что Times New Roman используется только на 5 из 100 лучших блогов². Когда-то он доминировал в веб, будучи основным шрифтом для большинства браузеров, возможно, именно это сделало его слишком скучным, но если подойти к его использованию творчески и инновационно, Times может быть очень эффектным.

Даже шрифты которые потеряли популярность из-за того, что когда-то были слишком распространенными, к примеру, Times New Roman, могут быть успешно использованы если подойти к этому творчески.

Попробуйте нестандартные размеры и плотность текста (или все прописные) и Times будет выглядеть интересно и свежо.

Совет 5: Не бойтесь экспериментировать

Крупные шрифты, плотный текст, разреженный текст, цвет, использование first-letter и first-line могут выделить ваши тексты, среди скучной и типичной веб-типографики. Эспериментируйте и пробуйте новое не только ради читабельности, но и ради создания своего запоминающегося стиля.

Учитесь писать

ADMIN — Thu, 05 Aug 2010 18:02:08 GMT

Учитесь писать

Призываю всех дизайнеров: учитесь писать!

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

Сейчас очень модно, говорить «маркетинг это убеждение» или «дизайн передает идеи», но как это может быть правдой, если дизайнеры практически пренебрегают работой с текстом?

Впечатления пользователя это не только визуальный дизайн.

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

Давайте посмотрим на всеми любимый пример того, как нужно делать правильно Flicr. Спросите у людей, что они думают о Flicr и услышите что-то вроде «отличный», «дружелюбный».

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

Я скажу в чем: это тексты. Дружелюбность заключена в хороших старомодных текстах. Когда вы посещаете Flicr, он приветствует вас на случайном языке Hola! Salut! Shalom!, когда входите в систему, кнопки говорят «Get in there» вместо «Submit», когда закачиваете фото, присоединяетесь к группе, создаете контакт, текст всегда открытый, поощряющий, приятный, и одобрительный. Именно в хороших текстах основная причина дружелюбности Flicr.

Текст это интерфейс

На сайте есть не только маркетинговый текст, но и текст, используемый для интерфейса. Этот текст не может прийти из отдела PR он исходит от дизайнеров, отвечающих за впечатления пользователей. Текст столь же важная часть интерфейса как цвет и графика, на которых обычно сконцентрированы дизайнеры, возможно, даже более важная.

Рассмотрим еще один пример — сайт также посвященный фотографии. Photojojo¹ любовно созданный Эмит Гупта и Карой Кенел. Это новостной сайт, и, как и должно быть на новостном сайте, много труда вложено в хорошие публикации, но так же много труда вложено в каждое слово, присутствующее на сайте.

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

Я из тех, кто никогда не подписывается на рассылки, покончил с ними в 1999 году и ни разу не сожалел. Я ненавижу почту. Если бы на сайте использовался традиционный язык, я бы никогда не подписался, но их заинтересованность и волнение оказались заразными, ввожу свой адрес, клик на кнопке подтверждения, и какое вы думаете, сообщение я получил в ответ? «Парень ты прав». Чертовски прав!

Пора забыть об lorem ipsum

Нанимая дизайнера, спросите его, что он любит читать, обсудите с ним, какие слова будут на каждой кнопке, ссылке, в каждом заголовке, предложите написать страничку «О нас». Работа дизайнера в том, чтобы знать чего хотят пользователи от сайта, и уметь приподнести это. Если же ваш дизайнер скажет «Я не писатель», возможно, пришло время сменить дизайнера.

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

Читабельность

ADMIN — Thu, 05 Aug 2010 17:55:33 GMT

Читабельность

Если текст вашего сайта будет чистым и удобочитаемым выиграют все, пользователям не придется щуриться, и они еще не раз к вам вернуться, вы будете рады растущей аудитории, а люди с пониженным зрением будут вам особенно благодарны.

Не используйте слишком много различных размеров шрифта¹
Используйте рубленые шрифты для основного текста²
Не используйте много различных гарнитур³
Акценты⁴
Выравнивание⁵
Контраст⁶
Использование прописных букв⁷
Пространство⁸
Размеры текстовых блоков⁹

Не используйте слишком много различных размеров шрифта

Размер шрифта — отличный способ разделения текста. Он работает как знак, который говорит «Здесь что-то важное» или «Здесь начинается новый раздел, крупный текст указывает, чему посвящен этот раздел, а мелкий это содержание раздела». Как и в других способах визуального разделения, размер шрифтов должен достаточно различаться, чтобы это работало.

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

Используйте рубленые шрифты для основного текста

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

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

Шрифты с засечками

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

Рубленые

Рубленые шрифты (Гротески, Гротесковые шрифты) более простые и не имеют засечек. Они выглядят современными и открытыми. Рубленые шрифты гораздо более разборчивы на экране монитора, чем готические, благодаря своей простоте они легко отображаются на низких разрешениях.

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

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

¹⁰

Не используйте слишком много различных гарнитур

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

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

Акценты

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

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

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

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

Выравнивание

Текст с выравниванием по левому краю читается гораздо проще, чем с выравниванием по правому.

Выравнивание «по ширине» (когда слова растягиваются так чтобы левая и правая границы параграфа были ровными) может быть эффективно, только если строки имеют достаточную длину (40 и более символов). Но текст на экране монитора гораздо проще воспринимается, если колонка не слишком широкая, что не позволяет применять выравнивание по ширине. Я думаю, что веб страница не место для применения выравнивания «по ширине», потому что не имеет достаточную ширину и разрешение, чтобы сделать его достаточно хорошо.

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

Контраст

Очень важен достаточный контраст между текстом и фоном. Используйте черный текст на белом фоне, везде где это возможно. Если использование белого фона невозможно, старайтесь использовать черный текст на более светлом фоне. Чтение белого текста на черном фоне очень утомительно.

Использование прописных букв

НЕ ИСПОЛЬЗУЙТЕ ПРОПИСНЫЕ БУКВЫ ДЛЯ БОЛЬШИХ ФРАГМЕНТОВ ТЕКСТА, ПОТОМУ ЧТО КОНТРАСТ МЕЖДУ СИМВОЛАМИ СИЛЬНО УМЕНЬШАЕТСЯ, ЕСЛИ ВСЕ ОНИ ОДНОГО РАЗМЕРА.

Прописные буквы очень важны, потому что позволяют выделить начало предложения или важную информацию, такую как имя. Они теряют эффективность, если используются не в меру. Текст, написанный прописными буквами, читается очень медленно и тяжело.

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

Пространство

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

Используйте приближение, чтобы связать заголовок с текстом, помните, что заголовок должен быть ближе к тому параграфу, к которому он относится, чем к предыдущему.

Расстояние между буквами в типографике называют кернинг, а межстрочное расстояние лидинг.

CSS позволяет дизайнерам управлять кернингом (с помощью свойства letter-spacing) и лидингом (с помощью свойства line-height), но у вас должны быть важные причины для их изменения. Не указывайте кернинг или лидинг меньше значений по умолчанию это ухудшает читабельность текста.

Research proof that margins improve readability (and leading is nice)¹¹

Размеры текстовых блоков

Текстовые блоки не должны быть слишком широкими или слишком узкими.

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

Широкие абзацы менее удобны для чтения, чем узкие, это одна из главных причин использования газетами и журналами нескольких узких колонок на странице.

Оформление гиперссылок

ADMIN — Thu, 05 Aug 2010 17:47:56 GMT

Оформление гиперссылок

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

Правила

Текстовые гиперссылки должны хорошо выделяться на фоне остального текста.
Наведение мышки на ссылку должно вызывать эффект подсветки.
Текст ссылки должен быть, по возможности коротким, но достаточно длинным, чтобы четко описать следующее:

куда вы попадете.
что увидите
что произойдет

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

ссылки на файлы
ссылки, открывающие или закрывающие окна.

Как не нужно делать ссылки?

Пример: www.amapproved.com¹

Сайт предназначен для поиска доступных Aston Martin по всему миру. На скриншоте пример результатов поиска. Догадайтесь, как можно получить более подробную информацию о каждом автомобиле? Ссылка здесь только модель автомобиля (в колонке Vehicle summary).

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

Вторая проблема заключается в том, что ссылки выглядят одинаково, хотя ведут в совершенно разные места, нарушено правило 4². Один и тот же текст ссылок (модель автомобиля) тоже не способствует тому, чтобы они были похожи на ссылки.

Нажимаю на «Aston Martin DB7 GT» я ожидаю увидеть описание этого автомобиля, нарушено правило 3², потому что ссылка не отвечает на вопрос, что я увижу, если нажму на нее.

Как нужно было сделать?

Вы хотите получить информацию о конкретном автомобиле, а в данном случае объектом который описывает каждый автомобиль, является вся строка таблицы, поэтому именно она должна быть ссылкой. Подсветка строки при наведении мыши может дополнительно, подчеркивать этот факт.

Точный размер в гиперссылках

Достаточно распространенная практика указывать точный размер в ссылке на файл:

PDF (46,764 байт)⁴

Все что нужно пользователю это знать как долго будет загружаться файл, несколько секунд или минут.

Как это сделать правильно?

Нет никаких причин для указания более чем двух цифр в размере файла. В предыдущей ссылке достаточно указать 47KB. Старайтесь использовать килобайты или мегабайты для указания размеров файлов: 4.7KB, 47KB, 470KB, 4.7MB и т.д.

Оформление гиперссылок

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

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

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

Синие гиперссылки в черно-белом отображении, с подчеркиванием и без него.

Должны ли гиперссылки использовать подчеркивание?

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

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

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

Вот пара примеров, коллекций ссылок в оригинальном оформлении, и без подчеркивания.

Обратите внимание, что чтение списка ссылок без подчеркивания быстрее и проще.

Во втором примере для лучшего разделения тем немного увеличен интервал между элементами списка.

Логичность

Очень важно чтобы гиперссылки вели себя достаточно последовательно.

Очевидно, что некоторые ссылки, например, в блоке навигации, требуют специального цветового оформления или особого поведения.

Посмотрите на пример взятый с сайта Guardian Online⁵.

На первый взгляд ссылки достаточно схожи, цвет #036, в основном не подчеркнуты, но при наведении мыши используются различные стили.

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

В данном случае нет никаких причин для различий в поведении ссылок. Третий пример к тому же противоречит правилу 2², потому что при наведении мышки ссылка становиться слабой и менее заметной, а это не «подсветка».

Заключение

Мне кажется, сбалансированным решением следовать стандарту де факто и использовать для ссылок цвет #00f или #00c, и красный с подчеркиванием при наведении на них мышки, в этом случае достаточно функциональны как отдельные ссылки в тексте, так и большие группы ссылок.

9 советов по оформлению текста для Web

ADMIN — Thu, 05 Aug 2010 17:44:11 GMT

9 советов по оформлению текста для веб

Redd Horrocks, 15 февраля 2009

95% пользователей не читают 80% вашего контента, к таким выводам пришли разработчики CWsites¹. Статистика как видите не самая хорошая. Как же улучшать восприятие контента, донести его до как можно большего числа пользователей?

1. Разбивайте текст на небольшие параграфы

Чтобы упростить чтение, разбивайте большие блоки текста на параграфы. За компьютером читатель редко концентрируется исключительно на тексте, обычно, параллельно работает IM клиент, открыты блоги, кричат дети. Если текст разбит на параграфы, читателю проще вернуться к нужному месту текста, после того как он отвлекся от экрана.

К тому же, если текст разбит на небольшие параграфы, читателю кажется, что он потратит на него меньше времени чем на тот же текст без разбиения.

2. Используйте подзаголовки

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

3. Уберите все лишнее

Многословность и красноречие хороши в поэзии, но малопригодны для текста в веб.

Точность, прямота и краткость — вот что нам нужно.

Например:

«Если вы хотите получить доступ к нашему замечательному разделу содержащему техническую информацию и советы, мы просим вас нажать кнопку на вашем внешнем устройстве типа мышь»

Далеко не столь удобно и приятно для пользователя как простая ссылка:

«Техническая поддержка».

4. «Второй черновик = Первый черновик - 10%» — Стивен Кинг

В замечательном издании для авторов «Как писать книги. Мемуары о ремесле» Стивен дает отличный совет: «Второй черновик = Первый черновик - 10%». Когда текст готов, постарайтесь сократить количество слов на 10%, это сделает его более кратким и выразительным.

5. Выделяйте самое важное

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

6. Используйте читабельный шрифт

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

7. Не забывайте подвести итоги

Этот пункт применим к большинству статей. Обязательно опишите читателю общую идею и подведите итог. Подводить итоги нужно кратко и по делу. (Для веб хорошо подходит стиль написания перевернутая пирамида², когда статья начинается с основной мысли и вывода, но писать в таком стиле очень непривычно.)

8. Чаще обновляйте информацию

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

9. Тщательно проверяйте тексты перед публикацией

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

Рекомендованные книги:

Как писать книги. Мемуары о ремесле - Стивен Кинг
(On Writing - Stephen King)
The Elements of Style - William Strunk

Совместимость сайтов с IE8

ADMIN — Thu, 05 Aug 2010 17:10:51 GMT

Совместимость сайтов с IE8

В блоге команды Internet Explorer¹ недавно опубликован список основных проблем совместимости существующих сайтов с IE8.

Разница между IE8 в режиме совместимости и IE7

Кросс-документные связи

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

РЕШЕНИЕ: Используйте Cross Document Messaging (XDM)².

Расширение объекта события

В IE8 у объекта события есть свойства, связанные с новыми возможностями, например, source для Cross Document Messaging (XDM)², некоторые из них доступны и в режиме совместимости, это может привести к конфликту с пользовательскими свойствами объекта события.

event.source = myObject;  // Только для чтения IE8

РЕШЕНИЕ: Измените имя конфликтующего свойства.

event.mySource = myObject;

Порядок атрибутов

Порядок атрибутов в коллекции атрибутов и свойствах innerHTML и outerHTML изменен.

attr = elm.attributes[1];  // может отличаться в IE8

РЕШЕНИЕ: Ссылайтесь на атрибуты по имени.

attr = elm.attributes["id"];

Присваивание не поддерживаемых значений CSS свойств

Присваивание значений не поддерживающихся в IE7, но поддерживающихся в стандартном режиме IE8 не приводит к исключению в режиме совместимости. Некоторые сайты используют эти исключения, чтобы определить поддерживается ли соответствующее значение CSS свойства или нет.

try {
    elm.style.display = "table-cell";
} catch(e) {
    // выполняется в IE7, но не в IE8,
    // независимо от режима
}

РЕШЕНИЕ: У этой проблемы нет простого решения (за исключением определения версии браузера). Лучшее что можно сделать это обновить страницу для работы в стандартном режиме IE8.

Разница между стандартным режимом и режимом совместимости IE8

Большинство проблем связано с отсутствием старых ошибок в стандартном режиме IE8. Обновление сайта для работы в стандартном режиме IE8 лучшее решение в долгосрочной перспективе, но если нужно быстрое решение проблем то можно использовать режим совместимости⁴.

В стандартном режиме кроме вышеупомянутых проблем, можно столкнуться со следующими:

Определение версии браузера

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

Web Desing For You WDFY

Дизайн по аналогии

Дизайн по аналогии

Зачем мириться с дизайном на основе аналогий?

Когда аналогии атакуют

Возвращаемся в реальный мир

Еще один способ обсуждения не больше, не меньше

Вопросы на которые нужно ответить перед редизайном

Вопросы на которые нужно ответить перед редизайном

1. Какова цель редизайна?

2. Вы хотите внести небольшие изменения или переделать все?

3. Какие черты существующего дизайна наиболее эффективны?

4. Какие черты существующего дизайна наименее эффективны?

5. Кто ваши целевые посетители?

6. Как сделать сайт более дружелюбным?

7. Нужно ли внести изменения в логотип/брендинг?

8. Нужно ли менять цветовую схему?

9. Какое разрешение экрана используют посетители?

10. Какова скорость подключения у ваших клиентов?

11. Что должно быть основой дизайна?

12. Как сделать навигацию более эффективной?

13. Чего посетители хотят от сайта?

14. Как получить постоянных посетителей?

15. Кто будет заниматься поддержкой и развитием?

16. Нужна ли CMS?

17. Как улучшить SEO?

18. Какие будут ключевые слова и фразы?

19. Какие страницы и поисковые фразы сейчас привлекают трафик?

20. На какие страницы есть входящие ссылки?

21. Что нужно сделать чтобы посетители возвращались.

23 важных вывода из результатов eye-tracking исследований

23 важных вывода из результатов eye-tracking исследований

100% Easy-2-Read

100% Easy-2-Read

Oliver Reichenstein, 6 мая 2007

Не говорите нам, что можно настроить размер шрифта

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

Не говорите нам, что скроллинг это плохо

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

Не говорите нам, что нужно взять очки

Пять простых правил

1. Стандартный размер шрифта для длинных текстов

2. Активное пространство

3. Удобная высота строки

4. Четкий контраст

5. Не делайте текст в виде изображений

Борьба за читабельность

Как присоединиться к E2R

Элементы веб-типографики

Элементы веб-типографики

Совет 1: Не ограничивайте себя в выборе размера шрифта

Совет 2: Работайте с межбуквенным расстоянием

Совет 3: Высота строк и расстояние между словами

Совет 4: Попробуйте использовать старого фаворита по новому

Совет 5: Не бойтесь экспериментировать

Учитесь писать

Учитесь писать

Впечатления пользователя это не только визуальный дизайн.

Текст это интерфейс

Пора забыть об lorem ipsum

Читабельность

Читабельность

Не используйте слишком много различных размеров шрифта

Используйте рубленые шрифты для основного текста

Шрифты с засечками

Рубленые

Не используйте слишком много различных гарнитур

Акценты

Выравнивание

Контраст

Использование прописных букв

Пространство

Размеры текстовых блоков

Оформление гиперссылок

Оформление гиперссылок

Правила

Как не нужно делать ссылки?

Пример: www.amapproved.com1

Как нужно было сделать?

Точный размер в гиперссылках

Пример: www.amapproved.com¹