Сайты адаптированные для мобильных устройств: Адаптированный сайт – это сайт, адаптированный под мобильные устройства

Содержание

Адаптированный сайт – это сайт, адаптированный под мобильные устройства

Что такое адаптированный сайт? В 2016 г. этот тренд стал реальной необходимостью. Сайт, адаптированный под мобильные устройства необходим для того, чтобы захватить примерно 40% мобильных пользователей.

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

Одновременно с запуском алгоритма Mobile Friendly в своем блоге Google публикует FAQ самые важные тезисы, на которые нужно обратить внимание:

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

Протестируйте ваш сайт в search.google

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

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

  • Если существующий сайт многостраничный, и он занимает высокие позиции в поисковой выдаче, то для того, чтобы не потерять позиции – лучше создавать отдельную мобильную версию сайта.
  • Если сайт активно не продвигался и ему как говорится «не чего терять», в этом случае мы рекомендуем делать новый сайт, адаптированный под мобильные устройства.

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

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

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

Требования к адаптивной разработке:

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

Возможно вас заинтересуют эти публикации по теме современного веб дизайна

Вам нужен адаптивный современный дизайн сайта и выбираете исполнителя?

Тогда не теряйте время, напишите нам прямо сейчас!

Оставить заявку

Разработка адаптивного дизайна – отличия от отзывчивого веб-дизайна

При разработке сайта, адаптированного под мобильные устройства применяют две технологии: «Отзывчивый веб-дизайн» в переводе Responsive Web Design и «Адаптивный веб-дизайн» в переводе Adaptive Web Design.

Отзывчивый дизайн является частью Адаптивного дизайна. Когда речь идет про Отзывчивый дизайн, то имеется ввиду «Резиновый» дизайн.

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

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

Адаптированный сайт максимально эффективен, он реализует стремление предоставить самые лучшие возможности максимально большой аудитории. Обращайтесь в веб студию АВАПНЗЕТ, чтобы заказать адаптивный сайт, всегда рады помочь!

13.11.2017

← Поделиться с друзьями !

Адаптируем сайты под мобильные устройства

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

Адаптивная версия сайта

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

Подходит для:

  • Посадочные страницы (Landing Page)
  • Визитки, промо и инфосайты

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

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

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

Подходит для:

  • Крупные интернет-магазины
  • Порталы и соц. сети
  • Сложные корпоративные сайты

RESS

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

К недостатками данной технологии можно отнести трудоемкость и стоимость реализации.

Подходит для:

  • Крупные интернет-магазины
  • Порталы и соц. сети
  • Корпоративные сайты со сложным функционалом

Процесс адаптации

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

Другие услуги

Связаться с нами

Адаптация сайта под мобильные устройства: при помощи онлайн-сервиса или редактирования кода HTML

Автор Prodvigaem Team На чтение 11 мин. Просмотров 1.4k. Опубликовано

Сегодня востребованной проблемой становится адаптация сайта под мобильные устройства. Ещё каких-то 30 лет назад сложно было поверить, что компьютер и интернет будут в каждом доме, а в начале 2000-х никто не мог предугадать такой экспансии мобильных устройств на рынок. Если вы онлайн-предприниматель или просто ведёте блог, зарабатывая с рекламы – примите во внимание, что уже сейчас каждый третий пользователь в России заходит на ваш сайт с мобильного девайса

, а в США данная цифра перевалила за 50 % ещё в 2014 году. Число мобильных юзеров будет только расти, поэтому если вы хотите максимизировать прибыль с вашего ресурса, прислушайтесь к советам и решениям, данным в статье.

Что можно потерять, отказавшись от адаптации

Ответ один: конверсию и, как следствие, ваши средства. Почему так происходит? Тому есть три причины:

  • «Заботливые» поисковые системы. При заходе со смартфона или планшета, сайты, которые Google или Яндекс сочтут адаптированными под мобильные устройства, окажутся в выдаче поисковика выше устаревших десктопных версий. К тому же, их украсит пометка «для мобильных». Вряд ли вы когда-то листали дальше первой-второй страницы результатов поиска, ваши потенциальные посетители мало чем отличаются.
  • Лояльность пользователя. Даже если пользователь попадёт на ваш сайт, он не захочет на ходу целиться пальцем в маленькие ссылки, масштабировать страницу и раскрывать огромные вложенные меню. Он предпочтёт воспользоваться сайтом поудобнее, пусть и предложение вашей компании выгоднее.
  • Психология. Если ресурс удобен и понравился пользователю, он с большей долей вероятности сделает на нём что-то, т.е. повысит вашу конверсию.

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

Признаки ресурса, адаптированного под маленькие экраны

Можно проверить соответствие критериям в сервисах поисковых компаний, а можно субъективно оценить подготовленность сайта по вполне определённым признакам. Вот они:

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

Как обеспечить скорость загрузки

