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

Эта очень короткая заметка на примере активации ключей в Steam описывает процесс автоматизации операций, выполняемых при помощи мыши и клавиатуры.

Допустим, вы купили несколько наборов игр Humble Bundle. Теперь у вас есть, например, 5 ключей для активации в Steam. А может быть 15 или даже 25. Вы очень не хотите активировать их вручную, потому что это слишком муторно: в клиенте Steam нужно каждый раз наводить курсор на меню «Games», щёлкать, потом наводить курсор на пункт меню «Activate a Product on Steam…», опять щёлкать, потом нажимать Enter, потом ещё раз Enter, и только затем наконец-то вводить ключ (а потом нужно подождать, ещё раз нажать Enter, затем Escape). А потом повторять то же самое для каждого последующего ключа. Как писал Леонид Каганов, стоило ли вообще ради такого «прогресса» спускаться с пальмы и брать в руки каменный топор?

В общем, вы решили этот процесс автоматизировать — тем более, что задача-то, на самом деле, очень простая. Для её решения нам потребуются консольные утилиты xdotool и xclip — убедитесь, что они установлены у вас в системе.

Один славный малый Matt West c туманного альбиона, промышляющий фрилансом и предпринимательством, предложил нашему вниманию пост: «Как использовать секционные элементы HTML5».
Ниже приводится его перевод.

---

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


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

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

Событие автоподстановки в инпут поля

Проблема: узнать, что пользователь воспользовался функцией автоподстановки. Задача была в том, чтобы подсвечивать кнопку Login, если в полях e-mail и password введено что-либо. Проблема в том, что если эти поля заполняются автоподстановкой из ключницы браузера, то событие change на инпутах не выстреливает.

Решение: использовать псевдокласс :valid. Он срабатывает у инпута, если в нем есть контент, который удовлетворяет типу инпута (text, e-mail) и если у этого инпута стоит атрибут required. Правда решение не работает в IE, но нам не требуется поддержка этого браузера.

<input required="required" class="email-input" type="email" />
<input required="required" class="password-input" type="password"/>
<div class="go">Login</div>

.email-input:valid ~  .password-input:valid ~ .go {
	//стили для активной кнопки Login
}

Маркетинга нет...

                                                    Артемий Лебедев
                                                    $115. О маркетинге
                                                    11 июля 2005

                                                               Маркетинга не существует.

                                                    http://www.artlebedev.ru/kovodstvo/sections/115/

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

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

PhpStorm — повышаем производительность (плагины и темы оформления). Часть 2

У всех нас есть любимые IDE или редакторы в которых мы пишем код. Для меня это PhpStorm, и потребовалось некоторое время, чтобы освоить все клавиатурные сокращения и ускорить свой рабочий процесс. В этой статье я поделюсь с вами некоторыми сочетания клавиш и советами, которые возьмут на себя часть рутинной работы, если вы тоже делаете свою работу в этой IDE. Эта статья была частично вдохновлена этим Reddit тредом, и я буду упомянать и демонстрировать некоторые трюки найденные там.

Обратите внимание, что я разрабатываю на Linux в Vagrant, размещенном в Windows, я буду использовать клавишу CTRL вместо CMD. Если вы работаете в OS X, замените CTRL на CMD.

Клавиатурные сокращения и хаки

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

(осторожно, много gif изображений)

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

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

Всем привет,

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

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

Сегодня полтора года как я начал продавать в интернете и развивать эти самые магазины.

Тематика своеобразна: отопление и водоснабжение.
Регион действия Украина.

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

Если вам интересно что было дальше

Вторая часть статьи из цикла «Продающий дизайн интернет-магазина». Для тех, кто пропустил первую, её можно прочитать тут: «Продающий дизайн интернет-магазина. Часть 1. Аналитика». Сегодня я расскажу про разные части интерфейсов магазинов, которые важны для конверсии и продаж. Постараюсь обозначить какие элементы должны быть в шапке и футере сайта, на главной странице, на странице каталога и многое другое.

