Зачастую вроде бы простые задачи верстки требуют сложной структуры HTML-разметки и использования CSS-трюков. Центрирование элементов или выравнивание контента может быть очень утомительным. Одна из таких задач — это выравнивание элементов верхней части сайта так, чтобы логотип был слева, а пункты меню — справа. Можно использовать float и position:absolute, а для выравнивания по вертикали — добавлять margin и padding разным элементам. Вроде бы ничего сложного. Но если сайт должен корректно отображаться и на мобильных устройствах, возникает много проблем.



Ниже описан лаконичный способ решения этой проблемы.

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

Итак, к чему я веду…

В этой статье я хочу поделиться некоторыми рекомендациями о том, как всё же НЕ МЕШАТЬ пользователю становиться клиентом, также это будет полезно тем, кто занимается арбитражем трафика и не понаслышке знает, что такое партнёрский маркетинг и монетизация трафика по модели CPA(Cost Per Action).
Значит, поехали! У вас есть бизнес, но требуется выстроить эффективную стратегию привлечения пользователей на сайт с конкретным товаром или услугой. Ниже я приведу конкретные советы, как сделать страницу с товаром, благодаря которой будет заметное увеличение конверсий посетителей в лиды (потенциальные клиенты).
Вот несколько простых пошаговых стратегий, позволяющих как опытным, так и новичкам избежать основных ошибок в разработке целевых страниц (страница захвата контактов, Landing Page, посадочная страница, страница приземления), а также повысить конверсию (целевое действие, CTA, отношение совершенных действий, к кликам (выраженное в %)) уже имеющихся:

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



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

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

Перевод статьи Криса Койера (Chris Coyier) с CSS-Tricks.com "Search with Filters Responsive Design Pattern".

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

Brad Frost даже собрал очень хорошую коллекцию адаптивных паттернов, очень полезно. Еще один пример, форма поиска с фильтром результатов. На десктопе места много:

На прошлой неделе в издательстве «Манн, Иванов и Фербер» вышла моя книга, называется «Практика создания товарных знаков».

Здесь (на Хабре) много людей, которые пишут и обсуждают, и наверняка есть те, которые задумывались о своей книге. Этот пост для них. Еще этот пост для дизайнеров и менеджеров — фрилансеров, из студий и агентств.



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

Поэтому Игорь Манн оставил о книге такой вот отзыв:

Люблю я такие книги! Читай, бери и делай. Тема закрыта.

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

Ускорение набора текста с помощью добавления спецсимволов

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

Вчера на хабре была опубликована статья под названием «750 миллионов мобильных телефонов уязвимы для злоумышленников из-за недостаточно защищенных SIM карт». Хабр был одним из многих сетевых ресурсов, которые опубликовали информацию про уязвимость найденную в SIM-картах. Новость разлетелась молниеносно. По запросу «750 млн SIM-карт» google предлагает 159 000 результатов. В статье я более подробно постараюсь описать, чем грозит эта уязвимость и есть ли повод для опасения.

Никогда не планируйте

Проект, как правило, делается сам собой, вырастает, как дерево: главное — вовремя посадить семена и удобрить почву. Разве вы когда-нибудь встречали чудака, который будет прикидывать, насколько вырастет за год дерево, которое он посадил? Правда в том, что планирование никогда еще никому не помогло сделать хороший проект. Точные сроки — это лишняя ответственность и ненужная головная боль. Диаграммы Ганта — для слабаков. Забудьте о них.

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

Инструменты

Colour Lovers — старый и функциональный инструмент для подбора цветовых схем. Аналоги — Colourcode, Color Scheme Designer и конечно Kuler. Подобных сайтов великое множество, но эти, на мой взгляд, самые удобные.

Новые полезные инструменты, сервисы, статьи, бесплатности для веб-дизайнеров за июль 2013. Остальные подборки доступны по тегу "новое для веб-дизайнера".

Сервисы

I Want To Use — на сайте можно выбрать CSS-фичи, которые хотите использовать, и будет показан процент пользователей, которые смогут их использовать.

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

Скрывать контент

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

Вольный перевод статьи Якуба Линовски — «A Good User Interface».

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

Первое и единственное мероприятие в нашей стране, посвящённое знаменитому JavaScript фреймворку — конференция jQuery Russia, при активной поддержке портала Айти-Событие.рф, состоится 15 октября в центре Digital October в Москве.




