Kontaktna stran je zelo pomembna, zato je njeni zasnovi treba posvetiti posebno pozornost. Bolj ko je kontaktna stran priročna, več priložnosti ima lastnik spletnega mesta. Stran s kontakti, če je pravilno oblikovana, lahko zelo dobro vpliva na stopnjo konverzije: če lahko uporabnik zlahka stopi v stik z upraviteljem ali skrbnikom mesta, bo imel pozitivno izkušnjo. Čim enostavnejši je postopek, čim manj polj ali obrazcev mora uporabnik izpolniti, tem bolje je za pretvorbo.

Dobra kontaktna stran lahko izboljša spletno stran, saj ustvarja pogoje za dober odnos med obiskovalci in lastnikom strani. Ni pomembno, kakšno spletno mesto je, lahko je spletna trgovina, novičarski portal ali spletne storitve – povratne informacije so izjemno pomembne.

Kljub temu mnogi oblikovalci podcenjujejo pomen pravilno oblikovane kontaktne strani in se osredotočajo na oblikovanje strani z glavno vsebino.

Zgodi se, da mora uporabnik hitro stopiti v stik z lastnikom spletnega mesta ali se obrniti na podporo strankam. Vendar nič ne deluje, tudi če uporabite iskanje po spletnem mestu. Včasih so potrebne informacije prisotne na spletnem mestu, vendar so "skrite", ker oblikovalec ni poskrbel zanje pravilna navigacija in uporabnik preprosto ne vidi zahtevane povezave. Obupani uporabnik je pripravljen poklicati telefon, a ga tudi ne najde.

Podjetja in spletne storitve, ki veliko pozornost posvečajo oblikovanju kontaktnih strani, ravnajo izjemno previdno. Preprosto zato, ker ta stran ne vsebuje le kontaktnih podatkov: vsebuje informacije, ki jih uporabnik potrebuje, in je interaktivna. In kar je najpomembnejše, dobra kontaktna stran spodbuja uporabnika, da znova in znova komunicira s spletnim mestom.

Kontaktna stran je neke vrste platforma za komunikacijo. Če lastnik spletnega mesta dovoli strankam, da izrazijo svoje mnenje, potem je to že povabilo k dialogu. Spletni razvijalci in uporabniki imajo lahko koristi od tega sodelovanja in zato ga je treba pravilno oblikovati.

Kot veste, je funkcionalnost pri oblikovanju eden ključnih dejavnikov. Kontaktna stran vsebuje pomembna informacija, pa ga ni preveč, kar lahko včasih vodi do napačne ocene funkcionalnosti. Lastnik spletnega mesta misli, da če je naslov postavil na stran E-naslov in telefon, potem je to čisto dovolj. Včasih ima prav.

Vendar lahko dvojno preverjanje funkcionalnosti naredi več koristi kot škode. Nedelujoče povezave ali strani, ki so preobremenjene z informacijami, škodujejo sodelovanju. Lastnik spletnega mesta morda ne bo prejel pomembnega sporočila, a najslabše se bo zgodilo, če bo posredoval zastarele ali netočne podatke. Pri oblikovanju kontaktne strani morate najprej misliti na uporabnike, saj je navsezadnje ta stran ustvarjena posebej zanje.

Lokacija

Nujno je treba zagotoviti, da je kontaktna stran uporabnikom vedno dostopna. Videz strani, tudi z ekskluzivnim dizajnom, ne pomeni nič, če uporabniki ne najdejo kontaktne strani. Včasih morate oblikovati precej zapletene kontaktne obrazce, zato morate vnaprej poskrbeti za navodila. Uporabniki bodo lažje stopili v stik z lastnikom spletnega mesta, če bodo imeli navodila po korakih.

Za oblikovalca, ki oblikuje spletno mesto, si je pomembno zapomniti dve točki:

• Primarna navigacija mora vedno vključevati kontaktna stran
• Uporabniki bi morali poiskati kontaktno stran, ko prvič obiščejo spletno mesto, ne glede na to, na katero interno stran pristanejo

