После небольшого перерыва продолжаем публикацию "Простых опытов" от канала GTV. В этом выпуске:

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

Под катом 6 видео.

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

Согласно отчету принадлежащей Google рекламной сети DoubleClick, которая отслеживает посетителей по cookies, в числе 500 самых посещаемых сайтов сети есть десятки порнографической направленности. Xvideos, самый крупный порносайт мира, получает 4,4 миллиарда просмотров страниц в месяц, что в три раза больше, чем CNN или ESPN, и в два раза больше, чем Reddit. LiveJasmin, YouPorn, Tube8 и Pornhub — огромные веб-сайты, посещаемость которых ниже лишь гигантов уровня Google или Facebook.

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

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

«Нужно определить, какими устройствами могут пользоваться ваши посетители, проработать и создать для этих устройств представление вашего сайта, определить устройство посредством проверки заголовков браузеров, и отправить наиболее подходящее представление.»

Почему это глупо

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



Это скриншот из презентации «Beyond the mobile web by yiibu» (очень рекомендую).

Во-вторых, если вы не facebook или yandex, скорее всего, вы не потянете создание и поддержку разных версий сайта для каждого устройства. Да и это не имеет особого смысла. Потому что ситуация становится похожа на реалии пятнадцатилетней давности. Тогда делали сайт «под браузер», а сейчас автор предлагает делать сайт «под устройство».

Как сделать один сайт для всех устройств

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



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

Начнём с описания ifttt.com

ifttt.com — это очень перспективный стартап, который в двух словах: Lets You Hack Together Web Apps, Without Coding Skills. Если детальнее, то это сервис позволяющий пользователям, без погружения в API огромного количества сервисов и каких либо знаний о разработке\языках программирования смешивать и автоматизировать различную активность друг с другом. В начале 2012 года получили посевные инвестиции в размере $1.5M.

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


Экран задач выглядит так

Предлагаю вашему вниманию вольный перевод статьи Avi Itzkovitch Designing Experiences for Young Kids: Child Proofing your Application

Мне недавно посчастливилось работать над интерактивной книгой для детей дошкольного возраста (2-5 лет) для платформ IPad и Android. При проектировании для маленьких детей необходимо смотреть на вещи с точки зрения ребенка, и, в процессе работы над проектом, я получил для себя несколько важных уроков.
Дети любопытны и хотят все исследовать. Как правило, они касаются руками всего, что видят, и могут заметить то, что взрослые обычно не замечают. Например, дети не подвержены баннерной слепоте, для них это еще одна возможность узнать, что произойдет, если на него нажать. Большинство проблем у молодых пользователей вызывает возможность перемещаться в приложении, потому что они боятся нажать что-то не то. Реклама, случайное прикосновение или просто кнопка меню могут затруднить пользование приложением ребенку.

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

Немного об истории решения этого вопроса.

Самой первой популярной техникой была так называемая FIR (она же — Fahrner Image Replacement), которая появилась в 2003-м году. Она проста как пень, и многие начинающие верстальщики ее до сих пор используют:

Представляю вашему вниманию перевод статьи под названием "Site Search: Strategies for No Results Found" от Linda Bustos. Перевели в компании UXDepot специально для пользователей Хабрахабра с одобрением компании Elastic Path.

Эта статья написана по мотивам книги Грега Ньюдельмана "Designing Search: UX Strategies for Ecommerce Success". Необычно видеть книгу на 300 страниц, посвященную одному единственному аспекту создания интернет-магазинов, но оптимизация поиска по сайту действительно заслуживает такого внимания!



Есть одна составляющая оптимизации поиска по сайту, на которой мы часто зацикливаемся: как удержать пользователя на сайте, даже если в результате поиска ему не удалось найти то, что требовалось. Статья основана на разделе "No Search Results Strategy: Not a Zero-Sum Game" вышеупомянутой книги. Ньюдельман говорит о том, что «нет простого набора правил, которые гарантировали бы успешное внедрение страницы результатов поиска в случае, когда не было найдено ни одного совпадения. Но есть четыре принципа, от которых стоит отталкиваться»:

Классное расширение для фреймворка Twitter Bootstrap v2.0 — CSS-генератор кнопок. С помощью ползунков выбираете цвет, насыщенность, яркость и выпуклость кнопки.



Потом забираете CSS-код из соседнего окошка. И больше никогда не кодируйте цвет кнопок вручную!

P.S. Ещё один генератор кнопок: Button Maker, ну и вдобавок: CSS генератор градиентов.

— Феденька, ты очень интеллигентный мальчик, ты мне очень нравишься, но Я БУДУ СТАВИТЬ ДВА В ГОДУ!!! — визжала моя школьная учительница по французскому и делала примерно такое лицо.

