Адаптивно оформление Сайтът позволява уеб страници да се адаптират автоматично към екраните на таблетки и смартфони. Мобилният интернет трафик нараства всяка година и ефективно обработва този трафик, трябва да предложите на потребителите адаптивни сайтове с удобен интерфейс.
Търсачките използват редица критерии за оценка на адаптивността на сайта при гледане на мобилни устройства. Google се опитва да опрости използването на интернет за собствениците на смартфони и таблети, отбелязвайки в мобилната емисия, адаптирана под мобилни устройства сайтове специална марка mobile-Friendly.. Yandex също работи на алгоритъма, който предпочита сайтове с мобилна / адаптивна версия за потребителите в мобилно търсене.
Можете да проверите дисплея на страницата на мобилни устройства на услугите и.
Фиг. 1. Мобилен Yandex и Google, които издават бележка за удобството на сайта към мобилни устройства Какво е адаптивно оформление
Адаптивното оформление включва отсъствието хоризонтална ивица Свържете и мащабируемите зони при гледане на всяко устройство, четене на текст и големи площи за клиристични елементи. Използването на медийни режици можете да контролирате оформлението и местоположението на блоковете на страницата, да възстановите модела, така че да се адаптира към различни размери на устройства.
Основните техники за създаване на адаптивно място са дадени в статията. За адаптивен дизайн Ширината на основния контейнер на сайта е зададена в%, докато тя може да бъде равна на 100% ширина на прозореца на браузъра и по-малко. Ширината на колоните на мрежата също е зададена в%. В адаптивна дизайн Ширината на основния контейнер и решетките се фиксират, като се използват стойностите в px.
Адаптивното гумено оформление, разглеждано в този урок, ще работи перфектно върху шаблон с две колони, което прави сайта адаптивен и удобен за гледане на мобилни устройства. Шаблонът приема различно оформление на основното съдържание на страниците, в този урок ще бъде демонтиран към главната страница.
Шкафче на главната страница
Страницата се състои от три основни блока: горния долен (капачка), опаковката за основното съдържание и Sagebar и долния колонтитул (долния колонтитул). Като точка на завъртане на дизайнерските точки, вземете 768px и 480px.
В първата точка скрийте горното меню и преместете страничната лента под контейнера с публикации. Във втората точка ще промените местоположението на елементите на заглавката, да отмените позиционирането на бутоните на социалните мрежи в публикациите и да отмените потока около колоните на страниците.
Фиг. 2. Пример за адаптивно оформление 1. Метаагале и секция
1) Добавяне към секцията
Необходимите файлове са връзка към използваните шрифтове, библиотеката JQuery, както и приставката Prefixfree (да не пиша за свойствата на префиксите на браузъра):
2. Страница Кап
В заглавието на страницата
Лого ;
Бутон за показване / скриване на главното меню
< div class = "col-md-4" > [Изпращане на класа: BTN - плосък клас: COL - XS - 12 "Поръчка"]< / div > < / div > |
Важна забележка:Уважаеми приятели, в този пример използвам адаптивни стилове, за да създам контактна форма на WordPress, т.е. може да приеме форми на всеки размер на екрана.
Ще видите бутона в горния десен ъгъл. Вече определено не пропускайте. 🙂
Ние сме извършили част от работата, сега отиваме на следващия етап.
Създаване на имейл адреси за получаване на заявления
В тази стъпка трябва да направим някои настройки, така че буквите да отидат в нашата пощенска кутия. Как да постигнете това ще покажете по-долу.
Трябва да кликнем върху големия раздел "Писмо". Това ще бъде второто след шаблона на формата.
Първото нещо, което виждате, е вашите етикети, които сте добавили, ние се нуждаем от тях вмъкнат в писмото на писмото, то ще заместят данните, които влизат в потребителя от формуляра. Мисля, че съм обяснен, че е разбираем.
Сега в полето:
- За (където приложението е изпратено, в моя случай, това е моят имейл адрес, можете да посочите няколко адреса, където да изпращате заявления)
- От (където е от полето, т.е. ще замени стойността, която приложението идва от моя студио)
- Тема (служи за определяне на коя форма идва приложение, в нашия случай това е приложение с формата на промоция на уебсайтове).
- Допълнителни заглавия (допълнителни заглавия, не ги докосват, те са необходими за коректността на изпращащата форма)
- Тяло на съобщението (тялото на съобщението, тук сте посочили от кого идва писмото и от кой адрес, например: "От: Иван" "Пощенски адрес: vasya @ mail. Резюме »)
- Файлови прикачени файлове (приложение към файл, не докосвайте)
Сега трябва да конфигурираме известия за успешните или неуспешни имейли от контактната форма на WordPress.
Това ще бъдат съобщения, които ще бъдат показани на потребителя в отговор на действията му с формуляра. По подразбиране те отиват на английски. Направих трансфер на руснаците най-необходим за вас. Те ще бъдат повече от достатъчно, а ако не, тогава преводачът Google да ви помогне. Така че, продължете.
- Ако успешно изпратите съобщение: "Вашето съобщение е изпратено успешно. Благодаря ти."
- Ако не успеете да изпратите съобщение от формуляра: "Грешка при изпращане на съобщение. Моля, опитайте по-късно или се свържете с администратора на сайта. "
- Грешка при пълнене: "Грешки при пълнене. Моля, проверете всички полета и изпратете отново. "
- Изпратените данни се определят като спам: "Грешка при изпращане на съобщение. Моля, опитайте по-късно или се свържете с администратора на сайта. "
- Някои условия трябва да бъдат приети: "Моля, приемете условията за продължаване."
- Някои полета трябва да бъдат попълнени: "Моля, попълнете задължително поле."
- Дължината на знаците в полето е превишена: "Той е показан твърде много данни."
- Недостатъчна дължина на символа в полето: "Данните са обозначени прекалено много."
- Невалиден формат на датата: "Форматът на датата е неправилен."
- Ранна дата в минималния лимит: "Следната дата е посочена."
- Късна дата на максималния лимит: "Последната дата е посочена."
- Неуспешно зареждане на файлове: "Неуспешно качване на файл."
- Нерешен тип файл: "Този тип файл не е разрешен."
- Зареждане на твърде голям файл: "Този файл е твърде голям."
- Зареждане на файлове Неуспешно благодарение на PHP грешки: "Изпращането на файл не бе успешно. Възникна грешка. "
- Численият формат, въведен от подателя, е неправилен: "цифров формат е неправилен."
- Номерът е по-малък от минималния лимит: "Този брой е твърде малък."
- Номерът е по-голям от максималния лимит: "Този брой е твърде голям."
- Подателят не е въвел верния отговор на въпроса: "Въведохте неправилен отговор."
- Електронният адрес, въведен от подателя, е неправилен: "Неправилен имейл".
- URL адресът, въведен от подателя, е неправилен: "Неправилен URL адрес".
- Телефонният номер, въведен от подателя, е неправилен: "Неправилен телефонен номер".
Много добре. С настройката на формуляра завършихме, сега трябва да го поставите на сайта. За това вече известната технология, да отидем на съществуваща страница или да създадем нов. Във вашия пример ще ви покажа пример за съществуваща форма на страницата WordPress.
Тъй като нашата форма събира приложения за промоция на уебсайтове, да отидем на подобна страница.
За да вмъкнете нашата форма за контакт, трябва да копирате, зададе му с плъгин, кратък код. Налице е наречен формуляр.
Копирайте и вмъкнете нашата страница, след като преминавате текстов редактор (не визуално). Представени на екрана по-долу:
Запазете нашата страница и вижте какво се случи в края на браузъра:
Супер! Сега нека се опитаме да изпратим формуляра, без да попълваме. И това ще видим.
Възникна грешка при изпращането от формуляра, тъй като потребителят не определя необходимите данни в полетата. Сега да въведем правилните данни и да видим какво успяваме в този случай. 
Щракнете, за да изпратите и това е, което нашата форма пише:
Сега да видим какво изглежда нашето приложение. Те идват от мен на Milovskaya mail. Проверете Доставка:
Да влезем вътре, за да се уверим, че кодирането и всички данни са правилни.
Всичко е наред. Формата работи добре и изпраща данни. Сега можем да събираме приложения, които ще дойдат при вас, когато правите, ако говорим за регионална промоция.
Така че, казахме как да направите форма за контакт на WordPress на страницата на сайта. Сега ще ви кажа как да направите изскачаща форма за адаптивна обратна връзка Използване на нашия плъгин контакт 7.
Ние правим изскачаща адаптивна обратна връзка за обратна връзка на WordPress
За да бъдем адаптивни, т.е. гума, трябва да свържем друг плъгин и по-точно неговото допълнение към формуляра за контакт 7 - той се нарича Outstrap Контактна форма 7. Инсталиране и активиране и всичко това - работи. Няма нужда да правите с него. Инсталиран и забравен.
В следващата стъпка ще ви кажа какви промени трябва да се направят, така че нашата форма да стане изскачаща и адаптивна. Направих такава реализация главна страница на мястото му на студио. За да направите това, се обръщаме към шаблона index.php, който се намира в раздела "Външен редактор". Ще работим само с кода ръчно.
Нашата изскачаща форма ще се покаже в диалоговия прозорец Модал, както следва:
За да постигнете този резултат, ще ви е необходим следният код, аз ще го представя напълно в фрагмента:
Да поръчам
< a href = "#" class = "btn btn-primary btn-flat" data - toggle = "modal" data - target = "#modal2" > Да поръчам< / a > < ! -- Modal -- > < div class = "modal contact-modal fade" tabindex = "-1" id = "modal2" role = "dialog" aria - labelledby = "myModalLabel" aria - hidden = "true" > < div class = "modal-dialog" > < div class = "modal-content" > < div class = "modal-header" > < button type = "button" class = "close" data - dismiss = "modal" > < span aria - hidden = "true" > И време;< / span > < span class = "sr-only" > Близо.< / span > < / button > < h4 class = "modal-title black" id = "myModalLabel" > Подайте заявлението си< / h4 > < / div > |
От автора: Добрата контактна страница е много важна за поддържане на взаимоотношенията с техните посетители. Независимо дали говорим за електронна търговия, списания, лични уебсайтове, онлайн услуги - като първият инструмент за комуникация с вас, потребителите обикновено търсят контактна страница. Странно е, но много уеб дизайнери пренебрегват скромната страница за контакт, дори да го считат за един от най-малко важните аспекти на уебсайта. Нека го поправим.
Стойността на добра страница за контакт
Страницата на контактите често се пропускат от изгледа. Колко уебсайта сте посетили, които искате да се свържете с да се оплаквате от продукта или услугата или да зададете въпрос? И колко често трябваше да се биете с формата за контакт?
Добрата контактна страница е полезна за всеки вид бизнес. Тя е в състояние да увеличи удовлетвореността на клиентите, да помогне с решаването на техните проблеми. Тя може също така да помогне за подобряване на своите продукти и услуги, осигурявайки широк начин за ценен преглед.
Когато става въпрос за отмяна на директен потребител, други канали могат да бъдат ограничени. Телевизия, радио, списания, вестници ... всички те са форма на едностранна комуникация. Онлайн комуникацията трябва да бъде двустранна улица; Диалог между бизнеса и посетителя. Favoro от това е и двете страни, и ето защо добрата страница на контактите е толкова важна.
Местоположение
Първа стъпка: място за поставяне на вашата информация за контакт. Няма смисъл да имате най-добрата контактна страница в света, ако посетителите ви не могат да го намерят. Можете да им помогнете, ако се придържате към някои дизайнерски традиции.
Като цяло, информацията за контакт може да бъде разположена на две места:
Главна навигация - идеалното място за свързване към страницата за контакт. Посетителите обикновено търсят контактна страница отдясно, защото се вижда от елемента на вторичната стойност. Следователно, просто ще видите връзка към страницата за контакт като една от най-новите навигационни елементи на сайта.
Можем също така да разгледаме по-малко субнуация в горния десен ъгъл на екрана. Това е и ценна позиция за страницата за контакт. Между другото, по-добре е да се избегне поставянето на страницата за контакт в падащото меню, тъй като е лесно да го пропуснете.
Долен колонтитул Също така е популярна дестинация за информация за контакт. Той може да съдържа връзка към страницата за контакт:
... или най-важната информация за контакт:
Предвидете потока на посетителите на страницата за контакт е трудно, така че поставянето на препратки поне в двете споменати места ще ви принуди безопасно да ви принуди.
Най-важното в страницата за контакт
Сега сте спокойни - посетителите ви ще могат да намерят път към страницата за контакт и е време да мислим за действителното му съдържание. Нека започнем с основния и да разгледаме информацията, която трябва да бъде представена.
Имейл имейл / формуляр за контакт
Имейл адресът е най-лесният начин за онлайн бизнес в бизнеса. Като алтернатива можете да използвате формуляр за контакт, който се отнася до имейл. Чрез формата получавате повече контрол върху съдържанието (необходимо за запълване на полето) и така може да бъде предотвратено от спам. Ще разкажем за формулярите за контакти в тази статия по-долу.
Адрес
Бизнесът с традиционен магазин не трябва да забравя да споменем вашия адрес. Ако имате много магазини, най-добре е да създадете индивидуална страница за всички. Напълнете го с отделна информация за контакт на този магазин, работно време, схема за пътуване и др. Това е необходимо не само за посетителите, но може да помогне на сайта ви в местни заявки за търсене.
Телефон
Показването на телефонния номер води до чувство за доверие. Това често се разглежда като знак за истинска съществуваща компания и наистина помага на онлайн магазините.
Много уебсайтове започнаха да добавят бутона на социалните мрежи към страницата за контакт. Въпреки че, може би това не е от полза за всички обекти, защото някои посетители имат допълнителен смисъл. Особено, тъй като все повече компании предлагат поддръжка на клиенти чрез Twitter (понякога дори денонощно и без почивни дни).
Освен това
Няма универсално решение за добра страница за контакт. Всеки уебсайт или бизнес изискват определени елементи, които могат да бъдат ненужни на други сайтове.
Има много допълнителна информация или свойства, които ще бъдат полезни на страницата за контакт. За традиционните магазини, добра идея е да се спомене, да речем, работно време. Големите компании биха могли да направят позоваване на своя чат чат, а сайтовете за електронна търговия могат да консолидират доверието на потребителите, да висят номера на ДДС.
Удобна информация
Лекотата на използване на информацията ще защити посетителите ви от разочарованието на страницата за контакт.
Вместо изображения, активирайте информацията си под формата на HTML текст. HTML текст Можете да копирате и поставите, което улеснява посетителя, за да запазите вашите данни за контакт.
Имейл адресът трябва да използва връзката по пощата. Това дава възможност на посетителя да кликне върху него и да изпрати съобщение, без да е необходимо да копирате адреса за доставка и отваряне. поща клиент. С тази техника обаче може да има проблем в лицето на спам ботове, събиране на имейл адреси, свързани с MailTo :. Затова можете първо да решите да ги обърнете, като използвате услугата като MailToencoder.com.
Контекст Забележка: Телефонните номера също трябва да бъдат интерактивни. Миналата година публикувахме малък съвет как да направите телефонен номер, чувствителен към кликване. Благодарение на малкия фрагмент от кода, смартфоните идентифицират телефонни номера и правят възможно да ги наричате. Това е наистина удобно за мобилните потребители.
Бизнесът, които са силно зависими от техните традиционни магазини, често получават много полза от интерактивна карта, като предоставят на потребителя възможност бързо да намерят пътя към точките за продажба. Показване на адреса на магазина добре и добавете интерактивна карта още по-добре.
Благодаря Google Maps. вмъкнете го полезен имот толкова лесно, колкото пай. Просто въведете адреса си в Google Maps и кликнете върху иконата Връзки в страничната колона. Там за вас има код за вмъкване.
Знаете ли, че можете да адаптирате картата към себе си? Можете да редактирате цветовете на картата, да добавите персонализирани указатели към картата и да създадете легенда. Можете да прочетете повече за това на Developers.google.com. Можете също така да помислите за използването на алтернативни услуги, като например атрактивна карта на карти.
Не забравяйте за оптимизацията на търсачките
Като посетител ще разпознаете незабавно адреса на страницата за контакт. ТърсачкиВъпреки това е необходима малка помощ, когато разпознавате различни елементи.
Форми за контакт
Повечето от уебсайтовете прилагат формата за контакт на тяхната страница. Някои форми обаче са ненужно сложни и неприятелски на потребителя.
Без значение колко просто формата за контакт изглежда, всъщност е комбинация от няколко компонента. Всички те трябва да работят заедно, за да гарантират най-доброто впечатление на потребителя.
Входни полета
Полета за въвеждане, като текстови полета, опции за избор на опции (радио басейни), квадратчета за отметка и др., Позволете на потребителя да направи необходимата информация.
Посетителите на уебсайтове са по-склонни да попълват кратки форми, тъй като те изискват по-малко усилия. Броят на входните полета е балансирането между впечатлението и бизнес нуждите на потребителя. HubSpot анализира повече от 40 000 форми и се счита за ефект на увеличаване на броя на входните полета. Резултатът от изследванията им казва, че трябва да се използва като малко от полетата на формуляра и да бъде особено внимателен със сложни текстови зони и падащи списъци.
Помогнете на посетителите да попълнят полетата, като посочват правилния формат. Телефонните номера и датите могат да бъдат клопки, особено за чуждестранните посетители. HTML5 атрибут на място ще ви помогне.
След това се уверете, че разпределяте полето, което трябва да го попълните (те традиционно са изолирани с Asteriskks *). Със сигурност определено да покаже задължителното и по избор да запълни полето.
И накрая, е полезно да се подчертае активното поле. Тя може да бъде обозначена едва ли ярка - както искате.
По-долу е даден пример за форма на контакт от Jim Nielsen Jim. Той използва червено зъбно колело за задължително запълване на полетата, дава съвети за форматите и подчертава активното поле.
Валидиране на формуляр
Вътрешното валидиране също може да предотврати някои заболявания на контактни форми. Необходимостта от изпращане и прехвърляне на формуляра поради въвеждането на неправилни данни или данни в грешния формат е много досаден. Както вече споменахме тук, най-добре е да се подпомогнат посетителите, като показват необходимия формат (например дати, телефонен номер ...).
Бутони
Без бутона за изпращане няма форма за контакт. Трябва да е в самия край. Като текст на бутона използвайте "Изпращане на съобщение", вместо "изпращане", за да напомня на клиентите какво правят.
Обичайният стандарт от миналата година е да се даде възможност за "нулиране" или "ясна форма" бутон. Не прави това. Тя ще я натисне произволно. Няма нищо по-лошо от отпечатването на добре обмислено подробно съобщение и да го загубите поради бутона "RESET".
Отговор
Посетителят направи информация за контакт, написа съобщение и натисна бутона "Изпращане". Сега какво? Извърши ли съобщението или не?
Възможно е посетителите ви в това, че съобщението е изпратено успешно чрез показване на съответното съобщение. Също така прилагайте имейл съобщение, за да потвърдите.
Същите съвети се отнася до грешки. Показване на грешка Ако не успеете с изпращането на съобщение - необходимостта, която може да предотврати много бъдещи спорове. Съобщението за грешка трябва да е приятелско, така че избягвайте да показвате кодовете за тревожни грешки.
Контакт Страница Дизайн
Много се прилагат за дизайна на контактната станция технически изискванияНо не забравяйте един от най-важните точки: Визуални стилове.
Ако използвате формата за контакт, направете полетата в големи, приятелски настроени и попълнете ги. Белото пространство и тире ще ви обслужват добро обслужване.
Уебсайтовете следват шаблона под формата на буквата F, когато гледате уеб страница, така че когато създавате маркуч, запомнете това. За формуляри за контакт е най-добре да поставите всички полета вертикално, вместо да поставяте своя близо до другия. Така че броят на необходимите движения на посетителите се намалява, когато формата е пълнене.
Страницата за контакт трябва да се комбинира с визуални характеристики на сайта. Последователността е ключът към съвършенството. Вижте, например, на тази страница за контакт, създадена като пощенска картичка.
И, както в случай на повечето уеб дизайн задачи; Творческият подход се изплаща перфектно. Neil Petel (Neil Patel) създаде контактната си страница под формата на инфография, като утрои броя на заявките за контакт.
Примери за формуляри за контакт
Говорейки за добри контактни формуляри, нека да видим за вдъхновение за тези примери (кликнете върху изображението, за да посетите съответния сайт):
Заключение
Преди да създадете дизайна на страницата си за контакт, уверете се, че посетителите могат да го намерят. Направете справка с него от основната навигация или долния колонтитул. Не забравяйте, че повечето хора търсят информация за контакт от дясната страна на екрана.
Помислете каква информация трябва да активирате. Възможността за изпращане на съобщение по имейл или формуляр за контакт е спешно важна. Адресът и телефонният номер също могат да бъдат полезни. Допълнителна информация, като връзки към профили в социални мрежи И работното време за някои видове бизнес също е необходимо.
Взаимодействието е важно. Прилагайте атрибута по имейл за имейл адреси и атрибута Tel: за телефонни номера (Много е полезно за посетителите от мобилни устройства). Можете да вмъкнете интерактивна карта, като например Google Maps, но разгледайте неговите ефекти за изпълнение.
Формулярът за контакт с ползваемост може да създаде или унищожи страницата за контакт. Изисква само най-необходимата информация. Можете да избегнете главоболие, показващ правилния формат на входните полета и да прилагате вътрешно валидиране. За да забравите успешно изпращане на съобщения при изпращане на формуляр.
