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

В последнее время, разрешение мониторов у пользователей растёт быстрее, чем увеличивается и принимается за стандарт ширина фиксированных сайтов. И если сейчас её принято верстать под 1024 px, реже под 1280 px, то большой процент пользователей уже сидит на разрешениях экрана от 1440 px и выше. Сейчас уже никого не удивишь домашним монитором в 20-22-24 дюйма.

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

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

Отсюда несколько наглядных картинок для примера:

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

Для полноты статьи и её практической ценности вот ссылка на методы CSS-выравнивания. Какой из них выбрать, решать вам. Я предпочитаю первый, с небольшим ухищрением для IE6.

P.S.: Для тех, кто утверждает, что «для работы не нужно разворачивать браузер на весь 2x-дюймовый экран». Согласен. Для работы. Но, как показывают личные наблюдения, пользователи предпочитают не экономить место, если просто серфят для удовольствия.

* * *

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

1. Уничтожение сайтов руками владельцев
2. Спорное оформление вкладок и кнопок
3. Посетители сайтов: читатели, пользователи или участники?

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

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

Итак, стартуем!

Я не буду останавливаться на мелких шрифтах и прочих всем понятных вещах. Лучше покажу скриншоты (масштаб 100%) с моментами, которые не дают скучать.

А какие еще версии русского языка вам знакомы?

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

Вот так, за счет трекинга, можно сэкономить место в рекламных тизерах-аккордеонах. Берите на вооружение :)

Позитивная информация для туристов и понятный разборчивый баннер в боковой колонке. Кликаем!

Такие вот сервисы и разговорчивые сингапурцы.

Бесплатный интернет-магазин страниц для печати.

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

На странице расширенного поиска, единственный язык, не переведённый на русский — это… русский.

Убедили. Но если я уже не уверен в том, что ищу, о чём он меня проконсультирует?

«Нажмите сюда, чтобы перейти на следующую страницу.» Нет слов…

Вы пришли из «… → …»

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

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

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

* * *

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

Тем не менее, блог продолжает жить своей жизнью, и один из моих старых постов даже засветился в недавней подборке от smashingmagazine. Чертовски приятно.

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

* * *

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

1. Оставьте текст в покое!
2. Горизонтальное центрирование фиксированных сайтов

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

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

Но особо продвинутые вебмастера и в этом пытаются досадить читателям, используя дополнительный «умный» тюнинг сайтов. Вот эти способы сегодня и попали в чёрный список АнтиВебДизайна.

Отключение клавиш мыши с помощью JavaScript

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

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

Отключение выделения текста, блокировка клавиш мыши — раздражитель и древность. Сейчас даже на flash-сайтах тексты стараются делать выделяемыми.

SnapShots в Livejournal

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

Поэтому приходится крутить такие страницы скроллбаром и читать авторов, которые не очень любят ставить ссылки :)

Ссылки-параграфы

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

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

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

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

* * *

Тем, кому нравятся умные и замечания мысли на тему веб-разработки и юзабилити, советую обратить внимание на блог (и авторские статьи) Романа Настенко, найдёте много чего интересного, для осмысления и для практики.

* * *

Сканер блогов:

Обмен постовыми для блоггеров от CodeIsArt. Не упустите шанс! 5 Удобных CSS Reset Техник. Для тех, кто ещё не определился каким образом сбрасывать стандартные стили в браузерах. 30-ка качественных блогов по интернет-маркетингу.

* * *

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

1. Горизонтальное центрирование фиксированных сайтов
2. Usability Webinar: удачный коннект
3. Ежедневные юзабилити-тренировки

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

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

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

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

Конечно грустно осознавать, что при таком подходе владельцев/редакторов/убиийц, все твои работы медленно превращаются в «прекрасные» творения с серверов narod.ru.

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

Теперь же, каждый сам себе дизайнер и третьим глазом «видит», как и что должно работать. Особенно с помощью чёрной магии WISYWIG-редакторов, подпитанной базовым владением Microsoft Word.

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

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

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

P.S. Ссылок на работы не дам, и не просите. Стыдно.

* * *

Сканер веба:

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

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

1. Горизонтальное центрирование фиксированных сайтов
2. Посетители сайтов: читатели, пользователи или участники?
3. 111 CSS-галерей и сайтов для раскрутки дизайна

Недавно, выполняя дизайн для одного из клиентов компании, в которой работаю, я проводил анализ сайтов конкурентов (всегда так делаю, перед непосредственной разработкой макета), и наткнулся вот на это «чудо» (всем обязательно к посещению!).

Первое впечатление, честно говоря, ошеломило, когда в наушниках, между надрывами голосовых связок вокалиста из Drowning Pool стало пробиваться ЭТО. Я и не сразу смог сообразить, откуда звук, так как сайт был открыт в фоновой закладке браузера. Прежде, чем нашел в чем причина, и откуда доносятся эти мотивы, мне пришлось их прослушать еще не один раз. Игра мышом в pixel hunting не дала никаких результатов. Выключателя там просто нет, и так думаю, не предвиделось. Причем звук присутствует на всех страницах сайта!

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

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

UPD: сайт, указанный по ссылке обновился и больше не достаёт посетителей midi-мелодиями.

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

1. Веб-стандарты на сайтах и угроза со стороны
2. 12 вариантов сочетаний шрифтов, которые можно использовать на своих сайтах