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

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

Тестировалась и работает правильно в IE 7, Opera 10, Firefox 3.5, Safari 3.1.2, Chrome 3.0.195.27.

Демонстрация…

Сделал скрин:

Сегодня вспомнил про старый скрин и решил посмотреть, исправлен ли баг за это время? :)

Оказалось, не исправлен.

Проверил на FF (самый тормозной браузер что дома, что на работе). Ровно то же самое. Скрин не делал — выглядит точно так же, как в опере. В IE не проверил по техническим причинам. Но думаю, эффект будет тот же.

Как обычно происходит?..

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

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

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

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

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

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

Элементарные правила.

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

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

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

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

Зайдя на сайт, вы будите искать информацию о необходимой вам вещи. Если ссылка на нее найдется на главной странице, вы кликните на ссылку и попадете непосредственно к информации (путь 1). Иначе, вы ищите в меню сайта раздел, который приведет вас к искомой информации (путь 2.1), или ищите поиск по сайту (путь 2.2). Воспользовавшись меню или поиском, вы должны найти искомую информацию. Это все это должно пройти максимально быстро, моментально. Ваше внимание должно быть потрачено не на поиск информации, а на ее «потребление».

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

Если же нужную информацию посетитель не нашел на главной странице сайта, он пользуется меню (чаще) или поиском (реже). Поэтому, эти элементы страницы должны быть максимально удобны, видны, просты и эффективны. Под эффективностью понимается наименьшее количество действий, которое придется совершить пользователю для нахождения искомой информации, а так же простота пользования элементами страниц сайта. Взглянув на меню, у посетителя не должно возникнуть ни одного лишнего вопроса, и он должен максимально быстро понять, куда ему надо кликнуть, чтобы на шаг приблизится к искомой информации. Окно поиска должно быть видно на странице, и не должно содержать лишних управляющих элементов. В идеале это должна быть текстовая метка «Поиск», строка ввода длиной на 2-3 слова и кнопки «найти».

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

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

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

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

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

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

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

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

1. Где я?
2. Откуда следует начать?
3. О чем этот сайт?
4. Где находится …?
5. Что здесь есть еще?

Вариант 2: неглавные страницы.

1. Где я (в контексте иерархии сайта)?
2. Что главное на этой странице?
3. Почему это называется так?
4. Что далее?

Конкретные советы.

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

• Общие правила.

1. На странице должны быть ясно выражены и легко заметны элементы: логотип сайта, главное меню сайта, локальное меню (если есть), заголовок текущей страницы, наиболее важная информация на странице.
2. Выделяйте то, что пользователю нужно увидеть в первую очередь. Не размещайте информации, которая изначально врядле заинтересует кого-то.
3. Для выделения нужной информации используйте размер шрифта – это наиболее удачный способ сделать информацию заметной. Особенно это касается заголовков. Цвет удачен для выделения рекламного блока, или для выделения одного или нескольких важных слов в предложении.
4. Используйте только понятные и простые графические символы. Пользователь часто может неправильно понять сложный символ.
5. Максимально просто и коротко составляйте все текстовки, особенно вспомогательные.
6. Старайтесь разнести информацию в логические блоки, не перегружая страницу блоками. Сами блоки и информация в них должны быть размещены свободно и в простой и понятной форме.
7. Синхронизируйте текст ссылки с тем, куда она ведет. Если пользователь почувствует, что он попал не туда, куда хотел попасть по ссылке в соответствии с ее текстом или символом, его реакция будет негативна.
8. Выделяйте ссылки. Если на странице ссылок на порядок меньше, чем «нессылок», обязательно подчеркивайте ссылки, независимо от заявлений дизайнера, что это некрасиво. Это удобно, очень удобно! А это главное.
9. Пишите вспомогательные текстовки максимально кратко. Не «лейте воду» – такое никто не читает.

• Главная страница.

1. Размещайте на ней только самую важную информацию, дайте пользователю понять, о чем этот сайт и что он может здесь найти (максимально кратко).
2. Дайте пользователю понять, с чего стоит начать просмотр сайта, если у него нет цели найти какую-то конкретную информацию; дайте ему понять, как искать то, что он хочет найти.
3. Покажите, что есть важное на сайте, кроме того, что он ищет.
4. Публикуйте на главной странице только анонсы. Не захламляйте ее деталями. Суть этой страницы рассказать пользователю – «вот тут – это, а там –то; а это можно найти тут; и еще у нас есть интересное предложение о том-то, прочитайте его здесь». Вся детальная информация должна быть опубликована только в соответствующих разделах сайта.

Скачать книгу можно с сайта nnm.ru. Правда лучше конечно купить :)