Создание мобильного сайта: Мобильная версия сайта — пошаговое создание

Блог об email и интернет-маркетинге

Email маркетинг

Дизайн email рассылки: что такое хорошо и что такое плохо

Человек в первую очередь замечает визуальные элементы и только потом вчитывается в текст. Структура письма, иллюстрации, форматирование текста, цветовая гамма, удобство чтения на смартфоне — все это определяет, дочитает ли получатель письмо и совершит ли желаемое действие.Дизайн email рассылки влияет не только на читателей. Письма с ошибками в оформлении и верстке не любят почтовые провайдеры и часто отправляют такие рассылки в спам.В этой статье расскажем о том, как сделать письма визуально привлекательными и эффективными. А также покажем частые ошибки и удачные примеры в разработке дизайна email рассылки от разных брендов.Дизайн шаблона email рассылки — общие рекомендацииОснова электронного письма — это шаблон. Он оформляется в стилистике сайта, чтобы подписчик мог связать письмо с компанией, на рассылку которой подписался. К разработке шаблона стоит отнестись очень внимательно — в будущем он будет определять структуру и внешний вид ваших рассылок. Как не надо1. Нельзя менять шаблоны слишком часто. Если подписчик каждый раз получает по-другому оформленное письмо, ему сложно запомнить образ компании.2. Не используйте корпоративный цвет как основной, если он слишком яркий. Кажется логичным оформить шапку и плашки в цветах компании. Но если такого цвета слишком много, письмо тяжело читать:Слишком много красного цвета в шаблоне письма3. Не оформляйте текст картинкой, потому что:картинка может не отобразиться;сложно менять макет — придется просить дизайнера переделывать картинку;если на картинке промокод, читатель не сможет его скопировать и вставить, нужно перенабирать;кроме того, если оформить картинкой все письмо, почтовые сервисы могут отправить его в спам.4. Не делайте фон пестрым, иначе сложно читать основной текст:Пестрый фон отвлекает от текста письма5. Не пренебрегайте профессиональной версткой. Неаккуратно сверстанное письмо портит впечатление о компании. Кроме того, письма, набранные Caps Lock, кричащим цветом и разными шрифтами, чаще отправляют в спам почтовые сервисы. В примере ниже дизайн письма выглядит неаккуратно: нет выравнивания по одному краю, используется три размера шрифта, красный цвет в призыве к действию и нагромождение ссылок:Форматирование письма выглядит слишком пестрымКак надо1. Разработайте корпоративный шаблон в стилистике сайта или на основе брендбука. Это не только работает на узнаваемость компании, но и повышает доверие.2. Тестируйте отдельные элементы дизайна email рассылок, а не шаблон в целом. Так вы сможете отследить эффект от изменений и для подписчиков образ компании будет оставаться узнаваемым.3. Создайте несколько шаблонов для разных типов писем. Благодаря этому вы сэкономите время при запуске рассылок. Например, издательство «МИФ» использует два типа шаблона. Первый — для дайджестов:Шаблон для дайджеста статейВторой шаблон — для промо-рассылок:Шаблон для промо-рассылки4. Если цвета бренда контрастные, используйте их для подчеркивания важной информации или для баннеров. В примере ниже зеленым цветом, помимо логотипа, выделены кнопки призыва к действию:Цветовые акценты в корпоративном шаблоне5. Разработайте логичную структуру письма. Основное рекламное или информационное послание должно размещаться на первом экране:Шаблон с основной информацией в первом экране прокрутки6. Придерживайтесь ширины письма 600 рх. Так email будет отображаться на экране любого почтового сервиса без горизонтальной прокрутки.7. Чередуйте текстовые блоки и картинки. Это нужно для лучшей доставляемости писем, когда вы только начинаете делать рассылки и у вашего домена еще не сформирована положительная репутация отправителя. Есть советы придерживаться соотношения 80:20 или 60:40. То есть чтобы в письме было 80% текста и 20% картинок.8. Поручите дизайн email рассылки профессиональному верстальщику, чтобы оформление заголовков, текстовых блоков и картинок выглядело гармонично. Посмотреть пример дизайна рассылки с красивой и аккуратной версткой можно в письмах издательства «МИФ»:Гармоничная верстка рассылки издательства «МИФ»Адаптивный дизайн рассылкиБудет ли письмо правильно отображаться на экране мобильного устройства, зависит от адаптивности верстки. Ошибки в адаптивности не просто портят внешний вид письма, иногда они делают его бесполезным. Например, если пользователь смартфона не может попасть по ссылке, так как она слишком мелкая и куда-то «съехала», он не перейдет на сайт и ничего не купит.Как не надоНе пренебрегайте адаптивным дизайном в email рассылках. Уделите ему внимание и учитывайте все нюансы адаптивной верстки. Ведь ошибки в ней приводят к таким результатам, как на примере ниже:Результат ошибки в адаптивной верстке, когда блоки не перестроилисьКак надо1. Придерживайтесь правил адаптивной верстки email. Например, чтобы на мобильном колонки могли перестраиваться вниз, добавляется специальный код, а все блоки верстаются таблицей.2. Еще один вариант — использовать готовые адаптивные шаблоны в SendPulse или делать шаблон в блочном редакторе SendPulse. В нем уже учтены все правила верстки. Кроме того, вы сразу можете посмотреть, как выглядит письмо на компьютере и на мобильном:Предпросмотр веб- и мобильной версии письма в редакторе SendPulseТекст в дизайне email рассылкиДаже самый интересный текст могут не прочитать, если он выглядит непривлекательно. И наоборот, разбивка текста на абзацы с подзаголовками, выделение главных мыслей цветом или другим шрифтом помогает привлечь и удержать внимание читателя. Впрочем, в стремлении красиво оформить текст, можно допустить несколько ошибок.Как не надо1. Не используйте много инструментов оформления в одном письме — разные стили и начертания шрифтов, выделение цветом, размеры шрифта. Пестрые письма выглядят неряшливо, почтовые сервисы могут распознавать их как спам. В рассылке детского магазина используется четыре цвета шрифта, выделение жирным. Окончательно портит картину нагромождение ссылок с подчеркиванием:Пестрый текст в рассылке детского магазина2. Не используйте мелкий или блеклый шрифт. Неразборчивый шрифт ухудшает восприятие текста.3. Не верстайте письмо сплошным текстом. Без разбивки на абзацы текст выглядит монотонно, его сложно и скучно читать.4. Не ставьте ссылки слишком близко, иначе они могут «склеиться». При чтении со смартфона тяжело будет кликнуть на нужную ссылку:В рассылке консалтинговой компании ссылки стоят слишком близкоКак надо1. Выберите один или два шрифта для email рассылки.2. Используйте стандартные шрифты. Некоторые почтовые сервисы, например, Gmail и Yahoo, поддерживают больше шрифтов, Outlook и AOL — меньше. Если сервис не может прочитать ваш шрифт, он заменяет его стандартным, и верстка может «поплыть». Чтобы этого не произошло, пишите стандартными для всех сервисов рассылки шрифтами: Arial, Lucida Grande, Tahoma, Trebuchet, Verdana, Georgia, Palatino, Times New Roman, Courier New, Courier и Impact.3. Корпоративными шрифтами оформляйте надписи на баннерах и в тексте, который верстается картинкой.4. Оформляйте ключевые мысли подзаголовками, пишите короткими абзацами. Текст, в котором четко видна структура, легко и приятно читать.5. Используйте размер шрифта не менее 14px.Цвет в дизайне письма для рассылкиОформление письма цветом задает настроение и усиливает рекламное послание. Но если ошибиться с цветом в рассылке, можно получить обратный эффект — разозлить читателя.Как не надо1. Не ослепляйте читателя цветом. Слишком много красного, использование ярких или несочетаемых оттенков портит внешний вид письма и затрудняет чтение. В примере ниже очень яркие, агрессивные блоки отвлекают внимание от смысла:Много красного цвета в рассылке2. Будьте осторожны с градиентом. Например, в письме ниже слишком заметная линия перехода между цветами выглядит некрасиво:Слишком явная граница в градиентеКак надо1. Используйте яркие цвета как акцент для важных элементов. А верхний баннер и футер сделайте в более спокойных оттенках.2. Учитывайте особенности вашего продукта и целевую аудиторию, выбирая цветовое оформление письма. В статье на блоге Kissmetrics написано, что мужчины предпочитают контрастные цвета, а женщины — мягкие оттенки.3. Подходите творчески к использованию градиента. Например, в новогодней рассылки Wizzair удачно обыграли переход цветов в открытке:Интересное использование градиента в новогодней рассылке4. Проводите A/B тестирование, чтобы определить более эффективный цвет элементов рассылки.Дизайн хедераХедер — это блок вверху письма, над главной картинкой. Здесь обычно размещают логотип, ссылки на разделы сайта, контактную информацию. Хедер помогает идентифицировать письмо: читатель видит имя бренда в поле «от кого», а открыв письмо, видит логотип:Идентификация бренда в поле отправителя и хедере письмаКак не надо1. Частая ошибка в хедере — много информации. Да, вверху письма можно и нужно давать ссылки на важные разделы сайта. Но если разместить еще и ссылки на соцсети, как в примере ниже, есть риск отвлечь внимание читателя от основного сообщения. Плюс ссылки в несколько строк занимают много места:Перегруженный хедер письма2. Картинки плохого качества в хедере портят внешний вид письма и создают впечатление любительского дизайна рассылки:Плохое качество картинки в шапке письмаКак надо1. Выделите главную информацию, которая соотносится с темой письма. Например, в рассылке сервиса покупки билетов Busfor.ua есть логотип с подписью и ссылка для подбора билетов:Только нужная информация в хедере email2. Добавьте в хедер настроения, используя праздничную или сезонную атрибутику. Небольшие обновления делают рассылку интереснее для постоянных читателей. Например, магазин одежды в своей новогодней рассылке добавил в логотип шапку Санта-Клауса:Новогодний атрибут в хедере письмаДизайн футера email рассылкиСамый малозаметный, но не менее важный элемент письма — это футер. Чаще всего здесь размещают подпись, ссылку отписки, объяснение, почему подписчик получил рассылку, физический или юридический адрес компании и ссылки на социальные сети.Как не надо1. Логично выносить в конец письма служебную информацию и менее важные ссылки. Но футер не должен быть свалкой:Футер перенасыщен информацией2. Не прячьте ссылку отписки. Если читателю сложно отписаться, он будет отправлять письма в спам. А жалобы на спам ухудшают репутацию отправителя. В примере ниже текст футера, включая ссылку отписки, почти сливается с фоном:Нечеткая информация в футере рассылкиКак надо1. Добавляйте в футер действительно нужную информацию. Сгруппируйте ссылки по смыслу, чтобы удобнее было читать:Структурированная информация в футере2. Делайте ссылку отписки заметной. Это будет честно по отношению к подписчику и снизит вероятность отправки письма в спам:Заметная ссылка отписки в рассылке3. Попробуйте добавить в футер дружелюбную подпись, чтобы читатель закончил читать на приятной ноте и захотел открыть следующую рассылку:Дружелюбная подпись в футереИзображения в дизайне письма рассылкиФотографии, инфографики, картинки — неотъемлемая часть дизайна email рассылки. Хорошо подобранные изображения помогают передать настроение, эмоции, задают стиль письма.Как не надо1. Нельзя делать рассылку, состоящую только из одних картинок или сплошной картинкой. По результатам исследования, 43% пользователей Gmail читают почту с отключенными изображениями. Содержание письма должно оставаться понятным, если в нем будет только текст.2. Светлый и неконтрастный шрифт читается плохо. Такой текст при наложении на пеструю фотографию будет сливаться с фоном:Белый текст на светлой фотографии читается плохо3. Не используйте изображения больше необходимых размеров. Например, если ширина блока 300 px, то не нужно брать для него картинку шириной 1200 px.Как надо1. Оптимизируйте картинки перед тем, как добавить их в письмо. Письмо с большим по весу изображением будет подгружаться дольше. Особенно это актуально для смартфонов, где скорость загрузки может быть ниже из-за плохого мобильного интернета. Подумайте, что вероятнее сделает пользователь: будет дожидаться загрузки ваших больших и красивых картинок или же просто закроет письмо?Чтобы оптимизировать изображения для писем можете воспользоваться этими сервисами: Squoosh, TinyPNG.2. Прописывайте Alt-текст для картинок и фотографий. Так пользователи смогут понять смысл письма, даже если картинки не загружаются автоматически. Текст должен соответствовать смыслу картинки.3. Увеличивайте размер иконок в два раза, чтобы у пользователей iPhone и Macbook с Retina экраном они отображались в хорошем качестве. Например, если в рассылку нужно добавить иконку размером 70×20, на сервер ее загружают в размере 140×40. А потом уменьшают, указав в коде атрибут.Важно! Учтите, если уменьшаете картинки таким образом, то меняете только ее размер, но не вес. Картинка с большим весом может плохо грузиться на устройстве. Поэтому обращаем ваше внимание еще раз: оптимизируйте изображения перед тем, как добавить их в письмо.4. Делайте картинки кликабельными. Если вы посмотрите на карту кликов своей рассылки, то заметите, что читатели часто нажимают на картинки. Поэтому указывайте для картинок ссылки на нужные разделы сайта.5. Выбирайте картинки хорошего качества — на бесплатных фотостоках или сделанные вами.Дизайн CTAВ email рассылке call to action — это кнопка или ссылка, которая призывает читателя выполнить целевое действие: зарегистрироваться на вебинар, купить товар на сайте, заполнить анкету. Четкий призыв к действию и его правильное размещение в письме помогают увеличить CTR. А ошибки могут сделать письмо бесполезным.Как не надо1. Если у вас одна кнопка призыва к действию, не прячьте ее внизу за пределами первого экрана прокрутки. Человек может просто не дочитать письмо до конца.2. Не заставляйте читателя угадывать, что ему нужно сделать, иначе он просто закроет письмо. Например, в рассылке ресторана призыв к действию «забронировать столик» виден только после прокрутки. К тому же он не соответствует теме письма, которая обещает «Рецепт лучших шашлыков»:Призыв к действию находится ниже первого экрана и не соответствует теме письма3. Если оформляете call to action ссылкой, она не должна теряться на фоне другого текста. В примере ниже ссылку на регистрацию в вебинаре сложно заметить сразу:Короткая и светлая ссылка регистрации на вебинар теряется на фоне письмаКак надо1. Размещайте призыв к действию в пределах первого экрана. Если письмо длинное, добавляйте призывы к действию по ходу чтения: в середине и в конце письма. Так делают в рассылке интернет-супермаркета Rozetka. Call to action размещен в шапке письма и под акционными товарами:Несколько призывов к действию в рассылке интернет-супермаркета Rozetka2. Согласовывайте призыв к действию с заголовком письма. Когда call to action вытекает из темы, письмо выглядит логичным и последовательным. Например, Нил Патель, создатель KissMetrics, в теме обещает рассказать, как высоко ранжироваться в поисковых системах без бюджета. А призыв к действию говорит: «Вот формула».В письме сall to action соответствует теме3. Делайте кнопку контрастной к дизайну письма. Призыв к действию должен хорошо выделяться на фоне текста и изображений:Явный призыв к действию в рассылкеЧек-лист по дизайну email рассылкиЧтобы было удобно проверять свое письмо перед отправкой, мы собрали все советы «как надо» в список. Его можно использовать для самопроверки:Готовьте адаптивные и красивые письма в SendPulse, тестируйте разные приемы в оформлении с помощью A/B тестов. Регистрируйтесь и отправляйте свою первую рассылку!Человек в первую очередь замечает визуальные элементы и только потом вчитывается в текст. Структура письма, иллюстрации, форматирование текста, цветовая гамма, удобство чтения на смартфоне — все это определяет, дочитает ли получатель письмо и совершит ли желаемое действие. Дизайн email рассылки влияет не только на читателей. Письма с ошибками в оформлении и верстке не любят почтовые провайдеры и часто отправляют такие рассылки в спам.В этой статье расскажем о том, как сделать письма визуально привлекательными и эффективными. А также покажем частые ошибки и удачные примеры в разработке дизайна email рассылки от разных брендов.

