Сначала откройте файл изображения или URL-адрес с помощью меню «Файл» в верхней части экрана. Затем нажмите «Изображение» в верхнем меню и выберите «Размер изображения».

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

Как только вы получите нужный размер изображения, просто нажмите «Сохранить» в меню «Файл» и сохраните изображение на свой компьютер.

6) Размер изображения для социальных сетей

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

Каждая социальная сеть имеет свои стандарты размеров изображений.

• Facebook рекомендует изображения размером не менее 600 x 315 пикселей
• Твиттер рекомендует только размер изображения больше 60 x 60 пикселей
• Изображения LinkedIn должны быть равны или меньше 180 x 110 пикселей

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

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

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

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

Я предпочитаю tinypng.com для сжатия изображений. Его результаты надежны, и, несмотря на название, он сжимает как .jpg, так и .png файлы.

Просто перетащите файлы на страницу, и они тут же будут сжаты.

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

Теперь вы можете загружать изображения на свой сайт!

8) Установите альтернативные варианты изображения

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

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

Большинство систем управления контентом позволяют устанавливать теги alt при редактировании или выборе изображения. В HubSpot, например, вы можете изменить альтернативный текст в модуле редактирования изображений:

При написании тегов alt помните о следующих моментах:

• Убедитесь, что описание соответствует изображению.Не заполняйте альтернативный текст нерелевантными ключевыми словами.
• Хотя официального ограничения на количество слов, добавляемых в замещающий текст, нет, лучше сделать его кратким. Этот пост в блоге Hobo Internet Marketing предполагает, что поисковые системы перестают читать замещающий текст после 16 слов. На самом деле для описания многих изображений требуется менее 10 слов.

Заключение

Готово! У вас должно быть хорошо разработанное и оптимизированное изображение целевой страницы, которое поможет ускорить конверсию.

Разработка мобильных целевых страниц — внешний вид

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

Согласно отчету Morgan Stanley, всего к 2015 году количество пользователей мобильных устройств превысит количество пользователей настольных компьютеров.

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

Благодаря тому, что более половины всех местных поисковых запросов выполняется с помощью мобильных устройств, у местных предприятий есть возможность привлечь клиентов на новом уровне. Если вы используете Google Adwords, скорее всего, от 5% до 20% кликов по вашему объявлению приходится на мобильных пользователей. Итак, главный вопрос, который следует задать себе: «Что я делаю, чтобы захватить эти лиды?»

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

• Предоставлять целевой контент
• Сосредоточьтесь на одном призыве к действию
• Конвертировать в большем количестве, чем домашняя страница веб-сайта

Поэтому невозможно переоценить важность мобильных целевых страниц. Мобильные целевые страницы должны:

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

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

Расставьте приоритеты для вашего контента

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

Уменьшить количество изображений

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

Используйте все возможности своего мобильного телефона

Если вы уже направляете мобильных пользователей на страницу, созданную специально для них, вы должны включить призывы к действию, которые легко выполнить на мобильном устройстве.Например, добавление рядом с телефонным номером сделает эту ссылку кнопкой «нажми и позвони». (Помните, что не все мобильные устройства, такие как iPad, имеют одинаковую функциональность, поэтому не забудьте также указать число.) Вы также можете добавить ссылку на maps.google.com, что приведет к Приложение карты, открываемое на мобильном устройстве, идеально подходит для тех, кто ищет маршруты на своем телефоне.

Содержимое подогнать под размер

Откажитесь от абсолютных размеров в пикселях и вместо этого используйте «ширину = 100%» для вашего контента, чтобы он соответствовал любому размеру мобильного телефона.Горизонтальная прокрутка приводит к ненужному сжатию и масштабированию, чтобы содержимое соответствовало размеру экрана. Кроме того, добавление «ширины = 100%» к изображению изменит его размер до внешнего контейнера, поэтому изображения всегда будут соответствовать размеру экрана, независимо от размера устройства или ориентации. «Максимальная ширина» может наложить ограничение на ваш контейнер, если вы уверены, что большинство пользователей не используют большие мобильные устройства, такие как iPad (чтобы быть уверенным, проверьте Google Analytics). При подготовке целевой страницы для мобильных устройств запомните следующие значения ширины ключа:

