Kontaktní stránka je velmi důležitá, takže jejímu designu je třeba věnovat zvláštní pozornost. Čím pohodlnější je kontaktní stránka, tím více příležitostí se otevírá majiteli webu. Kontaktní stránka, je-li správně navržena, může velmi dobře ovlivnit míru konverze: pokud uživatel může snadno kontaktovat správce nebo správce webu, bude mít pozitivní zkušenost. Čím jednodušší je proces, čím méně polí nebo formulářů musí uživatel vyplnit, tím lépe pro převod.

Dobrá kontaktní stránka může zlepšit web, protože vytváří podmínky pro dobrý vztah mezi návštěvníky a vlastníkem webu. Nezáleží na tom, o jaký druh webu se jedná, může to být internetový obchod, zpravodajský portál nebo webová služba – zpětná vazba je nesmírně důležitá.

Navzdory tomu mnoho designérů podceňuje důležitost správně navržené kontaktní stránky se zaměřením na design stránek hlavního obsahu.

Stává se, že uživatel potřebuje rychle kontaktovat majitele webu nebo kontaktovat zákaznickou podporu. Nic však nefunguje, ani když použijete vyhledávání na webu. Někdy jsou potřebné informace na stránce přítomny, ale jsou „skryté“, protože se o ně nestaral designér správnou navigaci a uživatel jednoduše nevidí požadovaný odkaz. Zoufalý uživatel je připraven zavolat na telefon, ale ani ho nemůže najít.

Společnosti a webové služby, které designu kontaktních stránek věnují velkou pozornost, jednají mimořádně opatrně. Jednoduše proto, že tato stránka obsahuje více než jen kontaktní informace: obsahuje informace, které uživatel potřebuje, a je interaktivní. A co je nejdůležitější, dobrá kontaktní stránka povzbuzuje uživatele k opakované interakci s webem.

Kontaktní stránka je jakousi platformou pro komunikaci. Pokud majitel stránek umožňuje klientům vyjádřit své názory, pak je to již výzva k dialogu. Weboví vývojáři a uživatelé mohou těžit z této spolupráce, a to je důvod, proč musí být navržena správně.

Jak víte, funkčnost v designu je jedním z klíčových faktorů. Kontaktní stránka obsahuje důležitá informace, není ho však příliš mnoho, což může někdy vést k chybnému posouzení funkčnosti. Majitel webu si myslí, že kdyby na stránku umístil adresu E-mailem a telefon, pak to úplně stačí. Někdy má pravdu.

Dvojitá kontrola funkčnosti však může přinést více užitku než škody. Nefunkční odkazy nebo stránky přeplněné informacemi jsou škodlivé pro zapojení. Majitel webu nemusí obdržet důležitou zprávu, ale to nejhorší se stane, pokud poskytne zastaralé nebo nepřesné informace. Při navrhování kontaktní stránky musíte nejprve myslet na uživatele, protože tato stránka je koneckonců vytvořena přímo pro ně.

Umístění

Je bezpodmínečně nutné zajistit, aby kontaktní stránka byla uživatelům vždy přístupná. Vzhled stránek, i když mají exkluzivní design, nic neznamená, pokud uživatelé nenajdou kontaktní stránku. Někdy musíte navrhnout poměrně složité kontaktní formuláře, takže se musíte předem postarat o pokyny. Pro uživatele bude snazší kontaktovat vlastníka webu, pokud bude mít k dispozici průvodce krok za krokem.

Pro designéra, který navrhuje webové stránky, je důležité mít na paměti dva body:

• Primární navigace by měla vždy obsahovat kontaktní stránku
• Uživatelé by měli při první návštěvě webu najít kontaktní stránku bez ohledu na to, na kterou interní stránku se dostanou