Подробнее →

Блог об email и интернет-маркетинге

Email маркетинг

Дизайн email рассылки: что такое хорошо и что такое плохо

Человек в первую очередь замечает визуальные элементы и только потом вчитывается в текст. Структура письма, иллюстрации, форматирование текста, цветовая гамма, удобство чтения на смартфоне — все это определяет, дочитает ли получатель письмо и совершит ли желаемое действие.Дизайн email рассылки влияет не только на читателей. Письма с ошибками в оформлении и верстке не любят почтовые провайдеры и часто отправляют такие рассылки в спам.В этой статье расскажем о том, как сделать письма визуально привлекательными и эффективными. А также покажем частые ошибки и удачные примеры в разработке дизайна email рассылки от разных брендов.Дизайн шаблона email рассылки — общие рекомендацииОснова электронного письма — это шаблон. Он оформляется в стилистике сайта, чтобы подписчик мог связать письмо с компанией, на рассылку которой подписался. К разработке шаблона стоит отнестись очень внимательно — в будущем он будет определять структуру и внешний вид ваших рассылок.Как не надо1. Нельзя менять шаблоны слишком часто. Если подписчик каждый раз получает по-другому оформленное письмо, ему сложно запомнить образ компании.2. Не используйте корпоративный цвет как основной, если он слишком яркий. Кажется логичным оформить шапку и плашки в цветах компании. Но если такого цвета слишком много, письмо тяжело читать:Слишком много красного цвета в шаблоне письма3. Не оформляйте текст картинкой, потому что:картинка может не отобразиться;сложно менять макет — придется просить дизайнера переделывать картинку;если на картинке промокод, читатель не сможет его скопировать и вставить, нужно перенабирать;кроме того, если оформить картинкой все письмо, почтовые сервисы могут отправить его в спам. 4. Не делайте фон пестрым, иначе сложно читать основной текст:Пестрый фон отвлекает от текста письма5. Не пренебрегайте профессиональной версткой. Неаккуратно сверстанное письмо портит впечатление о компании. Кроме того, письма, набранные Caps Lock, кричащим цветом и разными шрифтами, чаще отправляют в спам почтовые сервисы. В примере ниже дизайн письма выглядит неаккуратно: нет выравнивания по одному краю, используется три размера шрифта, красный цвет в призыве к действию и нагромождение ссылок:Форматирование письма выглядит слишком пестрымКак надо1. Разработайте корпоративный шаблон в стилистике сайта или на основе брендбука. Это не только работает на узнаваемость компании, но и повышает доверие.2. Тестируйте отдельные элементы дизайна email рассылок, а не шаблон в целом. Так вы сможете отследить эффект от изменений и для подписчиков образ компании будет оставаться узнаваемым.3. Создайте несколько шаблонов для разных типов писем. Благодаря этому вы сэкономите время при запуске рассылок. Например, издательство «МИФ» использует два типа шаблона. Первый — для дайджестов:Шаблон для дайджеста статейВторой шаблон — для промо-рассылок:Шаблон для промо-рассылки4. Если цвета бренда контрастные, используйте их для подчеркивания важной информации или для баннеров. В примере ниже зеленым цветом, помимо логотипа, выделены кнопки призыва к действию:Цветовые акценты в корпоративном шаблоне5. Разработайте логичную структуру письма. Основное рекламное или информационное послание должно размещаться на первом экране:Шаблон с основной информацией в первом экране прокрутки6. Придерживайтесь ширины письма 600 рх. Так email будет отображаться на экране любого почтового сервиса без горизонтальной прокрутки.7. Чередуйте текстовые блоки и картинки. Это нужно для лучшей доставляемости писем, когда вы только начинаете делать рассылки и у вашего домена еще не сформирована положительная репутация отправителя. Есть советы придерживаться соотношения 80:20 или 60:40. То есть чтобы в письме было 80% текста и 20% картинок. 8. Поручите дизайн email рассылки профессиональному верстальщику, чтобы оформление заголовков, текстовых блоков и картинок выглядело гармонично. Посмотреть пример дизайна рассылки с красивой и аккуратной версткой можно в письмах издательства «МИФ»:Гармоничная верстка рассылки издательства «МИФ»Адаптивный дизайн рассылкиБудет ли письмо правильно отображаться на экране мобильного устройства, зависит от адаптивности верстки. Ошибки в адаптивности не просто портят внешний вид письма, иногда они делают его бесполезным. Например, если пользователь смартфона не может попасть по ссылке, так как она слишком мелкая и куда-то «съехала», он не перейдет на сайт и ничего не купит.Как не надоНе пренебрегайте адаптивным дизайном в email рассылках. Уделите ему внимание и учитывайте все нюансы адаптивной верстки. Ведь ошибки в ней приводят к таким результатам, как на примере ниже:Результат ошибки в адаптивной верстке, когда блоки не перестроилисьКак надо1. Придерживайтесь правил адаптивной верстки email. Например, чтобы на мобильном колонки могли перестраиваться вниз, добавляется специальный код, а все блоки верстаются таблицей.2. Еще один вариант — использовать готовые адаптивные шаблоны в SendPulse или делать шаблон в блочном редакторе SendPulse. В нем уже учтены все правила верстки. Кроме того, вы сразу можете посмотреть, как выглядит письмо на компьютере и на мобильном:Предпросмотр веб- и мобильной версии письма в редакторе SendPulseТекст в дизайне email рассылкиДаже самый интересный текст могут не прочитать, если он выглядит непривлекательно. И наоборот, разбивка текста на абзацы с подзаголовками, выделение главных мыслей цветом или другим шрифтом помогает привлечь и удержать внимание читателя. Впрочем, в стремлении красиво оформить текст, можно допустить несколько ошибок.Как не надо1. Не используйте много инструментов оформления в одном письме — разные стили и начертания шрифтов, выделение цветом, размеры шрифта. Пестрые письма выглядят неряшливо, почтовые сервисы могут распознавать их как спам. В рассылке детского магазина используется четыре цвета шрифта, выделение жирным. Окончательно портит картину нагромождение ссылок с подчеркиванием:Пестрый текст в рассылке детского магазина2. Не используйте мелкий или блеклый шрифт. Неразборчивый шрифт ухудшает восприятие текста.3. Не верстайте письмо сплошным текстом. Без разбивки на абзацы текст выглядит монотонно, его сложно и скучно читать.4. Не ставьте ссылки слишком близко, иначе они могут «склеиться». При чтении со смартфона тяжело будет кликнуть на нужную ссылку:В рассылке консалтинговой компании ссылки стоят слишком близкоКак надо1. Выберите один или два шрифта для email рассылки.2. Используйте стандартные шрифты. Некоторые почтовые сервисы, например, Gmail и Yahoo, поддерживают больше шрифтов, Outlook и AOL — меньше. Если сервис не может прочитать ваш шрифт, он заменяет его стандартным, и верстка может «поплыть». Чтобы этого не произошло, пишите стандартными для всех сервисов рассылки шрифтами: Arial, Lucida Grande, Tahoma, Trebuchet, Verdana, Georgia, Palatino, Times New Roman, Courier New, Courier и Impact. 3. Корпоративными шрифтами оформляйте надписи на баннерах и в тексте, который верстается картинкой.4. Оформляйте ключевые мысли подзаголовками, пишите короткими абзацами. Текст, в котором четко видна структура, легко и приятно читать.5. Используйте размер шрифта не менее 14px.Цвет в дизайне письма для рассылкиОформление письма цветом задает настроение и усиливает рекламное послание. Но если ошибиться с цветом в рассылке, можно получить обратный эффект — разозлить читателя.Как не надо1. Не ослепляйте читателя цветом. Слишком много красного, использование ярких или несочетаемых оттенков портит внешний вид письма и затрудняет чтение. В примере ниже очень яркие, агрессивные блоки отвлекают внимание от смысла:Много красного цвета в рассылке2. Будьте осторожны с градиентом. Например, в письме ниже слишком заметная линия перехода между цветами выглядит некрасиво:Слишком явная граница в градиентеКак надо1. Используйте яркие цвета как акцент для важных элементов. А верхний баннер и футер сделайте в более спокойных оттенках. 2. Учитывайте особенности вашего продукта и целевую аудиторию, выбирая цветовое оформление письма. В статье на блоге Kissmetrics написано, что мужчины предпочитают контрастные цвета, а женщины — мягкие оттенки.3. Подходите творчески к использованию градиента. Например, в новогодней рассылки Wizzair удачно обыграли переход цветов в открытке:Интересное использование градиента в новогодней рассылке4. Проводите A/B тестирование, чтобы определить более эффективный цвет элементов рассылки.Дизайн хедераХедер — это блок вверху письма, над главной картинкой. Здесь обычно размещают логотип, ссылки на разделы сайта, контактную информацию. Хедер помогает идентифицировать письмо: читатель видит имя бренда в поле «от кого», а открыв письмо, видит логотип:Идентификация бренда в поле отправителя и хедере письмаКак не надо1. Частая ошибка в хедере — много информации. Да, вверху письма можно и нужно давать ссылки на важные разделы сайта. Но если разместить еще и ссылки на соцсети, как в примере ниже, есть риск отвлечь внимание читателя от основного сообщения. Плюс ссылки в несколько строк занимают много места:Перегруженный хедер письма2. Картинки плохого качества в хедере портят внешний вид письма и создают впечатление любительского дизайна рассылки:Плохое качество картинки в шапке письмаКак надо1. Выделите главную информацию, которая соотносится с темой письма. Например, в рассылке сервиса покупки билетов Busfor.ua есть логотип с подписью и ссылка для подбора билетов:Только нужная информация в хедере email2. Добавьте в хедер настроения, используя праздничную или сезонную атрибутику. Небольшие обновления делают рассылку интереснее для постоянных читателей. Например, магазин одежды в своей новогодней рассылке добавил в логотип шапку Санта-Клауса:Новогодний атрибут в хедере письмаДизайн футера email рассылкиСамый малозаметный, но не менее важный элемент письма — это футер. Чаще всего здесь размещают подпись, ссылку отписки, объяснение, почему подписчик получил рассылку, физический или юридический адрес компании и ссылки на социальные сети.Как не надо1. Логично выносить в конец письма служебную информацию и менее важные ссылки. Но футер не должен быть свалкой:Футер перенасыщен информацией2. Не прячьте ссылку отписки. Если читателю сложно отписаться, он будет отправлять письма в спам. А жалобы на спам ухудшают репутацию отправителя. В примере ниже текст футера, включая ссылку отписки, почти сливается с фоном:Нечеткая информация в футере рассылкиКак надо1. Добавляйте в футер действительно нужную информацию. Сгруппируйте ссылки по смыслу, чтобы удобнее было читать:Структурированная информация в футере2. Делайте ссылку отписки заметной. Это будет честно по отношению к подписчику и снизит вероятность отправки письма в спам:Заметная ссылка отписки в рассылке3. Попробуйте добавить в футер дружелюбную подпись, чтобы читатель закончил читать на приятной ноте и захотел открыть следующую рассылку:Дружелюбная подпись в футереИзображения в дизайне письма рассылкиФотографии, инфографики, картинки — неотъемлемая часть дизайна email рассылки. Хорошо подобранные изображения помогают передать настроение, эмоции, задают стиль письма. Как не надо1. Нельзя делать рассылку, состоящую только из одних картинок или сплошной картинкой. По результатам исследования, 43% пользователей Gmail читают почту с отключенными изображениями. Содержание письма должно оставаться понятным, если в нем будет только текст.2. Светлый и неконтрастный шрифт читается плохо. Такой текст при наложении на пеструю фотографию будет сливаться с фоном:Белый текст на светлой фотографии читается плохо3. Не используйте изображения больше необходимых размеров. Например, если ширина блока 300 px, то не нужно брать для него картинку шириной 1200 px.Как надо1. Оптимизируйте картинки перед тем, как добавить их в письмо. Письмо с большим по весу изображением будет подгружаться дольше. Особенно это актуально для смартфонов, где скорость загрузки может быть ниже из-за плохого мобильного интернета. Подумайте, что вероятнее сделает пользователь: будет дожидаться загрузки ваших больших и красивых картинок или же просто закроет письмо?Чтобы оптимизировать изображения для писем можете воспользоваться этими сервисами: Squoosh, TinyPNG. 2. Прописывайте Alt-текст для картинок и фотографий. Так пользователи смогут понять смысл письма, даже если картинки не загружаются автоматически. Текст должен соответствовать смыслу картинки.3. Увеличивайте размер иконок в два раза, чтобы у пользователей iPhone и Macbook с Retina экраном они отображались в хорошем качестве. Например, если в рассылку нужно добавить иконку размером 70×20, на сервер ее загружают в размере 140×40. А потом уменьшают, указав в коде атрибут.Важно! Учтите, если уменьшаете картинки таким образом, то меняете только ее размер, но не вес. Картинка с большим весом может плохо грузиться на устройстве. Поэтому обращаем ваше внимание еще раз: оптимизируйте изображения перед тем, как добавить их в письмо.4. Делайте картинки кликабельными. Если вы посмотрите на карту кликов своей рассылки, то заметите, что читатели часто нажимают на картинки. Поэтому указывайте для картинок ссылки на нужные разделы сайта.5. Выбирайте картинки хорошего качества — на бесплатных фотостоках или сделанные вами. Дизайн CTAВ email рассылке call to action — это кнопка или ссылка, которая призывает читателя выполнить целевое действие: зарегистрироваться на вебинар, купить товар на сайте, заполнить анкету. Четкий призыв к действию и его правильное размещение в письме помогают увеличить CTR. А ошибки могут сделать письмо бесполезным.Как не надо1. Если у вас одна кнопка призыва к действию, не прячьте ее внизу за пределами первого экрана прокрутки. Человек может просто не дочитать письмо до конца.2. Не заставляйте читателя угадывать, что ему нужно сделать, иначе он просто закроет письмо. Например, в рассылке ресторана призыв к действию «забронировать столик» виден только после прокрутки. К тому же он не соответствует теме письма, которая обещает «Рецепт лучших шашлыков»:Призыв к действию находится ниже первого экрана и не соответствует теме письма3. Если оформляете call to action ссылкой, она не должна теряться на фоне другого текста. В примере ниже ссылку на регистрацию в вебинаре сложно заметить сразу:Короткая и светлая ссылка регистрации на вебинар теряется на фоне письмаКак надо1. Размещайте призыв к действию в пределах первого экрана. Если письмо длинное, добавляйте призывы к действию по ходу чтения: в середине и в конце письма. Так делают в рассылке интернет-супермаркета Rozetka. Call to action размещен в шапке письма и под акционными товарами:Несколько призывов к действию в рассылке интернет-супермаркета Rozetka2. Согласовывайте призыв к действию с заголовком письма. Когда call to action вытекает из темы, письмо выглядит логичным и последовательным. Например, Нил Патель, создатель KissMetrics, в теме обещает рассказать, как высоко ранжироваться в поисковых системах без бюджета. А призыв к действию говорит: «Вот формула».В письме сall to action соответствует теме3. Делайте кнопку контрастной к дизайну письма. Призыв к действию должен хорошо выделяться на фоне текста и изображений:Явный призыв к действию в рассылкеЧек-лист по дизайну email рассылкиЧтобы было удобно проверять свое письмо перед отправкой, мы собрали все советы «как надо» в список. Его можно использовать для самопроверки:Готовьте адаптивные и красивые письма в SendPulse, тестируйте разные приемы в оформлении с помощью A/B тестов. Регистрируйтесь и отправляйте свою первую рассылку!Человек в первую очередь замечает визуальные элементы и только потом вчитывается в текст. Структура письма, иллюстрации, форматирование текста, цветовая гамма, удобство чтения на смартфоне — все это определяет, дочитает ли получатель письмо и совершит ли желаемое действие.Дизайн email рассылки влияет не только на читателей. Письма с ошибками в оформлении и верстке не любят почтовые провайдеры и часто отправляют такие рассылки в спам.В этой статье расскажем о том, как сделать письма визуально привлекательными и эффективными. А также покажем частые ошибки и удачные примеры в разработке дизайна email рассылки от разных брендов.