Следует стремиться к значению в 2-3 секунды. Медленнее – это отпугнёт и большинство пользователей, и поисковик при ранжировании вашего сайта. Оценить скорость можно с помощью прекрасного инструмента Think With Google. Если результаты будут неутешительными, предпринять можно следующее:

  • Не раздувайте код страницы. Зачастую такое происходит по вине дизайнера, когда он сосредоточен только на внешнем виде сайта и слишком усложняет его макет. Напомните ему, что простота нынче в моде. Аскетичный интерфейс с одной кнопкой призыва к действию сам по себе приведёт к более высокой конверсии, а быстрота загрузки увеличит лояльность посетителей.
  • Оптимизируйте изображения. Почти две трети веса страницы – это картинки. Картинок не должно быть чересчур много. Альтернативный вариант: используйте сжатие. Самый быстрый способ – воспользоваться онлайн-сервисами, например, Compressor.io.
  • Меньше кастомных шрифтов. Во-первых, на загрузку необычных шрифтов тратится время, а затем браузер захлёбывается в тоннах CSS и JS-кода при рендеринге этих шрифтов. Можно использовать их в заголовках, но не для всего текста.
  • Минимизируйте код. Другими словами, удалите из него лишние участки, не влияющие на функционал. При наличии знаний можно сделать это вручную, но быстрее с этим справятся онлайн-инструменты, Minifycode.com. Для сайтов на WordPress существует плагин Better WordPress Minify.
  • Подключите «ленивую загрузку». Она загружает только ту часть сайта, которая сразу видна в окне, и подгружает остальное при прокрутке. Есть плагин Lazy Load для jQuery, для WordPress он называется BJ Lazy Load.

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

Mobile-friendly дизайн

Mobile-friendly (дружественный к мобильным устройствам) – это не просто отзывчивый веб-дизайн (Responsible Web Design), подразумевающий корректное и эстетичное отображение сайта на всех экранах. Помимо технических аспектов, необходимо учесть также психологию мобильного пользователя. Переносные гаджеты используются на ходу, поэтому сайт для них должен не повторять полную версию, а быть более упрощённым и оптимизированным:

  • Меньше текста и перегруженных форм. Упростите процедуры подписки, заказа товаров и т.п. Большое количество информации и кнопок отталкивает мобильных пользователей.
  • Расположение кнопки «call-to-action». Размещение кнопок на краях экрана вынуждают юзеров перехватывать устройство, что понижает конверсию. Помещайте ключевые элементы интерфейса в центр макета.
  • Сдержанные цвета. Разноцветные и пёстрые сайты отвлекают внимание пользователей, сбивая их с толку. Сделайте так, чтобы цвета помогали им, подсказывая, куда и когда нажать.
  • Учёт вертикальной прокрутки. Мобильные сайты читаются сверху вниз, в отличие от десктопа, где информация может быть распределена по всему экрану. Поэтому будет нелогичным размещение кнопки «Купить» перед информацией о продукте и его фотографиями.
  • Меньше подвижных элементов. Слайд-шоу, карусели изображений – всё это уместно на десктопе, но не в дороге, когда человек менее сосредоточен.

Резюмируя, можно сказать: главное в мобильных интерфейсах – минимализм, простота и ясность.

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

Мобильная версия на WordPress

Если ваш сайт «крутится» на базе CMS WordPress, превратить его в мобильный можно всего лишь в несколько кликов с помощью различных плагинов. Вот некоторые из них:

  1. JetPack. Он входит в набор базовых плагинов, а включение адаптивного макета происходит всего в одно нажатие: зайдите в настройки плагина и поставьте галочку «Mobile Theme».
  2. WPtouch. Плагин добавляет красивые анимации и быструю загрузку страниц через AJAX. Pro-версия имеет расширенную админ-панель и бесплатную техподдержку.
  3. WP Mobile Detector. Создатели плагина заявляют о более чем 5000 различных устройствах в базе. Для каждого конкретного девайса в зависимости от разрешения экрана отображается своя тема, оптимизируются изображения. Предоставляются также инструменты аналитики.
  4. WordPress Mobile Pack. Поддерживает перенаправление по доменам, имеет встроенный переключатель между мобильной и десктопной версией, множество твиков в CSS, отдельную мобильную панель для администрирования.
  5. WP Mobile Edition. Очень похож на предыдущий, но здесь ещё и поддержка комментов от Disqus и автоматическое создание карты сайта, что улучшает позиции сайта в поиске.

Адаптивная верстка

Существует два подхода к созданию мобильного сайта. Первый – создать отдельную версию сайта с упрощённым макетом, такие версии как правило размещаются на поддоменах вида m.example.com. Второй – использовать адаптивную вёрстку, «резиновый макет», при котором элементы на странице автоматически меняют свой размер и местоположение в зависимости от разрешения или ориентации экрана. У второго подхода есть преимущества перед отдельной версией, а именно:

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

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

При самостоятельной вёрстке, можно использовать средства CSS и JavaScript для создания резинового макета, например:

  • CSS: max-width в процентах для заполнения окна браузера по ширине.
  • HTML-тег meta viewport с атрибутом initial-scale=1.0, тогда ширина картинок станет равной ширине экрана.
  • Использование дочерних файлов CSS для мобильной версии, чтобы «вытянуть» макет по вертикали для узких экранов и упростить его.
  • Медиазапросы в CSS3 могут использоваться для выборочного исполнения селекторов. К примеру, медиа-запрос с min-width: 480px может быть использован для применения стиля только если ширина окна больше 480px. Max-device-width позволяет определить ширину экрана устройства (полезно, если браузер открывается в оконном режиме). Медиазапрос по свойству orientation может помочь для выяснения ориентации устройства, и т.п.
  • Подгрузка нужной таблицы стилей в зависимости от разрешения может быть выполнена на jQuery (если media queries не поддерживаются).

Создание адаптированных кнопок

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

Вот пара плагинов для WordPress, которые помогут создать на вашем ресурсе удобную навигацию:

  • Standout Color Boxes and Buttons. Позволяет создавать разнообразные кнопки для навигации и меню.
  • Responsive Menu. Создаёт удобные иерархические меню для мобильных экранов.