Na základě zkušeností, které návrháři nashromáždili, mají uživatelé tendenci hledat kontaktní informace na pravé straně stránky, takže má smysl umístit odkaz „Kontaktujte nás“ tam. Musíte si však pamatovat, že tyto informace jsou pro uživatele druhořadé, takže byste neměli tuto část webu dělat příliš nápadnou nebo rušivou. Nejlépe funguje odkaz na kontaktní stránku umístěný v pravém horním rohu stránky. A nejhorší je odkaz v rozbalovací nabídce, protože uživatelé si toho nemusí všimnout.

Jednoduché kontaktní formuláře

U komerčních stránek je kontaktní stránka velmi důležitá, o tom již byla řeč výše. I když nemusí být tak krásná jako jiné stránky na webu, měla by být jednoduchá, uživatelsky přívětivá a srozumitelná. Pokud informace nejsou správně strukturovány, fungují špatně nebo jsou zavádějící, pak je nepravděpodobné, že vlastník webu bude schopen vybudovat dlouhodobé vztahy se svými zákazníky.

Často se stává, že uživatel, který chce zanechat zprávu, opustí stránky, protože nemůže vyplnit kontaktní formulář. Nebo nechce, když je to moc dlouhé nebo složité. Dnešní uživatelé nechtějí ztrácet čas vyplňováním podrobných formulářů, a proto stojí za to popřemýšlet o jejich zjednodušení. Čím jednodušší formulář, tím lepší, i pro uživatelský zážitek, takže se musíte zaměřit na sběr základních informací.

Přesné znění

Pokud mluvíme o oficiálních webových stránkách, pak na všech stránkách, včetně kontaktní stránky, musíte dodržovat jasný a přesný jazyk o výhodách, které uživatel získá tím, že se stane klientem společnosti. K čemu to je? Informace zbavené všeho nepotřebného jsou nejúčinnějším způsobem, jak přitáhnout a udržet pozornost. Pěkně shrnuté údaje by měly být stručné, aby lidé snadno našli, co potřebují.

Nezapomeňte také na vizuální složku. A nemluvíme jen o atraktivních designech kontaktních formulářů. Pokud má společnost fyzickou adresu, můžete uživatelům pomoci umístěním mapy na kontaktní stránku. Pro firmy sídlící ve velkých městech je velmi důležité vysvětlit uživatelům, jak pro ně bude pohodlnější dostat se do jejich kanceláře, prodejny nebo skladu.

Odezva kontaktní stránky

Pro jakýkoli online obchod je odezva vším. Toto je přísné pravidlo, žádné výjimky. Jelikož se internet vyvíjí rychlým tempem a na trhu se objevuje stále více nových zařízení, znamená to, že kontaktní informace musí být dostupné bez ohledu na to, jaký prohlížeč nebo zařízení člověk používá. Dnes je velmi snadné se v konkurenci ztratit – stačí neoptimalizovat kontaktní stránku pro zobrazení na mobilních zařízeních.

Integrální komponenty

Co je lepší: e-mailová adresa nebo kontaktní formulář? Uživatelé potřebují jednoduchými způsoby spojení s poskytovateli služeb, které potřebují, takže jim musíte vyjít vstříc. Můžete se zaměřit na komunikaci přes email nebo umístit kontaktní formulář – každý způsob má své pro a proti.

Kontaktní formuláře

• Kontaktní formulář by neměl nutit uživatele přejít na jinou stránku
• Kontaktní formulář není určen k vytvoření účet nebo se přihlaste přes email
• Formulář by měl mít pokud možno funkci automatického doplňování
• Kontaktní formulář by měl mít funkci pro zasílání zpráv a upozornění

E-mailem

• Komunikace prostřednictvím e-mailu musí být pro uživatele bezpečná
• Je vhodné uložit všechna odeslaná data pro budoucí použití.
• Práce s přijatými zprávami by měla být prováděna systematicky, musíte se také starat záloha data

Ověřovací formulář