Подробнее →

7 лучших инструментов для создания мобильных веб-сайтов в 2023 году

Контент CodeinWP бесплатный. Когда вы покупаете по реферальным ссылкам на нашем сайте, мы получаем комиссию. Узнать больше

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

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

Другие сообщения о создании веб-сайтов, которые могут вам понравиться:

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

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

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

Что делает конструктор мобильных сайтов лучшим?

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

Поэтому нам хотелось бы видеть некоторые из следующих элементов, облегчающих разработку в целом:

🎨 Красивые и многочисленные шаблоны для начала с

Разработка — это игра, в которой нужно создавать что-то новое, избегая при этом повторного изобретения колеса. Даже лучшие дизайнеры начинают с шаблонов, поскольку вы также можете вносить более сложные изменения с помощью CSS/HTML — и вы обязаны предоставить клиентам более быстрое время разработки при использовании шаблона.

📱 Отзывчивость, которая действительно работает и хорошо выглядит

Практически каждый разработчик тем или создатель веб-сайтов может похвастаться тем, что его шаблоны адаптивны. Однако некоторые из них не так хороши, а другие в конечном итоге почти бесполезны. Обычно вы не можете понять это, пока не протестируете мобильные шаблоны на своих устройствах. Мы провели для вас тестирование и нашли ниже лучшие адаптивные конструкторы веб-сайтов (с отличными темами).

