Как стать автором
Обновить
11
0
Илья Абельчаков @legobrain

Пользователь

Отправить сообщение

Вёрстка адаптивных email-писем: подробное руководство (часть 2)

Время на прочтение 10 мин
Количество просмотров 35K


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

Сегодня речь пойдет о применении media queries для разных устройств, оптимизации изображений для «мобайла» и повышении эффективности форм подписки.
Читать дальше →
Всего голосов 14: ↑12 и ↓2 +10
Комментарии 13

Основные ловушки при использовании кэша в HTML5-приложениях

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

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

Магия одного div. Мастеркласс от создателя a.singlediv.com

Время на прочтение 7 мин
Количество просмотров 49K
Почему Single Div?

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

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

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

Я решила запустить проект a.singlediv.com, где намеревалась каждые несколько дней размещать нечто новенькое, созданное с помощью CSS. Я поставила перед собой ограничение использовать только один DIV.
Читать дальше →
Всего голосов 74: ↑71 и ↓3 +68
Комментарии 23

Полная энергетическая автономия или как выжить с солнечными батареями в глубинке (часть 1. теоретическая)

Время на прочтение 5 мин
Количество просмотров 325K


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

image
Как все начиналось
Всего голосов 145: ↑143 и ↓2 +141
Комментарии 244

Еще один способ сжатия CSS файлов

Время на прочтение 5 мин
Количество просмотров 52K
image


На изображении выше многие увидят известную картину. Так выглядит большинство CSS файлов на продакшене. Мы все стараемся, чтобы наши веб-страницы загружались быстро; для достижения этой цели используем различные инструменты и техники оптимизации загрузки и рендеринга страниц. Об одном, но редко используемом методе, я бы хотел поговорить и рассказать, как мне удалось сократить размер CSS файла почты mail.ru на 180Кб.
Читать дальше →
Всего голосов 80: ↑55 и ↓25 +30
Комментарии 79

Липкий эффект

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

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

CodePen


Читать дальше →
Всего голосов 37: ↑36 и ↓1 +35
Комментарии 16

Избавляемся от JavaScript в социальных кнопках (Facebook, VK, Twitter и др.)

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


Читать дальше →
Всего голосов 78: ↑73 и ↓5 +68
Комментарии 44

58 признаков хорошего интерфейса

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

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


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

image
Читать дальше →
Всего голосов 226: ↑182 и ↓44 +138
Комментарии 102

Библиотека по электронике

Время на прочтение 2 мин
Количество просмотров 89K
image

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



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

Читать дальше →
Всего голосов 63: ↑59 и ↓4 +55
Комментарии 59

Доведите пользователя до… конца воронки

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

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

Ниже представлены несколько примеров того, как этот эффект используется в современном веб-дизайне:
Читать дальше →
Всего голосов 23: ↑19 и ↓4 +15
Комментарии 4

Как повысить уровень конверсии целевой страницы сайта с помощью психологии желания

Время на прочтение 7 мин
Количество просмотров 67K
Создание соблазнительных для потребителя предложений — не такая сложная задача. Все, что вам нужно — понять, что движет вашими потенциальными покупателями. Как только вы разберетесь с тем, чего они на самом деле желают, у вас появятся инструменты для создания предложений, от которых будет просто невозможно отказаться. Ниже перевод статьи Аарона Бишела, которая содержит несколько психологических методик, используемых успешными компаниями для стимуляции желания приобретать их продукцию, а также советы о том, как оптимизировать целевые страницы и маркетинговые акции.
Читать дальше →
Всего голосов 63: ↑39 и ↓24 +15
Комментарии 10

Диссертационный проект или строим Hexapod своми руками

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

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

image
Читать дальше →
Всего голосов 43: ↑39 и ↓4 +35
Комментарии 59

Анализ спроса и предложения фрилансеров на примере биржи oDesk

Время на прочтение 7 мин
Количество просмотров 99K


Введение


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

Сумасшедшие небоскребы будущего

Время на прочтение 3 мин
Количество просмотров 57K


От зданий, которые качают воду в гималайских ледниках, до круглых башен, которые могут позволить путешествовать их жильцам не выходя из дома. Как архитекторы представляют себе здания будущего?
Читать дальше →
Всего голосов 102: ↑78 и ↓24 +54
Комментарии 87

Как сохранить здоровье, работая за компьютером?

Время на прочтение 8 мин
Количество просмотров 105K
Иллюстрация

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


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

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

Читать дальше →
Всего голосов 272: ↑259 и ↓13 +246
Комментарии 139

Range, TextRange и Selection

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

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

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

Читать дальше →
Всего голосов 96: ↑96 и ↓0 +96
Комментарии 28

Caesar III: game loop

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


Читать дальше →
Всего голосов 151: ↑150 и ↓1 +149
Комментарии 26

Мы проанализировали 20 лэндингов крутых стартапов и вот чему мы научились

Время на прочтение 9 мин
Количество просмотров 86K
main

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

Это как собрать идеальную девушку из топ моделей или любимых актрис. Только про лэндинги.
Итак, запаситесь чашкой кофе, понеслась.
Читать дальше →
Всего голосов 76: ↑59 и ↓17 +42
Комментарии 17

Шрифты, общие для всех (актуальных) версий Windows, и их Mac-эквиваленты

Время на прочтение 3 мин
Количество просмотров 337K

Введение


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

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

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

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

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

Информация

В рейтинге
Не участвует
Откуда
Киев, Киевская обл., Украина
Дата рождения
Зарегистрирован
Активность