Kontaktná stránka je veľmi dôležitá, preto jej dizajnu treba venovať osobitnú pozornosť. Čím je kontaktná stránka pohodlnejšia, tým viac príležitostí má vlastník stránky. Kontaktná stránka, ak je navrhnutá správne, môže veľmi dobre ovplyvniť mieru konverzie: ak môže používateľ ľahko kontaktovať správcu lokality alebo správcu, bude mať pozitívnu skúsenosť. Čím je proces jednoduchší, čím menej polí alebo formulárov musí používateľ vyplniť, tým lepšie pre konverziu.

Dobrá kontaktná stránka môže zlepšiť web, pretože vytvára podmienky pre dobrý vzťah medzi návštevníkmi a vlastníkom stránky. Nezáleží na tom, o aký druh stránky ide, môže to byť internetový obchod, spravodajský portál alebo webová služba – spätná väzba je mimoriadne dôležitá.

Napriek tomu mnohí dizajnéri podceňujú dôležitosť správne navrhnutej kontaktnej stránky so zameraním na dizajn stránok hlavného obsahu.

Stáva sa, že používateľ musí rýchlo kontaktovať vlastníka stránky alebo kontaktovať zákaznícku podporu. Nič však nefunguje, aj keď použijete vyhľadávanie na stránke. Niekedy sú potrebné informácie na stránke prítomné, ale sú „skryté“, pretože sa o ne nestaral dizajnér správna navigácia a používateľ jednoducho nevidí požadovaný odkaz. Zúfalý používateľ je pripravený zavolať na telefón, no ani ho nevie nájsť.

Spoločnosti a webové služby, ktoré venujú veľkú pozornosť dizajnu kontaktných stránok, konajú mimoriadne opatrne. Jednoducho preto, že táto stránka obsahuje viac než len kontaktné informácie: obsahuje informácie, ktoré používateľ potrebuje, a je interaktívna. A čo je najdôležitejšie, dobrá kontaktná stránka podnecuje používateľa k opakovanej interakcii s webom.

Kontaktná stránka je akousi platformou pre komunikáciu. Ak majiteľ stránky umožňuje klientom vyjadriť svoje názory, potom je to už výzva na dialóg. Weboví vývojári a používatelia môžu ťažiť z tejto spolupráce a práve z tohto dôvodu musí byť navrhnutá správne.

Ako viete, funkčnosť v dizajne je jedným z kľúčových faktorov. Kontaktná stránka obsahuje dôležitá informácia, nie je ho však príliš veľa, čo môže niekedy viesť k chybnému posúdeniu funkčnosti. Majiteľ stránky si myslí, že ak na stránku umiestnil adresu Email a telefón, potom to úplne stačí. Niekedy má pravdu.

Dvojitá kontrola funkčnosti však môže priniesť viac úžitku ako škody. Nefunkčné odkazy alebo stránky, ktoré sú preplnené informáciami, sú škodlivé pre zapojenie. Vlastník stránky nemusí dostať dôležitú správu, no to najhoršie sa stane, ak poskytne neaktuálne alebo nepresné informácie. Pri navrhovaní kontaktnej stránky musíte najprv myslieť na používateľov, pretože táto stránka je napokon vytvorená špeciálne pre nich.

Poloha

Je nevyhnutné zabezpečiť, aby kontaktná stránka bola pre používateľov vždy prístupná. Vzhľad stránky, dokonca aj s exkluzívnym dizajnom, neznamená nič, ak používatelia nemôžu nájsť kontaktnú stránku. Niekedy musíte navrhnúť pomerne zložité kontaktné formuláre, takže sa musíte vopred postarať o pokyny. Pre používateľov bude jednoduchšie kontaktovať vlastníka stránky, ak budú mať k dispozícii podrobného sprievodcu.

Pre dizajnéra, ktorý navrhuje webovú stránku, je dôležité pamätať na dva body:

• Primárna navigácia by mala vždy obsahovať kontaktná stránka
• Používatelia by mali nájsť kontaktnú stránku pri prvej návšteve lokality bez ohľadu na to, na ktorú internú stránku sa dostanú