Ověřovací formuláře mají velká důležitost když potřebujete vědět více o uživatelích webu. Navíc proces validace nějakým způsobem vede uživatele správným směrem, protože jej může upozornit na nesprávně zadaná data nebo prázdná pole. Ověřovací formulář tak klientům šetří čas, protože na konci procesu vyplňování bude osoba pevně přesvědčena, že jeho zpráva bude odeslána na správnou adresu.

Telefonní čísla

Mnoho společností na své kontaktní stránce neuvádí telefonní čísla, protože se obávají, že neustálé hovory naruší pracovní proces. Telefonní čísla na kontaktní stránce však stejně jako u karty zvyšují důvěru uživatelů ve značku, zákazníci se cítí bezpečně v domnění, že se jim v obtížné situaci podaří kontaktovat pracovníka společnosti a problém probrat. Telefonní číslo zkracuje vzdálenost mezi majitelem webu a uživatelem, to platí jak pro klasické společnosti, tak pro online služby, které nemají fyzickou adresu.

Profily na sociálních sítích

Tlačítka sociálních sítí se stále častěji nacházejí na kontaktních stránkách. Tento přístup může výrazně zlepšit možnosti webu, zejména pokud je zákaznická podpora poskytována 24 hodin denně, 7 dní v týdnu. Mnoho lidí považuje za pohodlnější spojit se se společností prostřednictvím sociální sítě, takže stojí za to přemýšlet o tomto způsobu interakce s uživatelem.

Návrh kontaktní stránky

Opravdu dobré kontaktní stránky ukazují na vysokou kvalifikaci designérů, kteří je navrhli. A nejdůležitější součástí návrhu je vizuální styl kontaktní stránky. V případě kontaktních formulářů to znamená velká pole, která usnadňují odesílání dat. Pokud formulář vypadá hezky, lépe se s ním pracuje.

Před zahájením návrhu by měl projektant provést podrobnou studii všech kontaktních informací poskytnutých klientem. Všechny prvky musí být dobře organizovány, navíc musí být harmonicky kombinovány. Měli byste také pamatovat na to, že kontaktní stránka by měla odpovídat barevnému schématu webu, aby uživatel jasně identifikoval web i značku.

Závěr

Kontaktní stránka by měla být vždy viditelná. To platí nejen pro hlavní stránku, ale i pro všechny ostatní stránky webu. Při navrhování kontaktní stránky musíte mít na paměti, že uživatelé budou moci kontaktovat vlastníka webu nebo tým podpory pouze způsobem, který vidí na kartě „Kontakty“. V tomto případě je klíčem k úspěchu pohodlí a jednoduchost. Musíme uživatelům poskytnout to, co chtějí. Pokud uživatel musí na stránce zadat své osobní údaje, pak je nejlepší položit základní otázky: jméno, příjmení, e-mailová adresa. Kontaktní formulář by neměl obsahovat zbytečná pole. Musíte se také postarat o přizpůsobivost kontaktní stránky – měly by se zobrazovat v jakémkoli prohlížeči a na jakémkoli zařízení. Pokud je kontaktní stránka navržena správně, šance webu na úspěch u uživatelů se výrazně zvyšují.

Od autora: Dobrá kontaktní stránka je velmi důležitá pro udržení vztahu s vašimi návštěvníky. Ať už mluvíme o e-commerce, časopisech, osobních webových stránkách, online službách – uživatelé obvykle hledají kontaktní stránku jako první prostředek pro komunikaci s vámi. Je zvláštní, že mnoho webových designérů zanedbává skromnou kontaktní stránku, i když ji považuje za jeden z nejméně důležitých aspektů webových stránek. Pojďme to napravit.

Důležitost dobré kontaktní stránky

Kontaktní stránka je často přehlížena. Kolik webových stránek jste navštívili a chtěli jste se s námi spojit a stěžovat si na produkt nebo službu nebo se na něco zeptat? A jak často jste se museli potýkat s kontaktním formulářem?

Dobrá kontaktní stránka je prospěšná pro jakýkoli typ podnikání. Je schopna zvýšit spokojenost zákazníků tím, že pomáhá řešit jejich problémy. Může také pomoci zlepšit vaše produkty a služby tím, že poskytne jasnou cestu pro cennou zpětnou vazbu.

