Создание лучшей страницы контактов. Как создать контактную форму обратной связи на WordPress? Адаптивность контактная информация

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

Больше видео на нашем канале - изучайте интернет-маркетинг с 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 в строку и получаем результаты. Обычно проверка занимает меньше минуты.

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

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

Конечно здорово будет, если вы хоть немного разбираетесь в HTML / CSS т.к. Вам придется уже по аналогии перетягивать код на свою страницу. PHP язык затрагивать не будем, все необходимые правки, которые нужно будет сделать под себя я покажу.

UPDATE :По откликам читателей, я понял, что нужно что-то более красивое и функциональное, встречайте , ознакомьтесь и посмотрите. Сами выбирайте какая больше понравится)

UPDATE2 : Version 3.0 Адаптивный Лендинг + форма ajax с передачей UTM-меток , ознакомьтесь и посмотрите. Вам понравится

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

Форма обратной связи php — структура

Разбор самой формы обратной связи будем изучать на примере посадочной страницы (Landing Page), кстати есть отдельная статья по . Посмотреть как это работает в действии можете по кнопкам расположенным ниже, прикладываю исходники этого одностраничника и главного файла обработчика-php (этот файл и будет обрабатывать и отправлять письмо на email)

После того как скачаете исходники и распакуете архив, вы увидите следующую структуру по файлам:

• image — все изображения, которые используются для самого Landing Page, кнопки и т.д.
• js — javascript скрипты, которые обеспечивают например всплывающее модальное окно на странице и другие визуальные эффекты
• index.html — индексный файл нашего одностраничника
• index1.php — файл обработчик, в который передаются значения из формы, далее формируется письмо из полученных переменных и отправляется на указанный email адрес. Так же index1.php случит в роли промежуточной страницы уведомления об успешной отправке данных с автоматическим перенаправлением обратно на index.html (т.е. наш одностраничник)

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

Взгляните на схему работы взаимодействия всех элементов (страница, форма, обработчик)

Исходный код вызова формы и обработчика

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

Заказать обратный звонок Заказажите обратный звонок

Заказать обратный звонок Заказажите обратный звонок

Ниже полный исходный код обработчика index1.php, для того чтобы настроить отправку на свой почтовый ящик, поменяйте «[email protected]» на свой, остальное в принципе можно оставить без изменений

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

С вами свяжутся