Адаптация форм под мобильный трафик

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

  • Упрощайте: оставьте поля только для имени и e-mail, а все данные по регистрации высылайте автоматом на почту.
  • При заполнении форма не должна вынуждать пользователя что-либо масштабировать и вызывать сомнения, что именно надо вводить в то или иное поле.
  • Подписи к полям ввода следует размещать над ними, а не слева, где они вызовут необходимость использовать горизонтальный скролл.
  • Используйте возможности мобильного устройства, например, определение местоположения по GPS, вместо того, чтобы заставлять пользователя вводить его вручную.
  • Где уместно, проставьте значения по умолчанию, чтобы сэкономить время посетителя сайта.

Для форм на WordPress есть плагины: бесплатный SumoMe или платный OptinMonster, которые помогут создать гибкие формы ввода для вашего сайта.

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

Удобочитаемый контент для мобильных пользователей

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

  • Структурируйте текст. Самая важная информация должна располагаться в начале, на первом экране, а остальная может выходить из зоны просмотра.
  • Используйте крупный шрифт, по крайней мере, 15px.
  • Абзацы должны быть небольшими, не более 4-5 строк.
  • Не прибегайте к сложным и длинным предложениям, оптимальная длина для мобильного пользователя – до 70-80 символов.
  • Текст должен быть контрастным и не сливаться с фоном.

На странице не должно быть никаких элементов ActiveX, плагинов Silverlight или анимации Flash.

Все эти технологии не поддерживаются мобильными платформами, а Flash давно уже должен быть заменён на HTML5 даже в десктопных версиях. То же касается и форматов файлов: то, что вы предлагаете к скачиванию, должно открываться на большинстве смартфонов. Например, уместнее форматы PDF или PNG для документов, чем DOC, потому что просмотрщик файлов Word установлен далеко не у всех.

Оптимизация электронных писем

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

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

В отличие от браузеров, не все почтовые клиенты могут поддерживать «мудрёный» CSS. Поэтому везде, где это возможно, следует отдать предпочтение HTML. Если вы верстаете адаптивный двухколоночный макет, откажитесь от CSS float: left, а используйте HTML-атрибут align=”left”.

Заключение

Сегодня новые сайты должны разрабатываться согласно подходу mobile first: сначала разрабатываете мобильный макет, а потом уже десктопный. Если всё делается в обратном порядке, мобильным юзерам зачастую уделяется недостаточно внимания, в итоге вы теряете трафик и деньги. В статье мы рассмотрели основные правила и методы создания mobile-friendly ресурса.

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

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

Если вы начинаете создавать дизайн сайта, вам необходимо знать, в чем заключается разница между адаптированным под мобильные устройства (mobile-friendly), отзывчивым и оптимизированным для мобильных сайтом.

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

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

Автор иллюстрации OrangeCrush

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

Основные различия

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

Веб-дизайн от His-P Design Studio

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

  • Адаптированный под мобильные устройства дизайн (mobile-friendly): предполагает изменение разработанного специально для компьютеров веб-сайта с целью получения уменьшенной версии для смартфонов или планшетов. Обычно таких минимальных усилий достаточно, чтобы создать сайт, адаптированный под мобильные устройства, для большинства бизнесов. Хотя этот подход может показаться простым и экономически выгодным решением, множество использующих его веб-сайтов не добиваются успеха, если не следуют советам о том, как эффективно его применить.
  • Оптимизированный для мобильных устройств дизайн: хотя и звучит похоже, однако это гораздо более продвинутый и сложный метод проектирования, чем рассмотренный выше. Оптимизированный веб-сайт — это не просто уменьшенная десктопная версия или изображения меньшего размера. Это веб-сайт, полностью разработанный для использования на смартфонах.
  • Отзывчивый дизайн: такие сайты отображаются по-разному, автоматически реагируя на то, на каком устройстве их просматривает пользователь, поэтому они отлично выглядят и работают на ноутбуках, планшетах, смартфонах и других устройствах. Это идеальный вариант способного подстроиться под любой экран дизайна.
Веб и мобильный дизайн от rylian

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

Что такое дизайн, адаптированный под мобильные устройства (mobile-friendly)?

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

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

  • Все шрифты на сайте должны иметь размер не меньше 14 или 16pt. Это достаточно стандартные размеры для экрана ноутбука. Если шрифты будут меньше, текст трудно будет прочитать на смартфоне.
  • Измените формат изображений, чтобы их размер был достаточно маленьким для быстрой загрузки на смартфоне через мобильный интернет.
  • Некоторые эффекты, которые распространены в десктопных версиях сайтов, например, возникающие при наведении на объект курсора мыши, невозможно воспроизвести на смартфоне, поэтому их следует избегать.
  • Элементы на странице должны быть нарисованы и расположены таким образом, чтобы они не накладывались друг на друга, когда страница уменьшится до размеров смартфона. Вместо этого некоторые элементы, в частности отзывы или изображения, в мобильной версии могут быть размещены в карусели с горизонтальной прокруткой.
Пример mobile-friendly дизайна от akorn.creative

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

Пример mobile-friendly дизайна от A.D.S

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

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

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

Мобильная версия сайта от Andrew Grzesiak

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

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

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

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

Мобильная версия сайта от Newwen

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

Что такое отзывчивый дизайн?

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

Отзывчивый дизайн от MVB

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

Вот некоторые ключевые принципы отзывчивого дизайна:

  • Необходимо предусмотреть несколько контрольных точек (брейкпоинтов), то есть разработать дизайн для каждой ширины экрана, которая предполагает изменение расположения элементов в интерфейсе. Вы должны определить, как сайт будет реагировать на изменения размеров экрана и куда будут перемещаться элементы интерфейса в каждой точке.
  • Дизайн должен быть гибким. Чем меньше экран устройства, тем больше пространства занимает текст по вертикали, при этом остальной контент сдвигается вниз. Это означает, что создавая дизайн, вы должны сделать его гибким и подвижным и убедиться, что каждый элемент может переместиться в новое место без ущерба для его качества и функциональности.
  • Вам не надо выбирать, какую версию сайта разрабатывать первой — десктопную или мобильную. Не важно, какими устройствами преимущественно пользуются ваши клиенты, ведь отзывчивый дизайн адаптируется к экранам любого размера. Поэтому одинаково важно убедиться, что дизайн хорошо работает как на больших, так и на маленьких экранах.