Na podlagi izkušenj, ki so si jih nabrali oblikovalci, uporabniki ponavadi iščejo kontaktne podatke na desni strani strani, zato je smiselno, da tam postavite povezavo »Stik z nami«. Vendar se morate zavedati, da so te informacije za uporabnika drugotnega pomena, zato tega dela spletnega mesta ne smete narediti preveč opaznega ali vsiljivega. Najbolje deluje povezava do kontaktne strani, ki se nahaja v zgornjem desnem kotu strani. In najslabša stvar je povezava v spustnem meniju, saj je uporabniki morda preprosto ne opazijo.

Preprosti kontaktni obrazci

Za komercialna spletna mesta je kontaktna stran zelo pomembna, o tem smo že govorili zgoraj. Čeprav morda ni tako lepa kot druge strani na spletnem mestu, mora biti preprosta, uporabniku prijazna in razumljiva. Če informacije niso pravilno strukturirane, delujejo slabo ali so zavajajoče, je malo verjetno, da bo lastnik spletnega mesta lahko zgradil dolgoročne odnose s svojimi strankami.

Pogosto se zgodi, da uporabnik, ki želi pustiti sporočilo, zapusti stran, ker ne more izpolniti kontaktnega obrazca. Ali pa noče, če je predolgo ali zapleteno. Današnji uporabniki ne želijo izgubljati časa z izpolnjevanjem podrobnih obrazcev, zato je vredno razmisliti o njihovi poenostavitvi. Čim enostavnejši je obrazec, tem bolje je tudi za uporabniško izkušnjo, zato se morate osredotočiti na zbiranje osnovnih informacij.

Natančno besedilo

Če govorimo o uradnih spletnih mestih, se morate na vseh straneh, vključno s kontaktno stranjo, držati jasnega in natančnega jezika o koristih, ki jih bo uporabnik prejel, ko postane stranka podjetja. Čemu služi? Informacije, očiščene vsega nepotrebnega, so najučinkovitejši način za privabljanje in ohranjanje pozornosti. Lepo povzeti podatki naj bodo jedrnati, da ljudje zlahka najdejo, kar potrebujejo.

Ne pozabite tudi na vizualno komponento. In ne govorimo samo o privlačnih dizajnih kontaktnih obrazcev. Če ima podjetje fizični naslov, lahko uporabnikom pomagate tako, da na kontaktno stran postavite zemljevid. Za podjetja, ki se nahajajo v velikih mestih, je zelo pomembno, da uporabnikom razložijo, kako jim bo bolj priročno priti do njihove pisarne, trgovine ali skladišča.

Odzivnost kontaktne strani

Za vsako spletno podjetje je odzivnost vse. To je strogo pravilo, brez izjem. Ker se internet hitro razvija in se na trgu pojavlja vse več novih naprav, to pomeni, da morajo biti kontaktni podatki na voljo ne glede na to, kateri brskalnik ali napravo oseba uporablja. Danes je zelo enostavno izgubiti v konkurenci – vse, kar morate storiti, je, da ne optimizirate svoje kontaktne strani za prikaz na mobilnih napravah.

Integralne komponente

Kaj je bolje: elektronski naslov ali kontaktni obrazec? Uporabniki potrebujejo preprostih načinov povezave s ponudniki storitev, ki jih potrebujejo, zato jim morate stopiti na pol poti. Lahko se osredotočite na komunikacijo preko elektronske pošte ali postavite kontaktni obrazec – vsak način ima svoje prednosti in slabosti.

Kontaktni obrazci

• Kontaktni obrazec ne sme prisiliti uporabnikov, da gredo na drugo stran
• Kontaktni obrazec ni namenjen ustvarjanju račun ali se prijavite preko elektronske pošte
• Obrazec naj ima funkcijo samodokončanja, če je to mogoče
• Kontaktni obrazec naj ima funkcionalnost za pošiljanje sporočil in obvestil

E-naslov

• Komunikacija preko elektronske pošte mora biti varna za uporabnika
• Priporočljivo je, da vse poslane podatke shranite za prihodnjo uporabo.
• Delo s prejetimi sporočili je treba izvajati sistematično, prav tako morate paziti rezerva podatke

Potrditveni obrazec