Na základe skúseností, ktoré dizajnéri nazbierali, používatelia majú tendenciu hľadať kontaktné informácie na pravej strane stránky, takže má zmysel umiestniť tam odkaz „Kontaktujte nás“. Musíte si však uvedomiť, že tieto informácie sú pre používateľa druhoradé, preto by ste túto časť stránky nemali robiť príliš nápadnou alebo rušivou. Najlepšie funguje odkaz na kontaktnú stránku v pravom hornom rohu stránky. A najhoršia vec je odkaz v rozbaľovacej ponuke, pretože používatelia si to jednoducho nevšimnú.

Jednoduché kontaktné formuláre

Pre komerčné stránky je kontaktná stránka veľmi dôležitá, o tom už bolo diskutované vyššie. Aj keď nemusí byť taká krásna ako iné stránky na webe, mala by byť jednoduchá, užívateľsky prívetivá a zrozumiteľná. Ak informácie nie sú správne štruktúrované, fungujú zle alebo sú zavádzajúce, potom je nepravdepodobné, že vlastník stránky bude schopný vybudovať dlhodobé vzťahy so svojimi zákazníkmi.

Často sa stáva, že používateľ, ktorý chce zanechať správu, opustí stránku, pretože nemôže vyplniť kontaktný formulár. Alebo nechce, ak je to príliš dlhé alebo zložité. Dnešní používatelia nechcú strácať čas vypĺňaním podrobných formulárov, preto sa oplatí popremýšľať o ich zjednodušení. Čím jednoduchší formulár, tým lepšie, aj pre používateľskú skúsenosť, preto sa treba zamerať na zber základných informácií.

Presné znenie

Ak hovoríme o oficiálnych webových stránkach, potom na všetkých stránkach, vrátane kontaktnej stránky, musíte dodržiavať jasný a presný jazyk o výhodách, ktoré používateľ získa tým, že sa stane klientom spoločnosti. Načo to je? Informácie zbavené všetkého nepotrebného sú najefektívnejším spôsobom, ako upútať a udržať pozornosť. Pekne zhrnuté údaje by mali byť stručné, aby ľudia ľahko našli to, čo potrebujú.

Tiež nezabudnite na vizuálnu zložku. A nehovoríme len o atraktívnych dizajnoch kontaktných formulárov. Ak má spoločnosť fyzickú adresu, môžete používateľom pomôcť umiestnením mapy na kontaktnú stránku. Pre firmy sídliace vo veľkých mestách je veľmi dôležité užívateľom vysvetliť, ako sa im bude pohodlnejšie dostať do ich kancelárie, predajne či skladu.

Odozva kontaktnej stránky

Pre každý online obchod je odozva všetkým. Toto je prísne pravidlo, žiadne výnimky. Keďže sa internet vyvíja rýchlym tempom a na trhu sa objavuje stále viac nových zariadení, znamená to, že kontaktné informácie musia byť dostupné bez ohľadu na to, aký prehliadač alebo zariadenie osoba používa. Dnes je veľmi ľahké stratiť sa v konkurencii – stačí, ak svoju kontaktnú stránku neoptimalizujete na zobrazenie na mobilných zariadeniach.

Integrálne komponenty

Čo je lepšie: e-mailová adresa alebo kontaktný formulár? Používatelia potrebujú jednoduchými spôsobmi spojenie s poskytovateľmi služieb, ktoré potrebujú, takže im musíte vyjsť v ústrety. Môžete sa zamerať na komunikáciu cez email alebo umiestniť kontaktný formulár – každý spôsob má svoje pre a proti.

Kontaktné formuláre

• Kontaktný formulár by nemal nútiť používateľov prejsť na inú stránku
• Kontaktný formulár nie je určený na vytvorenie účtu alebo sa prihláste cez email
• Ak je to možné, formulár by mal mať funkciu automatického dopĺňania.
• Kontaktný formulár by mal mať funkciu na odosielanie správ a upozornení

Email

• Komunikácia prostredníctvom e-mailu musí byť pre používateľa bezpečná
• Všetky odoslané údaje je vhodné uložiť pre budúce použitie.
• Práca s prijatými správami by sa mala vykonávať systematicky, musíte sa tiež postarať zálohovanieúdajov

Overovací formulár

