Нас часто спрашивают: «Что почитать для прокачивания навыков в контексте, работе с трафиком, создании ценностных предложений?» Проблема в том, что порталов, блогов, сообществ много, а практической информации мало. 10% создают полезный контент, 90% его переписывают)
В этом списке в основном авторские проекты, которые как раз создают ценность и делятся полезными наработками.

Для удобства работы с материалом мы разбили список по темам: контекстная реклама, веб-аналитика, контент-маркетинг, email-маркетинг, лидогенерация, увеличение конверсии. Отдельно — отечественные и зарубежные источники с примерами постов. Только «живые» ресурсы, которые мы сами регулярно читаем и рекомендуем.

Когда я создавал один из своих веб-проектов — основная модель монетизации для него предполагалась контекстная реклама, а конкретнее – Google Adsense. Но было одно Но. Примерно 25% трафика проекта припадает на закрытые от индексации страницы. А это значит, что контекст там крутиться не будет. Поэтому для таких страниц я решил воспользоваться одним из баннеро-крутильных движков. Т.е. CMS-сайта сама генерирует для разных страниц: либо код AdSense, либо код баннерокрутилки, в которой будут рекламироваться внутренние фичи проекта или какая-нибудь своя реклама.
Почитав про некоторые движки, я остановился на Google DoubleClick. И вот почему. Она позволяла на «пустых» баннеропоказах (т.е. не выкупленных рекламодателем) откручивать объявления AdSense. Прочитав об этом я подумал, что отлично было бы вообще все баннероместа на проекте сделать именно через DoubleClick – при случае можно было бы продать весь баннерный трафик рекламодателю или сейлз-хаусу (ну мало ли, вдруг такие найдутся). Так и было сделано. И пока AdSense был в старом дизайне – все было отлично: для каждого созданного в DoubleClick баннероместа в AdSense появился клиентский канал, по которому можно было отслеживать статистику контекстных объявлений. Но с переходом AdSense на новый дизайн такая возможность пропала. В остальном же работа с DoubleClick меня полностью устраивает, поэтому под катом я расскажу, как все-таки решить возникшую проблему.

Google Analytics —бесплатный сервис статистики для веб-сайтов от компании неравнодушия Google, предоставляет настолько детальную статистику под управлением множества мощных инструментов, что мгновенно стал популярным среди веб-мастеров, включая специалистов Рунета. Но и столь развитая и продуманная система имеет ряд своих недостатков. И справится с ними получается далеко не всегда, и уж точно не малой кровью, ведь все инструменты Google Analytics, скрипты для обработки данных и, главное, вся полученная статистика хранятся на серверах Google, официальная справка и консультанты выдают минимум информации, а основной скрипт для сбора ga.js и тот обфусцирован до невозможности. Всё это связывает руки при попытках решения возникающих с обработкой данных проблем.
Множеством из таких проблем Google бережно треплет нервы именно русскоязычным пользователям: тут и загадочные проблемы с кодировками, пренебрежение к поисковикам Рунета и проблема, давно угнетающая, как скромных владельцев интернет-магазинов, так и матёрых веб-аналитиков — категорический отказ воспринимать рекламные площадки Яндекс.Директ. Причём такая ненависть не взаимна, и Яндекс.Метрика честно пытается обработать, как умеет, переходы с Google Adwords, но максимум, как предлагает выходить из положения поддержка Analytics — пользоваться Компоновщиком URL для пометки своих рекламных кампаний. Мне всё-таки удалось найти решение сложившейся ситуации и подружить суровый Google со своим русскоязычным коллегой.

В продолжении тематики, решил сделать свой вариант:

Вторая часть

Предисловие

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


Так вот, если у вас есть свой блог и вы хотите на своей личной страничке публиковать такие же сообщения-ссылки автоматически — топик может быть вам интересен. Сегодня мы попробуем публиковать простые сообщения ссылки, а далее добавлять к ним «превью»-картинки.

На многих сайтах-портфолио работы представлены в виде небольших картинок-миниатюр с приятными hover-эффектами. В этой статье будет рассказано о способе сделать такой эффект, используя CSS-маски. Работает только в современных браузерах, но к счастью и в старых верстка выглядит корректно и не съезжает.

Привет, всем!

:before

Пытливость ума (да и не только) заставляет искать новые и лучшее решения в том или ином направлении. Это и привело меня на страницы блога некого @simurai. Возможно, кто-то уже знаком с наработками товарища «Самурая», с остальными же хочу просто поделиться интересными идеями псевдо-японского гуру. В этой статье хочу рассмотреть один из его проектов: BonBon — Sweet CSS3 Buttons (по желанию читателей, другие работы автора будут преданы вниманию в последующих статьях). Начальная цель: создание CSS-кнопок, которые приятно смотрятся, имеют гибкую настройку, и в это же время будут иметь максимально простую разметку.

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