Obrazci za preverjanje imajo velik pomen ko morate izvedeti več o uporabnikih spletnega mesta. Poleg tega postopek validacije nekako vodi uporabnika v pravo smer, saj ga lahko opozori na napačno vpisane podatke ali prazna polja. Tako verifikacijski obrazec stranki prihrani čas, saj bo oseba na koncu izpolnjevanja trdno prepričana, da bo njeno sporočilo šlo na pravi naslov.

Telefonske številke

Številna podjetja ne navajajo telefonskih številk na kontaktni strani, ker se bojijo, da bi nenehni klici motili delovni proces. Vendar, tako kot pri kartici, telefonske številke na kontaktni strani povečujejo zaupanje uporabnikov v blagovno znamko, kupci se počutijo varne, saj verjamejo, da bodo v težki situaciji lahko stopili v stik z zaposlenim v podjetju in se pogovorili o težavi. Telefonska številka zmanjša razdaljo med lastnikom strani in uporabnikom, kar velja tako za klasična podjetja kot za spletne storitve, ki nimajo fizičnega naslova.

Profili na družbenih omrežjih

Gumbe družbenih medijev vse pogosteje najdemo na kontaktnih straneh. Ta pristop lahko bistveno poveča zmogljivosti spletnega mesta, še posebej, če je podpora strankam zagotovljena 24/7. Mnogi ljudje menijo, da je povezovanje s podjetjem prek družbenega omrežja bolj priročno, zato je vredno razmisliti o tem načinu interakcije z uporabnikom.

Oblikovanje kontaktne strani

Resnično dobre kontaktne strani kažejo na visoko usposobljenost oblikovalcev, ki so jih oblikovali. In najpomembnejši del oblikovanja je vizualni slog kontaktne strani. V primeru kontaktnih obrazcev to pomeni velika polja, ki olajšajo pošiljanje podatkov. Če obrazec izgleda lepo, deluje bolje.

Pred začetkom projektiranja mora projektant podrobno preučiti vse kontaktne podatke, ki jih je posredoval naročnik. Vsi elementi morajo biti dobro organizirani, poleg tega morajo biti harmonično združeni. Ne pozabite tudi, da se mora kontaktna stran ujemati z barvno shemo spletnega mesta, tako da uporabnik jasno identificira spletno mesto in blagovno znamko.

Zaključek

Kontaktna stran mora biti vedno vidna. To ne velja samo za glavno stran, ampak tudi za vse druge strani spletnega mesta. Ko oblikujete kontaktno stran, morate upoštevati, da bodo uporabniki lahko stopili v stik z lastnikom spletnega mesta ali ekipo za podporo samo na način, ki ga vidijo na zavihku »Stiki«. V tem primeru je ključ do uspeha udobje in preprostost. Uporabnikom moramo dati, kar hočejo. Če mora uporabnik na spletno mesto vnesti svoje osebne podatke, potem je najbolje, da postavi osnovna vprašanja: ime, priimek, elektronski naslov. Kontaktni obrazec naj ne vsebuje nepotrebnih polj. Prav tako morate poskrbeti za prilagodljivost kontaktne strani - prikazane naj bodo v katerem koli brskalniku in na kateri koli napravi. Če je kontaktna stran oblikovana pravilno, se možnosti spletnega mesta za uspeh pri uporabnikih močno povečajo.

Od avtorja: Dobra kontaktna stran je zelo pomembna za ohranjanje odnosa z obiskovalci. Ne glede na to, ali govorimo o e-trgovini, revijah, osebnih spletnih mestih, spletnih storitvah – uporabniki običajno iščejo kontaktno stran kot prvo sredstvo komunikacije z vami. Nenavadno je, da mnogi spletni oblikovalci zanemarjajo skromno kontaktno stran, celo menijo, da je to eden najmanj pomembnih vidikov spletnega mesta. Popravimo to.

Pomen dobre kontaktne strani

Kontaktna stran je pogosto spregledana. Koliko spletnih mest ste obiskali, da bi se želeli pritožiti glede izdelka ali storitve ali postaviti vprašanje? In kako pogosto ste imeli težave s kontaktnim obrazcem?