Pokud jde o přímou zpětnou vazbu od uživatelů, ostatní kanály mohou být omezené. Televize, rádio, časopisy, noviny... to všechno jsou formy jednosměrné komunikace. Online komunikace by měla být obousměrná; dialog mezi obchodem a návštěvníkem. Z toho profitují obě strany, a proto je dobrá kontaktní stránka tak důležitá.

Umístění

První krok: kam umístit své kontaktní údaje. Nemá smysl mít nejlepší kontaktní stránku na světě, pokud ji vaši návštěvníci nenajdou. Můžete jim pomoci, pokud se budete držet některých designových tradic.

Obecně lze kontaktní údaje nalézt na dvou místech:

Hlavní navigace– ideální místo pro odkaz na kontaktní stránku. Návštěvníci obvykle hledají kontaktní stránku vpravo, protože se zdá být sekundárním prvkem. Proto jako jeden z posledních prvků navigace webu jednoduše uvidíte odkaz na kontaktní stránku.

Můžeme se také podívat na menší dílčí navigaci v pravém horním rohu obrazovky. Toto je také cenná pozice pro kontaktní stránku. Mimochodem, je lepší se vyhnout umístění kontaktní stránky do rozbalovací nabídky, protože tam snadno přehlédnete.

zápatí je také oblíbeným místem pro kontaktní informace. Může obsahovat odkaz na kontaktní stránku:

...nebo nejdůležitější kontaktní informace:

Je těžké předvídat tok návštěvnosti vaší kontaktní stránky, takže umístění odkazů alespoň na dvě ze zmíněných míst vám poskytne dobré pojištění.

To nejdůležitější na stránce kontaktů

Nyní máte klid, že vaši návštěvníci budou moci najít cestu na kontaktní stránku, je čas přemýšlet o skutečném obsahu. Začněme se základy a zvažte informace, které by měly být prezentovány.

Email/kontaktní formulář

E-mailová adresa je nejjednodušší způsob, jak komunikovat online v podnikání. Případně můžete použít kontaktní formulář, který odešle e-mail. Pomocí formuláře získáte větší kontrolu nad obsahem (povinná pole) a můžete tak zabránit spamu. O kontaktních formulářích budeme hovořit v tomto článku níže.

Adresa

Podnik s kamennou prodejnou by neměl zapomenout uvést svou adresu. Pokud máte mnoho obchodů, je nejlepší vytvořit samostatnou stránku pro každý z nich. Vyplňte jej konkrétními kontaktními informacemi pro daný obchod, otevírací dobou, pokyny atd. Nejen, že je to užitečné pro návštěvníky, ale také to může pomoci vašemu webu při místním vyhledávání.

Telefon

Zobrazení telefonního čísla vytváří pocit důvěry. To je často považováno za znak skutečné společnosti a skutečně to pomáhá online prodejcům.

Mnoho webových stránek začalo přidávat tlačítka sociálních sítí na svou kontaktní stránku. I když to nemusí být přínosem pro všechny stránky, pro některé návštěvníky to má přidanou hodnotu. Zejména proto, že stále více společností nabízí zákaznickou podporu přes Twitter (někdy dokonce 24/7).

dodatečně

Neexistuje žádné univerzální řešení pro dobrou kontaktní stránku. Jakákoli webová stránka nebo firma vyžaduje určité prvky, které mohou být na jiných stránkách zbytečné.

Existuje mnoho dalších informací nebo vlastností, které se vám budou hodit na kontaktní stránce. U klasických obchodů je dobré zmínit řekněme otevírací dobu. Velké společnosti by mohly využít odkaz na svůj Live Chat a stránky elektronického obchodu by mohly budovat důvěru uživatelů zobrazením jejich DIČ.

Pohodlné informace