💻 Сильный и надежный хостинг

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

🔄 Интерфейс перетаскивания

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

🛒 Встроенные инструменты электронной коммерции

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

🔌 Приложения, которые хорошо работают на мобильном интерфейсе

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

А теперь… лучшие конструкторы мобильных сайтов

Вот краткий обзор, если вы торопитесь и не можете прочитать все:

Лучшие инструменты для создания мобильных сайтов

Строитель	Цена (в месяц)	Подходит для малого бизнеса	Подходит для электронной коммерции	Подходит для агентств/разработчиков
Squarespace	$16 – $40	✅	✅	❌
Викс	16–500 долларов	✅	❌	✅
Shopify	24–299 долларов	✅	✅	✅
Элементор / WordPress	$4 – $17	✅	✅	✅
Уибли	$0 – $38	✅	❌	❌
Джимдо	$0 – $19	✅	❌	❌
Дуда	$14 – $74	❌	для некоторых планов	✅

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

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

Общая стоимость и тарифные планы 💵

Предлагается бесплатная пробная версия без необходимости использования кредитной карты.

• Личный сайт — 16 долларов в месяц
• Бизнес-сайт — 18 долларов в месяц
• Базовый интернет-магазин — 26 долларов США в месяц
• Расширенный интернет-магазин — 40 долларов в месяц

