Sådan laver du dine kontaktformuleringer mobilvenlig
I takt med stigningen i mobilwebbruget år for år er der nu et øget fokus på at gøre hjemmesider mere lydhør, adaptive og brugervenlige for besøgende på små skærme. Et nøgleområde, der ofte overses, og som nemt kan føre til en bølge af frustration er kontaktformularen. Uanset om en bruger logger ind på et websted, delvist gennem en tilmeldingsproces eller i de afsluttende faser af at gennemføre en online-ordre, er god brugbarhed og en højkvalitets oplevelse på mobil nøglen til et vellykket resultat.
Mange enkle HTML- og CSS-fremgangsmåder gør dine kontaktformularer mere brugervenlige og elegante for besøgende på mobile enheder.
Style formindgange for lettere berøringskontrol
Anvendelse af berøringsvenlig CSS styling til at danne elementer vil gøre input, knapper og styre en meget pænere oplevelse for touchscreen brugere.
Formularfeltfelter vil få gavn af store berøringsmålområder:
input[type=text], input[type=url], input[type=email], input[type=password], input[type=tel] {-webkit-udseende: ingen; -moz-udseende: none; display: block; margin: 0; width: 100%; højde: 40px; liniehøjde: 40px; skrifttypestørrelse: 17px; grænse: 1px solid #bbb;}
Andre former for input kontrol ville også nemt komme ud af brugerdefineret CSS styling:
Afkrydsningsfelterne gør det lettere at trykke:
input[type=checkbox] {width: 44px; height: 44px;-webkit-border-radius: 22px; -moz-border-radius: 22px; border-radius: 22px;border: 1px solid #bbb;}
På samme måde kan knapelementer styles og gives speciel behandling:
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;}
Endnu mindre almindelige inputtyper, som f.eks. Glidere i rækkevidde, vil få gavn af yderligere CSS-styling:
input[type=range] {width: 100%;}input [type = interval] :: - webkit-skyder-tommel {-webkit-udseende: none; bredde: 44px; højde: 44px; baggrund: #fdfdfd; baggrund: -moz-lineær-gradient (top, #fdfdfd 0%, #bebebe 100%); baggrund: -webkit-gradient (lineær, venstre top, venstre bund, farve stop (0%, # fdfdfd), farve stop (100%, # bebebe)); baggrund: -webkit-lineær-gradient (top, #fdfdfd 0%, # bebebe 100%); baggrund: -o-lineær gradient (top, #fdfdfd 0%, # bebebe 100%); baggrund: -ms-lineær-gradient (top, #fdfdfd 0%, # bebebe 100%); baggrund: lineær gradient (til bund, #fdfdfd 0%, # bebebe 100%); grænse: 1px solid #bbb; -webkit-grænse-radius: 22px; -moz-grænse-radius: 22px; grænse-radius: 22px;}
Brug HTML5-inputtyper til at udløse det relevante tastatur
HTML5 tilbyder en række inputtyper til brug for brugeroplevelsen. Nogle browsere tilbyder nu flere indfødte kontroller, afhængigt af den valgte indtastetype. Dette er især nyttigt for mobile browsere, hvoraf nogle har forskellige tastaturer på skærmen til forskellige former for data.
Sådan vises de forskellige bløde tastaturer på iPhone (iOS 6), afhængigt af den angivne indgangstype:
Bemærk i disse eksempler, at vi også angiver pladsholdertekst ved hjælp af placeholder attribut. Dette gør det muligt for os at vise brugeren et eksempel på den type data, de forventes at indtaste i et bestemt felt.
Stil ring til telefonopkald
Nogle mobilbrowsere forsøger at registrere telefonnumre på websider og konvertere dem automatisk til tappable links. Denne adfærd er nyttig for besøgende, men desværre er automatisk detektion ikke altid pålidelig, og browsere vil ved et uheld målrette cifre, der ikke rent faktisk er telefonnumre. Forbindelserne kan også være vanskelige at trykke på, afhængigt af den styling, der er påført dem.
Heldigvis kan denne auto-detekteringsadfærd deaktiveres på både iOS- og Android-enheder ved at indsætte følgende element i element på websiden:
Dette giver dig mulighed for manuelt at angive telefonforbindelser på dine websider, hvilket giver dig meget større kontrol over, hvor de vises, og hvordan de ser ud:
Tel:a[href^='tel:']:link, a[href^='tel:']:visited {color: #333;font-weight: bold;text-decoration: underline;}a [href ^ = 'tel:']: svæver, en [href ^ = 'tel:']: aktiv {text-decoration: none;}
Den eneste ulempe ved denne manuelle tilgang er, at stationære besøgende også vil kunne se disse telefonforbindelser, men vil ikke kunne aktivere dem. En vej rundt om dette er at anvende tel link styling kun til små viewports ved hjælp af en CSS medie forespørgsel:
/* unstyled tel links as default */a[href^='tel:']:link, a[href^='tel:']:visited {color: #6f757c;font-weight: normal;tekst-dekoration: none;} a [href ^ = 'tel:']: svæver, en [href ^ = 'tel:']: aktiv {farve: # 6f757c; tekstindretning: ingen;} / * stylede telelink for små viewports * / @ medie skærm og (maxbredde: 600px) {a [href ^ = 'tel:']: link, en [href ^ = 'tel:']: besøgt {farve: # 333; font- vægt: fed; tekst-dekoration: understrege;} a [href ^ = 'tel:']: svæver, en [href ^ = 'tel:']: aktiv {farve: # 333; tekstdekoration: ingen;}}
Kontrol automatisk korrigering og kapitalisering
især iOS har en vane med automatisk korrigering og kapitalisering af forminddata. For nogle felttyper er dette meget nyttigt, men for andre kan det hurtigt forårsage frustration. For eksempel blander brugernavne ofte bogstaver og tal. Heldigvis tillader iOS dig at styre denne adfærd ved hjælp af autocorrect og autocapitalize egenskaber:
Der er flere konfigurerbare muligheder for autocapitalize . Du kan også indstille værdien til words , characters eller sentences , men tænk nøje på, hvor du anvender disse egenskaber.
En note om browser support
Mens mange af eksemplerne i denne artikel fremhæver funktioner på iOS Safari, gælder nogle af tipsene også for Android (afhængigt af browser versionen) og andre mobile browsere. Det gode ved HTML5-formularfunktioner er, at de gradvist forbedrer. Browsere, der understøtter en funktion, vil drage fordel af det, mens ikke-understøttende browsere generelt kun ignorerer det.
Har mobilwebsteder kræve mobilvenlige formularer? Hvilke andre tips vil du tilføje? Lad os vide i kommentarerne.
Fremhævet billede / miniaturebillede, kontakt billede via Shutterstock.