Старт ежегодной конференции jQuery был дан в 2007 году в Бостоне, и с тех пор по всему миру состоялось около двух десятков конференций под этим брендом, в том числе в Вене, Оксфорде, Сеуле, Портланде и Сан-Франциско. Осенью этого года силами ITmozg знаменитая конференция впервые пройдет в России.

Буквально за несколько недель, с момента показа новой iOS 7, произошел легкий сдвиг в сознании не только у дизайнеров, но и у пользователей, имя ему — плоский дизайн. Этот прием, да, назовем его так, получил шквал критики и восхищения, у него появились сторонники и лютые ненавистники, но сегодня, я постараюсь рассмотреть новый, современный, набирающий огромную популярность подход при проектировании — long shadows (длинные тени).

(P.S. — Все картинки кликабельны).

Что такое длинные тени в дизайне, и как это понимать?

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



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

На фотографии — чеклист самолета Cessna: в какие положения нужно установить переключатели перед запуском двигателя, допустимые полетные параметры и так далее. Пилот не в первый раз видит этот список. Выучить — раз плюнуть. Но мозг может перезаписывать информацию, создавая ложные воспоминания, но при этом при «запросе» данные будут помечены как «верные». А вот напечатанное на бумаге не изменяется, поэтому ей можно доверять на 100%. SEO — это не управление самолетом с сотней человек на борту. Потерять можно всего-то несколько десятков тысяч рублей (если, например, начать продвижение с закрытыми от индексации в robots.txt страницами). Но не проще ли потратить 5-10 минут на проверку и убедиться, что все сделано правильно?..

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

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

Ни для кого не секрет, что e-mail маркетинг только начинает набирать обороты во всем мире. А для России – это ещё и вовсе молодая ниша на рынке. И профессиональная верстка электронных писем здесь один из составляющих факторов успеха. Под профессиональной версткой понимается не только визуально красиво и надежно сверстанный макет, но и то, как выглядит usability открытки с маркетинговой точки зрения, как оптимизирована графика вместе с типографией для спам-фильтров и многое другое. Верстка электронных писем довольно обширная тема, в одной статье все не уместить, поэтому в данном посте постараюсь описать только базовые элементы и приемы, надежно проверенные за годы практики и работающие в top самых используемых почтовых клиентах мира: iPhone 4S/5; Outlook 07/10/13; iPad; Apple Mail; Android 2.3/4.0; Yahoo; Gmail. Если рассматривать только российский рынок, то нельзя не упомянуть о Mail.ru и Яндекс.Почта.

Что нужно знать в начале?

Сразу хочу выделить несколько из основных и важных моментов:

1. В нашем арсенале имеется очень урезанный набор css-свойств, которые поддерживаются всеми почтовиками. При этом, стили нужно прописывать inline, а в head выносить только вендорные свойства и те блоки объявлений, которые не несут нагрузки на основную стилизацию письма. Ну и использовать link in head — крайне нежелательно.
2. Не используйте background-image в основных визуальных элементах дизайна и не помещайте в изображения важную текстовую информацию. Вообще нужно всегда учитывать такой вариант, что письмо будет просматриваться получателем без единого изображения.

Каркас

Пожалуй каждый, кто хоть раз верстал письмо под рассылку, знает, что каркас лучше строить с помощью таблиц. На самом деле простая блочная модель div поддерживается на данный момент во всех перечисленных выше почтовиках, за исключением MS Outlook начиная с 2007 версии. Это связано с тем, что в качестве движка последние версии Outlook используют Microsoft Word, который в свою очередь много не знает о блочных css-свойствах. Игнорировать при верстке данный почтовый клиент я не рекомендую, поэтому в качестве фундамента все же используйте table. Да и добившись хорошего результата для Outlook, можно быть уверенным, что в большинстве почтовиках, письмо будет смотреться тоже хорошо, а скорее и лучше.

В качестве примера рассмотрим наиболее важные элементы из следующего, не сложного шаблона:

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

Мы в Alconost предоставляем услуги создания и ведения контекстной рекламы и, по долгу службы, иногда занимаемся разработкой посадочных страниц (landing pages). Мы были очень рады найти и перевести статью, в которой автор изложил все требования, которым такая страница должна соответствовать. Но есть в этой статье и большой минус. Пунктов аж 50, каждый можно отметить в чеклисте, но после доступен лишь результат в баллах, которым можно разве что похвастаться перед друзьями.

Мы против таких способов анализа информации. Потому каждый желающий может скачать подготовленную нами гуглотаблицу, ответить на вопросы “Да” или ”Нет”, отфильтровать ответы и получить результат и план действий.

Те, кому в гуглотаблицу не хочется, просим под кат. Там перевод.