Pros 👍

• Squarespace можно использовать для управления несколькими веб-сайтами для вашей собственной сети или для клиентов.
• Программа для разработчиков позволяет создавать полностью настраиваемые веб-сайты с помощью шаблонов, интеграций и пользовательского кода.
• Шаблоны очень наглядны и являются одними из самых современных вариантов на рынке.
• Включено большинство необходимых вам функций — вместо установки приложений.
• Шаблоны на самом деле выглядят красиво и хорошо работают на мобильных устройствах.
• Инструменты интернет-магазина довольно мощные, с бесплатным SSL-сертификатом, без комиссий за транзакции и неограниченным количеством товаров.

Минусы 👎

• У Squarespace нет магазина приложений, что может ограничивать вас в зависимости от того, что вам нужно.
• Хотя это и разумно, у других конструкторов мобильных веб-сайтов в этом списке есть более выгодная цена.
• Создание веб-сайта на бэкенде не так интуитивно понятно, как у конкурентов, особенно по сравнению с Wix и Shopify.

Это лучший конструктор мобильных сайтов для вас? 🧐

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

Вас также может заинтересовать:

• Учебник Weebly: Как использовать Weebly для настройки веб-сайта
• Самый дешевый конструктор веб-сайтов: 9 лучших вариантов для самостоятельного создания веб-сайта
• Сравнение и тестирование 9 лучших решений для конструктора веб-сайтов (2023)