Моя школьная учительница по английскому языку делала другое лицо:

При использовании свойств box-shadow или border-radius непосредственно на изображении, браузеры могут некорректно отображать заданные нами CSS стили, из-за чего внешний вид блока будет существенно отличаться от задуманного. Однако если использовать изображение в качестве фона, то этой проблемы можно запросто избежать. Из статьи вы узнаете, как с помощью jQuery сделать идеально закругленные углы у изображений, а так же какие еще способы оформления возможны с помощью таких свойств как box-shadow, border-radius и transition.

Довольно давно на Хабре не было статей про такой удобный и эффективный инструмент для быстрого прототипирования как Axure RP.
Решил выложить свою подборку закладок по «Акшуре» в виде сводного списка ресурсов.

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

1) Вложение не более $10 000
2) Прибыль не менее $1 000 в месяц
3) Минимальная рутина

По первым двум пунктам все понятно. А вот по третьему пункту поясню. К тому моменту я уже работал в собственной компании (сфера финансов). Это был 2009 год. Последствия кризиса еще сильно влияли на основной бизнес и работы было непочатый край. Много времени отвлекать на сторонний бизнес автор не мог.
Подходящий случай подвернулся в октябре 2009 года.

Оригинал опубликовал Лео Бабаута на сайте Zen Habits. Я его вольно перевел и немножечко адаптировал. Сразу оговорюсь, я не претендую на точность перевода. Моей задачей было перевести не точно, а понятно. Приятного чтения и применения!

«Это про привычки и делание, а не про систему и инструменты»

Чтобы закрепить основы продуктивности и организованности, сохраняя всё настолько простым, насколько возможно, я разработал свою собственную систему продуктивности: Zen To Done (ZTD).

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

Что представляет собой компания Fprints? Это сеть магазинов в Санкт-Петербурге, крупнейший интернет магазин по продаже расходных материалов для печати в России, но самое важное, это крепкая, сплоченная команда единомышленников, которая каждый день стремится воплотить в жизнь свою цель. А цель проста, как все гениальное – дать возможность покупателям со всей России приобретать абсолютно все расходные материалы для печати в одном месте, по низкой цене. Но 5 мая 2009 цели были другими.

Представляю вашему вниманию перевод статьи "Redesigning the ExpressionEngine Site" от Jesse Bennett-Chamberlain. Перевели в компании UXDepot. Специально для пользователей Хабрахабра с одобрением издания Digital Web Magazine.

Офицер-пограничник на границе между США и Канадой: «Вы направляетесь по делам или же отдыхать, сэр?»
Я: По делам.
Офицер: Уточните причину, пожалуйста.
Я: Я веб-разработчик и еду на встречу со своим клиентом в штате Орегон для обсуждения проекта.
Пограничник: Как называется компания вашего клиента?
Я: «pMachine».
Пограничник: Вы везете какие-либо сайты с собой?
Я: *недоумевающий взгляд*
Пограничник: В вашей машине есть какие-либо сайты, сэр?
Я: Хмммммм… нет, сайты сейчас на серверах. В машине я ничего не везу.
Пограничник: Тогда как вы хотите показать их вашему клиенту?
Я: Хмм… вообще-то я просто еду на встречу с клиентом для обсуждения сайта, пока я ему ничего не везу.
Пограничник: Хорошо, тогда наслаждайтесь поездкой, сэр.

(30 секунд молчания)

Хизер: В следующий раз скажи, что мы едем на отдых.

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

Неужели нам остаётся лишь сносить эту му́ку? Что ж, теперь нет! Недавно я обнаружил подход, который позволит дизайнерам распрощаться с открытием 23 PSD-файлов только ради смены цвета элемента в шапке. Вместо этого мы можем поступать разумно, как наши коллеги, разработчики, и импортировать внешние файлы при помощи кое-чего с названием «Variables (Переменные)».

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

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

Однако, в зависимости от вида, каждые 7, 11, 13 или 17 лет периодические цикады одновременно массово вылезают на свет и превращаются в шумных летающих тварей, спариваются и вскоре умирают.

Хотя наши странные цикады весело уходят в иной мир, возникает очевидный вопрос: это просто случайность, или числа 7, 11, 13 и 17 какие-то особенные?

Представляю вашему вниманию перевод статьи под названием "Fundamental Guidelines Of E-Commerce Checkout Design" от Christian Holst. Перевели в компании UXDepot специально для пользователей Хабрахабра с одобрением издания Smashing Magazine.

Грустная статистика систем электронной коммерции — согласно последним исследованиям, по крайней мере 59,8% потенциальных покупателей покидают сайт на этапе оформления заказа и его оплаты (у разных исследований разные показатели — от 59,8% у MarketingSherpa до 83% у SeeWhy).

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