Overovacie formuláre majú veľký význam keď potrebujete vedieť viac o používateľoch stránok. Okrem toho proces overovania do istej miery vedie používateľa správnym smerom, pretože ho môže upozorniť na nesprávne zadané údaje alebo prázdne polia. Overovací formulár teda šetrí klientom čas, pretože na konci procesu vyplnenia bude osoba pevne presvedčená, že jej správa bude doručená na správnu adresu.

Telefónne čísla

Mnohé spoločnosti neuvádzajú telefónne čísla na svojej kontaktnej stránke, pretože sa obávajú, že neustále telefonáty narušia pracovný proces. Telefónne čísla na kontaktnej stránke však rovnako ako pri karte zvyšujú dôveru používateľov k značke, zákazníci sa cítia bezpečne a veria, že v ťažkej situácii budú môcť kontaktovať zamestnanca spoločnosti a prediskutovať problém. Telefónne číslo znižuje vzdialenosť medzi vlastníkom stránky a používateľom, čo platí pre tradičné spoločnosti aj online služby, ktoré nemajú fyzickú adresu.

Profily na sociálnych sieťach

Tlačidlá sociálnych médií sa čoraz častejšie nachádzajú na stránkach kontaktov. Tento prístup môže výrazne zlepšiť možnosti stránky, najmä ak je zákaznícka podpora poskytovaná 24 hodín denne, 7 dní v týždni. Pre mnohých ľudí je pohodlnejšie spojiť sa so spoločnosťou prostredníctvom sociálnej siete, preto stojí za to premýšľať o tomto spôsobe interakcie s používateľom.

Návrh kontaktnej stránky

Naozaj dobré kontaktné stránky naznačujú vysokú kvalifikáciu dizajnérov, ktorí ich navrhli. A najdôležitejšou súčasťou dizajnu je vizuálny štýl kontaktnej stránky. V prípade kontaktných formulárov to znamená veľké polia, ktoré uľahčujú odosielanie údajov. Ak forma vyzerá pekne, lepšie sa s ňou pracuje.

Pred začatím návrhu by mal dizajnér vykonať podrobnú štúdiu všetkých kontaktných informácií poskytnutých klientom. Všetky prvky musia byť dobre organizované, navyše musia byť harmonicky kombinované. Mali by ste tiež pamätať na to, že kontaktná stránka by mala zodpovedať farebnej schéme stránky, aby používateľ jasne identifikoval stránku aj značku.

Záver

Kontaktná stránka by mala byť vždy viditeľná. To platí nielen pre hlavnú stránku, ale aj pre všetky ostatné stránky webu. Pri navrhovaní kontaktnej stránky musíte mať na pamäti, že používatelia budú môcť kontaktovať vlastníka lokality alebo tím podpory len spôsobom, ktorý vidia na karte „Kontakty“. V tomto prípade je kľúčom k úspechu pohodlie a jednoduchosť. Musíme používateľom poskytnúť to, čo chcú. Ak musí používateľ zadať svoje osobné údaje na stránke, potom je najlepšie položiť základné otázky: meno, priezvisko, e-mailová adresa. Kontaktný formulár by nemal obsahovať zbytočné polia. Postarať sa treba aj o prispôsobivosť kontaktnej stránky – mali by sa zobrazovať v akomkoľvek prehliadači a na akomkoľvek zariadení. Ak je kontaktná stránka navrhnutá správne, šance webu na úspech u používateľov sa výrazne zvyšujú.

Od autora: Dobrá kontaktná stránka je veľmi dôležitá pre udržanie vzťahu s vašimi návštevníkmi. Či už hovoríme o elektronickom obchode, časopisoch, osobných webových stránkach, online službách – používatelia zvyčajne hľadajú kontaktnú stránku ako prvý spôsob komunikácie s vami. Je zvláštne, že mnohí webdizajnéri zanedbávajú skromnú kontaktnú stránku, dokonca ju považujú za jeden z najmenej dôležitých aspektov webovej stránky. Poďme to napraviť.

Dôležitosť dobrej kontaktnej stránky

Kontaktná stránka je často prehliadaná. Koľko webových stránok ste navštívili, aby ste sa s vami sťažovali na produkt alebo službu alebo sa chceli niečo opýtať? A ako často ste museli bojovať s kontaktným formulárom?

Dobrá kontaktná stránka je prospešná pre akýkoľvek typ podnikania. Dokáže zvýšiť spokojnosť zákazníkov tým, že pomáha riešiť ich problémy. Môže tiež pomôcť zlepšiť vaše produkty a služby tým, že poskytne jasnú cestu pre cennú spätnú väzbu.