2. Wix

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

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

Общая стоимость и тарифные планы 💵

Wix предлагает два типа планов: обычные веб-сайты и веб-сайты электронной коммерции. Цены чрезвычайно низкие по всем направлениям, и вы получаете бесплатный хостинг, Google Analytics и поддержку собственного домена со всеми планами.

• Комбинированный веб-сайт — 16 долларов США в месяц
• Безлимитный веб-сайт — 17 долларов в месяц
• Веб-сайт Pro — 23 доллара в месяц
• VIP-сайт — 39 долларов в месяц
• Business Basic (электронная коммерция) — 23 доллара США в месяц
• Business Unlimited (электронная коммерция) — 27 долларов США в месяц
• Business VIP (электронная коммерция) — 49 долларов США в месяц
• Деловое предприятие (электронная коммерция) — 500 долларов в месяц

Pros 👍

• Wix имеет одну из самых гибких и доступных структур ценообразования с точки зрения конструкторов сайтов.
• На самом деле доступен бесплатный план, если вам не нужен личный домен. Это может быть полезно для студентов или любителей.
• Функции электронной коммерции хороши для небольших интернет-магазинов.
• Шаблоны привлекательны и просты в использовании.
• Вы можете воспользоваться прекрасным редактором с функцией перетаскивания.
• Wix имеет App Market для расширения функциональности вашего сайта.
• У Wix есть инструмент Corvid, который представляет собой продвинутую платформу для разработки веб-приложений с удобной панели управления Wix.

Минусы 👎

• Минуты хранения и видео ограничены в некоторых планах.
• Не рассчитывайте запустить интернет-магазин и превратить его в нечто огромное. Функции электронной коммерции великолепны, но ограничены.

Это лучший конструктор мобильных сайтов для вас? 🧐

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

3. Shopify

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

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

Общая стоимость и тарифные планы 💵

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

• Shopify Lite — 9 долларов в месяц
• Базовый Shopify — 24 доллара в месяц
• Shopify — 79 долларов в месяц
• Расширенный Shopify — 299 долларов в месяц
• Shopify Plus — от 2000 долларов в месяц

Pros 👍