• 0 x 480 пикселей (iPhone)
• 480 x 800 пикселей (Дроид)
• 768 x 1024 пикселей (iPad)

Используйте мобильные META-теги

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

Тег MobileOptimized META

Изобретение Майкрософт. Этот тег принудительно использует макет с одним столбцом указанной ширины в IE Mobile, не позволяя браузеру изменить макет, чтобы он «подошел под экран мобильного устройства».

МЕТА-тег HandHeldFriendly

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

META-тег области просмотра

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

Установите изображение закладки

Если пользователь добавляет вашу целевую страницу в закладки, Apple автоматически создаст значок для главного экрана на iPhone, iPad и iPod Touch.Однако вы можете создать свой собственный значок размером 57×57 пикселей и обозначить его как желаемый значок, включив в заголовок следующий МЕТА-тег:

Примеры целевых страниц для мобильных устройств

Ниже приведены примеры лучших мобильных целевых страниц (включая две наши собственные):

Источник: Фольксваген

Источник: Best Buy’s Geek Squad

Источник: Northwest Jeep Chrysler Dodge

Источник: Orange Coast Fiat

Размер и макет веб-страницы

Высота страницы, ширина и выравнивание

До того, как смартфоны и планшеты стали популярными, веб-дизайнеры создавали страницы с фиксированной шириной, которые работали на самых распространенных размерах экрана — обычно 1024 пикселя в ширину и 768 пикселов в высоту.Все изменилось примерно в 2013 году, когда число пользователей iPhone для работы в Интернете резко возросло. Теперь нет однозначного ответа на вопрос «какого размера должен быть мой сайт?» — все сайты должны быть адаптивными.

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

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

Проблемы мобильного дизайна

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

• Форма экрана — большинство пользователей смартфонов держат телефоны вертикально, в портретном режиме .Это означает, что экран больше в высоту, чем в ширину, в отличие от настольного компьютера или ноутбука.
• Размер экрана — у смартфонов очень маленькие экраны по сравнению с настольными компьютерами, поэтому дизайнерам необходимо упростить страницы. Разные модели имеют разные размеры экрана, но, как правило, максимальная ширина для портретного дизайна для мобильных устройств составляет 340 пикселей.
• Взаимодействие с пользователем — в мобильных телефонах нет мыши, поэтому эффекты, которые появляются «при наведении» или «при размытии», не работают.
• Навигация — большинство веб-сайтов, как правило, имеют верхнюю панель навигации во всю ширину, которая вообще не работает на смартфоне в портретном режиме.
• Более низкая пропускная способность — это зависит от того, находитесь ли вы в центре города или в сельской местности, но мобильные пользователи с сотовой связью (подключение к Интернету с использованием «данных») могут иметь более низкую скорость интернета. Возможно, вы захотите заменить полноэкранное фоновое видео на мобильной версии вашего сайта.

Реагирует на помощь

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

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

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

Нет сгиба

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

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

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

Изменение моды и удобство использования

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

Делают ли эти современные тенденции дизайна веб-сайты менее удобными в использовании? Интересное новое исследование предполагает, что они могут быть.

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

Наш адаптивный дизайн

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

Большие настольные компьютеры

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

Ноутбуки и iPad

Макет iPad имеет ширину 970 пикселей, что хорошо подходит для экрана iPad в альбомной ориентации с небольшими пробелами слева и справа.Этот дизайн также подходит для небольших ноутбуков и старых компьютеров с размером экрана 1024 на 768 пикселей. Он также отображается на смартфонах в альбомной ориентации.

Этот макет имеет те же функции, что и макет рабочего стола, но все уменьшено, чтобы соответствовать меньшему экрану.

Мобильные устройства

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

Резюме

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

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

Drupal — Размеры баннеров целевых страниц

Тема SSU для Drupal предлагает 3 размера баннеров для целевых страниц.