Snadné použití informací ochrání vaše návštěvníky před zklamáním z kontaktní stránky.
Místo obrázků zahrňte své informace jako text HTML. HTML text lze zkopírovat a vložit, což návštěvníkům usnadní uložení vašich kontaktních údajů.

E-mailová adresa musí používat odkaz mailto. Návštěvník tak má možnost na něj kliknout a odeslat zprávu, aniž by musel kopírovat dodací adresu a otevírat poštovní klient. Problémem této techniky však mohou být spamboti, kteří shromažďují e-mailové adresy spojené s odkazem mailto:. Můžete se tedy rozhodnout je nejprve zmást pomocí služby, jako je mailtoencoder.com.

Poznámka: Na telefonní čísla by se také mělo dát kliknout. Minulý rok jsme zveřejnili malý tip, jak zajistit, aby bylo telefonní číslo citlivé na kliknutí. Chytré telefony díky malému kousku kódu rozpoznávají telefonní čísla a umožňují na ně volat. To je pro mobilní uživatele opravdu výhodné.

Podniky, které hodně spoléhají na své kamenné prodejny, často velmi těží z interaktivní mapy, která uživateli umožňuje rychle najít cestu k maloobchodním místům. Zobrazení adresy obchodu je dobré, ale přidávání interaktivní mapa lepší.

Díky Google mapy Vložení této užitečné vlastnosti nemůže být jednodušší. Jednoduše zadejte svou adresu do Google Maps a klikněte na ikonu odkazu v postranním panelu. Je tam pro vás kód pro vložení.

Věděli jste, že si mapu můžete přizpůsobit podle sebe? Můžete upravit barvy mapy, přidat vlastní mapové značky a vytvořit legendu. Více si o tom můžete přečíst na developers.google.com. Můžete také zvážit využití alternativních služeb, jako je poměrně atraktivní Mapbox.

Nezapomeňte na optimalizaci pro vyhledávače

Jako návštěvník okamžitě poznáte adresu na kontaktní stránce. Vyhledávače k rozpoznání různých prvků je však zapotřebí trochu pomoci.

Kontaktní formuláře

Většina webových stránek používá na své stránce kontaktní formulář. Některé formuláře jsou však zbytečně složité a uživatelsky nepřívětivé.

Bez ohledu na to, jak jednoduchý kontaktní formulář se může zdát, je ve skutečnosti kombinací několika komponent. Všichni musí spolupracovat, aby zajistili co nejlepší uživatelskou zkušenost.

Vstupní pole

Vstupní pole jako např textová pole, tlačítka pro výběr možností (přepínače), zaškrtávací políčka atd. umožňují uživateli zadat potřebné informace.

Návštěvníci webových stránek častěji vyplňují krátké formuláře, protože vyžadují méně úsilí. Počet vstupních polí je balancováním mezi uživatelskou zkušeností a obchodními potřebami. Hubspot analyzoval přes 40 000 formulářů a sledoval efekt zvýšení počtu vstupních polí. Jejich výzkum naznačuje, že byste měli používat co nejméně formulářových polí a být obzvláště opatrní u složitých textových oblastí a rozevíracích seznamů.

Pomozte svým návštěvníkům vyplnit pole ve správném formátu. Telefonní čísla a data mohou být úskalí, zejména pro zahraniční návštěvníky. Pomůže vám zástupný atribut HTML5.

Dále se ujistěte, že jste vybrali požadovaná pole (tradičně jsou označena hvězdičkou *). Nejbezpečnější je jasně označit povinná a volitelná pole.
Nakonec je užitečné zvýraznit aktivní pole. Může být naznačen sotva nebo velmi jasně - jak si přejete.

Níže je uveden příklad kontaktního formuláře z výukového programu Jima Nielsena. U povinných polí používá červenou hvězdu, poskytuje rady ohledně formátů a zvýrazní aktivní pole.

Ověření formuláře