Pokiaľ ide o priamu spätnú väzbu od používateľov, iné kanály môžu byť obmedzené. Televízia, rádio, časopisy, noviny... to všetko sú formy jednosmernej komunikácie. Online komunikácia by mala byť obojsmerná; dialóg medzi podnikom a návštevníkom. Z toho profitujú obe strany, a preto je dobrá kontaktná stránka taká dôležitá.

Poloha

Prvý krok: kam umiestniť svoje kontaktné informácie. Nemá zmysel mať najlepšiu kontaktnú stránku na svete, ak ju vaši návštevníci nemôžu nájsť. Môžete im pomôcť, ak budete dodržiavať niektoré dizajnérske tradície.

Vo všeobecnosti možno kontaktné informácie nájsť na dvoch miestach:

Hlavná navigácia– ideálne miesto na prepojenie s kontaktnou stránkou. Návštevníci zvyčajne hľadajú kontaktnú stránku vpravo, pretože sa javí ako sekundárny prvok. Preto ako jeden z posledných prvkov navigácie na stránke jednoducho uvidíte odkaz na kontaktnú stránku.

Pozrieť sa môžeme aj na menšiu podnavigáciu v pravom hornom rohu obrazovky. Toto je tiež cenná pozícia pre kontaktnú stránku. Mimochodom, je lepšie vyhnúť sa umiestneniu kontaktnej stránky do rozbaľovacej ponuky, pretože tam môže ľahko chýbať.

päta je tiež obľúbeným miestom pre kontaktné informácie. Môže obsahovať odkaz na kontaktnú stránku:

...alebo najdôležitejšie kontaktné informácie:

Je ťažké predpovedať tok návštevnosti vašej kontaktnej stránky, takže umiestnenie odkazov aspoň na dve z uvedených miest vám poskytne dobrú poistku.

Najdôležitejšia vec na stránke kontaktov

Teraz máte pokoj, že vaši návštevníci budú môcť nájsť cestu na stránku s kontaktmi, je čas popremýšľať nad skutočným obsahom. Začnime od základov a zvážime informácie, ktoré by mali byť prezentované.

Email/kontaktný formulár

E-mailová adresa je najjednoduchší spôsob online komunikácie v podnikaní. Prípadne môžete použiť kontaktný formulár, ktorý odošle e-mail. Pomocou formulára získate väčšiu kontrolu nad obsahom (povinné polia) a týmto spôsobom môžete zabrániť spamu. O kontaktných formulároch budeme hovoriť v tomto článku nižšie.

Adresa

Podnik s kamennou predajňou by nemal zabudnúť uviesť svoju adresu. Ak máte veľa obchodov, je najlepšie vytvoriť samostatnú stránku pre každý z nich. Vyplňte ho konkrétnymi kontaktnými informáciami pre daný obchod, otváracími hodinami, trasou atď. Nielenže je to užitočné pre návštevníkov, ale môže to pomôcť aj vašej stránke pri lokálnom vyhľadávaní.

Telefón

Zobrazenie telefónneho čísla vytvára pocit dôvery. Toto sa často považuje za znak skutočnej spoločnosti a skutočne to pomáha online maloobchodníkom.

Mnoho webových stránok začalo pridávať tlačidlá sociálnych médií na svoju kontaktnú stránku. Aj keď to nemusí byť prospešné pre všetky stránky, pre niektorých návštevníkov to má pridanú hodnotu. Najmä preto, že čoraz viac spoločností ponúka zákaznícku podporu cez Twitter (niekedy dokonca 24/7).

Okrem toho

Neexistuje žiadne univerzálne riešenie pre dobrú kontaktnú stránku. Akákoľvek webová stránka alebo firma vyžaduje určité prvky, ktoré môžu byť na iných stránkach zbytočné.

Existuje mnoho ďalších informácií alebo vlastností, ktoré sa vám budú hodiť na stránke kontaktov. Pri tradičných predajniach je dobré spomenúť povedzme otváracie hodiny. Veľké spoločnosti by mohli použiť odkaz na svoj Live Chat a stránky elektronického obchodu by si mohli vybudovať dôveru používateľov zobrazením ich IČ DPH.