Отзывчивый веб-дизайн от Technology Wisdom

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

Какой из рассмотренных вариантов выбрать?

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

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

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

6 плагинов адаптирующих сайты для мобильных устройств

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

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

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

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

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

1. Hammy

Hammy – удобный плагин, изменяющий размеры изображений на вашем сайте для правильного отображения на мобильных устройствах. Он заменяет теги <img> на <figure> и использует код изображений WordPress для изменения размеров изображений..

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

2. Responsive Widgets

Responsive Widgets – плагин, который вводит новые текст/HTML виджеты для WordPress, которые появляются только в определённых устройствах, таких, как iPads, Nooks, PlayStation Vita и других универсальных устройствах, таких, как планшеты или смартфоны.

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

  • Mobile
  • Mobile (landscape)
  • iPhones and iPods
  • Phablets
  • Tablet (portrait)
  • Tablet (landscape)
  • iPad Portrait
  • iPad Landscape
  • Nexus Tablets
  • Kindle Tablets
  • Surface Tablet
  • Nook Tablets
  • PS Vitas
  • Desktops
  • Large Monitors (1240px+ screens)
  • Print only

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

3. Responsible

Responsible – очень полезный плагин для WordPress, который проверяет адаптивность ваших страниц «на лету» в браузере. Он использует Viewport Resizer Bookmarklet в панели, зафиксированной в верхней части вашей страницы, где вы можете изменять размер страницы для мобильных устройств, таких, как смартфоны, планшеты или настольные экраны, и выставлять нужные вам размеры.

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

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

4. WPTouch Mobile Plugin

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

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

В качестве предупреждения надо сказать, что в июле 2014 года было объявлено: WPTouch 3-х версий имел просто убийственную уязвимость. Уязвимость была исправлена сразу же, но, возможно, вызвала большие проблемы для пользователей плагина. Хороший повод, чтобы посмотреть обновления, и это касается как ядра, так и всех плагинов и тем.

5. WordPress Mobile Pack

WordPress Mobile Pack – ещё один хороший плагин, который предлагает мобильные темы для WordPress сайтов. Сейчас он имеет более 600 000 загрузок и рейтинг 3.8 из 5 звёзд. WordPress Mobile Pack предлагает уникальную мобильную тему для вас и посетителей ваших сайтов – мобильное приложение-интерфейс вместо классического интерфейса для мобильных телефонов.

Как и WPTouch, WordPress Mobile Pack – это полностью готовый к использованию плагин сразу после того, как вы установите и активируете его. Если хотите, вы можете внести некоторые коррективы на странице конфигурации.

6. Jetpack by WordPress.com


Jetpack – не только один из самых популярных плагинов для WordPress, он также поддерживается WordPress.com и Automattic. Этот плагин также имеет функцию «Мобильная тема», которая может быть вам очень полезна

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

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

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

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

Согласно отчету Google, 14% украинцев пользуются смартфонами, 50% из них используют их для доступа в Интернет, а 44% совершают с их помощью покупки. Из этого следует, что для бизнеса очень важно иметь сайт, оптимизированный для мобильных устройств.

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

Вот пример того, как один и тот же сайт смотрится на мобильных устройствах в неадаптированном и адаптированном вариантах. Источник: Google Developers

 

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

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

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

3 вещи, которые нужно знать, создавая сайт для мобильных устройств

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

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

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

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

Сколько стоит адаптировать сайт?

Это зависит от вашей ситуации. Если на вашем сайте установлены тема или шаблон, поддерживающие мобильные устройства — совершенно бесплатно.

Если у вас есть соответствующие навыки в программировании — тоже бесплатно.

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

Такие затраты точно окупятся. Вспомните о статистике, которую мы упоминали вначале статьи. 

Если вы решили нанять разработчика, обратите внимание вот на что

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

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

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

4. Используйте инструменты веб-анализа. Например, Google Analytics поможет собрать всю необходимую информацию.

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

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

И не повторяйте эти 3 самых распространённых ошибки:

Ошибка №1. Забывать о клиентах. Это, надеемся, вы уже поняли. Интерфейс сайта должен быть комфортным для пользователей, чтобы они оставались вашими посетителями и делали то, ради чего зашли на сайт.

Ошибка №2. Размещать десктопную и мобильную версию сайта на разных URL-адресах. В этом просто нет смысла. Вы только зря потратите время и деньги на создание двух версий сайта. Лучше используйте адаптивный дизайн, о котором мы писали выше.

Ошибка №3. Не обращать внимания на то, как сделаны другие сайты. Просмотрите сайты конкурентов или просто другие удачные сайты и черпайте оттуда вдохновение для оптимизации своего. У Google на этот счет есть отличные примеры и объяснения: The Mobile Playbook и Google Multi-screen Success Stories.

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

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

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

Конкретные советы по оптимизации можно получить тут

А вот отличное видео от Google, где рассказывают о том, как быстро исправить недостатки в мобильной версии сайта.  

SEO-оптимизация сайта под мобильные устройства для Google и Яндекс

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

Во вторник, 21 апреля, Google произвел серьезное обновление поискового алгоритма. C этого дня результаты поиска стали более релевантными для пользователей мобильных устройств.

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