Dobra kontaktna stran je koristna za katero koli vrsto podjetja. Sposobna je povečati zadovoljstvo strank s pomočjo pri reševanju njihovih težav. Prav tako lahko pomaga izboljšati vaše izdelke in storitve, tako da zagotovi jasno pot za dragocene povratne informacije.

Ko gre za neposredne povratne informacije uporabnikov, so lahko drugi kanali omejeni. Televizija, radio, revije, časopisi ... vse so oblike enosmerne komunikacije. Spletna komunikacija bi morala biti dvosmerna ulica; dialog med podjetjem in obiskovalcem. Od tega imata koristi obe strani, zato je dobra kontaktna stran tako pomembna.

Lokacija

Prvi korak: kam naj postavite svoje kontaktne podatke. Nima smisla imeti najboljše kontaktne strani na svetu, če je vaši obiskovalci ne najdejo. Lahko jim pomagate, če se držite nekaterih oblikovalskih tradicij.

Na splošno lahko kontaktne podatke najdete na dveh mestih:

Glavna navigacija– idealno mesto za povezavo do kontaktne strani. Obiskovalci običajno iščejo kontaktno stran na desni, ker se zdi sekundarni element. Zato boste preprosto videli povezavo do kontaktne strani kot enega zadnjih elementov navigacije po spletnem mestu.

Pogledamo lahko tudi manjšo podnavigacijo v zgornjem desnem kotu zaslona. To je tudi dragocen položaj za kontaktno stran. Mimogrede, bolje se je izogibati postavljanju kontaktne strani v spustni meni, saj jo tam zlahka zgrešite.

noga je tudi priljubljeno mesto za kontaktne informacije. Lahko vsebuje povezavo do strani s kontakti:

...ali najpomembnejši kontaktni podatki:

Težko je predvideti pretok prometa na vaši kontaktni strani, zato vam bo povezava na vsaj dveh od omenjenih mest dobro zavarovana.

Najpomembnejša stvar na kontaktni strani

Zdaj ste mirni, da bodo vaši obiskovalci lahko našli pot do kontaktne strani, čas je, da razmislite o dejanski vsebini. Začnimo z osnovami in razmislimo o informacijah, ki jih je treba predstaviti.

E-pošta/kontaktni obrazec

E-poštni naslov je najlažji način za spletno komuniciranje v poslu. Lahko pa uporabite kontaktni obrazec, ki pošlje e-pošto. Z uporabo obrazca pridobite večji nadzor nad vsebino (obvezna polja) in na ta način preprečite neželeno pošto. O kontaktnih obrazcih bomo govorili v tem članku spodaj.

Naslov

Podjetje s fizično trgovino ne sme pozabiti navesti naslova. Če imate veliko trgovin, je najbolje, da za vsako ustvarite svojo stran. Izpolnite ga s posebnimi kontaktnimi podatki za to trgovino, delovnim časom, navodili itd. To ni koristno samo za obiskovalce, temveč lahko tudi pomaga vašemu spletnemu mestu pri lokalnem iskanju.

Telefon

Prikazovanje telefonske številke ustvarja občutek zaupanja. To se pogosto vidi kot znak pravega podjetja in resnično pomaga spletnim trgovcem na drobno.

Mnoga spletna mesta so začela dodajati gumbe družbenih medijev na svojo stran s kontakti. Čeprav to morda ne koristi vsem spletnim mestom, ima za nekatere obiskovalce dodano vrednost. Še posebej, ker vedno več podjetij ponuja podporo uporabnikom prek Twitterja (včasih celo 24/7).

Dodatno

Za dobro kontaktno stran ni rešitve, ki bi ustrezala vsem. Vsako spletno mesto ali podjetje zahteva določene elemente, ki so na drugih spletnih mestih morda nepotrebni.

Na kontaktni strani je veliko dodatnih informacij ali lastnosti, ki jih boste našli koristne. Pri tradicionalnih trgovinah je dobro navesti recimo odpiralni čas. Velika podjetja bi lahko uporabila povezavo do svojega klepeta v živo, spletna mesta za e-trgovino pa bi lahko pridobila zaupanje uporabnikov s prikazom njihove številke za DDV.

Priročne informacije