• Это полноценный конструктор интернет-магазинов с неограниченным количеством товаров, без комиссий за транзакции и многим другим.
• Shopify интегрируется с несколькими социальными сетями, включая прямую рекламу в Facebook.
• Цены разумные по сравнению с другими строителями магазинов.
• Темы многочисленны, красивы и мобильны.
• Вы можете создавать записи в блогах и на страницах веб-сайтов за пределами интернет-магазина.
• Вы получаете доступ к большому магазину приложений.
• Служба поддержки клиентов — как ресурсы, так и специализированная поддержка — является одной из лучших в бизнесе.

Минусы 👎

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

Это лучший конструктор мобильных сайтов для вас? 🧐

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

4. WordPress (в сочетании с Elementor)

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

Он включает в себя несколько отличных инструментов для лидогенерации и конверсии, а также модули и настройки для создания любого типа веб-сайта, который вы хотите. Также здорово, что Elementor работает со всеми темами WordPress.

Общая стоимость и тарифные планы 💵

Бесплатная загрузка предлагает такие функции, как конструктор перетаскивания и 30 основных виджетов. Это мощно, но для всего, кроме этого, требуется платный план:

• Персональный — 59 долларов в год
• Плюс — 99 долларов в год
• Эксперт – 199 долларов США в год

WordPress бесплатен, но нельзя забывать о расходах на такие вещи, как хостинг и темы. Например, хостинг Bluehost стоит от 2,75 долларов в месяц 9.0010 — и вы получаете бесплатное доменное имя. Некоторые темы бесплатны, но вы можете потратить от 50 до 150 долларов за премиальную тему WordPress.

Плюсы 👍

• У вас больше контроля над вашим сайтом, так как он работает на WordPress.
• Бесплатный плагин Elementor имеет 30 модулей, чего обычно более чем достаточно для среднего бизнеса.
• Редактор с перетаскиванием — один из лучших, которые я когда-либо видел.
• Некоторые планы включают конструкторы всплывающих окон и сайтов WooCommerce.
• Вы можете получить доступ к еще большему количеству виджетов и шаблонов Pro.
• Вы можете создавать интернет-магазины с помощью более 15 виджетов для магазинов.

Минусы 👎

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

Это лучший конструктор мобильных сайтов для вас? 🧐

Все опытные дизайнеры WordPress должны пользоваться интерфейсом Elementor для создания мобильных сайтов. Я обычно рекомендую это всем, кто жаждет большего контроля над своими веб-сайтами и не любит жесткость типичного конструктора сайтов. Если вам нужен самый быстрый и простой вариант создания адаптивного веб-сайта, поищите в другом месте. Тем не менее, некоторые темы WordPress отлично работают на мобильных устройствах. Просто убедитесь, что вы протестировали все на своем телефоне и планшете перед покупкой.

5. Weebly

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

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

Общая стоимость и тарифные планы 💵

У Weebly нет бесплатной пробной версии, потому что бесплатный план дает вам достойный обзор конструктора веб-сайтов. Планы включают:

• Бесплатный план — 0
долларов США.
• Подключить — 5 долларов в месяц
• Pro — 12 долларов США в месяц
• Бизнес – 25 долларов в месяц
• Интернет-магазин Pro (поддержка электронной коммерции) — 12 долларов США в месяц
• Бизнес (поддержка электронной коммерции) — 25 долларов США в месяц
• Business Plus (поддержка электронной коммерции) — 38 долларов США в месяц

Pros 👍

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

Минусы 👎

• В некоторых планах предусмотрена комиссия за транзакции при использовании сторонних платежных систем.
• Темы Weebly имеют упрощенный дизайн, что делает их менее подходящими для растущего бизнеса.
• Функции электронной коммерции ограничены, пока вы не перейдете на план Business Plus.
• Организация страниц и сообщений не так интуитивно понятна, как должна быть.
• При необходимости вам может быть сложно перейти на другой конструктор веб-сайтов.

Это лучший конструктор мобильных сайтов для вас? 🧐

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

6. Джимдо

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

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

Общая стоимость и тарифные планы 💵

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

• Play — 0
долларов.
• Старт — 9 долларов в месяц
• Рост — 15 долларов в месяц

Вот планы Jimdo для интернет-магазина:

• Basic — 15 долларов в месяц
• Бизнес — 19 долларов в месяц

Плюсы 👍

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

Минусы 👎

• Шаблоны ограничены и не такие современные, как хотелось бы.
• Немного сложно понять, как именно ИИ помогает в разработке.
• Представлены разные цены в зависимости от того, на каком этапе процесса продаж вы находитесь (то есть взимает с одних клиентов больше, чем с других за одну и ту же вещь).

Это лучший конструктор мобильных сайтов для вас? 🧐

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

7. Duda

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

Что интересно в Duda, так это то, что вы можете платить за каждый веб-сайт или перейти на более командный план и получить несколько веб-сайтов с вашим пакетом. Вы также получаете невероятные скорости с помощью хостинга Amazon Web Services.

Общая стоимость и тарифные планы 💵

Предлагается 30-дневная бесплатная пробная версия, а также вы можете сэкономить с годовой оплатой. Базовый план — это возможность покупать каждый сайт отдельно.

• Базовый — 14 долларов США в месяц
• Команда — 22 доллара в месяц
• Агентство – 74 доллара в месяц

Индивидуальные планы также доступны, если вы поговорите с отделом продаж Duda.

Pros 👍

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

Минусы 👎

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

Это лучший конструктор мобильных сайтов для вас? 🧐

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

Как сузить круг лучших конструкторов мобильных веб-сайтов

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

Вот несколько советов, которые помогут вам в пути:

• Рассмотрите Squarespace , если вам нужен невероятно мобильный и стандартный дизайн.
• Подумайте о Wix , если вам нужен лучший мобильный конструктор с перетаскиванием и дешевые планы.
• Рассмотрите Shopify , если вы создаете интернет-магазин и хотите продавать тем, кто покупает через мобильные устройства.
• Рассмотрите WordPress с Elementor , если вам нужен стильный конструктор, вам нравится WordPress и его многочисленные мобильные темы.
• Рассмотрите вариант Weebly , если у вас ограниченный бюджет.
• Рассмотрите вариант Jimdo , если хотите создавать быстро реагирующие бизнес-сайты.
• Рассмотрите Duda , если вам нужны доступные агентские планы с мобильным дизайном и инструментами для совместной работы.

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

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

…

Не забудьте присоединиться к нашему ускоренному курсу по ускорению вашего сайта WordPress. Узнайте больше ниже:

Макет, презентация и редактирование Кароль К.

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

Джо Варнимонт

54 статьи