Pohodlné informácie

Jednoduché používanie informácií ochráni vašich návštevníkov pred sklamaním z kontaktnej stránky.
Namiesto obrázkov zahrňte svoje informácie ako text HTML. HTML text možno skopírovať a prilepiť, čím sa návštevníkom uľahčí uloženie vašich kontaktných údajov.

E-mailová adresa musí používať odkaz mailto. Návštevník tak má možnosť naň kliknúť a odoslať správu bez toho, aby musel skopírovať dodaciu adresu a otvoriť poštového klienta. Problémom s touto technikou však môžu byť spamboty, ktoré zbierajú e-mailové adresy spojené s odkazom mailto:. Môžete sa teda rozhodnúť ich najskôr pomýliť pomocou služby, ako je mailtoencoder.com.

Vedľajšia poznámka: Na telefónne čísla by sa tiež malo dať kliknúť. Minulý rok sme zverejnili malý tip, ako urobiť kliknutie na telefónne číslo citlivé. Smartfóny vďaka malému kúsku kódu rozpoznávajú telefónne čísla a umožňujú na ne volať. To je skutočne výhodné pre používateľov mobilných zariadení.

Podniky, ktoré sa vo veľkej miere spoliehajú na svoje kamenné obchody, často veľmi ťažia z interaktívnej mapy, ktorá používateľovi umožňuje rýchlo nájsť cestu k predajniam. Zobrazenie adresy obchodu je dobré, ale pridáva sa interaktívna mapa lepšie.

Vďaka Google Mapy Vloženie tejto užitočnej vlastnosti nemôže byť jednoduchšie. Jednoducho zadajte svoju adresu do Google Maps a kliknite na ikonu odkazu na bočnom paneli. Je tam pre vás kód na vloženie.

Vedeli ste, že mapu si môžete prispôsobiť podľa seba? Môžete upraviť farby mapy, pridať vlastné mapové značky a vytvoriť legendu. Viac si o tom môžete prečítať na developers.google.com. Môžete tiež zvážiť použitie alternatívnych služieb, ako je napríklad pomerne atraktívny Mapbox.

Nezabudnite na optimalizáciu pre vyhľadávače

Ako návštevník okamžite spoznáte adresu na kontaktnej stránke. Vyhľadávače je však potrebná malá pomoc pri rozpoznávaní rôznych prvkov.

Kontaktné formuláre

Väčšina webových stránok používa na svojej stránke kontaktný formulár. Niektoré formuláre sú však zbytočne komplikované a užívateľsky neprívetivé.

Bez ohľadu na to, aký jednoduchý môže vyzerať kontaktný formulár, v skutočnosti ide o kombináciu viacerých komponentov. Všetci musia spolupracovať, aby zabezpečili čo najlepšiu používateľskú skúsenosť.

Vstupné polia

Vstupné polia ako napr textové polia, tlačidlá na výber možností (prepínače), začiarkavacie políčka atď. umožňujú používateľovi zadať potrebné informácie.

Návštevníci webových stránok častejšie vypĺňajú krátke formuláre, pretože vyžadujú menej úsilia. Počet vstupných polí predstavuje rovnováhu medzi používateľskou skúsenosťou a obchodnými potrebami. Hubspot analyzoval viac ako 40 000 formulárov a sledoval účinok zvýšenia počtu vstupných polí. Ich výskum naznačuje, že by ste mali používať čo najmenej polí formulára a byť obzvlášť opatrní pri zložitých textových oblastiach a rozbaľovacích zoznamoch.

Pomôžte svojim návštevníkom vyplniť polia v správnom formáte. Telefónne čísla a dátumy môžu byť nástrahou najmä pre zahraničných návštevníkov. Pomôže vám zástupný atribút HTML5.

Ďalej sa uistite, že ste vybrali požadované polia (tradične sú označené hviezdičkou *). Najbezpečnejšie je jasne uviesť povinné a nepovinné polia.
Nakoniec je užitočné zvýrazniť aktívne pole. Môže byť naznačený sotva alebo veľmi jasne - ako chcete.

Nižšie je uvedený príklad kontaktného formulára z návodu Jima Nielsena. Používa červenú hviezdičku pre povinné polia, poskytuje tipy na formátovanie a zvýrazní aktívne pole.

Overenie formulára