С вами свяжутся body { background: #22BFF7 url(img/zakaz.jpg) top -70% center no-repeat; } setTimeout("location.replace("/index.html")", 3000); /*Изменить текущий адрес страницы через 3 секунды (3000 миллисекунд)*/

Проверка работоспособности формы

Вызываем окно и вводим данные для тестовой проверки нашей формы

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

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

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

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

1. Установите правильные атрибуты полей форм

Если вы используете на сайте поля ввода для имени пользователя или адреса, выключайте autocorrect и включайте autocapitalize :

Ваше имя:

Если не сделать так, то система автоматизированного ввода Т9 будет заменять имена, к примеру, “Erwan ”, на что-то вроде “Erevan ”.

Установка автоматического использования первых заглавных букв в типах words освободит пользователей от необходимости каждый раз включать капитализацию букв – то есть каждое слово будет начинаться с большой буквы (к примеру “Ken burns ” станет “Ken Burns ”):

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

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

Ваш email:

2. Задайте подходящую для мобильных устройств ширину

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

Это и будет минимально допустимой шириной. Берите текущее значение ширины и устанавливайте его в свойство @viewport путем установки тега meta в заголовок страницы head :

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

Эта картинка демонстрирует лишнее место справа:

А эта картинка показывает правильно установленное значение ширины.

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

3. Установите ширину картинок в 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 . Если это не так — пользователь не сможет пользоваться зумом:

4. Установите ширину полей ввода в 100%

После того, как ширина изображений установлена через свойство max-width , сделайте похожий трюк с полями input . Просто добавьте в файл CSS – файл вашего сайта:

input, textarea { max-width:100% }

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

5. Будьте бдительны когда используете Disable для кнопок подтверждения отправки форм

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

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

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

И если вы все-таки решили деактивировать кнопку submit — делайте это на несколько секунд.

6. В длинных строках используйте word-wrap

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

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

Ваш пароль:

7. Будьте осторожны, используя пробелы

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

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

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

.split m { padding: 0em 0.5em } Ваш код: 435143a1b5fc8bb

Как видите, «пробелы » между символами остаются, но с тем отличием, что при копировании-вставке нет нужды что-то удалять. Как минимум, это удобно и экономит время!

8. Преимущества медиа-запросов

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

/* regular css */ .tabs { padding: 10px 2em } @media screen and (max-width: 500px) { /* applies only if the screen is narrower than 500px */ .tabs { padding: 3px 1em } }

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

9. Избегайте fixed позиционирования

Если заголовок или сайдбар вашего сайта позиционирован фиксировано, CSS свойство position установлено в значение fixed . Будьте внимательны.

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

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

Пример ниже, использующий метод медиа-запросов, покажет, как воплотить это в жизнь:

/* regular css */ #header { position: fixed } @media screen and (max-width: 500px) { /* applies only if the screen is narrower than 500px */ #header { position: static } }

10. Используйте стандартные шрифты

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

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

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

Значение хорошей страницы контактов

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

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

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

Местоположение

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

В общем, контактная информация может находиться в двух местах:

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

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

Нижний колонтитул также является популярным местом для контактной информации. Он может содержать ссылку на контактную страницу:

…либо самую важную контактную информацию:

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

Самое важное в странице контактов

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

Адрес электронной почты / контактная форма

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

Адрес

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

Телефон

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

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

Дополнительно

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

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

Удобная информация

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

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

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

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

Благодаря Google Maps вставить это полезное свойство проще простого. Просто введите свой адрес в Google Maps и щелкните на иконку ссылки в боковой колонке. Там для вас найдется код вставки.

Вы знали, что можно адаптировать карту под себя? Вы можете отредактировать цвета карты, добавить на карту пользовательские указатели и создать легенду. Подробнее об этом можно прочесть на developers.google.com . Также можно обдумать применение альтернативных сервисов, таких как довольно привлекательный Mapbox .

Не забудьте о поисковой оптимизации

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

Контактные формы

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

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

Поля ввода

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

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

Помогите своим посетителям заполнить поля, указав правильный формат. Телефонные номера и даты могут оказаться подводным камнем, особенно для иностранных посетителей. Атрибут HTML5 placeholder окажет вам помощь.

Далее убедитесь, что выделили необходимые для заполнения поля (их традиционно выделяют с помощью звездочки *). Безопаснее всего однозначно указать обязательные и необязательные к заполнению поля.
Наконец, полезно выделить активное поле. Оно может быть обозначено едва-едва или очень ярко – как хотите.

Ниже приведен пример контактной формы из учебника Джима Нильсена (Jim Nielsen). Он использует красную звездочку для обязательных к заполнению полей, дает советы по форматам и выделяет активное поле.

Валидация формы

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

Кнопки

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

Отклик

Посетитель внес свою контактную информацию, написал сообщение и нажал кнопку «отправить». Что теперь? Дошло сообщение или нет?

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

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

Дизайн контактной страницы

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

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

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

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

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

Примеры контактных форм

Говоря о хороших контактных формах, давайте ради вдохновения посмотрим на эти примеры (для посещения соответствующего сайта щелкните на изображение):

Заключение

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

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

Важна интерактивность. Примените атрибут mailto для адресов электронной почты и атрибут tel: для телефонных номеров (очень пригодится посетителям с мобильных устройств). Можно вставить интерактивную карту, такую как Google Maps, но обдумайте ее последствия для производительности.

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

Responsive web design is a setup where the server always sends the same HTML code to all devices and CSS is used to alter the rendering of the page on the device. Google"s algorithms should be able to automatically detect this setup if all Googlebot user agents are allowed to crawl the page and its assets (CSS, JavaScript, and images).

Responsive design serves all devices with the same code that adjusts for screen size.

TL;DR

• Use the meta name="viewport" tag to tell the browser how to adjust the content.
• Check out Web Fundamentals for more documentation.

Using meta name="viewport"

To signal to browsers that your page adapts to all devices, add a meta tag to the head of the document:

As a general rule, if your site works in a recent browser such as Google Chrome or Apple Mobile Safari, it would work with our algorithms.

Why responsive design

We recommend using responsive web design because it:

• Makes it easier for users to share and link to your content with a single URL.
• Helps Google"s algorithms accurately assign indexing properties to the page rather than needing to signal the existence of corresponding desktop/mobile pages.
• Requires less engineering time to maintain multiple pages for the same content.
• Reduces the possibility of the common mistakes that affect mobile sites.
• Requires no redirection for users to have a device-optimized view, which reduces load time. Also, user agent-based redirection is error-prone and can degrade your site"s user experience (see Pitfalls when detecting user agents for details).
• Saves resources when Googlebot crawls your site. For responsive web design pages, a single Googlebot user agent only needs to crawl your page once, rather than crawling multiple times with different Googlebot user agents to retrieve all versions of the content. This improvement in crawling efficiency can indirectly help Google index more of your site"s content and keep it appropriately fresh.

If you"re interested in responsive web design, start with our blog post on Webmaster Central and visit the Web Fundamentals site.

Important: Be sure not to block the crawling of any page assets (CSS, JavaScript, and images) for any Googlebot using robots.txt or other methods. Being able to fully access these external files helps our algorithms detect your site"s responsive web design configuration and treat it appropriately. Caution: To make sure your implementation is successful, avoid the common mistakes . JavaScript

One part of building mobile-friendly sites that requires careful consideration is the use of JavaScript to alter the rendering and behavior of the site on different devices. Typical uses of JavaScript include deciding which ad or which image resolution variant to show in the page.

This section describes different approaches to using JavaScript and how they relate to Google"s recommendation of using responsive web design.

Common configurations

Three popular implementations of JavaScript for mobile-friendly sites are:

• JavaScript-adaptive : In this configuration, all devices are served the same HTML, CSS, and JavaScript content. When the JavaScript is executed on the device, the rendering or behavior of the site is altered. If a website requires JavaScript, this is Google"s recommended configuration .
• Combined detection : In this implementation, the website uses both JavaScript and server-side detection of device capabilities to serve different content to different devices.
• Dynamically-served JavaScript : In this configuration, all devices are served the same HTML, but the JavaScript is served from a URL that dynamically serves different JavaScript code depending on the device"s user-agent.

Let"s look at each of these configurations in detail.

JavaScript-adaptive

In this configuration, a URL serves the same contents (HTML, CSS, JavaScript, an image) to all devices. Only when the JavaScript is executed on the device is the rendering or behavior of the site altered. This is similar to how responsive web design, using CSS media queries, works.

As an example, a page serves all devices the same HTML that includes a element that requests an external URL that serves the JavaScript. All devices requesting the JavaScript"s URL get the same code. When executed, the JavaScript detects the device and decides to alter something about the page, say to include a smartphone-friendly image or add code instead of the desktop alternatives.

This configuration is very closely related to responsive web design and our algorithms can detect this setup automatically. Further, this configuration does not have a requirement for the Vary HTTP header because the URLs of the page and its assets do not dynamically serve content. Because of these advantages, if your website requires the use of JavaScript, this is our recommended configuration.

Combined detection

Combined detection is a setup where the server works in tandem with JavaScript on the client to detect the device"s capabilities and alter the content being served.

For example, a site may choose to alter the rendering of the content based on whether the device is a desktop or smartphone. In this case, the website can include JavaScript that detects the screen dimensions, which are then sent to the server that updates or alters the code sent to the device. Typically, the JavaScript stores the detected device capabilities in a cookie that the server reads on subsequent visits from the same device.

Given that the server returns different HTML to different user-agents, combined detection is considered a type of dynamic serving configuration. The details are described in full in the dynamic serving section , but to briefly summarize, the website should include the "Vary: User-agent" HTTP response header when a URL that serves different HTML content to different user-agents is requested.

Dynamically-served JavaScript

In this configuration, all devices are served the same HTML which includes a element to include an external JavaScript file that can have different content depending on the requesting user-agent. That is, the JavaScript code is dynamically served.

In this case, we recommend that the JavaScript file be served with the "Vary: User-agent" HTTP header. This is a signal to Internet caches and Googlebot that the JavaScript can be different for different user agents, and is a signal for Googlebot to crawl the JavaScript file using different Googlebot user-agents.