Адаптивность контактная информация. Как создать идеальную страницу контактов? Что такое адаптивный дизайн
Генератор ПродажВремя чтения: 18 минут
Отправим материал вам на:
Если у вас не произведена адаптация сайта под мобильные устройства, в этом нет ничего страшного, однако Яндекс ранжирует выше в поиске те сайты, у которых такая адаптация все-таки есть.
Из этой статьи вы узнаете:
- Что дает адаптация сайта под мобильные устройства
- Как её проверить
- Адаптация сайта для Google
- Самостоятельная адаптация сайта
- Лучший и бесплатный плагин для Wordpress
- 6 лучших сервисов для адаптация сайта под мобильные устройства онлайн
Зачем необходима адаптация под мобильные устройства
Их условно разделяют на внешние и внутренние. Иными словами, внешние ПФ представляют собой, например, клик по ссылке на сайт из результатов поисковой выдачи, тогда как количество просмотренных страниц, общее время, проведенное на сайте, являются внутренними.
Отметим, что Google использует схожую систему. Но этот поисковик пошел даже дальше, заявив, что ресурсы, прошедшие адаптацию сайта под мобильные устройства, будут отображаться выше в списке выдачи.
Далее мы будем говорить о внутренних ПФ. Подумайте сами, если посетителю удобно работать с сайтом, находить и заказывать на нем продукты, вероятность, что он перейдет в категорию клиентов, оказывается выше.
Точно такой же принцип работает для поисковых систем: чем больше гостей покидает ресурс уже в первые секунды нахождения на нем, тем ниже показатель его соответствия требованиям людей. Отношение пользовательских сессий, составивших менее 10 секунд, к общему числу посещений сайта называют показателем отказов.
В качестве примера возьмем данный показатель одного из российских сайтов:
Посмотрите, если не проведена адаптация сайта под мобильные устройства, то есть на них сайт отображается некорректно, то показатель отказов со смартфонов и планшетов оказывается в 2-2,5 раза выше, чем с ПК.
Мало того, что эти цифры отрицательно сказываются на уровне ПФ, они свидетельствуют о потере вероятных клиентов, которые реально могли оплатить услуги или товар.
Согласитесь, увеличение частоты применения мобильного интернета по истине впечатляет. Без труда узнать процент гостей на любом ресурсе, использующих мобильные устройства, позволит Google Analytics. Чтобы посмотреть этот показатель, необходимо сделать такие шаги:
Не секрет, что поисковики всегда заботятся об удобстве пользователей планшетов и прочих устройств, а значит, вы рискуете остаться без трафика, если откажетесь от адаптации сайта под мобильные устройства.
Помните, из-за этой ошибки немало пользователей покинет вас навсегда, о чем свидетельствует исследование фирмы «Equation Research». Ее специалисты выяснили: 46 % людей больше не заходят на тот сайт, где их не устроил уровень работы с мобильных гаджетов.
Как вы понимаете, в результате вас ждут печальные последствия: уровень продуктивности самого ресурса будет непрерывно снижаться, так как уже наработанная аудитория, заходя со смартфона либо планшета, не сможет общаться, делать заказы, получать рассылку и пр.
Если вас не устраивает такое развитие событий, советуем провести адаптацию сайта под мобильные устройства.
Что лучше – адаптивный дизайн или мобильная версия
Давайте для начала разберемся в разнице между этими двумя понятиями.
Адаптивный дизайн используется только, чтобы придать сайту такой внешний вид, который будет адекватно отображаться с необходимого пользователю устройства.
Тогда как мобильная версия представляет собой принципиально новую версию, разработанную специально с учетом потребностей пользователей сайта, использующих его с портативных устройств. Теперь поговорим подробнее про оба типа.
Адаптивный дизайн
Этот вариант дает возможность, вкладывая небольшие средства, сделать сайт дружественным гостю, использующему его с гаджета.
На самом деле, при адаптации сайта под мобильные устройства идет простое совмещение размеров страниц, элементов сайта с размерами конкретного устройства. В результате, подобные сайты оказываются удобны в использовании, хотя нужно помнить и об их недостатках.
В первую очередь, это размер загружаемой страницы. Хотя она будет отображаться на мобильном устройстве, ее вес останется прежним. Из-за чего загрузка страницы займет много времени, ведь скорость мобильного интернета ниже чем у проводного, и пользователь устанет ждать и закроет вкладку.
Мобильная версия
Мобильная версия обычно находится на поддомене основного: m.site.ru, mobile.site.ru. Эту особенность трудно отнести к положительным, если говорить с позиции SEO, так как в таком случае используется много условных редиректов с основной версии на мобильную. Ведь site.ru/page и m.site.ru/page с точки зрения поисковых систем остаются разными страницами.
Стоит сказать, что мобильная версия весит меньше, загружается быстрее по сравнению с адаптивной версткой, так как здесь убираются ненужные функции, а индивидуальный дизайн делает взаимодействие с сайтом более простым.
Безусловно, такая версия обойдется дороже, чем предыдущая. Чтобы вам было проще выбирать, какому из вариантов отдать предпочтение, выделим их особенности:
- Нет смысла проводить адаптацию небольшого сайта под мобильные устройства, если, например, идет речь о сайте салона красоты, для него хватит и обычной адаптации.
- Мобильная версия понадобится мощному сайту со множеством подгружаемых страниц. Этот вариант будет актуален для онлайн-СМИ с аудиторией от нескольких тысяч человек в сутки.
Иными словами, при выборе необходимо учитывать возможности и потребности. Также подчеркнем, что оба эти варианта вне зависимости от цены оказываются для конверсии гораздо выгоднее, чем их полное отсутствие.
Что вам даст адаптация сайта под мобильные устройства
, благодаря отсутствию «тяжелых» фотографий, flash, дополнительных элементов дизайна. 
Оставить заявку
Как проверить адаптацию сайта под мобильные устройства
Проверку адаптации сайта под мобильные устройства, состоящую в том, что вы увидите его на разных устройствах, можно провести следующим образом:
- Quirktools.
Здесь вы сможете посмотреть на то, как сайт будет смотреться на экранах разных гаджетов. Чтобы начать пользоваться порталом, просто введите в адресную строку URL портала, выберите в горизонтальном меню необходимое устройство.
- Ipadpeek.
Дает возможность проверить внешний вид сайта на iPad, iPhone.
- F12.
Всегда самым простым вариантом останется применение стандартного приема: нажмите F12, затем кликните по значку телефона.
Адаптация сайта под мобильные устройства для Google
Если вы хотите провести адаптацию сайта под мобильные устройства в Google, вам пригодится бесплатный инструмент Developers. Google:
Здесь необходимо ввести адрес ресурса и нажать кнопку «Анализировать». В использованном нами примере уровень удобства для мобильных пользователей составляет 49 % из 100 %.
А также представлены советы относительно того, что необходимо изменить для адаптации сайта под мобильное устройство, даются полезные в этом деле ссылки. Благодаря таким рекомендациям, вы легко наберете 90 %, что составит минимум для Google.
Вещи, которые вы можете сделать для адаптации сайта под мобильные устройства самостоятельно
Установите правильные атрибуты полей форм
Если на вашем сайте используется поля ввода для имени пользователя / адреса, откажитесь от autocorrect, включите autocapitalize:
Ваше имя:
Благодаря этому приему при адаптации сайта под мобильные устройства вы запретите системе автоматизированного ввода Т9 заменять имена, например, «Erwan» на «Erevan ».
При помощи установки автоматического использования первых заглавных букв в типах words вы избавите гостей ресурса от необходимости постоянно включать капитализацию букв, иными словами в начале каждого слова будет ставиться большая буква (допустим, «Ken burns» превратится в «Ken Burns» ):
Используйте поле email, если ваш сайт запрашивает у пользователя электронную почту, чтобы он не вводил символ @ с клавиатуры мобильного устройства:
Ваш email:
Задайте подходящую для мобильных устройств ширину
Для этого откройте сайт в браузере своего компьютера, уменьшайте ширину окна программы, пока текст не перестанет быть читаемым. Так вы получите минимально допустимую ширину. Это текущее значение установите в свойство @viewport при помощи установки тега meta в заголовок страницы head:
Если вы повторно войдете на сайт с мобильного устройства, указанная вами ширина будет выбрана автоматически, то есть гость ресурса не будет вынужден использовать зум.
На представленной ниже иллюстрации оставлено лишнее место по правому краю:
А здесь значение ширины выбрано правильно:
Ваша задача становится гораздо проще, если сайт построен на основе резиновой верстки и совместим со всеми размерами экрана. Советуем во время адаптации сайта под мобильные устройства поэкспериментировать с шириной, так вы позволите своему ресурсу приятно выглядеть и оставаться читабельным. Выбранное значение и установите в теге meta.
Установите ширину картинок в 100 %
Помните, что часть изображений окажется чрезмерно широкими, после того как вы подстроили свой сайт под выбранную ширину. Раньше не приходилось сталкиваться с такой проблемой, так как десктопные мониторы имеют довольно широкое разрешение, многие картинки помещаются по ширине:
Избежать такой неприятности вы сможете, установив максимальную ширину в 100 % для ваших изображений. Благодаря этому, если картинки будут слишком велики для экрана гаджета, они автоматически изменят размер. Не забудьте ввести представленный ниже код, в CSS-стили вашего сайта:
img { max-width: 100% }
Если вы установили в качестве фоновой картинки какое-либо изображение не с помощью тега img, вам просто нужно установить CSS свойство background-size в значение contain. Так размер фона будет меняться, если разрешения экрана окажется недостаточным для передачи в 100 % масштабе:
.header { background: url(header.png) 50% no-repeat; background-size: contain }
Не стоит беспокоиться, что изображение потеряет четкость – современные мобильные устройства этого не допустят. Дело в том, что, когда гость сайта использует увеличение, браузер повышает четкость картинки. Правда, при этом стоит убедиться, что у вашего портала нет свойства user-scalable=no в теге meta, поскольку он не позволяет использовать зум:
Установите ширину полей ввода в 100 %
Когда вы установили ширину изображений при помощи свойства max-width, сделайте тоже самое с полями input. Для этого просто добавьте в файл CSS – файл вашего сайта:
input, textarea { max-width:100% }
Теперь поля input не выйдут за пределы экрана при использовании сайта с мобильного устройства.
Будьте аккуратны, когда используете Disable для кнопок подтверждения отправки форм
Если submit перестанет быть активным после первого клика по кнопке, не произойдет многочисленных нажатий на кнопку подтверждения отправки формы.
Но помните, что, если сравнивать с настольными ПК, у мобильных устройств нередко прерывается связь с Интернетом.
Поэтому, когда вы делаете кнопку неактивной, вы лишаете пользователя возможности нажать ее снова, и проблема может скрываться не только в потере Сети. Так, браузер подобного устройства закроется при входящем звонке, и всплывет проблема заблокированной кнопки, ведь она не даст отправить форму после ее заполнения.
Если вы все-таки решили деактивировать кнопку submit, сделайте это на несколько секунд при адаптации сайта под мобильные устройства.
В длинных строках используйте word-wrap
Иногда нужно использовать длинные строки: сюда входят примеры кода, ссылки, номера банковских счетов. Если ширина портала будет недостаточной для всей строки, та может оказаться за границами экрана гаджета:
Справится с этим word-wrap, при помощи которого строка будет переноситься, достигнув края экрана. Так гость сайта сможет видеть сразу всю информацию, не прибегая к прокрутке:
Здесь вам потребуется пароль:
435143a1b5fc8bb70a3aa9b10f6673a8
Будьте осторожны, используя пробелы
Все мы привыкли, что каждые пять знаков разделяются пробелами, если они составляют длинную строку. Ведь так человеку будет проще их запомнить для дальнейшего ввода в другом приложении.
Но отметим, что вряд ли умный пользователь согласится вводить знаки самостоятельно – он знает о буфере обмена. Правда, расставленные вами пробелы, ему придется удалять вручную. Подумайте, удобно ли их убирать на мобильном или планшете?
Чтобы облегчить пользователям жизнь, во время адаптации сайта под мобильные устройства замените пробелы отступами:
Ваш
код
:
Как видите, между символами остаются пропуски, но с ними не нужно бороться при копировании. А это бережет время!
Преимущества медиа-запросов
Вы можете создать пользовательские стили для сайта при отображении на мобильных устройствах (либо в маленьком окне браузера), тогда как на настольном ПК останется привычный вид веб-страницы. Для этого нужны целевые стили в медиа-запросах, вот пример:
Избегайте fixed позиционирования
Если заголовок или сайдбар позиционирован фиксировано, CSS свойство position установлено в значение fixed, советуем быть осторожными.
В этом случае при создании разметки размер вашего заголовка вырастет пропорционально странице, то есть даже может занять экран целиком:
Проще всего при адаптации сайта под мобильные устройства вам будет отказаться от фиксированных позиций при отображении на мобильных гаджетах.
Пример показывает, как это работает на практике:
Используйте стандартные шрифты
Благодаря пользовательским шрифтам, сайт смотрится дорого и профессионально. Но при этом гостям приходится подгружать файлы со шрифтами – эта операция производится прежде чем пользователь сможет увидеть сайт.
Обычно такие файлы характеризуются большим объемом, то есть на мобильном устройстве их загрузка займет много времени. А что увидит гость портала? Ничем незаполненное пространство:
При помощи адаптации сайта под мобильные устройства с Google Font Loader, пока загружается пользовательский вариант, будет отображаться текст со стандартным шрифтом. Далее вы генерируете страницу заново, и гость видит выбранный изначально шрифт.
Но вам придется написать два варианта CSS-правил: первый для шрифта по умолчанию, еще один – для скаченного.
Поверьте, такой выход будет оптимальным: человек прочитает все, что ему нужно, пока загружаются шрифты, а после получит возможность увидеть дизайн. Используйте следующий код:
Подчеркнем: селектор класса.wf-opensans-n4-active добавляется в код сайта динамически Font Loader"ом, но лишь, когда шрифт загружен.
Предложите пользователям читабельный контент
Обычно пользователи мобильных устройств прибегают к Интернету с определенной целью. Например, если хотят сравнить стоимость товара в разных магазинах, найти контакты салона, инструкцию к применению медикамента.
Поэтому у вас на сайте они появятся, когда их привлечет заголовок. Далее им важно обнаружить контент, подготовленный под чтение с небольшого экрана.
Для описания этого правила в английском есть довольно емкое слово «snackable» (от англ. «снэк» - закуска). Так вот, контент для таких пользователей должен быть именно snackable, то есть удобным для быстрого чтения, беглого просмотра в движении.
Давайте обозначим основные черты, которые нужно учитывать при адаптации сайта под мобильные устройства для чтения с экрана:
- Начинайте с краткого, емкого, привлекательного заголовка. Советуем составлять его в пределах 10 слов, причем использовать крупный шрифт.
- Разбивайте текст на блоки , каждый из них необходимо начинать коротким, информативным подзаголовком, выделяющимся на общем фоне.
- Вставляйте в текст нумерованные / маркированные списки, чтобы вашим мобильным пользователям было удобно быстро находить нужное.
- Применяйте визуальные вставки, дополнительно структурируя информацию и упрощая восприятие.
Адаптируйте электронные письма к чтению с маленького экрана
Провести адаптацию email к чтению с экранов мобильных устройств вам помогут такие инструменты для рассылки:
- MailChimp.
- AWeber.
- Constant Contact.
Замените ссылки на «тапабельные» кнопки
Как только пользователи попадают с мобильных устройств на неадаптированные под них сайты, они диагностируют у себя «синдром толстых пальцев». Его не найти среди медицинской терминологии, это сленг специалистов данной сферы, описывающий ошибки при попытке попасть пальцем по конкретному элементу.
Какой размер будет оптимальным для кнопки, элемента навигации, чтобы у человека не возникало с ними проблем? Вам помогут рекомендации по адаптации сайта под мобильные устройства:
- Apple считает, что оптимальный размер для кнопок, навигационных элементов начинается с соотношения 44 на 44 пикселя.
- Nokia рекомендует минимальные габариты 48 на 48 пикселей или 0,7 на 0,7 см при создании подобных элементов.
- Microsoft советует кнопки 34 на 34 пикселя.
Помните, мобильным пользователям будет сложно пользоваться сайтом, если ваш текст окажется насыщен ссылками, находящими близко друг к другу.
В показанном нами примере меню полной версии сайта выполнено в виде ссылок. Здесь сразу попасть в нужный раздел будет крайне непросто на десятидюймовом планшете.
Чтобы получить так называемые mobile-friendly кнопки, элементы навигации, вы можете выбрать два пути: заказать их с индивидуальным дизайном либо применить шаблонные инструменты. Если вы выбрали WordPress, советуем воспользоваться такими плагинами:
- Standout Color Boxes and Buttons. С его помощью вы создадите удобные кнопки разного размера, цвета, а контекстное меню, адаптированное под мобильных пользователей.
- Responsive Menu. Этот плагин позволит создать удобное меню «гамбургер».
Лучший и бесплатный плагин для адаптации сайта под мобильные устройства для Wordpress
JetPack
В первую очередь поговорим о наиболее простом методе адаптации сайта под мобильные устройства самому на WordPress, при этом обладающим самым высоким уровнем эффективности. Набор инструментов JetPack справится с таким заданием, потребовав от вас минимальных усилий – только нажать одну кнопку.
И скорее всего, он уже установлен среди ваших базовых плагинов. Если так оно и есть, кликните по ссылке «JetPack» в меню администратора сайта, перейдите на страницу модулей. Здесь вам необходимо лишь активировать «Mobile Theme».
MobilePress
Он относится к числу распространенных, при этом простых плагинов. Поставляется с двумя темами и полезен при дальнейшем создании тем мобильными разработчиками.
WPtouch
Этот вариант считается следующим в списке бесплатных инструментов адаптации сайта под мобильные устройства по уровню эффективности. Как показывает статистика, он был скачен свыше 4,3 млн раз.
Его преимущество состоит в том, что всего за пару минут вы сможете создать красивый, быстрый мобильный сайт, не написав даже строчки кода. В платной версии, которая называется WPtouch Pro, вы получите отдельную админ-панель, поддержку в системе тикетов.
Wapple Architect Mobile Plugin
Данный плагин написан на языке разметки WAPL, специально созданном для настройки, рендеринга, доставки веб-контента на разного рода устройствах, платформах.
Он применяет собственный API для каждого гаджета, и этот вариант гораздо лучше, чем метод сниффинга, так как не касается структуры адресов настольного сайта. Получается, этот плагин является удобным в работе и довольно простым решением.
Mobile Detector
Данный вариант адаптации сайта под мобильные устройства оснащен автоматическим распознаванием обычных мобильников, смартфонов, благодаря чему сайт загружается в версии, совместимой именно с пользовательским устройством, то есть учитывается его разрешения экрана, диагональ, пр.
В целом предлагается семь предустановленных вариантов мобильной темы оформления. Кроме того, Mobile Detector самостоятельно изменяет размер, разрешение изображений в соответствии с параметрами дисплея. Здесь предлагаются также свои виджеты, сбор статистики.
Ключевые преимущества:
- Автоматическое распознавание гаджета при помощи базы, включающей более 5000 гаджетов.
- Способность выделять стандартные телефоны среди продвинутых устройств.
- Подготовка статистики по мобильным пользователям, в которую входят такие показатели, как число уникальных посещений, поисковый трафик, пр.
WP Mobile Edition
На самом деле, это копия представленного до этого варианта – он обладает такими же преимуществами, опциями, но, помимо прочего, поддерживает систему комментирования Disqus, мобильную карту XML с собственным генератором для сайтов.
Последнее может быть полезным в деле поисковой оптимизации. Отметим, что данный плагин, предназначенный для адаптации сайта под мобильные устройства, формирует мобильную версию на поддомене вида m.facebook.com, благодаря чему достигается ускоренное кэширование, поддержка мобильных cookie.
WordPress Mobile Pack
В этом варианте адаптации сайта под мобильные устройства поддерживаются маппинг доменов, поисковые агенты, позволяющие определить популярные мобильные устройства, что позволяет отображать контент в необходимом именно им разрешении, качестве. Также предусмотрены настраиваемые цветовые схемы для единой темы оформления.
Адаптация таблиц сайта под мобильные устройства
Не секрет, что самым сложным делом при адаптации сайта под мобильные устройства, а именно под разные разрешения, является работа с таблицами. Причем наиболее это актуально для таблиц с большим объемом информации.
Поговорим о двух вариантах верстки адаптивной таблицы.
В первую очередь давайте посмотрим на внешний вид таблицы:
Bootstrap-способ верстки адаптивной таблицы
Честно говоря, действительно адаптивной подобную таблицу назвать сложно. Она органично выглядит на мобильном устройстве, и верстка сайта не «течет». Этот вариант подойдет, если у вас не много таблиц на сайте, поэтому подключение плагина, написание дополнительных стилей будет лишней тратой времени. Именно такой способ применяется Bootstrap-ом.
Для применения на практике этого способа таблица обернута в div, которому задана максимальная ширина в 100 %, overflow: auto.
Кроме того, при адаптации сайта под мобильные устройства вы можете выбрать максимальную высоту, зафиксировать шапку таблицы, если она длинная.
Верстка по-настоящему адаптивной таблицы
Теперь обсудим ситуацию, в которой ваш сайт действительно насыщен таблицами – здесь стоит прибегнуть к плагину Footable.
В первую очередь необходимо подключить плагин (скачать на GitHub / подключить с CDN), инициализировать его:
Но есть одна тонкость в адаптации сайта под мобильные устройства: скрипт считает ширину таблицы, а не ширину viewport-а. Поскольку нам необходимо эту ошибку устранить, важно чуть «модернизировать» скрипт:
Для этого в инициализации указываем класс таблицы или просто тег table, если хотим, чтобы все таблицы сайта оказались адаптивными.
Что мы имеем в виду? На планшетах будут скрываться колонки «RAM», «Диагональ», «PPI», «Аккумулятор». При использовании на еще меньшем, телефонном экране, скроется также «Цена».
В инициализации можно установить контрольные точки:
Получается, в диапазоне 0-720 правилу подчиняются mobile, 720-1024 - tablet, а выше 1024 - desktop. При необходимости вы можете создать большее количество правил.
Еще у вас есть возможность раскрыть определенную колонку по умолчанию. В таком случае указываем data-атрибут data-expanded=«true»:
Мы рассказали не обо всех возможностях плагина, но этого блока будет достаточно для создания адаптивных таблиц.
Адаптация сайта под мобильные устройства онлайн: 6 лучших сервисов
- mobiSiteGalore
Этот сервис для адаптации сайта под мобильные устройства по праву считается самым легким в управлении редактором мобильных веб-сайтов. По словам его создателей, у вас уйдет всего 54 минуты на разработку полностью функциональной мобильной версии веб-сайта.
Отметим, что большинство из существующих сервисов нацелено на работу со смартфонами, тогда как mobiSiteGalore позволяет вести подготовку сайтов и для старых моделей телефонов.
- MobStac
С MobStac вы получаете мобильный веб-сайт, подготовленный с помощью HTML5. Кроме того, у вас есть возможность внести изменения настройки либо выбрать определенный шаблон для смены дизайна, что не составит большого труда.
Подчеркнем, MobStac является единственным из существующих сервисов, предлагающим встроенный план монетизации мобильного веб-сайта. Его минус кроется в том, что сервис пока находится в стадии бета, но вы можете получить приглашение, после чего пройти регистрацию.
- Mofuse
Здесь удастся разработать мобильную версию веб-сайта, используя два подхода: сделать все самостоятельно с помощью mofuse либо провести адаптацию сайта под мобильные устройства, заказав ее у команды специалистов.
В первом случае вы получаете более широкие возможности в области дизайна, при этом ежемесячно придется платить лишь за работу сервиса. Если же нанять специалистов, вся работа ляжет на их плечи.
- Mobile App America
Этот вариант предоставляет улучшенный аспект SEO для вашего веб-сайта. Благодаря его возможностям, вы опередите конкурентов, чьи порталы пока даже не имеют мобильной версии. Пока готовился данный текст, приложение поддерживало устройства iPhone, Blackberry, Android.
- bMobilized
Он позволит за короткий срок подготовить мобильную версию веб-сайта. Приложение характеризуется быстрой конвертацией с расширенными настройками, которые, помимо прочего, дают возможность изменить дизайн.
По словам разработчиков, база данных bMobilized поддерживает свыше 13 тысяч моделей мобильных девайсов, в том числе в нее уже внесены популярные на сегодняшний день бренды.
Но если вас волнует вопрос стоимости адаптации сайта под мобильные устройства, этот сервис для вас, ведь чем больше веб-сайтов вы размещаете через него, тем большую скидку получаете. Иными словами, bMobilized окажется практически идеальным вариантом для собственников сети сайтов, которую требуется адаптировать под мобильные устройства.
- Mobify
Mobify признан лучшим сервисом для тех, кто имеет отношение к электронной торговле. Он предлагает собственникам функционал HTML5, а его команда разработчиков, опираясь на ваши пожелания, создает ваш мобильный веб-сайт.
Как показывает практика, на создание полноценно функционирующего электронного магазина от стадии идеи уходит не более трех недель. Кроме того, у вас есть возможность самостоятельно погрузиться в его разработку.
Если же вы успели опробовать все описанные выше методы, но вас все еще не устраивает результат, пора прибегнуть к помощи профессионалов.
Array ( => 21 [~ID] => 21 => 28.09.2019 13:01:03 [~TIMESTAMP_X] => 28.09.2019 13:01:03 => 1 [~MODIFIED_BY] => 1 => 21.09.2019 10:35:17 [~DATE_CREATE] => 21.09.2019 10:35:17 => 1 [~CREATED_BY] => 1 => 6 [~IBLOCK_ID] => 6 => [~IBLOCK_SECTION_ID] => => Y [~ACTIVE] => Y => Y [~GLOBAL_ACTIVE] => Y => 500 [~SORT] => 500 => Статьи Дмитрия Свистунова [~NAME] => Статьи Дмитрия Свистунова => 11076 [~PICTURE] => 11076 => 7 [~LEFT_MARGIN] => 7 => 8 [~RIGHT_MARGIN] => 8 => 1 [~DEPTH_LEVEL] => 1 => Дмитрий Свистунов [~DESCRIPTION] => Дмитрий Свистунов => text [~DESCRIPTION_TYPE] => text => Статьи Дмитрия Свистунова Дмитрий Свистунов [~SEARCHABLE_CONTENT] => Статьи Дмитрия Свистунова Дмитрий Свистунов => statyi-dmitriya-svistunova [~CODE] => statyi-dmitriya-svistunova => [~XML_ID] => => [~TMP_ID] => => [~DETAIL_PICTURE] => => [~SOCNET_GROUP_ID] => => /blog/index.php?ID=6 [~LIST_PAGE_URL] => /blog/index.php?ID=6 => /blog/list.php?SECTION_ID=21 [~SECTION_PAGE_URL] => /blog/list.php?SECTION_ID=21 => blog [~IBLOCK_TYPE_ID] => blog => blog [~IBLOCK_CODE] => blog => [~IBLOCK_EXTERNAL_ID] => => [~EXTERNAL_ID] =>)
Страница контактов имеет огромное значение, поэтому ее дизайну нужно уделить особое внимание. Чем удобнее будет контактная страница, тем больше возможностей открывается перед владельцем сайта. Страница контактов, если она правильно спроектирована, вполне может повлиять на коэффициент конверсии: если пользователь может легко связаться с менеджером или администратором сайта, то он получит положительный опыт взаимодействия. Чем проще будет процесс, чем меньше пользователю нужно будет заполнить полей или форм, тем лучше для конверсии.
Хорошая контактная страница может улучшить сайт, так как она позволяет создать условия для хороших взаимоотношений между посетителями и владельцем сайта. Неважно, что это будет за сайт, это может быть интернет-магазин, новостной портал или веб-сервис – обратная связь крайне важна.
Несмотря на это, многие дизайнеры недооценивают значение правильно спроектированной страницы контактов, сосредоточившись на дизайне страниц с основным контентом.
Бывает так, что пользователю нужно быстро связаться с владельцем сайта или обратиться в службу поддержки клиентов. Однако ничего не получается, даже если воспользоваться поиском по сайту. Порой нужная информация присутствует на сайте, но она «скрыта», так как дизайнер не позаботился о правильной навигации и пользователь просто не видит нужную ссылку. Отчаявшийся пользователь уже готов позвонить по телефону, но и его он не может найти.
Компании и веб-сервисы, которые уделяют большое внимание дизайну контактных страниц, поступают крайне осмотрительно. Просто потому, что эта страница не просто содержит контактную информацию: она содержит нужные для пользователя сведения и является интерактивной. И, что самое главное, хорошая контактная страница побуждает пользователя снова и снова взаимодействовать с сайтом.
Страница контактов это своеобразная площадка для общения. Если владелец сайта позволяет клиентам выразить свое мнение, то это уже приглашение к диалогу. Веб-разработчики и пользователи могут извлечь выгоду из этого сотрудничества и именно по этой причине нужно правильно ее спроектировать.
Как известно, функциональность в дизайне – это один из ключевых факторов. В контактной странице содержится важная информация, однако ее не слишком много, что порой может привести к ошибочной оценке функциональности. Владелец сайта думает, что если он разместил на странице адрес электронной почты и телефон, то этого вполне достаточно. Иногда он бывает прав.
Тем не менее, двойная проверка на функциональность может принести больше пользы, чем вреда. Неработающие ссылки или страницы, перегруженные информацией – все это вредит взаимодействию. Владелец сайта может не получить важное сообщение, но самое худшее произойдет в том случае, если он предоставит устаревшую или недостоверную информацию. Проектируя страницу контактов в первую очередь нужно думать о пользователях, ведь в конце концов это страница создана специально для них.
Расположение
Нужно обязательно убедиться, что страница контактов всегда доступна для пользователей. Внешний вид сайта, пусть даже с эксклюзивным дизайном ничего не значит, если пользователи не могут найти страницу с контактами. Порой приходится проектировать довольно сложные контактные формы, поэтому заранее нужно позаботиться об инструкциях. Пользователям будет проще связаться с владельцем сайта, если у них будет пошаговое руководство.
Для дизайнера, проектирующего сайт, важно помнить о двух моментах:
- Первичная навигация всегда должна включать контактную страницу
- Пользователи должны находить страницу контактов с первого посещения сайта, на какую бы из внутренних страниц они не попали
Судя по накопленному дизайнерами опыту, пользователи склонны искать контактную информацию на правой стороне страницы, так что имеет смысл разместить ссылку «Контакты» именно там. При этом нужно помнить, что эта информация имеет второстепенное значение для пользователя, так что не стоит делать этот раздел сайта слишком заметным или навязчивым. Лучше всего работает ссылка на страницу с контактами, расположенная в правом верхнем углу страницы. А хуже всего – ссылка в раскрывающемся меню, так как пользователи могут ее попросту не заметить.
Простые контактные формы
Для коммерческих сайтов контактная страница очень важна, об этом уже говорилось выше. Несмотря на то, что она может быть не так красива, как другие страницы сайта, она должна быть простой, удобной и понятной. Если информация структурирована неправильно, плохо функционирует или вводит в заблуждения, то маловероятно, что владелец сайта сможет выстроить долгосрочные взаимоотношения со своими клиентами.
Очень часто бывает, что пользователь, желающий оставить сообщение, покидает на сайт, так как не может заполнить контактную форму. Или не хочет, если она слишком длинная или сложная. Сегодня пользователи не желают тратить время на заполнения подробных форм, так что стоит подумать об их упрощении. Чем проще будет форма, тем лучше, в том числе для опыта пользователя, следовательно, нужно сосредоточиться на сборе основной информации.
Точные формулировки
Если говорить об официальных сайтах, то на всех страницах, в том числе и ни странице контактов, нужно придерживаться ясных и точных формулировок о преимуществах, которые получит пользователь, став клиентом компании. Для чего это нужно? Очищенная от всего лишнего информация являет наиболее действенным способом для привлечения и удержания внимания. Красиво обобщенные данные должны быть краткими, чтобы люди могли легко найти то, что им нужно.
Также не нужно забывать и о визуальной составляющие. И речь идет не только о привлекательном дизайне контактных форм. Если компания имеет физический адрес, то можно помочь пользователям, поместив на страницу контактов карту. Для компаний, расположенных в больших городах, очень важно объяснить пользователям, как им удобней будет добраться до их офиса, магазина или склада.
Адаптивность контактных страниц
Для любого интернет-бизнеса отзывчивость это все. Это жесткое правило, без исключений. Поскольку интернет развивается быстрыми темпами, а на рынке появляется все больше новых устройств, то это значит, что контактная информация должна быть доступна независимо от того, какой браузер или девайс использует человек. Сегодня проиграть в конкурентной борьбе очень легко – достаточно не оптимизировать страницу контактов для показа на мобильных устройствах.
Интегральные компоненты
Что лучше: адрес электронной почты или контактная форма? Пользователи нуждаются в простых способах связи с поставщиков нужных им услуг, поэтому нужно пойти им навстречу. Можно делать упор на связь по электронной почте или разместить контактную форму – у каждого из способов есть свои плюсы и минусы.
Контактные формы
- Контактная форма не должна заставлять пользователей переходить на другую страницу
- Контактная форма не предназначена для создания учетной записи или входа в систему через электронную почту
- Форма должна иметь функцию автозаполнения, если есть такая возможность
- В контактной форме должен быть функционал для отправки сообщений и уведомлений
Электронная почта
- Связь по электронной почте должна быть безопасна для пользователя
- Все отправленные данные желательно сохранять для использования в дальнейшем
- Работа с полученными сообщениями должна вестись системно, также нужно позаботиться о резервном копировании данных
Форма валидации
Проверочные формы имеют большое значение, когда нужно больше знать о пользователях сайта. К тому же процесс валидации некоторым образом направляет пользователя в нужном направлении, так как может привлечь их внимание к ошибочно введенным данным или незаполненным полям. Таким образом проверочная форма экономит время клиентов, так как в конце процесса заполнения человек будет твердо уверен, что его сообщение уйдет по правильному адресу.
Телефонные номера
Многие компании не указывают на странице контактов телефонные номера, так как опасаются, что постоянные звонки будут мешать рабочему процессу. Однако, как и в случае с картой, телефонные номера на контактной странице повышают доверие пользователя к бренду, клиенты чувствуют себя в безопасности, полагая, что в трудной ситуации смогут связаться с сотрудником компании и обсудить возникшую проблему. Номер телефона сокращает дистанцию между владельцем сайта и пользователем, это касается как традиционных компаний, так и онлайн-сервисов, не имеющих физического адреса.
Профили в социальных медиа
Кнопки социальных сетей все чаще встречаются на контактных страницах. Такой подход может существенно усилить возможности сайта, особенно, если поддержка клиентов осуществляется в режиме 24/7. Многим удобнее выйти на связь с компанией через социальную сеть, так что стоит подумать о таком способе взаимодействия с пользователем.
Проектирование страницы контактов
Действительно хорошие страницы контактов свидетельствуют о высокой квалификации дизайнеров, их спроектировавших. И наиболее важной частью дизайна является визуальный стиль контактной страницы. В случае с контактными формами это означает большие поля, которые облегчают отправку данных. Если форма выглядит красиво, она лучше работает.
Прежде чем приступать к проектированию, дизайнеру следует провести детальное исследование все контактной информации, предоставленной клиентом. Все элементы должны быть хорошо организованы, кроме того, они должны гармонично сочетаться. Также следует помнить, что страница контактов должна соответствовать цветовой схеме сайта, чтобы пользователь однозначно идентифицировал и сайт, и бренд.
Вывод
Контактная страница должна быть всегда на виду. Это касается не только главной страницы, но и всех остальных страниц сайта. Проектируя страницу контактов нужно держать в уме, что пользователи смогут связаться с владельцем сайта или командой поддержки, только тем способом, который видят на вкладке «Контакты». В этом случае ключом к успеху является удобство и простота. Нужно дать пользователям то, чего они хотят. Если пользователь должен ввести на сайте свои личные данные, то лучше всего задать основные вопросы: имя, фамилия, адрес электронной почты. Контактная форма не должна содержать лишних полей. Также нужно позаботиться об адаптивности контактной страницы – они должна отображаться в любом браузере и на любом устройстве. Если контактная страница спроектирована правильно, шансы сайта на успех у пользователей значительно повышаются.
Адаптивность сайта - это возможность сайта правильно отображаться на разных устройствах с различными характеристиками.
Больше видео на нашем канале - изучайте интернет-маркетинг с SEMANTICA
Сегодня сайты просматриваются на персональных компьютерах, планшетах, смартфонах. Каждое устройство со своими характеристиками - скоростью работы, разрешением экрана.
Если сайт не адаптивен, то на компьютере он отобразится правильно. А на телефоне может “поехать” - блоки наложатся друг на друга, шрифт может стать нечитаемым.
Сам термин адаптивность получил широкое применение после выхода книги Итана Маркотта Responsive Web Design – отзывчивый веб-дизайн. Сайты, способные динамически подстраиваться под заданные характеристики устройств просмотра стали называть адаптивными.
Пример адаптивной верстки
Отображение на ПК:
На плашете:
На смартфоне:
Зачем нужен адаптивный сайт
Технологии развиваются стремительными темпами, производители техники не отстают от них. Смартфоны, планшеты, телевизоры, другие электронные устройства, подключаемые к сети интернет, выпускаются на любой вкус и бюджет, вариантов размера экрана множество.
При этом потребление контента увеличивается в геометрической прогрессии. В борьбе за клиента владельцы сайтов используют все средства и методы. В частности, на этапе разработки закладывают возможность корректного отображения своего веб-ресурса на различных устройствах.
Процент устройств, позволяющих просматривать информацию онлайн растет с каждым годом. Разнообразие форматов и разрешений усложняет процесс разработки в целом, дополнительные требования приходится учитывать на всех этапах: дизайнерам, и верстальщикам, и программистам.
Концепция адаптивного дизайна позволяет оптимизировать процесс, поскольку не нужно создавать несколько вариантов сайтов, как это было ранее, например, с мобильными версиями. В том случае проектировался отдельный набор функций на отдельном поддомене.
Старые сайты нуждаются в доработке и разнообразные подходы к адаптивности позволяют это реализовать. Главное, правильно оценить масштабы на старте, в ряде случаев проще, быстрее и дешевле использовать новые дизайн-макеты и шаблоны. Если ваш фирменный стиль не является узнаваемым брендом, зачастую к переделке подталкивает еще и факт, что он морально устарел. И ребрендинг, как этап перехода на новый уровень никто не отменял. Адаптивный сайт- это мощный инструмент для вашего бизнеса.
Существуют сервисы для проверки, насколько сайт соответствует требованиям адаптивность.
Более того, на сегодняшний день самые крупные поисковые системы Google и Яндекс учитывают этот параметр при ранжировании веб сайтов. Поскольку юзабилити, навигация являются одними из обязательных факторов оценки качества сайта. Скорость загрузки информации, а в случае с оптимизированными изображениями она падает, нечитабельный текст и искаженные слишком мелкие или не помещающиеся в экран элементы затрудняют поиск информации и попросту приводят к росту отказов – пользователь закрывает страницу. Это поведенческие факторы, которые также сказывается на позиции в поисковой выдаче.
Для владельцев сайтов техническая терминология и параметры ранжирования- не совсем понятные и осязаемые критерии. Но им достаточно понимать, как это сказывается на динамике посещаемости. Во многих сферах доля трафика с мобильных устройств трафика сопоставима и даже превышает десктопный. С этим нужно считаться. Встретить разработчиков, которые не предлагают адаптировать интернет-сайт, можно все реже, но ориентироваться в этом вопросе для контроля процесса не помешает.
Принципы адаптивности
Поточность
Предположим, вы разработали дизайн для десктопных браузеров. Все круто. При просмотре этого сайта с мобильного устройства блоки смещаются и идут друг под другом.
Это называется потоком. И сейчас это один из основных принципов, который используется в адаптивном дизайне. Учитывайте это.
Относительность единиц измерения
Из школьных уроков физики известно, что скорость может быть абсолютной, когда вне зависимости от того, откуда вы наблюдаете движение, скорость будет одной и той же. И относительной - когда в зависимости от точки отсчета скорость может изменяться.
С единицами измерения так же. На разных устройствах разная плотность пикселей. И размер, например, в 320 px по-разному будет выглядеть на экране компьютера и смартфона.
Решение - использовать относительные единицы измерения. Когда все размеры, масштабы и координаты блока вы задаете относительно элемента, который есть и на экране ПК, и на дисплее смартфона. Например, верхняя граница.
Использование контрольных точек
Это элементы, чье расположение меняется только если для просмотра используется определенное устройство с заданными параметрами экрана.
Например, если содержимое страницы “уползает”, то имеет смысл добавить такую точку и зафиксировать контент.
Минимальные и максимальные значения
На мобильном телефоне статья может отображаться как надо. Но вот вы открываете эту же страницу на широкоформатном мониторе, и картина вас не радует. Все растянулось, о читабельности не может быть и речи.
Например, можно указать свойства. Если ширина экрана меньше 1000 пикселей, то контент следует отобразить на весь экран. Иначе - максимальная ширина будет 1000 пикселей.
Вложенность объектов
Бывает так, что нужно использовать много элементов, которые зависят от положения других блоков. Это сложно контролировать. Можно вложить такие объекты в один контейнер. Это подходит для тех блоков, которые вы не хотите адаптировать под параметры экрана - кнопки, логотипы и т. д.
Правильные шрифты
Веб-шрифты выглядят красиво. Но не забывайте, что все они подгружаются. Это сказывается на скорости загрузки страниц у пользователя.
Правильное использование растровой и векторной графики
Если на картинке много мелких деталей, то используйте растровый формат. Иначе - векторный.
Но ни одна картинка не должна использоваться без оптимизации - сжатия. Векторные изображения обычно уже сжаты. Но не все старые браузеры их поддерживают.
Соблюдение размеров макетов
Есть общие стандарты, на какие базовые размеры принято ориентироваться при разработке макета.
В адаптивном дизайне есть такое понятие, как контрольные точки. Это параметры, которые передаются в медиа-функциях. Обозначают, при каких разрешениях происходит смена дизайна.
- Для мобильны 320px, 480 px.
- Для планшетов 768px.
- Для нетбуков и некоторых планшетов 1024px.
- Для персональных компьютеров 1280px и более.
Привязка к конкретному разрешению не жесткая. Зависит от настроек и параметров устройств.
Иногда нет надобности создавать макет под промежуточные разрешения, например, 480px, если макет отображается корректно в интервале 768 - 320px.
Если на конкретном гаджете макет «ломается», отображается неправильно при другом разрешении, за точки перелома принимают фактические значения для этого экрана.
Медиа-запросы
Разработка адаптивных сайтов построена на принципе определения параметров стилей с помощью media queries (медиа-запросы).
Запросы определяют:
- Тип устройств: проекторы, смартфоны, мониторы, телевизоры и пр.
- Условия.
На соответствующий запрос и ответ будут применяться соответствующие устройству параметры отображения из файла стилей css.
Проверка сайта на адаптивность
Проверить, как ваш сайт отображается на мобильных устройствах, можно с помощью различных сервисов и инструментов.
С помощью браузера
Например, в Google Chrome есть встроенный инструментарий для проверки дизайна сайта на корректность к отображению на мобильных устройствах. Нужно нажать клавишу F12 или Ctrl+Shift+I, либо выбрать в Меню «Дополнительные инструменты» - «Инструменты разработчика».
В Mozilla Firefox это можно сделать таким образом «Меню» - «Разработка» - «Адаптивный дизайн», либо Ctrl+Shift+M.
Google Mobile Friendly (Google Search Console)
Просто вбиваем полный URL в строку и получаем результаты. Обычно проверка занимает меньше минуты.
Адаптивный сайт- это стандарт веб-разработки, один из показателей качества интернет-ресурса и внимательного отношения к потребностям пользователей.
Адаптивная вёрстка сайта позволяет веб-страницам автоматически подстраиваться под экраны планшетов и смартфонов. Мобильный интернет-трафик растёт с каждым годом и чтобы эффективно обрабатывать этот трафик, нужно предлагать пользователям адаптивные сайты с удобным интерфейсом.
Поисковые системы используют ряд критериев для оценки адаптивности сайта при просмотре на мобильных устройствах. Google старается упростить пользование Интернетом для владельцев смартфонов и планшетов, отмечая в мобильной выдаче адаптированные под мобильные устройства сайты специальной пометкой mobile-friendly . В Яндексе также работает алгоритм, который отдает предпочтение сайтам с мобильной/адаптивной версией для пользователей в мобильном поиске.
Проверить отображение страницы на мобильных устройствах можно на сервисах и .
Рис. 1. Мобильная выдача Яндекса и Google с пометкой о дружелюбности сайта к мобильным устройствам
Что такое адаптивная вёрстка
Адаптивная вёрстка предполагает отсутствие горизонтальной полосы прокрутки и масштабируемых областей при просмотре на любом устройстве, читабельный текст и большие области для кликабельных элементов. С помощью медиазапросов можно управлять компоновкой и расположением блоков на странице, перестраивая шаблон таким образом, чтобы он адаптировался под разные размеры экранов устройств.
Основные приёмы создания адаптивного сайта приведены в статье . Для отзывчивого дизайна ширина основного контейнера сайта задаётся в % , при этом она может быть равна как 100% ширины окна браузера, так и меньше. Ширина столбцов сетки также задаётся в % . В адаптивном дизайне ширина основного контейнера и столбцов сетки фиксируется с помощью значений в px .
Рассматриваемый в данном уроке приём адаптивной резиновой вёрстки отлично сработает на двухколоночном шаблоне, сделав сайт адаптивным и удобным для просмотра на мобильных устройствах. Шаблон предполагает различную компоновку основного содержимого страниц, в этом уроке будет разобрана вёрстка главной страницы.
Вёрстка главной страницы
Страница состоит из трёх основных блоков: верхний колонтитул (шапка), контейнер-обёртка для основного содержимого и сайдбара, и нижний колонтитул (футер). В качестве переломных точек дизайна возьмём 768px и 480px .
В первой точке скроем верхнее меню и переместим сайдбар под контейнер с постами. Во второй точке изменим расположение элементов шапки, отменим позиционирование кнопок социальных сетей в постах и отменим обтекание столбцов подвала страницы.
Рис. 2. Пример адаптивной верстки
1. Метатеги и раздел
1) Добавим в раздел
необходимые файлы — ссылку на используемые шрифты, библиотеку jQuery, а также плагин prefixfree (чтобы не писать для свойств браузерные префиксы):