Третья часть статьи из цикла «Продающий дизайн интернет-магазина». Для тех, кто пропустил первую и вторую, их можно прочитать тут: «Продающий дизайн интернет-магазина. Часть 1. Аналитика» и «Продающий дизайн интернет-магазина. Часть 2. Элементы интерфейса».

Страница товара

Попав на страницу товара, человек должен получить максимум информации о нем. Здесь не работает правило «краткость – сестра таланта». Так как мы имеем дело с онлайн магазином, то наш покупатель лишён возможности увидеть товар вживую, поэтому мы и должны предоставить ему максимум имеющейся у нас информации: детальное описание, технические характеристики, качественные фотографии, отзывы, видео или 3D-обзор. Отзывы для товаров, кстати, изобрел Амазон, внес социальность на сайт, сильно увеличив тем самым конверсию и продажи.

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

В статье я расскажу реальные истории изменений интернет магазинов и о том, какой эффект они дали. Все истории 2012-2013 годов.

На протяжении многих лет я специализируюсь на анализе текущего положения дел интернет магазина и последующем увеличении его конверсии. За это время у меня набрались некоторые хинты, внедрение которых всегда позволяло на значительную величину увеличить продажи. (Значительное – это конечно, не 500%, а 1%-5%). Другими словами — отсутствие этих вещей, снижает эффективность магазина. Накопилось их значительно больше 6, но я постарался написать о тех, внедрение которых не требует много времени или ресурсов.

Привет! Есть такая штука – постпродажный шок. Это когда человек купил что-то, отдал деньги, получил вещь в руки… и начинает лихорадочно думать, зачем он это сделал.

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

Сейчас расскажу.

От переводчика

Доброго времени суток Хабравчане! Меня, как маркетолога, заинтересовала тема увеличения конверсии в магазинах техническими методами. Сегодня я публикую перевод, посвященный поисковым механизмам в интернет-магазинах. Статья может быть интересна предпринимателям, маркетологам, программистам.

Кому нужна продвинутая система поиска

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

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

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

От переводчика

Юзабилити интернет-магазина — это конструктор, состоящий из множества разных деталей. Одна из шестерёнок этого конструктора — это «хлебные крошки». О них и пойдёт речь в статье. Это мой перевод статьи: http://baymard.com/blog/ecommerce-breadcrumbs. Неточности или ошибки перевода (если Вы такие найдёте) прошу отправлять в личные сообщения — я оперативно внесу необходимые правки. Если статья будет интересна — обязательно переведу и другие материалы подобной тематики.

Введение

«Хлебные крошки» часто считаются не самым интересным компонентом сайта. Однако, последние исследования показали, что они играют далеко не последнюю роль. Что еще более интересно, благодаря данному исследованию удалось обнаружить, что интернет-магазины должны предлагать посетителю два варианта «хлебных крошек» одновременно. Один из них отражает структуру сайта, другой – историю просмотров.

Сопоставляя различные показатели 40 крупнейших сайтов e-commerce, исследователи обнаружили, что 68% интернет-магазинов испытывают трудности с внедрением этого компонента: 45% сайтов располагают лишь одним вариантом «крошек», а у 23% сайтов «хлебные крошки» вообще отсутствуют.

Я работаю в команде семантического веба в Яндексе. Мы занимаемся тем, что создаем продукты на основе семантической разметки, делаем свои расширения и участвуем в развитии стандарта Schema.org.

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



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

Микроразметка состоит из словаря и синтаксиса.

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

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

---

50$. Basecamp

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

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

— Sam Stephenson, создатель Prototype.js, You Are Not Your Code

Создатели браузеров поступают гармонично. Решение о новых API принимают с учётом текущих трендов в opensource сообществах. Так prototype.js способствовал появлению Array.prototype.forEach(), map() и т.д., jquery вдохновил разработчиков на HTMLElement.prototype.querySelector() и querySelectorAll().

Код на стороне клиента становится сложнее и объёмнее. Появляются многочисленные фреймворки, которые помогают держать этот хаос под контролем. Backbone, ember, angular и другие создали, чтобы помочь писать чистый, модульный код. Фреймворки уровня приложения — это тренд. Его дух присутствует в JS среде уже какое-то время. Не удивительно, что создатели браузеров решили обратить на него внимание.