Казалось бы, кому оно надо. Однако, у меня есть для вас неутешительная статистика: в декабре 2014 г. количество российских пользователей, выходящих в интернет с мобильных устройств превысило 50% (31,1 млн). То есть с компьютера люди стали посещать сайты реже. Но это еще не всё, доля Android (с поиском от Google) выросла до 35%. И контрольный — 4 миллиона пользователей в России ежегодно совершают покупки в интернете с мобильных устройств.

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

Mobile-frendly тест

По результатам теста вы получите рекомендации о том как можно повысить удобство сайта для пользователей мобильных устройств. Не обязательно оптимизировать весь сайт, можно выбрать только те страницы, на которые чаще всего заходят пользователи мобильных устройств. Зайдите в любую систему аналитики — Яндекс Метрика или Google Analytics, и сегментируйте страницы входа по типу устройства пользователя. Возьмите топ-10 страниц и внедрите на них рекомендации. Проверьте страницы повторно, вот что должно получиться:


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

Мы еще год назад начали массово внедрять адаптивный дизайн на сайты клиентов и это приносит положительный результат не только в Google, но и в Яндекс. Процент отказов у мобильных пользователей существенно снижается, возрастает количество обращений в компанию. Особенно хорошо работают мобильные версии при продвижении сайтов и ведении контекстной рекламы в таких тематиках как строительство, услуги, стоматология, косметология, автосервисы, эвакуаторы. Это простейшие примеры сайтов, которые получают мобильный трафик и трафик из карт (Яндекс Карты, Google Maps, 2Gis) — пользователь ищет ближайшее заведение, и как правило поиск осуществляется с мобильного устройства.
«Окей, гугл!» — ну все в курсе, да.            

5 обязательных аспектов мобильного веб-сайта

Поскольку все больше и больше людей просматривают Интернет со своих телефонов, почти 54% глобального трафика веб-сайтов в 2021 году приходилось на мобильные телефоны. Кроме того, ожидается, что к 2024 году количество мобильных устройств во всем мире вырастет до 17,7 млрд. 

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

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

Тем не менее, многие веб-сайты плохо работают с мобильными пользователями.

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

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

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

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

1. Адаптивный веб-дизайн

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

Посмотрите на эту адаптивную версию Amazon vs.как бы это выглядело, если бы были не отвечающими? Вы, вероятно, нажмете кнопку «Назад» и продолжите поиск оптимизированного для мобильных устройств веб-сайта — конкурента!

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

Как однажды сказал Брюс Ли: «Вы наливаете воду в чашку, и она становится чашкой».

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

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

Мобильный дизайн Nike

Nike известен своим культовым логотипом, известным как Swoosh (что означает: быстро перемещаться по воздуху или воде с плавным, нежным звуком).

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

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

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

Nike отлично справляется с использованием гибкой типографики и визуальных эффектов .

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

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

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

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

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

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

2. Дизайн для больших пальцев и глаз

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

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

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

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

Теперь позвольте мне показать вам, как Etsy прибила правило большого пальца (и глаз).

Etsy удобно для большого пальца и глаз

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

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

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

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

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

3. Упрощение – меньше значит больше

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

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

BBC использует раскрывающееся меню, скрытое под кнопкой «Еще», в то время как H&M предпочитает наложенное меню под значком бургера, который занимает весь экран.В любом случае, домашняя страница освобождается от всех ссылок, оставляя больше места для приоритетного контента, который обеспечивает максимальную ценность для пользователей.

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

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

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

А теперь позвольте предложить вам пиццу из элегантно упрощенного меню на Dominos.com.

Простая мобильная раскладка Domino Мобильный веб-сайт

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

В то время как в настольном представлении пользователям предоставляется две возможности начать свой заказ — доставка или выполнение, это упрощено для прожорливых мобильных пользователей в виде одной большой кнопки.Domino’s на самом деле отлично справляется с задачей , выделяя свои CTA-кнопки, делая их большими и красными, , вы просто не можете их пропустить.

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

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

Итак, пицца в доме и «У вас есть 30 минут», проверьте, предлагаете ли вы простой, но эффективный дизайн для своих мобильных пользователей.

4. Выделите свои призывы к действию

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

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

У Ryte есть понятные кнопки CTA на главной странице.

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

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

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

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

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

Фантастические CTA от Tesla

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

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

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

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

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

Тесла получает бонус за вариант живого чата для быстрой поддержки клиентов.

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

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

5. Использование мобильных функций Смартфоны

интуитивно понятны по своей природе.

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

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

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

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

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

COTE NYC – Нажмите, чтобы позвонить

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

https://www.cotenyc.com/

FACEBOOK – микровзаимодействия

Одним из самых мощных микровзаимодействий являются анимированные смайлики, которые использует Facebook. Просто удерживайте кнопку «Мне нравится» более секунды, и у вас внезапно появляется 6 различных вариантов взаимодействия с публикацией.

Еда на вынос

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

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

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

Адаптивный дизайн

Адаптивные веб-сайты предоставляют лишь ограниченное количество вариантов отображения, но по мере увеличения разнообразия мобильных устройств возрастает потребность в более гибких типах отображения. Многие операторы веб-сайтов предпочитают адаптивный дизайн, который также основан на медиа-запросах CSS3. Как и в случае с адаптивным дизайном, сервер доставляет один и тот же HTML-код на все устройства. Это означает, что сайт доступен во всех вариантах макета по одному и тому же URL-адресу .Но в отличие от адаптивного дизайна, адаптация к размеру экрана устройства осуществляется плавно без жесткой сетки заданных окон просмотра. Это позволяет мобильному сайту полностью использовать все доступное пространство на экране устройства. Из-за сложности адаптивного дизайна запуск сайта по такому принципу дизайна утомителен и дорог. Содержание, а также макет должны быть разработаны гибким образом. Текстовые сегменты, изображения, видео и таблицы должны работать как на смарт-телевизорах, так и на мобильных телефонах.Вместо разработки собственного дизайна многие операторы веб-сайтов предпочитают использовать системы управления контентом , , такие как WordPress, Joomla, Drupal и Typo3. Эти проекты с открытым исходным кодом зависят от крупных сообществ пользователей и разработчиков и предлагают широкий спектр готовых шаблонов дизайна с адаптивным дизайном, некоторые из которых можно использовать бесплатно.