Interní validace může také zabránit některým onemocněním kontaktní formy. Nutnost odeslat a znovu odeslat formulář, protože jste zadali nesprávná data nebo data ve špatném formátu, je velmi nepříjemné. Jak již bylo zmíněno, je nejlepší pomoci návštěvníkům zobrazením požadovaného formátu (např. datum, telefonní číslo...).

Tlačítka

Neexistuje žádný kontaktní formulář bez tlačítka Odeslat. Mělo by to být úplně na konci. Pro text tlačítka použijte „odeslat zprávu“ místo „odeslat“, abyste zákazníkům připomněli, co dělají.
Obvyklým standardem z loňského roku je zařazení tlačítka „reset“ nebo „vymazat formulář“. Nedělej to. Dojde k náhodnému kliknutí. Není nic horšího, než když napíšete promyšlenou a podrobnou zprávu a ztratíte ji kvůli tlačítku reset.

Odezva

Návštěvník zadal své kontaktní údaje, napsal zprávu a klikl na tlačítko „odeslat“. Co teď? Přišla zpráva nebo ne?

Ujistěte své návštěvníky, že zpráva byla úspěšně odeslána zobrazením příslušné zprávy. Dobrý nápad je také potvrzovací e-mail.

Stejná rada platí pro chyby. Ukázat chybu, když se zpráva nepodaří odeslat, je nutnost, která může předejít mnoha budoucím sporům. Chybová zpráva by měla být přátelská, vyvarujte se proto zobrazování alarmujících chybových kódů.

Kontaktní design stránky

Existuje mnoho aplikací pro návrh kontaktní stránky. technické požadavky, ale nezapomeňme na jeden z nich nejdůležitější momenty: vizuální styly.

Pokud používáte kontaktní formulář, vytvořte pole velká, přátelská a vyzývající k vyplnění. Dobře vám poslouží bílý prostor a polstrování.

Návštěvníci webu se při prohlížení webové stránky řídí vzorem ve tvaru písmene F, takže na to při vytváření označení pamatujte. U kontaktních formulářů je nejlepší uspořádat všechna pole svisle místo toho, abyste je umístili vedle sebe. Tím se snižuje počet nutných pohybů očí návštěvníka při vyplňování formuláře.

Kontaktní stránka by měla být v souladu s vizuálními prvky webu. Konzistence je klíčem k dokonalosti. Podívejte se například na tuto kontaktní stránku navrženou tak, aby vypadala jako pohlednice.

A jako u většiny úkolů souvisejících s webovým designem; kreativita se hodně vyplácí. Neil Patel vytvořil svou kontaktní stránku jako infografiku, čímž ztrojnásobil počet žádostí o kontakt.

Příklady kontaktních formulářů

Když už mluvíme o dobrých kontaktních formulářích, podívejme se pro inspiraci na tyto příklady (kliknutím na obrázek navštívíte příslušnou stránku):

Závěr

Než navrhnete svou kontaktní stránku, ujistěte se, že ji vaši návštěvníci najdou. Odkaz na něj z hlavní navigace nebo zápatí. Pamatujte, že většina lidí hledá kontaktní informace na pravé straně obrazovky.

Zvažte, jaké informace musíte zahrnout. Schopnost odeslat zprávu prostřednictvím e-mailu nebo kontaktního formuláře je nezbytná. Užitečná může být i adresa a telefonní číslo. dodatečné informace, jako jsou odkazy na profily v v sociálních sítích a otevírací doby pro některé typy podniků jsou také potřebné.

Důležitá je interaktivita. Použijte atribut mailto pro e-mailové adresy a atribut tel: pro telefonní čísla(velmi užitečné pro návštěvníky z mobilních zařízení). Můžete vložit interaktivní mapu, jako jsou Mapy Google, ale zvažte dopady na výkon.

Použitelnost kontaktního formuláře může vytvořit nebo přerušit kontaktní stránku. Žádejte jen ty nejnutnější informace. Můžete se vyhnout bolestem hlavy tím, že zobrazíte správný formát vstupních polí a použijete interní ověření. Nezapomeňte při odesílání formuláře zobrazit úspěšné odeslání zpráv.