Preprosta uporaba informacij bo vaše obiskovalce zaščitila pred razočaranjem nad kontaktno stranjo.
Namesto slik vključite svoje podatke kot besedilo HTML. besedilo HTML lahko kopirate in prilepite, kar obiskovalcu olajša shranjevanje vaših kontaktnih podatkov.

E-poštni naslov mora uporabljati povezavo mailto. To daje obiskovalcu možnost, da klikne nanjo in pošlje sporočilo, ne da bi moral kopirati naslov za pošiljanje in odpreti poštni odjemalec. Težava pri tej tehniki pa so lahko vsiljeni roboti, ki zbirajo elektronske naslove, povezane s povezavo mailto:. Zato se lahko odločite, da jih najprej zmedete s storitvijo, kot je mailtoenkoder.com.

Dodatna opomba: tudi telefonske številke bi moralo biti mogoče klikniti. Lansko leto smo objavili kratek nasvet o tem, kako narediti telefonsko številko občutljivo na klik. Zahvaljujoč majhnemu delčku kode pametni telefoni prepoznajo telefonske številke in omogočajo klicanje nanje. To je zelo priročno za mobilne uporabnike.

Podjetja, ki so v veliki meri odvisna od svojih fizičnih trgovin, imajo pogosto veliko koristi od interaktivnega zemljevida, ki uporabniku omogoča hitro iskanje poti do maloprodajnih lokacij. Prikaz naslova trgovine je dober, vendar dodajanje interaktivni zemljevid boljše.

Zahvale gredo Google zemljevidi Vstavljanje te uporabne lastnosti ne bi moglo biti lažje. Preprosto vnesite svoj naslov v Google Zemljevide in kliknite ikono povezave v stranski vrstici. Tam je vdelana koda za vas.

Ali ste vedeli, da lahko zemljevid prilagodite sebi? Urejate lahko barve zemljevida, dodajate oznake zemljevida po meri in ustvarite legendo. Več o tem lahko preberete nadevelopers.google.com. Razmislite lahko tudi o uporabi alternativnih storitev, kot je precej privlačen Mapbox.

Ne pozabite na optimizacijo za iskalnike

Kot obiskovalec boste takoj prepoznali naslov na kontaktni strani. Iskalniki vendar je potrebna majhna pomoč pri prepoznavanju različnih elementov.

Kontaktni obrazci

Večina spletnih mest uporablja kontaktni obrazec na svoji strani. Vendar so nekateri obrazci po nepotrebnem zapleteni in uporabniku neprijazni.

Ne glede na to, kako enostaven je videti kontaktni obrazec, je pravzaprav kombinacija več komponent. Vsi morajo sodelovati, da zagotovijo najboljšo možno uporabniško izkušnjo.

Vnosna polja

Vnosna polja, kot je npr besedilna polja, gumbi za izbiro možnosti (izbirni gumbi), potrditvena polja itd., uporabniku omogočajo vnos potrebnih informacij.

Obiskovalci spletnega mesta pogosteje izpolnjujejo kratke obrazce, ker zahtevajo manj truda. Število vnosnih polj je ravnotežje med uporabniško izkušnjo in poslovnimi potrebami. Hubspot je analiziral več kot 40.000 obrazcev in opazoval učinek povečanja števila vnosnih polj. Njihove raziskave kažejo, da bi morali uporabiti čim manj polj obrazcev in biti še posebej previdni pri kompleksnih besedilnih področjih in spustnih seznamih.

Pomagajte svojim obiskovalcem izpolniti polja v pravilni obliki. Telefonske številke in datumi so lahko past, zlasti za mednarodne obiskovalce. V pomoč vam bo atribut placeholder HTML5.

Nato se prepričajte, da ste izbrali zahtevana polja (običajno so označena z zvezdico *). Najbolj varno je jasno označiti obvezna in neobvezna polja.
Nazadnje je koristno označiti aktivno polje. Lahko je označena komaj ali zelo svetlo - po želji.

Spodaj je primer kontaktnega obrazca iz vadnice Jima Nielsena. Za obvezna polja uporablja rdečo zvezdico, daje nasvete glede formatov in poudarja aktivno polje.

Preverjanje obrazca

