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

Сегодня речь пойдет о применении media queries для разных устройств, оптимизации изображений для «мобайла» и повышении эффективности форм подписки.

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

Чтобы использовать AppCache, создается файл описания с расширением «appcache», например, manifest.appcache. В этом файле можно перечислить все файлы, которые должны кэшироваться. Чтобы включить эту функцию на вашем сайте, необходимо включить ссылку на этот файл описания на вашей веб-странице в html-элемент следующим образом:

Почему Single Div?

В мае 2013 года я присутствовала на CSSConf и услышала, как Лиа Веру говорит об укрощении свойства border-radius. Это было поучительно и позволило мне понять о CSS то, чего я раньше не понимала. Это напомнило мне времена, когда я изучала изящные искусства, когда я постоянно стремилась повысить свой профессиональный уровень. Мой уровень владения CSS можно назвать средним, поэтому я бросила себе вызов, чтобы узнать все, что я смогу, исследуя и экспериментируя со свойствами

Но почему именно один DIV?

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

Я решила запустить проект a.singlediv.com, где намеревалась каждые несколько дней размещать нечто новенькое, созданное с помощью CSS. Я поставила перед собой ограничение использовать только один DIV.

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

На изображении выше многие увидят известную картину. Так выглядит большинство CSS файлов на продакшене. Мы все стараемся, чтобы наши веб-страницы загружались быстро; для достижения этой цели используем различные инструменты и техники оптимизации загрузки и рендеринга страниц. Об одном, но редко используемом методе, я бы хотел поговорить и рассказать, как мне удалось сократить размер CSS файла почты mail.ru на 180Кб.

Буквально недавно Крис написал про «Эффект капельного преобразования в CSS». Эффект реально крутой и сама техника реализована по-умному, но данный подход через обычные CSS фильтры имеет определенные недостатки: нельзя использовать непрозрачность, добавлять контент внутрь капель, проблемы с фоновыми цветами.

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

CodePen

Как мы избавились от JavaScript-библиотек социальных сетей, ускорили скорость загрузки страниц и использовали RESTful API для “шаринга” и “лайков”.

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

1 Один столбец вместо нескольких

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

Доброго времени суток, хабрапользователи!

После моих постов:
Дистанционное управление по ИК
Ant-bot. Ворклог. Часть 1
Создаем робота в домашних условиях
Меня довольно часто стали спрашивать о том, какую литературу можно почитать по данному предмету. Чтобы помочь всем и сразу, я решил написать данный пост. =)
Под катом вы можете посмотреть — какую литературу использую я в процессе своих работ.

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

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

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

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

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

В то время я увлекался робототехникой. Имел опыт строительства дронов и роботов поменьше, которые то следовали за линией по полу, то решали лабиринт за короткий промежуток времени. К тому же, мотивация была приподнята недавней поездкой в Лос-Анджелес на ежегодный VEX Robotics World Championship, где, к слову, не удалось занять призового места, но удалось зарядиться позитивной энергией на весь последующий год. В общем, решил я построить Hexapod своими руками, включая механику, электронику и код.

Введение

oDesk — крупнейшая в мире (ну по крайней мере так считает сам oDesk) международна биржа фрилансеров. Про сам оDesk на хабре писали уже довольно много раз, например тут или тут, где, на мой взгляд, практически разжёвано зачем и для кого создан данный ресурс, и особенно “с чем его есть”. В связи с этим этап описания и принцип работы сайта можно опустить. Я же попытаюсь провести анализ данных как о самих фрилансерах, так и о заказах, заказчиках и их требованиях к фрилансерам — грубо говоря что нужно уметь и знать, чтобы быть более менее в теме современных технологий. Также проанализирую спрос и предложение на основе данных о навыках фрилансеров и требованиях клиентов. И конечно некоторые статистические данные и немного красивых картинок в качестве примеров (кто работает на oDesk, откуда в основном идут заказы, кто больше зарабатывает, а кто лучше работает и т.д.). И все это на основе самостоятельно собранной информации, так открыто и благородно предоставляемой самим oDesk’ом посредством API. Стоит отметить, что статья с небольшим количеством статистики про oDesk ранее уже успела промелькнуть на просторах хабра, однако в ней, в отличии от текущей статьи, oDesk сам себя хвалил предоставил результаты. В целом же, сразу хочу сказать, что не претендую на полноту обзора, однако ниже будет кратко описан процесс сбора данных, что позволит провести Ваш собственный анализ при необходимости.

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

Вы заботитесь о своем здоровье?

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

Что оказалось непросто. В данной статье я расскажу о моем способе организации «правильного» рабочего дня, о том, что следует для этого делать, и где лежат грабли, на которые нельзя наступать. Тема «компьютер и здоровье» уже несколько раз поднималась на Хабре, поэтому я задумывал этот пост как статью, которую можно добавить в закладки и использовать в качестве «руководства к действию».

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

В этой статье автором предпринята попытка собрать перевод документации об этих объектах в одном месте + написать небольшие сопроводительные примеры. Перевод вольный, не дословный, так что если встретите неточность или корявую формулировку — пишите в комментариях.

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

Если бы меня спросили, какая часть технической реализации игры «Цезарь» мне интересна больше других, я бы вспомнил о расчете одного «дня» городской жизни. Отдельные компоненты математической модели города тоже интересны в реализации, но эти «шестеренки» будут крутиться только в сборе. Большая часть игры проходит внутри «игрового цикла», в котором проводятся вычисления параметров компонентов, выполняются перемещения игровых объектов, создаются новые события и объекты. Если вам интересно узнать, как была устроена симуляция города в одной из лучших игр 1998 года — добро пожаловать под кат. Описания, псевдокод и схемы помогут вам лучше узнать об используемых алгоритмах.

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

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

Введение

В данном списке перечислены шрифты, общие для всех актуальных на данный момент операционных систем Windows (фактически начиная с Windows 98), и их эквиваленты в Mac OS. Такие шрифты иногда называют «безопасными шрифтами для браузеров» (browser safe fonts). Это небольшой справочник, которым я пользуюсь, когда делаю Web-страницы и думаю, что он будет полезен и Вам.

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

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

С момента публикации в 1984 году книги «Влияние: психология убеждения» Роберта Чалдини, шесть принципов убеждения стали неотъемлемой частью словаря маркетологов во всем мире. Если вы регулярно читаете блоги о маркетинге, вы наверняка знакомы с ними — это взаимность, последовательность в обязательствах, знаки общественного признания, авторитет, симпатия и дефицит или ограниченность.