26 заметок с тегом

дизайн

Позднее Ctrl + ↑

Сортировка в HTML-списках

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

Наступает страшное — нужно найти собственно то, что отметить. Тут два варианта: либо вы нажимаете на клавиатуре первую букву своего населённого пункта, либо ищете с помощью мышки.

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

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

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

<option value="ru">Россия</option>

дописать selected="selected" в тэг.

Преимущества:

  • Вам не нужно делать особую выборку для алфавитной сортировки
  • Страна находится на своём месте и даже при случайном сбросе пункта её можно будет найти
  • Можно динамически просчитывать, какой пункт списка является популярным и отмечать именно его в первую очередь

Сага о сайдбарах

Сейчас у каждого уважающего себя интернетчика есть блог: в ЖЖшечке, микроблог в твиттере или на других платформах. Не менее распространены и блоги на WordPress, для которого расплодилось скинов не меньше, чем блогов, пожалуй. И каждый из них по своему уникален. Но одна общая черта есть почти у всех — наличие минимум одного сайдбара. Ниже постараюсь раскрыть плюсы и минусы каждого варианта, чтобы вы сделали для себя верный выбор. Итак, где располагать сайдбары в блоге?

Сайдбар справа


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

Плюсы: привычность, не мозолит глаза (если не содержит вызывающих элементов, конечно), загружается после контента

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

Сайдбар слева


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

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

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

Двойной сайдбар справа


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

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

Минусы: слишком широкие сайдбары оставят меньше площади под контент, что сделает его чтение неудобным; неприемлемо при малом количестве блоков — тогда на длинных страницах будет больше пустоты внизу.

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

Двойной сайдбар слева


Совершенно уродливый вариант, который акцентирует внимание именно на сайдбарах, а не на контентной части.

Плюсы: если вам важнее статистические данные, чем статьи, то этот вариант для вас.

Минусы: загружается до контента; отвлекает внимание от чтения; выглядит перегруженно; может растягивать страницу по ширине, сужая контент по площади.

Менее всего на блогах хотелось бы видеть данную схему.

Два сайдбара на разных сторонах


Тоже достаточно известное со времён web 1.0 решение, когда в одной колонке размещалась навигация, а в другой — полезная информация, необходимая на каждой странице.

Плюсы: сбалансированность дизайна; не перетягивает на себя внимание от статей.

Минусы: может выглядеть слегка непривычно и перегружено при непродуманном наполнении.

В данном случае, наверное, будет правильнее размещать навигационную часть — новые записи, архив и тэги слева, а «новостную» — новые комментарии, полезные ссылки, счётчики, RSS справа.

Сайдбар в подвале


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

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

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

Сайдбар вверху


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

Плюсы: занимает мало места, зато даёт возможность переходить на статичные страницы сайта.

Минусы: всплывающие меню могут не работать (или некорректно работать) без JS; может быть неочевиден при использовании, если там будут располагаться ссылки на рубрики или тэги блога.

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

2011   WordPress   блоги   дизайн

Логика против маркетинга

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

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

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

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

Ну и завершить эту тему можно докладами Ильи Бирмана и Сергея Чикуёнка на 404фесте:

2010   дизайн   жизненно   лайфхаки   сеть

Мысли о дизайн-студиях

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

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

Но самый писец — когда берут бесплатный шаблон (при том явно десятилетней давности) и продают как свой. Бывало и такое.

2010   дизайн   факап

Новый тви = добро?

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

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

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

Плюсы нового интерфейса

  • Как уже написал, можно одним кликом посмотреть фотку в твите, не переходя на картинкохостинг. Это удобно, когда хочется посмотреть много таких твитов.
  • Стал понятный «@mentions», в отличие от того, как оно было устроено в прошлой версии
  • Показ ретвитов теперь не глючит. Раньше при нажатии на ссылку иногда ничего не происходило.
  • При клике на твит также появляется много полезной информации о человеке:
    • сколько фолловеров
    • кто упомянут в этом твите
    • ответом на какой твит является это сообщение(!)
    • и наоборот, какие твиты стали ответами на этот
    • прошлые твиты этого участника

В целом, я считаю, это полезные введения. Если бы ещё не обошлось без недостатков.

Недостатки

  • Слишком много нагромождено и новичку сложновато сразу сориентироваться в том, где что к чему.
  • Эти выскакивающие окошки для реплая только раздражают.
  • При посте ответа, он не появляется сразу как раньше, а лишь при обновлении выскакивает.
  • Дольше загружается. Заметно дольше.
  • Блоки «who to follow» и «trends» теперь мозолят глаза своей навящивостью. Раньше они хотя б внизу были как-то.
  • Я иногда по привычке начинаю писать твит в верхнюю строку, а на её месте теперь поиск.
  • Число твитов на счётчике у меня почему-то уменьшилось. Хз даже отчего так.
  • Непривычно, когда у страницы вместо подвала начинают грузиться старые твиты, всё дальше и дальше. Кнопка more была привычнее и проще.

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

2010   дизайн   твиттер
Ранее Ctrl + ↓