Jak sprawić, by Twoje formularze kontaktowe były przyjazne dla urządzeń mobilnych
Biorąc pod uwagę wzrost wykorzystania internetu mobilnego z roku na rok, obecnie rośnie nacisk na to, aby witryny były bardziej elastyczne, adaptacyjne i przyjazne dla użytkowników na małych ekranach. Jednym z kluczowych obszarów często pomijanych i mogących łatwo doprowadzić do frustracji jest formularz kontaktowy. To, czy użytkownik loguje się na stronie internetowej, w części poprzez proces rejestracji lub w końcowych etapach realizacji zamówienia online, dobra użyteczność i wysokiej jakości doświadczenie na urządzeniach mobilnych są kluczem do pomyślnego wyniku.
Wiele prostych praktyk HTML i CSS sprawi, że formularze kontaktowe będą bardziej przyjazne dla użytkownika i eleganckie dla użytkowników urządzeń mobilnych.
Wprowadzanie formularzy w stylu ułatwia sterowanie dotykiem
Zastosowanie przyjaznego dotykowi stylu CSS do tworzenia elementów sprawi, że dane wejściowe, przyciski i elementy sterujące będą znacznie przyjemniejsze dla użytkowników ekranu dotykowego.
Pola wprowadzania formularzy będą korzystać z dużych obszarów docelowych dotykowych:
input[type=text], input[type=url], input[type=email], input[type=password], input[type=tel] {-webkit-wygląd: brak; -moz-appearance: none; display: block; margin: 0; width: 100%; wysokość: 40 pikseli, wysokość linii: 40 pikseli; rozmiar czcionki: 17px; border: 1px solid #bbb;}
Inne formy kontroli wprowadzania danych również z łatwością skorzystają z niestandardowej stylizacji CSS:
Checkboxes korzystają z łatwiejszego dotknięcia:
input[type=checkbox] {width: 44px; height: 44px;-webkit-border-radius: 22px; -moz-border-radius: 22px; border-radius: 22px;border: 1px solid #bbb;}
Podobnie, elementy przycisków mogą być stylizowane i traktowane w specjalny sposób:
button[type=submit] {-webkit-appearance: none; -moz-appearance: none;display: block;margin: 1.5em 0;font-size: 1em; line-height: 2.5em;color: #333;font-weight: bold;height: 2.5em; width: 100%;background: #fdfdfd; background: -moz-linear-gradient(top, #fdfdfd 0%, #bebebe 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fdfdfd), color-stop(100%,#bebebe)); background: -webkit-linear-gradient(top, #fdfdfd 0%,#bebebe 100%); background: -o-linear-gradient(top, #fdfdfd 0%,#bebebe 100%); background: -ms-linear-gradient(top, #fdfdfd 0%,#bebebe 100%); background: linear-gradient(to bottom, #fdfdfd 0%,#bebebe 100%);border: 1px solid #bbb;-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}
Jeszcze rzadziej używane typy wejściowe, takie jak suwaki zakresów, mogą korzystać z dodatkowej stylizacji CSS:
input[type=range] {width: 100%;}input [type = range] :: - webkit-slider-thumb {-webkit-appearance: none; width: 44px; wysokość: 44px; tło: #fdfdfd; tło: -moz-liniowy-gradient (góra, #fdfdfd 0%, #bebebe 100%); background: -składka-web (liniowy, lewy górny, lewy dolny, kolor-stop (0%, # fdfdfd), kolor-stop (100%, # bebebe)); tło: -webkit-liniowy-gradient (góra, #fdfdfd 0%, # bebebe 100%); tło: -o-liniowy-gradient (góra, #fdfdfd 0%, # bebebe 100%); tło: -ms-liniowy-gradient (góra, #fdfdfd 0%, # bebebe 100%); tło: linear-gradient (do dołu, #fdfdfd 0%, # bebebe 100%), granica: 1px bryła #bbb; -webkit-border-radius: 22px; -moz-border-radius: 22px; border-radius: 22px;}
Użyj typów danych HTML5, aby uruchomić odpowiednią klawiaturę
HTML5 oferuje szereg typów danych wejściowych, które pomagają użytkownikom. Niektóre przeglądarki internetowe oferują obecnie wiele rodzimych kontrolek, w zależności od wybranego typu wejścia. Jest to szczególnie przydatne w przypadku przeglądarek mobilnych, z których niektóre mają różne klawiatury ekranowe dla różnych rodzajów danych.
Oto, w jaki sposób różne klawiatury programowalne pojawiają się na telefonie iPhone (iOS 6), w zależności od określonego typu wejścia:
Zwróć uwagę, że w tych przykładach określamy również tekst zastępczy, używając znaku placeholder atrybut. Dzięki temu możemy pokazać użytkownikowi przykład rodzaju danych, które mają wprowadzić w danym polu.
Style połączeń telefonicznych typu "kliknij, aby połączyć"
Niektóre przeglądarki mobilne próbują wykrywać numery telefonów na stronach internetowych i automatycznie konwertować je na łącza z możliwością ich wstawienia. Takie zachowanie jest przydatne dla użytkowników, ale niestety automatyczne wykrywanie nie zawsze jest niezawodne, a przeglądarki przypadkowo wybierają cyfry, które w rzeczywistości nie są numerami telefonów. Łącza mogą być trudne do wybrania, w zależności od zastosowanej dla nich stylistyki.
Na szczęście to automatyczne wykrywanie może być wyłączone zarówno na urządzeniach z systemem iOS, jak i Android, wstawiając następujący element do element strony internetowej:
Umożliwia to ręczne określanie linków telefonicznych na twoich stronach internetowych, dając Ci większą kontrolę nad tym, gdzie się pojawiają i jak wyglądają:
Tel:a[href^='tel:']:link, a[href^='tel:']:visited {color: #333;font-weight: bold;text-decoration: underline;}a [href ^ = 'tel:']: hover, a [href ^ = 'tel:']: active {text-decoration: none;}
Jedyną wadą tego ręcznego podejścia jest to, że użytkownicy komputerów stacjonarnych będą mogli zobaczyć te łącza telefoniczne, ale nie będą mogli ich aktywować. Jednym ze sposobów obejścia tego jest zastosowanie tel link tylko do małych rzutni, korzystając z zapytania o media CSS:
/* unstyled tel links as default */a[href^='tel:']:link, a[href^='tel:']:visited {color: #6f757c;font-weight: normal;text-decoration: none;} a [href ^ = 'tel:']: hover, a [href ^ = 'tel:']: active {color: # 6f757c; text-decoration: none;} / * stylizowane łącza tel. dla małych rzutni * / @ ekran multimediów i (maksymalna szerokość: 600px) {a [href ^ = 'tel:']: link, a [href ^ = 'tel:']: visited {color: # 333; font- waga: pogrubienie, dekoracja tekstu: podkreślenie;} a [href ^ = 'tel:']: hover, a [href ^ = 'tel:']: active {color: # 333; text-decoration: none;}}
Kontroluj automatyczne poprawianie i wielkie litery
W szczególności system iOS ma nawyk automatycznej korekty i wprowadzania danych wejściowych w postaci wielkiej litery. W przypadku niektórych typów pól jest to bardzo przydatne, ale dla innych może szybko wywołać frustrację. Na przykład nazwy użytkowników często łączą litery i cyfry. Na szczęście iOS pozwala kontrolować to zachowanie za pomocą autocorrect i autocapitalize atrybuty:
Dostępne są bardziej konfigurowalne opcje autocapitalize . Możesz także ustawić wartość na words , characters lub sentences , ale zastanów się dokładnie, gdzie stosujesz te atrybuty.
Uwaga na temat obsługi przeglądarki
Podczas gdy wiele przykładów w tym artykule podkreśla funkcje w Safari na iOS, niektóre wskazówki dotyczą również Androida (w zależności od wersji przeglądarki), a także innych przeglądarek mobilnych. Zaletą funkcji formularzy HTML5 jest ich stopniowe zwiększanie. Przeglądarki obsługujące funkcję będą z niej korzystać, podczas gdy przeglądarki nieobsługujące będą je po prostu ignorować.
Czy witryny mobilne wymagają formularzy przyjaznych dla urządzeń mobilnych? Jakie inne wskazówki dodasz? Daj nam znać w komentarzach.
Wyróżniony obraz / miniatura, obraz kontaktu przez Shutterstock.