Notranje preverjanje lahko tudi prepreči nekatere bolezni kontaktnega obrazca. Zelo nadležno je pošiljanje in ponovno pošiljanje obrazca, ker ste vnesli napačne podatke ali podatke v napačni obliki. Kot že omenjeno, je obiskovalcem najbolje pomagati s prikazom zahtevane oblike (npr. datum, telefonska številka ...).

Gumbi

Brez gumba za oddajo ni kontaktnega obrazca. Moralo bi biti čisto na koncu. Za besedilo gumba uporabite »pošlji sporočilo« namesto »pošlji«, da stranke spomnite, kaj počnejo.
Običajni standard iz lanskega leta je vključitev gumba "ponastavi" ali "počisti obrazec". Ne počni tega. Nehote bo kliknjen. Nič ni hujšega kot vtipkati premišljeno, podrobno sporočilo in ga izgubiti zaradi gumba za ponastavitev.

Odziv

Obiskovalec je vnesel svoje kontaktne podatke, napisal sporočilo in kliknil gumb »pošlji«. Kaj pa zdaj? Je sporočilo prispelo ali ne?

Prepričajte svoje obiskovalce, da je bilo sporočilo uspešno poslano, tako da prikažete ustrezno sporočilo. Dobra ideja je tudi potrditveno e-poštno sporočilo.

Enak nasvet velja za napake. Prikazovanje napake, ko sporočilo ni poslano, je nujno, kar lahko prepreči številne prihodnje spore. Sporočilo o napaki mora biti prijazno, zato se izogibajte prikazovanju zaskrbljujočih kod napak.

Dizajn kontaktne strani

Obstaja veliko aplikacij za oblikovanje kontaktne strani. tehnične zahteve, a ne pozabimo enega od najpomembnejši trenutki: vizualni slogi.

Če uporabljate kontaktni obrazec, naj bodo polja velika, prijazna in vabljiva za izpolnjevanje. Prazen prostor in oblazinjenje vam bosta dobro služila.

Obiskovalci spletnega mesta sledijo vzorcu v obliki črke F, ko si ogledujejo spletno stran, zato upoštevajte to pri ustvarjanju oznake. Pri kontaktnih obrazcih je najbolje, da vsa polja razporedite navpično, namesto da jih postavite eno poleg drugega. S tem se zmanjša število potrebnih premikov oči obiskovalca pri izpolnjevanju obrazca.

Kontaktna stran mora biti skladna z vizualnimi značilnostmi spletnega mesta. Doslednost je ključ do odličnosti. Poglejte si na primer to kontaktno stran, oblikovano tako, da izgleda kot razglednica.

In kot pri večini nalog, povezanih s spletnim oblikovanjem; ustvarjalnost se zelo obrestuje. Neil Patel je svojo kontaktno stran ustvaril kot infografiko in s tem potrojil število prošenj za stike.

Primeri kontaktnih obrazcev

Ko že govorimo o dobrih kontaktnih obrazcih, poglejmo te primere za navdih (kliknite sliko, da obiščete ustrezno spletno mesto):

Zaključek

Preden oblikujete svojo kontaktno stran, se prepričajte, da jo obiskovalci lahko najdejo. Povežite se do njega iz glavne navigacije ali noge. Ne pozabite, da večina ljudi išče kontaktne podatke na desni strani zaslona.

Razmislite, katere informacije morate vključiti. Bistvena je možnost pošiljanja sporočila prek e-pošte ali kontaktnega obrazca. V pomoč sta lahko tudi naslov in telefonska številka. Dodatne informacije, kot so povezave do profilov v v socialnih omrežjih in delovni čas za nekatere vrste poslovanja je prav tako potreben.

Interaktivnost je pomembna. Uporabite atribut mailto za e-poštne naslove in atribut tel: za telefonske številke(zelo uporabno za obiskovalce z mobilnih naprav). Vstavite lahko interaktivni zemljevid, kot je Google Maps, vendar upoštevajte posledice delovanja.

Uporabnost kontaktnega obrazca lahko povzroči ali uniči kontaktno stran. Zahtevajte samo najnujnejše informacije. Preglavicam se lahko izognete s prikazom pravilne oblike vnosnih polj in uporabo notranjega preverjanja. Pri oddaji obrazca ne pozabite prikazati uspešne oddaje sporočila.