Interná validácia môže tiež zabrániť niektorým ochoreniam kontaktnej formy. Odoslanie a opätovné odoslanie formulára, pretože ste zadali nesprávne údaje alebo údaje v nesprávnom formáte, je veľmi nepríjemné. Ako už bolo spomenuté, návštevníkom je najlepšie pomôcť tým, že ukážete požadovaný formát (napr. dátum, telefónne číslo...).

Tlačidlá

Neexistuje žiadny kontaktný formulár bez tlačidla Odoslať. Malo by to byť úplne na konci. Pre text tlačidla použite „odoslať správu“ namiesto „odoslať“, aby ste zákazníkom pripomenuli, čo robia.
Bežným štandardom z minulého roka je zaradenie tlačidla „reset“ alebo „vymazať formulár“. Nerob to. Náhodne sa naň klikne. Nie je nič horšie, ako keď napíšete premyslenú a podrobnú správu a stratíte ju kvôli tlačidlu Reset.

odpoveď

Návštevník zadal svoje kontaktné údaje, napísal správu a klikol na tlačidlo „odoslať“. Teraz čo? Prišla správa alebo nie?

Ubezpečte svojich návštevníkov, že správa bola úspešne odoslaná, zobrazením príslušnej správy. Dobrým nápadom je aj potvrdzujúci e-mail.

Rovnaká rada platí aj pre chyby. Ukázať chybu, keď sa nepodarí odoslať správu, je nevyhnutnosťou, ktorá môže zabrániť mnohým budúcim sporom. Chybové hlásenie by malo byť priateľské, preto sa vyhnite zobrazovaniu alarmujúcich chybových kódov.

Kontaktný dizajn stránky

Existuje mnoho aplikácií na návrh kontaktnej stránky. technické požiadavky, no nezabudnime na jeden z nich najdôležitejšie momenty: vizuálne štýly.

Ak používate kontaktný formulár, urobte polia veľké, priateľské a pozývajúce na vyplnenie. Dobre vám poslúži biely priestor a výplň.

Návštevníci webových stránok sa pri prezeraní webovej stránky riadia vzorom v tvare písmena F, takže pri vytváraní značiek na to pamätajte. Pri kontaktných formulároch je najlepšie usporiadať všetky polia zvislo namiesto toho, aby ste ich umiestnili vedľa seba. Tým sa znižuje počet potrebných pohybov očí návštevníka pri vypĺňaní formulára.

Kontaktná stránka by mala byť v súlade s vizuálnymi vlastnosťami lokality. Dôslednosť je kľúčom k dokonalosti. Pozrite sa napríklad na túto kontaktnú stránku navrhnutú tak, aby vyzerala ako pohľadnica.

A ako pri väčšine úloh súvisiacich s webovým dizajnom; kreativita sa veľmi vypláca. Neil Patel vytvoril svoju kontaktnú stránku ako infografiku, čím strojnásobil počet žiadostí o kontakt.

Príklady kontaktných formulárov

Keď už hovoríme o dobrých kontaktných formulároch, pozrime sa na tieto príklady pre inšpiráciu (kliknutím na obrázok navštívite príslušnú stránku):

Záver

Skôr než navrhnete svoju kontaktnú stránku, uistite sa, že ju vaši návštevníci nájdu. Odkaz naň z hlavnej navigácie alebo päty. Pamätajte, že väčšina ľudí hľadá kontaktné informácie na pravej strane obrazovky.

Zvážte, aké informácie musíte zahrnúť. Schopnosť poslať správu prostredníctvom e-mailu alebo kontaktného formulára je nevyhnutná. Pomôcť môže aj adresa a telefónne číslo. Ďalšie informácie, ako sú odkazy na profily v v sociálnych sieťach a otváracie hodiny pre niektoré typy podnikov sú tiež potrebné.

Interaktivita je dôležitá. Použite atribút mailto pre e-mailové adresy a atribút tel: pre telefónne čísla(veľmi užitočné pre návštevníkov z mobilných zariadení). Môžete vložiť interaktívnu mapu, ako sú Mapy Google, ale zvážte vplyv na výkon.