Преимущества:                                                      

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

Недостатки:

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

Адаптивный веб-дизайн | Мобильные веб-сайты

home > Чем мы занимаемся > Веб-дизайн > Адаптивный дизайн сайта

Адаптивный дизайн веб-сайта

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

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

Что такое адаптивный веб-дизайн?

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

Прохождение теста Google на совместимость с мобильными устройствами.

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

Почему адаптивный дизайн?

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

  • Совместимость с Google
  • Обслуживает один и тот же сайт на всех устройствах в рамках одного домена
  • Обеспечивает полноценный рабочий стол
  • Лучшее взаимодействие с несколькими устройствами
  • CMS-совместимость
  • Меньше веб-страниц для обслуживания
  • Будущая масштабируемость
  • Один веб-сайт для разработки, создания и обновления

Современные пользователи ожидают большего.

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

Станьте мобильнее с Internet Inspirations®.

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

Адаптивный веб-дизайн и мобильные веб-сайты Мэдисон, Висконсин

Мобильные и адаптивные веб-сайты

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

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

Что такое адаптивный дизайн веб-сайта?

Проще говоря, адаптивный дизайн веб-сайта (RWD) — это дизайн веб-сайта, который адаптируется к экрану, на котором он просматривается.

Вот как это описывает Википедия:

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

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