Джо Варнимонт — писатель из Чикаго, специализирующийся на WordPress, инструментах электронной коммерции и социальных сетях. Когда он не ловит рыбу и не занимается йогой, он собирает марки в национальных парках (хотя это в основном для детей). Ознакомьтесь с портфолио Джо, чтобы связаться с ним и просмотреть прошлые работы: https://joewarnimont.com/

Подписывайтесь на Джо:

Или начните общение в нашей группе Facebook для профессионалов WordPress. Находите ответы, делитесь советами и получайте помощь от других экспертов WordPress. Присоединяйтесь сейчас (это бесплатно)!

Как сделать свой веб-сайт мобильным

Летом 2015 года впервые в истории Google было выполнено больше поисковых запросов с мобильных устройств, чем с настольных компьютеров, и вам лучше поверить, что с тех пор их количество только увеличилось!

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

Чтобы сделать веб-сайт удобным для мобильных устройств, вам необходимо:

1. Выбрать тему или шаблон, адаптированный для мобильных устройств
2. Убрать содержимое
3. Сделать изображения и CSS как можно более легкими
4. Избегать Flash
5. Кнопка «Изменить» размер и размещение
6. Разместите ссылки
7. Используйте крупный и читаемый шрифт
8. Удалите всплывающие окна
9. Регулярно тестируйте

Но сначала, что на самом деле означает удобство для мобильных устройств?

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

Этого можно добиться несколькими способами:

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

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

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

Вот некоторые другие статьи, которые могут вам понравиться:

Как создать веб-сайт . Если вы начинаете разрабатывать (или редизайн!) свой веб-сайт, ознакомьтесь с пошаговым руководством в этой статье. , и основные моменты, которые следует учитывать.

Как создать сайт – Вы еще не начали работу над своим сайтом? Не беспокойтесь, это руководство проведет вас через весь процесс!

5 лучших конструкторов веб-сайтов для SEO . Любой конструктор веб-сайтов с сильным SEO поставляется с мобильным интерфейсом, встроенным прямо в его шаблоны. Вот пятерка лучших.

Советы по интернет-маркетингу – Хотите узнать больше об онлайн-маркетинге? Ознакомьтесь с нашими главными советами сегодня…

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

Squarespace — полностью адаптируется к мобильным устройствам и будет нашим лучшим выбором, если вы создаете сайт с нуля и считаете мобильность своим главным приоритетом.

Wix — все шаблоны адаптированы для мобильных устройств, но обязательно проверяйте их в мобильной версии. Поскольку сайты Wix настолько настраиваемые, иногда большие изменения не переносятся так гладко, и вам придется внести некоторые изменения.

Если вы создаете сайт с помощью системы CMS, такой как WordPress, убедитесь, что тема, которую вы выбрали для создания своего сайта, адаптирована для мобильных устройств, или, если вы уже создали сайт, переключитесь на такую!

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

Помогите! Что делать, если у меня неотзывчивая тема, и я не могу ее переключить?

Если ваш веб-сайт был создан с использованием старой, неадаптивной темы или шаблона, и вы не можете его переключить, попробуйте добавить эту строку кода в тег каждой страницы:

0″>

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

Вы выбрали прекрасную адаптивную тему или шаблон, так что теперь все готово, верно? Неправильный!

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

Теперь пришло время взглянуть на автоматизированное мобильное представление вашего веб-сайта и убрать его обратно:

Уточните свое предложение

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

Взгляните на этот пример из Trainline:

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

Избегайте больших кусков текста

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

Сокращение форм

Заполнение длинных форм и в лучшие времена было рутиной, но на мобильном телефоне? В движении? Забудь это! Длинные формы потеряют читателей быстрее, чем вы успеете сказать «это обязательное поле». Убедитесь, что каждая форма, которую вы отображаете на мобильном телефоне, запрашивает только абсолютно необходимую информацию.

Лучший совет! Надоедливая автокоррекция — верный способ превратить заполнение форм в большую трату времени. Избавьте своих читателей от стресса, отключив его. Если у вас есть доступ к коду формы, убедитесь, что в поле автозамены установлено значение автокоррекция=выкл. .

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

Google очень ясно дал понять, что скорость веб-сайта является решающим фактором ранжирования, а это означает, что медленные (также известные как «тяжелые») веб-сайты проигрывают в конкуренции на страницах результатов поисковой системы (SERP).

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

Что с этим делать?

Сжатие изображений

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

Разместите свои видео у третьей стороны

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

Wistia — популярная платформа для этого, но YouTube также работает — вам просто нужно убедиться, что вы отключили автовоспроизведение, чтобы несвязанное видео не воспроизводилось после вашего. Для этого просто:

• Перейдите на свою страницу WordPress или опубликуйте
• Найдите встроенный код и нажмите на вкладку «текст»
• Найдите часть с надписью src=»youtubeurlhere»
• Добавьте ?autoplay=0&rel=0 после youtubeurlhere
• Теперь код должен читать источник = ”youtubeurlhere?autoplay=0&rel=0″
• Нажмите «Обновить», и все готово

Лучший совет! Если вы не думаете, что ваш контент будет слишком хорошо размещаться на YouTube (некоторые видео не имеют большого смысла без контекста полной страницы), убедитесь, что вы установили видимость «не в списке». Таким образом, никто не наткнется на него нигде, кроме вашего сайта.

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

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

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

Вот где вы должны стремиться разместить CTA на мобильном сайте:

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

Говоря о том, как трудно точно щелкнуть большим пальцем, а не мышью, это приятно подводит нас к следующему пункту: посмотрите на свои ссылки!

В частности, вам нужно проверить, чтобы все гиперссылки на вашем мобильном сайте:

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

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

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

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

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

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

Лучший способ узнать, насколько ваш мобильный сайт удобен для мобильных устройств, — протестировать его! Вы можете сделать это тремя разными способами:

Запустите URL-адреса с помощью инструмента Google для мобильных устройств

У Google есть бесплатный инструмент для тестирования мобильных устройств, который любой может использовать для проверки того, насколько удобен для мобильных устройств тот или иной URL-адрес, будь то домашняя страница (как показано ниже) или страница в вашем сайт.

Попробуйте различные размеры устройств на своем рабочем столе

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

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

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

Как сделать ваш веб-сайт удобным для мобильных устройств:

1. Выберите тему или шаблон для мобильных устройств
2. Удалите свой контент
3. Сделайте изображения и CSS как можно более легкими
4. Избегайте Flash
5. Измените размер и расположение кнопок
6. Расставьте ссылки
7. Используйте крупный и читаемый шрифт 7

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

   No related posts.