Použiteľnosť kontaktného formulára môže vytvoriť alebo prerušiť kontaktnú stránku. Žiadajte len tie najnutnejšie informácie. Môžete sa vyhnúť bolestiam hlavy zobrazením správneho formátu vstupných polí a použitím interného overenia. Pri odosielaní formulára nezabudnite zobraziť úspešné odoslanie správ.

Je už váš web optimalizovaný pre mobilné zariadenia? Ak ešte nie, nie je to koniec sveta. Moderné prehliadače obsahujú inovácie ako pinch zoom a automatické nastavenie veľkosť písma.

Ak nemáte čas ani peniaze na optimalizáciu svojich stránok pre mobilné zariadenia, tu je desať jednoduchých vecí, ktoré môžete urobiť hneď teraz, aby vaša stránka vyzerala pre návštevníkov mobilných zariadení slušne.

1. Nastavte správne atribúty poľa formulára

Ak na svojom webe používate vstupné polia pre používateľské meno alebo adresu, vypnite automatické opravy a zapnite automatické veľké písmená:

Tvoje meno:

Ak to neurobíte, automatický vstupný systém T9 nahradí mená, napríklad „Erwan“, niečím ako „Erevan“.

Nastavenie automatického používania prvého veľké písmená v slovách typy zbavia používateľov potreby zadávať veľké písmená zakaždým - to znamená, že každé slovo bude začínať veľkým písmenom (napríklad „Ken Burns“ sa zmení na „Ken Burns“):

Zamyslite sa nad všetkými nástrahami, s ktorými sa môže používateľ na vašej stránke stretnúť.

A to bez toho, aby som išiel ďaleko od témy. Ak vaša stránka požaduje e-mail od používateľa, použite pole e-mailu, aby návštevník nemusel zadávať symbol @ z klávesnice mobilného zariadenia:

Tvoj email:

2. Nastavte vhodnú šírku pre mobilné zariadenia

Otvorte svoju webovú stránku v prehliadači počítača a zmenšite šírku okna programu, kým v ňom nebudete môcť nič čítať.

Toto bude minimálna povolená šírka. Vezmite aktuálnu hodnotu šírky a nastavte ju na vlastnosť @viewport nastavením metaznačky v hlavičke stránky:

Keď bude vaša stránka nabudúce otvorená mobilné zariadenie, šírka, ktorú určíte, sa nastaví automaticky. Návštevník stránky nebude musieť použiť Zoom:

Tento obrázok ukazuje priestor navyše vpravo:

A tento obrázok ukazuje správne nastavenú hodnotu šírky.

Ak je vaša lokalita postavená na premenlivom rozložení a funguje so všetkými veľkosťami obrazoviek, vaša úloha bude ešte jednoduchšia. Treba experimentovať so šírkou, pri ktorej stránka vyzerá pekne a čitateľne na mobilnom zariadení a túto hodnotu nastaviť v metaznačke.

3. Nastavte šírku obrázkov na 100 %

Teraz, keď má vaša stránka určitú šírku, niektoré obrázky budú veľmi široké. Toto sa predtým nestalo, pretože rozlíšenia stolových monitorov sú dosť široké a väčšina obrázkov sa hodí na šírku:

Aby ste tomu zabránili, nastavte maximálnu šírku obrázkov na 100 %. Týmto spôsobom sa automaticky zmení veľkosť obrázkov v prípadoch, keď sú príliš veľké pre obrazovku mobilného zariadenia. Pridajte nižšie uvedený kód do štýlov CSS svojej stránky:

img (maximálna šírka: 100 %)

Ak ako pozadie používate iné obrázky ako pomocou značky img, jednoducho nastavte vlastnosť CSS background-size tak, aby obsahovala . To spôsobí zmenu veľkosti obrázka na pozadí, keď rozlíšenie obrazovky nestačí na zobrazenie v 100% mierke:

Hlavička ( pozadie: url(header.png) 50 % bez opakovania; veľkosť pozadia: obsahovať )

Ak sa obávate, že obraz bude menej jasný, potom sa obávate márne. Na moderných mobilných zariadeniach sa to nestane.

Keď návštevník použije zväčšenie, prehliadač využíva zvýšenie jasnosti obrazu. Uistite sa však, že vaša lokalita nemá v metaznačke vlastnosť user-scalable=no. Ak to tak nie je, používateľ nebude môcť použiť priblíženie:

4. Nastavte šírku vstupných polí na 100 %