В чем разница между дизайном мобильного сайта (адаптивный веб-дизайн) и адаптивным?

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

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

    Если вы можете себе это позволить, используйте адаптивный веб-дизайн.

    Мобильное использование растет!

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

    Смартфоны, наконец, обогнали глобальные продажи тупых телефонов во втором квартале, доля Android сейчас составляет 79%, говорит Gartner (techcrunch.com) продажи впервые превысили продажи кнопочных телефонов.

    Facebook даже знает об этом и зарабатывает:

    Доходы Facebook от мобильной рекламы превысят десктоп (marketingweek.co.uk) на видео и его услуги для смартфонов помогли увеличить квартальный доход.

    Мобильные устройства превзойдут настольные компьютеры:

    Когда мобильный локальный поиск затмит настольные компьютеры? (блог.kelseygroup.com)

    Построив соответствующие цифры, мы обнаружили кое-что интересное: объем локального поиска с мобильных устройств (в Интернете и приложениях) в 2015 году приближается к объему локального поиска с настольных компьютеров.

    Во многом это связано с поисковых запросов на пользователя — с 14 до 42 в месяц к 2016 году. Но это также зависит от количества пользователей мобильного поиска — рост с 44 процентов пользователей смартфонов в США (около 118 миллионов пользователей) до 75 процентов к 2016 году ( 225 миллионов пользователей).

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

    Что думает Google?

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

    Google официально поддерживает адаптивный дизайн (wsiwebspecialist.com)

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

    и это:

    Пять способов адаптивного дизайна меняют SEO (marketingtechblog.com)

    Адаптивный дизайн, очевидно, имеет большое значение; настолько большое событие, что Mashable назвал 2013 год «годом адаптивного дизайна».«Большинство веб-профессионалов понимают это — адаптивный дизайн меняет то, как выглядит, ощущается и работает Интернет.

    Google нравится адаптивный дизайн веб-сайтов (RWD), а это означает, что результаты поиска, скорее всего, отдадут предпочтение сайтам, которые используют передовые методы адаптивного дизайна.

    Хотя мы не решаемся открыто заявить, что Google влюблена в RWD, мы можем определить сильное сходство с лучшими практиками RWD. После публикации в блоге Google об адаптивном дизайне SEO Round Table опубликовал статью, в которой излагаются причины, по которым Google любит адаптивный дизайн.Три причины — недублированный контент, отсутствие проблем с каноническими URL-адресами и отсутствие проблем с переадресацией — все это часть сильного арсенала SEO.

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

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

    Многоэкранные ресурсы (google.com)

    Мэтт Каттс из Google говорит, что адаптивный дизайн веб-сайта — это то, что нужно, потому что URL остается прежним:

     

    Адаптивный веб-дизайн дороже?

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

    Это также означает, что для завершения успешного проекта адаптивного веб-сайта потребуется команда. Вам нужны хорошие дизайнеры веб-сайтов, хорошие программисты CSS, хорошие программисты и тестировщики, работающие вместе. Небольшие интернет-магазины, состоящие из одного или двух человек, обычно не могут легко справиться с адаптивным дизайном веб-сайта. Им нужна команда разработчиков, занимающихся планированием, кодированием и тестированием. Конечно, есть готовые шаблоны, но если вы хотите действительно индивидуальный адаптивный дизайн, вам понадобится команда хороших, опытных людей. Чем больше внимания вы уделяете проекту, тем он лучше, и вы столкнетесь с меньшим количеством ошибок — это приведет к лучшему пользовательскому опыту и лучшему впечатлению о вашей компании, организации или бренде. Вот почему мы говорим: «Выгляди хорошо». здесь, в Вебстикс.

    Узнайте о процессе разработки адаптивного веб-сайта >>

    Вся страница должна быть гибкой и адаптивной

    Не только основное содержимое должно быть мобильным и гибким, но и другие вещи:

    • Логотип
    • Главная навигация
    • Навигация в подвале или футере
    • Навигация по цепочке
    • Изображения
    • Размер текста
    • Виджеты
    • Социальные иконки
    • Фоны
    • и т. д.

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

    Существует ряд технических аспектов, которые необходимо выполнить правильно, иначе вы можете столкнуться с такими ошибками, как:

    • Точка обзора не настроена
    • Маленький размер шрифта
    • Размер содержимого не соответствует размеру области просмотра
    • Сенсорные элементы слишком близко

    Чтобы дизайн хорошо работал на всех устройствах, необходимо правильно следовать установленным основам адаптивности.

    Протестируйте свой веб-сайт прямо сейчас. Адаптируется ли он для мобильных устройств?

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

    Отзывчив ли ваш сайт? Проверьте это здесь! (webstix.com)

    Продажи вашего сайта упали?

    Если вам интересно, почему ваши продажи и посещения веб-сайта в последнее время снизились, то вполне возможно, что у вас нет адаптивного веб-сайта или мобильной версии вашего веб-сайта!

    Что насчет мобильного дизайна? Какая разница?

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

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

    Всем ли нужен мобильный и адаптивный дизайн?

    ДА — большинству веб-сайтов это НЕОБХОДИМО. Скажем так… мы не понимаем, зачем создавать еще один веб-сайт для клиента, который не отвечает. Это не обязательно — вам это нужно.

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

    Лучший способ понять, какой дизайн вам нужен — мобильный или адаптивный — посмотреть статистику вашего сайта. Если на вашем сайте установлен Google Analytics, вы можете легко увидеть, как люди видят ваш сайт.Это хорошо, чтобы проверить сразу, чтобы вы знали.

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

    А как насчет скорости?

    Скорость имеет значение… большое время! Адаптивный дизайн дает много преимуществ в скорости. Скорость загрузки вашего веб-сайта является важным фактором, который влияет на ранжирование вашего веб-сайта в результатах поиска. Мы оптимизируем страницы для теста Google PageSpeed, чтобы они получали проходной балл.Это означает, что ваш веб-сайт загружается быстро и правильно отображается при просмотре на нескольких устройствах.

    Что делать?

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

    Все еще не убеждены? Вот еще!

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

    Как избежать ловушек при ранжировании мобильных устройств путем оценки мобильного взаимодействия (searchenginewatch.com)

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

    В этой статье поднимается ряд замечательных моментов:

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

    Вы, по сути, защищаете свой веб-сайт в будущем для любого типа устройств, которые появятся.

    Объяснение процесса проектирования веб-сайта — адаптивный дизайн

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

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

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

    Процесс таков:

    1. Планирование и стратегия
    2. Исследование пользователей (исследование рынка)
    3. Каркасный дизайн
    4. Визуальный дизайн
    5. Разработка )
    6. Тестирование
    7. Запуск

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

    Теперь переходим к адаптивному дизайну

    Когда вы добавляете в уравнение адаптивный дизайн, процесс выглядит немного по-другому:

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

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

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

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

    Каркас и процесс визуального проектирования

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

    Вопросы?

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

    Mobile-First, Adaptive или Responsive Design; Что выбрать для сайта

    Что такое стратегия Mobile-First?

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

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

    Итак, что такое стратегия Mobile-First? Это метод облегчения общения между клиентами и сотрудниками путем создания для этого веб-сайта.

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

    Еще одна причина иметь оптимизированные сайты заключается в том, что не каждый все равно дважды подумает, прежде чем вернуться к недоступным. Точнее, 61% покидают сайт, а 40% переходят на сайт конкурента.

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

    Адаптивный дизайн

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

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

    Когда следует выбирать адаптивный дизайн

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

    Зачем использовать адаптивный дизайн

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

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

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

    Адаптивный дизайн

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

    Когда выбирать адаптивный дизайн

    1. Для новых сайтов
    2. Легко работать, особенно с новичками, так как есть предустановленные темы через системы CMS, такие как Drupal или WordPress.
    3. Они обеспечивают почти одинаковую производительность с веб-сайтами, предназначенными для мобильных устройств или компьютеров.

    Почему именно

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

    Заключение

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

    Мы можем сделать ваш сайт адаптивным ► Возможности адаптивного веб-дизайна

    Когда вы получаете индивидуальный веб-дизайн и превосходный UX, где-то посередине получается адаптивный дизайн. Услуги индивидуального адаптивного веб-дизайна (RWD) — это то, как пользователи взаимодействуют с вашим сайтом на самых разных устройствах.

    «Вместо того, чтобы адаптировать разрозненные дизайны для каждого из постоянно растущего числа веб-устройств, мы можем рассматривать их как аспекты одного и того же опыта.Мы можем [сделать] наши проекты […] более адаптивными к медиа, которые их отображают».

    Когда к нам обращаются новые клиенты, почти все хотят мобильную версию своего сайта. По данным Statista, на мобильные телефоны и планшеты приходится почти 49% использования Интернета в мире. Это половина всего трафика во втором квартале 2019 года!

    Таким образом, адаптивный веб-дизайн в настоящее время является общепринятым стандартом, который позволяет создавать единообразный, но настраиваемый интерфейс на всех устройствах, включая те, которые скоро появятся на рынке.Очень важно иметь единый дизайн для BlackBerry, Android, iPad, Smart TV и Kindle, адаптируясь к различным разрешениям экрана. Чтобы создавать удобные для пользователя веб-сайты и веб-приложения, TRIARE по умолчанию оптимизирует их для всех устройств.

    Особенности адаптивного дизайна 

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

    Примеры адаптивного веб-дизайна

    Разработка адаптивного дизайна в Dropbox

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

    Адаптивный сайт от Shopify

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

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

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

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

    Преимущества адаптивного дизайна веб-сайта

    Компании без адаптивного дизайна для мобильных устройств резко отстают, потому что 8 из 10 посетителей перестанут взаимодействовать с веб-сайтом, который плохо отображается на их устройстве.Соответственно, 83% мобильных пользователей говорят, что они должны иметь возможность продолжить работу на настольном компьютере, если захотят. Поскольку стоимость переключения для пользователей в конечном счете равна нулю, конкурирующие компании с радостью подберут неудовлетворенную когорту лояльных в прошлом пользователей. Если этого недостаточно, Google также занимает более низкие позиции на своих поисковых сайтах, которые не отвечают.

    Почему стоит выбрать TRIARE?

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

     

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

    Фото rawpixel на Unsplash

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


    Адаптивный дизайн впервые появился на сцене веб-дизайна в 2010 году в статье Итана Маркотта с метким названием «Отзывчивый веб-дизайн», но до недавнего времени он не получил широкого распространения. Быстрое внедрение iPad и других планшетов в 2011 году заставляет дизайнеров переосмыслить свой подход к дизайну.Многие популярные сайты обращаются к адаптивному дизайну, чтобы обеспечить беспрепятственный просмотр для пользователей на широком спектре устройств, которые мы сейчас используем для просмотра мультимедиа.

    Что такое адаптивный дизайн?

    Если вы не знакомы с адаптивным дизайном, это в основном метод использования CSS для автоматической настройки макетов веб-сайтов для оптимального отображения контента при каждом размере экрана. Блог HasOffers — один из примеров сайта с адаптивным дизайном. Чтобы увидеть его в действии, просто возьмите правую часть браузера на рабочем столе и измените ширину.Вы должны увидеть, как сайт настраивается сам, когда вы уменьшаете или расширяете окно браузера. Несколько других известных сайтов, использующих адаптивный дизайн, включают Sony, The Boston Globe, Smashing Magazine, BarackObama.com и About.com.

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

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

    В большинстве адаптивных сеточных систем используется полностью гибкая компоновка.Блог HasOffers использует этот подход. Некоторые другие известные примеры включают 1140, 320 и выше и inuit.css (который не имеет ничего общего с компанией-разработчиком программного обеспечения для бухгалтерского учета).

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

    Адаптивные изображения

    Обычно отображать изображения на адаптивных сайтах несложно. Вы можете просто установить max-width:100%; и изображения будут масштабироваться, чтобы поместиться внутри родительского контейнера. В марте 2012 года Apple немного усложнила работу веб-дизайнеров, выпустив новый iPad с его удивительным разрешением 264ppi 2048×1536. Я говорю, что Apple усложнила задачу, потому что большинство веб-сайтов не используют изображения, оптимизированные для такого высокого разрешения.

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

    Есть несколько способов решить эту проблему. Основная концепция заключается в том, чтобы определить ширину браузера на стороне сервера, а затем загрузить правильное изображение на основе этого.Однако большинство методов терпят неудачу или имеют серьезные ограничения. В настоящее время W3C разрабатывает стандарт для адаптивных изображений. До тех пор, если ваш сервер использует Apache и PHP и не использует CDN для доставки изображений, Adaptive-Images.com — отличное решение (с некоторыми оговорками).

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

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

    То же самое можно сказать и о страницах конверсии рекламодателя: если партнеры отправляют вам трафик с мобильных устройств и планшетов, ваши корзины покупок и формы регистрации должны предоставлять посетителям возможность легко отдать вам свои деньги. После взрывной распродажи в Киберпонедельник, FAB.com Джейсон Голдберг, генеральный директор, сказал, что «20% продаж приходится на наши приложения для iPhone, iPad и Android».

    Посетители с планшетов также более ценны: в недавнем отчете Adobe Digital Marketing Insights Report говорится, что «Посетители с планшетов тратят на покупку более чем на 50 % больше, чем посетители, использующие смартфоны («Посетители со смартфонов»), и более чем на 20 % больше, чем посетители, использующие настольные компьютеры». портативные компьютеры («Традиционные посетители»)».

    Получить проектирование

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

    .

    Введение в адаптивный дизайн
    Адаптивный веб-дизайн: что это такое и как его использовать
    Руководство для начинающих по адаптивному веб-дизайну
    Как быть адаптивным
    Адаптивный дизайн, часть 1

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

    Responsive Frameworks
    Foundation
    LESS
    Skeleton
    320 и выше
    1140 CSS Grid
    Inuit CSS
    Golden Grid System

    Адаптивные инструменты
    Тестирование адаптивного дизайна
    Изменение размера моего браузера
    Быстрое прототипирование Protofluid

    Книги по адаптивному дизайну
    Адаптивный веб-дизайн

    Отличный репозиторий отличных адаптивных веб-сайтов можно найти на mediaqueri.э. Какие ваши любимые сайты с адаптивным дизайном?

    Автор

    Бекки — старший менеджер по контент-маркетингу в TUNE. До TUNE она руководила различными маркетинговыми и коммуникационными проектами в стартапах Сан-Франциско. Бекки получила степень бакалавра английского языка в Университете Уэйк Форест. Прожив почти десять лет в Сан-Франциско и Сиэтле, она вернулась в свой дом в Чарльстоне, Южная Каролина, где вы можете найти ее, наслаждающуюся солнцем и соленой водой со своей семьей.

    .

    Leave a Reply