Изображения большего или меньшего размера будут масштабированы и обрезаны до этих размеров.

Будьте внимательны при выборе изображений для баннера. Пожалуйста, обратите внимание на следующее.

• Изображения намного меньшего размера теряют качество изображения при отображении в большем размере.   Небольшое увеличение масштаба может быть приемлемым, но сильное увеличение будет выглядеть плохо.
• Тема SSU для Drupal включает синюю полосу в верхней части страницы. Он полупрозрачный и перекрывает изображение баннера. При выборе изображения убедитесь, что композиция изображения помещается в пределах видимой области.Высота верхней синей полосы составляет 89 пикселей на большинстве экранов настольных компьютеров/ноутбуков.
• Drupal Theme от SSU добавляет темное прозрачное покрытие поверх нижней части баннера и элемент волны или галочки в нижней части области отображения баннера.   На полноэкранном баннере наложение представляет собой прозрачное изображение перекрывающихся темных волн. На стандартном баннере наложение представляет собой градиент прозрачного фона. Эта темная область улучшает цветовой контраст между текстом баннера и изображением, обеспечивая доступность.
• Стандартные баннеры не отображают всю высоту изображения.  По мере изменения размера окна браузера изображение растягивается на всю ширину окна, изменяя общую высоту отображаемого изображения и то, какая часть верхней части изображения перекрывается верхней синей полосой.
• В большинстве случаев изображения текста не подходят. На большинстве баннеров название отдела и слоган отображаются поверх изображения баннера. Если изображение состоит из текста, скорее всего, заголовок и слоган будут накладываться на текст изображения и мешать ему.Кроме того, изображения баннеров изменяются в размерах, и части изображения могут быть скрыты.
• Изображение будет занимать всю ширину области изображения баннера . Если окно браузера пользователя растянуто шире, чем 1440, изображение заполнит новую ширину. Нижняя часть изображения может не отображаться при большой ширине. Если браузер пользователя уже 1440 или на мобильном устройстве, изображение будет уменьшено, либо левая и правая части изображения будут скрыты.

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

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

Какой макет структуры рекомендуется для мобильного просмотра? Сколько пикселей должно быть у кнопок? Сколько пикселей должно разделять элементы? Стоит ли использовать эффект «зависания»? Должны ли метки формы быть внутри или снаружи?

Меня зовут Космин Сербан, директор дизайнерских услуг Instapage. Вы можете спросить: Что делает Космина квалифицированным для написания дизайна целевой страницы после клика для мобильных устройств?

Я обучаю клиентов передовым методам проектирования и структурирования их целевых страниц после клика, чтобы повысить коэффициент конверсии.Также у меня есть:

• Проверено более 1000 целевых страниц после клика
• Сотрудничество с клиентами для обеспечения того, чтобы их сообщение было доведено до сведения, а их посетители получили хороший опыт, который в конечном итоге приводит к конверсии

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

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

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

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

Структура

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

Первое, что приходит на ум, это совершенно другой способ, которым наши посетители будут сканировать контент на мобильных страницах. Мы все слышали о F-шаблоне или Z-шаблоне на целевых страницах пост-клика для настольных компьютеров, но как называется шаблон для мобильных устройств? Мы не обязательно будем давать ему имя, но, скорее всего, оно очень линейное. Прокрутка вверх и вниз — единственный способ понять, что предлагает эта целевая страница после клика:

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

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

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

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

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

Mobile Aspect Ratio Lock удерживает ваши многоуровневые группы вместе и блокирует соотношение сторон, независимо от того, находятся ли они на настольном или мобильном макете.

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

Время загрузки

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

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

То же самое с фоновыми изображениями, поскольку вам не нужно изображение шириной 2000 пикселей и размером 300 КБ для загрузки в ваш раздел, я предлагаю попросить дизайнера создать собственное изображение, которое вы можете установить в качестве фона вашего раздела:

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

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

Создайте целевую страницу AMP после клика

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

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