Po nastavení šírky obrázkov pomocou vlastnosti max-width urobte podobný trik so vstupnými poľami. Stačí pridať do súboru CSS vašej stránky:

vstup, textová oblasť ( max. šírka: 100 % )

Pri prezeraní stránky na mobilnom zariadení táto možnosť zabráni vysunutiu vstupných polí z obrazovky.

5. Buďte opatrní pri používaní tlačidiel na potvrdenie odoslania formulára Zakázať

Aby ste sa vyhli viacnásobným kliknutiam na tlačidlo potvrdenia odoslania formulára, po prvom kliknutí naň by ste odoslanie mali deaktivovať.

Na rozdiel od stolných zariadení mobilné zariadenia často strácajú pripojenie k sieti. Ak tlačidlo deaktivujete, používateľ naň nebude môcť znova kliknúť. A v tejto situácii majte na pamäti, že príčinou takejto situácie nemusí byť len strata siete.

Počas prichádzajúci hovor Prehliadač mobilného zariadenia sa zatvorí. A potom sa situácia so zablokovaným potvrdzovacím tlačidlom zopakuje. Používateľ nebude môcť odoslať už vyplnený formulár.

A ak sa predsa len rozhodnete deaktivovať tlačidlo odoslania, urobte to na pár sekúnd.

6. Na dlhých riadkoch používajte zalamovanie slov

Niekedy je potrebné zobraziť dlhé reťazce, ako sú príklady kódov, odkazy, čísla bankových účtov. Ak sa ukáže, že váš web je úzky na zobrazenie celého riadku, môže „prejsť“ za obrazovku mobilného zariadenia:

Vyhnite sa tejto situácii použitím vlastnosti word-wrap. Toto sa zalomí, keď čiara dosiahne okraj obrazovky. Používateľ uvidí všetko, čo potrebuje, bez posúvania:

Tvoje heslo: 435143a1b5fc8bb70a3aa9b10f6673a8

7. Buďte opatrní pri používaní medzier

Bežnou praxou pri zobrazovaní dlhých reťazcov je použitie medzier každých päť znakov. Používateľ si ich tak pohodlnejšie zapamätá pre vstup do inej aplikácie.

Šikovný používateľ to však ručne neurobí. Využije schránku. V prípade medzier ich však bude musieť odstrániť. Aké pohodlné a rýchle je odstraňovanie medzier na mobilnom zariadení?

Aby ste predišli takýmto situáciám, použite namiesto medzier medzi skupinami znakov zarážky:

Váš kód: 435143a1b5fc8bb

Ako vidíte, „medzery“ medzi znakmi zostávajú, ale s tým rozdielom, že pri kopírovaní a vkladaní nie je potrebné nič mazať. Prinajmenšom je to pohodlné a šetrí čas!

8. Výhody mediálnych dopytov

Môžete si vytvoriť vlastné štýly, ktoré budú fungovať iba pri prezeraní stránky na mobilných zariadeniach (alebo zobrazené v malom okne prehliadača), zatiaľ čo bežná verzia webovej stránky bude fungovať na stolnom počítači. Ak to chcete urobiť, použite cieľové štýly v mediálnych dopytoch, ako je uvedené v príklade nižšie:

Teraz poznáte ďalší trik, vďaka ktorému bude váš web vyzerať lepšie na mobilnom zariadení.

9. Vyhnite sa pevnému umiestneniu

Ak je hlavička alebo bočný panel vášho webu umiestnený pevne, vlastnosť CSS position je nastavená na fixné . Buď opatrný.

Keď označíte takto, váš názov bude rásť so stránkou a môže zaberať celý priestor na obrazovke:

Najjednoduchším riešením je nepoužívať pevné pozície prvkov na zobrazenie na mobilných zariadeniach.

Nižšie uvedený príklad s použitím metódy mediálneho dopytu ukáže, ako to implementovať:

10. Používajte štandardné fonty

Používanie vlastných písiem dodáva stránke vzhľad profesionálneho produktu, používatelia si však musia stiahnuť súbory s písmami. Toto sa vykonáva pred zobrazením lokality na zariadení.

Objem takýchto súborov je spravidla dosť veľký. Na mobilnom zariadení môže tento proces trvať dlho. V tejto chvíli vidíme na obrazovke namiesto textu prázdne miesto.