Je již váš web optimalizován pro mobilní zařízení? Pokud ještě ne, není to konec světa. Moderní prohlížeče obsahují inovace, jako je pinch zoom a automatické nastavení velikost písma.

Pokud nemáte čas ani peníze na optimalizaci svého webu pro mobily, zde je deset jednoduchých věcí, které můžete udělat hned teď, aby váš web vypadal slušně pro mobilní návštěvníky.

1. Nastavte správné atributy pole formuláře

Pokud na svém webu používáte vstupní pole pro uživatelské jméno nebo adresu, vypněte automatické opravy a zapněte automatické psaní velkých písmen:

Tvé jméno:

Pokud tak neučiníte, automatický vstupní systém T9 nahradí jména, například „Erwan“, něčím jako „Erevan“.

Nastavení automatického použití prvního velká písmena ve slovních typech zbaví uživatele nutnosti používat velká písmena pokaždé - to znamená, že každé slovo bude začínat velkým písmenem (například „Ken Burns“ se změní na „Ken Burns“):

Zamyslete se nad všemi úskalími, se kterými se může uživatel na vašem webu setkat.

A aniž bych se vzdaloval tématu. Pokud váš web požaduje od uživatele e-mail, použijte pole e-mailu, aby návštěvník nemusel zadávat symbol @ z klávesnice mobilního zařízení:

Tvůj e-mail:

2. Nastavte vhodnou šířku pro mobilní zařízení

Otevřete svůj web v prohlížeči počítače a zmenšete šířku okna programu, dokud v něm nebudete moci nic číst.

To bude minimální povolená šířka. Vezměte aktuální hodnotu šířky a nastavte ji na vlastnost @viewport nastavením metaznačky v záhlaví stránky:

Až bude váš web příště otevřen mobilní zařízení, šířka, kterou určíte, bude automaticky nastavena. Návštěvník webu nebude muset používat Zoom:

Tento obrázek ukazuje prostor navíc vpravo:

A tento obrázek ukazuje správně nastavenou hodnotu šířky.

Pokud je váš web postaven na proměnlivém rozložení a pracuje se všemi velikostmi obrazovek, bude váš úkol ještě jednodušší. Je třeba experimentovat s šířkou, ve které web vypadá hezky a čitelně na mobilním zařízení, a tuto hodnotu nastavit v metaznačce.

3. Nastavte šířku obrázků na 100 %

Nyní, když má váš web určitou šířku, budou některé obrázky velmi široké. To se dříve nestalo, protože rozlišení stolních monitorů je poměrně široké a většina obrázků se vejde na šířku:

Abyste tomu zabránili, nastavte maximální šířku obrázků na 100 %. Tímto způsobem se automaticky změní velikost obrázků v případech, kdy jsou příliš velké pro obrazovku mobilního zařízení. Přidejte níže uvedený kód do stylů CSS svého webu:

img (max. šířka: 100 %)

Pokud používáte obrázky jako pozadí jinak než pomocí značky img, jednoduše nastavte vlastnost CSS background-size tak, aby obsahovala . To způsobí změnu velikosti obrázku na pozadí, když rozlišení obrazovky nestačí k zobrazení ve 100% měřítku:

Záhlaví ( pozadí: url(header.png) 50 % bez opakování; velikost pozadí: obsahovat )

Pokud se obáváte, že bude obraz méně jasný, pak se obáváte marně. To se na moderních mobilních zařízeních nestane.

Když návštěvník použije zvětšení, prohlížeč využije zvýšení jasnosti obrazu. Ujistěte se však, že váš web nemá v metaznačce vlastnost user-scalable=no. Pokud tomu tak není, uživatel nebude moci použít zoom:

4. Nastavte šířku vstupních polí na 100 %