AMP-страницы, в частности, привлекательны для рекламодателей, поскольку они обеспечивают более привлекательный опыт работы с мобильными пользователями за счет почти мгновенного времени загрузки и плавной прокрутки, а также поддерживают некоторые настраиваемые стили и брендинг.Поскольку AMP ограничивает HTML/CSS и JavaScript, он позволяет быстрее отображать целевую страницу после клика. В отличие от традиционных мобильных страниц, страницы AMP автоматически кэшируются Google AMP Cache для ускорения загрузки в Google.

Преимущества платформы AMP действительно перевешивают ее ограничения:

• Более высокая скорость загрузки страниц на мобильных устройствах
• Улучшенный пользовательский интерфейс для мобильного просмотра
• Использование AMP-страниц может помочь повысить показатель качества
• Google будет отдавать предпочтение страницам, использующим AMP

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

Сенсорный дизайн

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

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

Кнопки

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

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

Поля

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

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

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

Это довольно субъективно, но как только вы установите правило, попробуйте воспроизвести его на всей странице, и это придаст ему более современный вид:

Читаемость

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

• Основной заголовок: 28 пикселей
• Подзаголовок: 22 пикселя
• Абзацы: 17 пикселей
• Другие детали: 15 пикселей

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

Еще один пункт, о котором стоит упомянуть, это высота строки с текстовыми элементами.

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

Итог: чем меньше размер шрифта, тем больше должна быть высота строки.

Формы

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

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

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

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

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

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

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

Рекомендации по размеру изображения | Система управления контентом

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

• Изображения на сайте будут ограничены своей шириной. Это будет означать, что при работе с содержимым в карточке будет установлена ​​ширина, а затем высота строки будет ограничена наибольшей высотой в этой строке. Если у вас есть большой абзац текста, высота строки которого больше высоты вашего изображения, под изображением будет пустое пространство. Если изображение выше, чем содержимое вокруг него, строка будет высотой изображения.По этим причинам при планировании контента наиболее важным параметром изображения является его ширина. (Исключение: Джамботрон)
• Если вы добавите изображение с шириной, превышающей рекомендуемую для пробела, размер изображения будет уменьшен до размера пробела (пропорционально)
• Изображения имеют 2 вида использования. Карты и Джамботроны. Использование карты применяется к любому изображению, добавленному с помощью карты памяти или через WYSIWYG с помощью панели инструментов. Jumbotron имеет ограниченный размер изображения (см. ниже).
• Если вы используете изображение в формате WYSWYG, вы можете установить размер эскиза — этот размер определяется по наибольшей стороне изображения. Например, если вы выбрали миниатюру 650 x 650 и загрузили изображение размером 1300 x 650, результирующая миниатюра будет иметь размер 650 x 325, а не квадрат, как предполагают размеры.
• Джамботрон — Джамботрон будет такой же ширины, как открытое окно. Если у вас более узкое окно, вам нужно более узкое изображение. Если у вас самое широкое окно на 14-дюймовом экране, вам понадобится изображение размером 2115 x 450.Для Jumbotron мы рекомендуем не меньше 1920 x 450. Чем шире изображение, тем лучше, хотя высота всегда будет 450 пикселей. Изображения Jumbotron также используются в строках Hero на целевых страницах.
• Избранное изображение. Масштаб фокуса и кадрирование избранных изображений установлены на 1200 x 400 пикселей
• Изображения будут располагаться в верхнем левом углу макета, в котором они находятся, поэтому, если изображение имеет меньшую ширину, чем рекомендуемая ширина на карточке, оно будет в верхнем правом углу выбранного вами макета.
• Мы рекомендуем не использовать различную ширину строк со сложными строками, включающими много карточек.
• Чтобы в строке были изображения одинакового размера — обрежьте изображения до одинакового размера в пикселях, а затем загрузите их на сайт и добавьте на свою страницу. Бесплатное программное обеспечение, которое помогает изменить размер: https://www.birme.net/?target_width=400&target_height=500, которое позволяет вам одновременно устанавливать высоту и ширину фотографий, размер которых вы изменяете.

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

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