Je vaša spletna stran že optimizirana za mobilne naprave? Če še ni, ni konec sveta. Sodobni brskalniki vsebujejo novosti, kot sta povečava s prsti in samodejno prilagajanje velikost pisave.

Če nimate časa ali denarja za optimizacijo svojega spletnega mesta za mobilne naprave, je tukaj deset preprostih stvari, ki jih lahko storite takoj, da bo vaše spletno mesto videti spodobno za mobilne obiskovalce.

1. Nastavite pravilne atribute polja obrazca

Če na svojem spletnem mestu uporabljate vnosna polja za uporabniško ime ali naslov, izklopite samodejno popravljanje in vklopite samodejno pisanje z velikimi črkami:

Tvoje ime:

Če tega ne storite, bo avtomatski sistem za vnos T9 zamenjal imena, na primer »Erwan«, z nečim podobnim »Erevan«.

Nastavitev samodejne uporabe prve Velike črke v vrstah besed bo uporabnike osvobodilo potrebe po vsaki uporabi velikih črk - to pomeni, da se bo vsaka beseda začela z veliko začetnico (na primer »Ken Burns« bo postal »Ken Burns«):

Pomislite na vse pasti, na katere lahko uporabnik naleti na vašem spletnem mestu.

In ne da bi šel daleč od teme. Če vaše spletno mesto od uporabnika zahteva e-pošto, uporabite polje za e-pošto, da obiskovalcu ne bo treba vnašati simbola @ s tipkovnice mobilne naprave:

Vaš e-poštni naslov:

2. Nastavite ustrezno širino za mobilne naprave

Odprite svoje spletno mesto v brskalniku vašega računalnika in zmanjšajte širino okna programa, dokler v njem ne morete ničesar prebrati.

To bo najmanjša dovoljena širina. Vzemite trenutno vrednost širine in jo nastavite na lastnost @viewport z nastavitvijo meta oznake v glavi strani:

Ko bo vaše spletno mesto naslednjič odprto na Mobilna naprava, bo širina, ki jo določite, samodejno nastavljena. Obiskovalcu spletnega mesta ne bo treba uporabljati Zooma:

Ta slika prikazuje dodaten prostor na desni:

In ta slika prikazuje pravilno nastavljeno vrednost širine.

Če je vaše spletno mesto zasnovano na tekoči postavitvi in ​​deluje z vsemi velikostmi zaslona, ​​postane vaša naloga še lažja. Eksperimentirati morate s širino, pri kateri je spletno mesto videti lepo in berljivo na mobilni napravi, in to vrednost nastaviti v metaoznaki.

3. Nastavite širino slik na 100 %

Zdaj, ko ima vaše spletno mesto določeno širino, bodo nekatere slike postale zelo široke. To se prej ni zgodilo, ker so ločljivosti namiznih monitorjev precej široke in večina slik ustreza širini:

Da bi se temu izognili, nastavite največjo širino svojih slik na 100 %. Tako bodo slike samodejno spremenile velikost v primerih, ko so prevelike za zaslon mobilne naprave. Slogom CSS vašega spletnega mesta dodajte spodnjo kodo:

img (največja širina: 100 %)

Če za ozadje uporabljate slike, ki niso oznake img, preprosto nastavite lastnost velikosti ozadja CSS tako, da vsebuje. To bo povzročilo spremembo velikosti slike ozadja, ko ločljivost zaslona ne bo zadostovala za prikaz v 100-odstotnem merilu:

Glava (ozadje: url(header.png) 50 % brez ponavljanja; velikost ozadja: vsebuje)

Če vas skrbi, da bo slika postala manj jasna, potem ste zaman zaskrbljeni. Na sodobnih mobilnih napravah se to ne bo zgodilo.

Ko obiskovalec uporabi povečavo, brskalnik izkoristi večjo jasnost slike. Vendar se prepričajte, da vaše spletno mesto v meta oznaki nima lastnosti user-scalable=no. Če temu ni tako, uporabnik ne bo mogel uporabljati povečave:

4. Nastavite širino vnosnih polj na 100 %