Сервисы и инструменты

Photo Raster — новый мощный графический редактор онлайн.

Продолжаю сентябрьскую подборку новых полезных штук для веб-дизайнеров.

Сервисы и инструменты

Cut&Slice me — бесплатный плагин для фотошопа, который помогает быстро готовить элементы дизайна для различных типов устройств.

В подборке сервисы, плагины, темы и другие полезности, облегчающие работу с Twitter Bootstrap.

Стилизация

BootSwatchr — быстрая стилизация Twitter Bootstrap.

С помощью CSS-магии мы можем создавать красивые типографические эффекты и забыть о использовании изображений, в большинстве случаев. В этой статье мы создадим ряд симпатичных примеров веб-типографики, используя плагин jQuery — lettering.js, а также различные приемы CSS. В некоторых примерах мы также добавим переходы при наведении курсора мыши, чтобы сделать их немного более интерактивным.

В данной статье рассказывается о так называемых конструкторах контента (Content Construction Kit) и приводится обзор конструкторов контента для Joomla: Zoo, K2, FLEXIcontent, MightyResources, Cobalt 7 и Seblod.

Принцип цикады позволяет строить очень длинные неповторяющиеся фоны веб-страниц из нескольких простых изображений. Он был впервые описан Алексом Уокером в апреле 2011 года и быстро завоевал популярность. На сайте designfestival.com появилась целая галерея фонов, сделанных по этому принципу.

Во многих случаях можно сэкономить ещё больше, используя градиенты. Даже с учётом того, что пока практически все браузеры поддерживают свойство linear-gradient только с префиксами, суммарный объем кода CSS, необходимый для создания фона, в несколько раз меньше размера нескольких PNG с фрагментами, и, что ещё важнее — вообще не требует лишних запросов к серверу. Так, Эрик Мейер недавно привёл пример реализации первых двух фонов из оригинальной статьи Уокера на чистом CSS. Для простых цветных полосок (вверху) понадобилось 2.66 Кб кода CSS (с префиксами, без минификации и компрессии). В будущем, когда все популярные браузеры избавятся от префиксов, будет достаточно 0.59 Кб кода. В оригинальном примере изображения весили около 6 Кб + 3 запроса к серверу. Второй пример с занавесом (внизу) впечатляет ещё больше. Даже с префиксами получается примерно десятикратный выигрыш.

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

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

Facebook — самая большая социальная сеть и один и самых посещаемых сайтов в мире. В ней можно не только постить веселые статусы и лайкать фотографии, но и
использовать, как мощный маркетинговый инструмент. Все логично — миллиард пользователей, возможность таргетинга на определенную аудиторию, мгновенные объявления, ну и масса других
полезных штук, которые недоступны для оффлайна. На сегодняшний день сложно найти компанию без собственной бизнес-страницы или популярную личность без фан-пейджа. В этой статье постараюсь
подробно разобрать техническую сторону этого вопроса со стороны фронт-енд разработки.
Речь в посте пойдет не о создании самой страницы, потому что это довольно тривиальная процедура, а о пользовательских вкладках, которые можно добавить самостоятельно и наполнить нужным контентом.
Любой, даже начинающий веб-разработчик, может сделать с десяток таких табов за один вечер, зная некоторые принципы и нюансы их создания.
Я имею в виду подавляющее большинство всякого рода welcome-страниц, страниц-анонсов и страниц со всяким информационным текстово-графическим контентом. На страницы посложнее с динамическими элементами, формами и прочим функционалом времени уйдет, конечно, побольше.

Под катом находится сравнительно небольшая подборка СSS3 и СSS3+JQuery меню. Некоторые из них уже могли встретится пользователям на просторах Интернета, некоторые-нет. Весь обзор представлен в виде скриншотов и демо-ссылок, а также ссылок на закачку сырцов, там, где это возможно.

Статьи про создание tooltips'ов уже не раз поднимались на хабре [1,2] в виду большой популярности этого элемента. Сегодня вы узнаете еще один способ как создать простые, анимированные подсказки с помощью псевдо-элементов before и after, а так же свойства transitions.



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

CSS3 видели и пробовали все, кого он мог заинтересовать. И закругленные уголки и падающие тени мы уже можем генерировать без лишнего труда.

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

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

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