Jakmile nastavíte šířku obrázků pomocí vlastnosti max-width, proveďte podobný trik se vstupními poli. Stačí přidat do souboru CSS vašeho webu:

vstup, textová oblast ( max. šířka: 100 % )

Při prohlížení webu na mobilním zařízení tato možnost zabrání tomu, aby se vstupní pole rozšiřovala mimo obrazovku.

5. Buďte opatrní při použití tlačítka Zakázat pro potvrzení odeslání formuláře

Chcete-li se vyhnout vícenásobným kliknutím na tlačítko potvrzení odeslání formuláře, měli byste odeslání deaktivovat po prvním kliknutí na něj.

Na rozdíl od stolních zařízení mobilní zařízení často ztrácejí připojení k síti. Pokud tlačítko deaktivujete, uživatel na něj nebude moci znovu kliknout. A v této situaci mějte na paměti, že příčinou takové situace nemusí být pouze ztráta sítě.

Během příchozí hovor Prohlížeč mobilního zařízení se zavře. A pak se situace se zablokovaným potvrzovacím tlačítkem bude opakovat. Uživatel nebude moci odeslat již vyplněný formulář.

A pokud se přesto rozhodnete deaktivovat tlačítko Odeslat, udělejte to na pár sekund.

6. Na dlouhých řádcích používejte zalamování slov

Někdy je nutné zobrazit dlouhé řetězce, jako jsou příklady kódů, odkazy, čísla bankovních účtů. Pokud se váš web ukáže být úzký, aby mohl zobrazit celý řádek, může „překročit“ obrazovku mobilního zařízení:

Vyhněte se této situaci pomocí vlastnosti word-wrap. To se zalomí, když čára dosáhne okraje obrazovky. Uživatel uvidí vše, co potřebuje, bez posouvání:

Vaše heslo: 435143a1b5fc8bb70a3aa9b10f6673a8

7. Buďte opatrní při používání mezer

Běžnou praxí při zobrazování dlouhých řetězců je použití mezer každých pět znaků. Pro uživatele tak bude pohodlnější si je zapamatovat pro vstup do jiné aplikace.

Chytrý uživatel to však ručně neudělá. Použije schránku. V případě mezer je však bude muset odstranit. Jak pohodlné a rychlé je odstranění mezer na mobilním zařízení?

Abyste předešli takovým situacím, použijte místo mezer mezi skupinami znaků odsazení:

Váš kód: 435143a1b5fc8bb

Jak vidíte, „mezery“ mezi znaky zůstávají, ale s tím rozdílem, že při kopírování a vkládání není potřeba nic mazat. Přinejmenším je to pohodlné a šetří čas!

8. Výhody mediálních dotazů

Můžete si vytvořit vlastní styly, které budou fungovat pouze při prohlížení webu na mobilních zařízeních (nebo zobrazené v malém okně prohlížeče), zatímco běžná verze webové stránky bude fungovat na stolním počítači. Chcete-li to provést, použijte cílové styly v dotazech na média jako v příkladu níže:

Nyní znáte další trik, který pomůže vašemu webu vypadat lépe na mobilním zařízení.

9. Vyhněte se pevné poloze

Pokud je záhlaví nebo postranní panel vašeho webu umístěn pevně, vlastnost CSS position je nastavena na fixed . Buď opatrný.

Když označíte tímto způsobem, váš název poroste se stránkou a možná zabere celý prostor na obrazovce:

Nejjednodušším řešením je nepoužívat pevné pozice prvků pro zobrazení na mobilních zařízeních.

Níže uvedený příklad s použitím metody dotazu na média ukáže, jak to implementovat:

10. Používejte standardní fonty

Použití vlastních písem dává webu vzhled profesionálního produktu, ale uživatelé si musí stáhnout soubory písem. To se provádí před zobrazením webu na zařízení.

Objem takových souborů je zpravidla poměrně velký. Na mobilním zařízení může tento proces trvat dlouho. V tuto chvíli vidíme na obrazovce místo textu prázdné místo.