Ko je širina slik nastavljena prek lastnosti max-width, naredite podoben trik z vnosnimi polji. Samo dodajte v datoteko CSS svojega spletnega mesta:

vnos, besedilno polje (max-width:100%)

Pri ogledu spletnega mesta na mobilni napravi bo ta možnost preprečila, da bi se vnosna polja razširila izven zaslona.

5. Bodite previdni pri uporabi Onemogoči za gumbe za potrditev oddaje obrazca

Da bi se izognili večkratnim klikom na gumb za potrditev oddaje obrazca, morate po prvem kliku nanj onemogočiti oddajo.

Za razliko od namiznih naprav mobilne naprave pogosto izgubijo povezavo z omrežjem. Če gumb naredite neaktivnega, ga uporabnik ne bo mogel znova klikniti. In v tej situaciji ne pozabite, da vzrok za takšno situacijo morda ni le izguba omrežja.

Med dohodni klic Brskalnik mobilne naprave se bo zaprl. In potem se bo ponovila situacija z blokiranim potrditvenim gumbom. Uporabnik ne bo mogel oddati že izpolnjenega obrazca.

In če se vseeno odločite deaktivirati gumb za oddajo, to storite za nekaj sekund.

6. V dolgih vrsticah uporabljajte prelom besed

Včasih je treba prikazati dolge nize, kot so primeri kode, povezave, številke bančnih računov. Če se izkaže, da je vaše spletno mesto ozko, da bi lahko prikazalo celotno vrstico, bo morda "šlo" čez zaslon mobilne naprave:

Izognite se tej situaciji z uporabo lastnosti preloma besed. To se bo prelomilo, ko črta doseže rob zaslona. Uporabnik bo videl vse, kar potrebuje, brez premikanja:

Vaše geslo: 435143a1b5fc8bb70a3aa9b10f6673a8

7. Bodite previdni pri uporabi presledkov

Običajna praksa pri prikazovanju dolgih nizov je uporaba presledkov na vsakih pet znakov. Tako si jih bo uporabnik lažje zapomnil za vnos v drugo aplikacijo.

Vendar pameten uporabnik tega ne bo naredil ročno. Uporabil bo odložišče. V primeru presledkov pa jih bo moral odstraniti. Kako priročno in hitro je odstranjevanje presledkov na mobilni napravi?

Da bi se izognili takim situacijam, uporabite zamike namesto presledkov med skupinami znakov:

Vaša koda: 435143a1b5fc8bb

Kot lahko vidite, "presledki" med znaki ostajajo, vendar s to razliko, da pri kopiranju in lepljenju ni treba ničesar brisati. Vsaj priročno je in prihrani čas!

8. Prednosti medijskih poizvedb

Ustvarite lahko sloge po meri, ki bodo delovali samo pri ogledu spletnega mesta na mobilnih napravah (ali prikazani v majhnem oknu brskalnika), medtem ko bo običajna različica spletne strani delovala na namiznem računalniku. Če želite to narediti, uporabite ciljne sloge znotraj medijskih poizvedb, kot je prikazano v spodnjem primeru:

Zdaj poznate še en trik, s katerim bo vaša spletna stran videti bolje na mobilni napravi.

9. Izogibajte se fiksnemu položaju

Če je glava ali stranska vrstica vašega spletnega mesta postavljena na določen način, je lastnost položaja CSS nastavljena na fiksno. Bodi previden.

Ko tako označite, bo vaš naslov rasel s stranjo in morda zavzel celoten prostor na zaslonu:

Najenostavnejša rešitev je, da ne uporabljate fiksnih položajev elementov za prikaz na mobilnih napravah.

Spodnji primer z uporabo metode medijske poizvedbe bo pokazal, kako to izvesti:

10. Uporabljajte standardne pisave

Uporaba pisav po meri daje spletnemu mestu videz profesionalnega izdelka, vendar morajo uporabniki prenesti datoteke s pisavami. To se naredi, preden se spletno mesto prikaže na napravi.

Obseg takih datotek je praviloma precej velik. Na mobilni napravi lahko ta postopek traja dolgo. V tem času na zaslonu namesto besedila vidimo prazen prostor.