Kode

Hvordan lage kontaktskjemaer mobilvennlig

Gitt økningen i mobilnettbruk år etter år, er det nå økt fokus på å gjøre nettsteder mer responsive, adaptive og brukervennlige for besøkende på små skjermer. Et nøkkelområde som ofte overses, og som lett kan føre til en bølge av frustrasjon, er kontaktskjemaet. Enten en bruker logger inn på et nettsted, delvis gjennom en påmeldingsprosess eller i sluttfasen av å fullføre en online bestilling, er god brukervennlighet og en høyverdig opplevelse på mobil nøkkelen til et vellykket resultat.

Mange enkle HTML- og CSS-rutiner vil gjøre kontaktskjemaene mer brukervennlige og elegante for besøkende på mobile enheter.

Stilformatinnganger for lettere berøringskontroll

Bruk av berøringsvennlig CSS-styling for å danne elementer vil gjøre innganger, knapper og styre en mye bedre opplevelse for berøringsskjermbrukere.

Formfeltfelt vil ha nytte av store berøringsmålområder:

input styled
input[type=text], input[type=url], input[type=email], input[type=password], input[type=tel] {  -webkit-utseende: ingen;  -moz-utseende: ingen; display: blokk; margin: 0; bredde: 100%;  høyde: 40px; linjehøyde: 40px;  skriftstørrelse: 17px; grense: 1px solid #bbb;}

Andre former for inngangskontroll vil også enkelt ha nytte av tilpasset CSS-styling:

Styled form controls

Sjekkerboksene har nytte av å bli gjort lettere å trykke på: 

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åte kan knappelementer styles og gis spesiell 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;}

Enda mindre vanlige inntastetyper, for eksempel glidebrytere, vil ha nytte av tilleggs CSS-styling: 

input[type=range] {width: 100%;}  input [type = range] :: - webkit-skyve-tommel {-webkit-utseende: ingen; bredde: 44px;  høyde: 44px; bakgrunn: #fdfdfd;  bakgrunn: -moz-lineær-gradient (topp, #fdfdfd 0%, #bebebe 100%);  bakgrunn: -webkit-gradient (lineær, venstre topp, venstre bunn, fargestopp (0%, # fdfdfd), fargestopp (100%, # bebebe));  bakgrunn: -webkit-lineær-gradient (topp, #fdfdfd 0%, # bebebe 100%);  bakgrunn: -o-lineær-gradient (topp, #fdfdfd 0%, # bebebe 100%);  bakgrunn: -ms-lineær-gradient (topp, #fdfdfd 0%, # bebebe 100%);  bakgrunn: lineær gradient (til bunn, #fdfdfd 0%, # bebebe 100%); grense: 1px solid #bbb; -webkit-grense-radius: 22px;  -moz-grense-radius: 22px;  border-radius: 22px;}

Bruk HTML5-inngangstyper for å utløse riktig tastatur

HTML5 tilbyr en rekke inngangstyper for å hjelpe brukeropplevelsen. Enkelte nettlesere tilbyr nå flere innfødte kontroller, avhengig av hvilken inntastetype som er valgt. Dette er spesielt nyttig for mobile nettlesere, hvorav noen har forskjellige tastaturer på skjermen for ulike former for data.

Slik viser de forskjellige myke tastaturene på iPhone (iOS 6), avhengig av spesifisert inngangstype:
URL keyboard
Tel keyboard
Email keyboard
Time picker
Date picker

Merk i disse eksemplene at vi også spesifiserer plassholdertekst ved hjelp av placeholder Egenskap. Dette gjør at vi kan vise brukeren et eksempel på typen data de forventes å skrive inn i et bestemt felt.

Stil ring-til-telefon-linker

Noen mobile nettlesere prøver å oppdage telefonnumre på nettsider og konvertere dem automatisk til tappable links. Denne oppførselen er nyttig for besøkende, men dessverre er automatisk deteksjon ikke alltid pålitelig, og nettlesere vil ved et uhell målrette sifre som egentlig ikke er telefonnumre. Koblingene kan også være vanskelig å trykke, avhengig av stilen som er påført dem.

Heldigvis kan denne auto-deteksjonsadferdigheten deaktiveres på både iOS- og Android-enheter ved å sette inn følgende element i element av nettsiden:

Dette gjør det mulig å manuelt angi telefonkoblinger på websidene dine, noe som gir deg mye større kontroll over hvor de ser ut og hvordan de ser ut: 

Tel: a[href^='tel:']:link, a[href^='tel:']:visited {color: #333;font-weight: bold;text-decoration: underline;}  a [href ^ = 'tel:']: svever, en [href ^ = 'tel:']: aktiv {text-decoration: none;}

Den eneste ulempen ved denne manuelle tilnærmingen er at desktop besøkende også vil kunne se disse telefonkoblingene, men vil ikke kunne aktivere dem. En vei rundt dette er å søke tel link styling bare til små visningsporte, ved hjelp av et CSS-mediesøk: 

/* unstyled tel links as default */a[href^='tel:']:link, a[href^='tel:']:visited {color: #6f757c;font-weight: normal;  tekst-dekorasjon: ingen;} a [href ^ = 'tel:']: svever, en [href ^ = 'tel:']: aktiv {farge: # 6f757c; tekstdekorasjon: ingen;} / * stilte telekoblinger for små visningsporter * / @ mediaskjerm og (maks bredde: 600px) {a [href ^ = 'tel:']: lenke, en [href ^ = 'tel:']: besøkt {farge: # 333; font- vekt: fet; tekst-dekorasjon: understreke;} a [href ^ = 'tel:']: svever, en [href ^ = 'tel:']: aktiv {farge: # 333; tekstdekorasjon: ingen;}}

Kontroller automatisk korrigering og kapitalisering

spesielt iOS har en vane med automatisk korrigering og kapitalisering av skjemainngangsdata. For noen felttyper er dette veldig nyttig, men for andre kan det raskt forårsake frustrasjon. For eksempel blander brukernavn ofte bokstaver og tall. Heldigvis gir iOS deg muligheten til å kontrollere denne oppførselen ved hjelp av autocorrect og autocapitalize attributter:

Det er flere konfigurerbare alternativer for autocapitalize . Du kan også sette verdien til words , characters eller sentences , men tenk nøye på hvor du bruker disse egenskapene.


Et notat om nettleserstøtte

Mens mange eksempler i denne artikkelen uthever funksjoner på iOS Safari, gjelder noen av tipsene også for Android (avhengig av nettleserversjonen), samt andre mobile nettlesere. Den gode tingen med HTML5-formfunksjoner er at de gradvis forbedrer seg. Nettlesere som støtter en funksjon, vil dra nytte av det, mens ikke-støttende nettlesere generelt bare vil ignorere det.

Trenger mobilnettsteder mobilvennlige skjemaer? Hvilke andre tips vil du legge til? Gi oss beskjed i kommentarene.

Utvalgt bilde / miniatyrbilde, kontakt bilde via Shutterstock.

brukervennlighet mobil css for mobil lag skjemaer på mobil mobile vennlige former styling former for mobil styling html5