Kontaktsidan är av stor betydelse, så dess utformning måste ägnas särskild uppmärksamhet. Ju bekvämare kontaktsidan är, desto fler möjligheter finns för webbplatsägaren. En kontaktsida, om den är utformad på rätt sätt, kan mycket väl påverka konverteringsfrekvensen: om en användare enkelt kan kontakta en platschef eller administratör kommer de att få en positiv upplevelse. Ju enklare processen är, desto färre fält eller formulär användaren behöver fylla i, desto bättre för konvertering.

En bra kontaktsida kan förbättra en webbplats eftersom den skapar förutsättningar för en god relation mellan besökare och webbplatsägare. Det spelar ingen roll vilken typ av webbplats det är, det kan vara en webbutik, nyhetsportal eller webbtjänst – feedback är oerhört viktigt.

Trots detta underskattar många designers vikten av en korrekt designad kontaktsida, med fokus på utformningen av huvudinnehållssidorna.

Det händer att en användare snabbt behöver kontakta webbplatsägaren eller kontakta kundsupport. Inget fungerar dock, även om du använder webbplatssökningen. Ibland finns den nödvändiga informationen på webbplatsen, men den är "dold" eftersom designern inte tog hand om korrekt navigering och användaren ser helt enkelt inte den nödvändiga länken. Den desperata användaren är redo att ringa telefonen, men han kan inte hitta den heller.

Företag och webbtjänster som lägger stor vikt vid utformningen av kontaktsidor agerar extremt noggrant. Helt enkelt för att den här sidan inte bara innehåller kontaktinformation: den innehåller den information som användaren behöver och är interaktiv. Och, viktigast av allt, en bra kontaktsida uppmuntrar användaren att interagera med webbplatsen om och om igen.

Kontaktsidan är en slags plattform för kommunikation. Om webbplatsägaren tillåter kunder att uttrycka sina åsikter är detta redan en inbjudan till dialog. Webbutvecklare och användare kan dra nytta av detta samarbete och det är av denna anledning som det måste utformas korrekt.

Som ni vet är funktionalitet i design en av nyckelfaktorerna. Kontaktsidan innehåller viktig information, men det finns inte för mycket av det, vilket ibland kan leda till en felaktig bedömning av funktionalitet. Webbplatsägaren tror att om han lagt adressen på sidan E-post och en telefon, då räcker detta. Ibland har han rätt.

Dubbelkontroll av funktionalitet kan dock göra mer nytta än skada. Trasiga länkar eller sidor som är överbelastade med information är alla skadliga för engagemanget. Webbplatsägaren kanske inte får ett viktigt meddelande, men det värsta kommer att hända om han lämnar inaktuell eller felaktig information. När du designar en kontaktsida måste du först tänka på användarna, för trots allt är den här sidan skapad specifikt för dem.

Plats

Det är absolut nödvändigt att se till att kontaktsidan alltid är tillgänglig för användarna. Utseendet på sajten, även med en exklusiv design, betyder ingenting om användarna inte kan hitta kontaktsidan. Ibland måste du utforma ganska komplexa kontaktformulär, så du måste ta hand om instruktionerna i förväg. Det blir lättare för användare att kontakta webbplatsägaren om de har en steg-för-steg-guide.

För en designer som designar en webbplats är det viktigt att komma ihåg två punkter:

• Primär navigering bör alltid inkludera kontaktsida
• Användare bör hitta kontaktsidan första gången de besöker sidan, oavsett vilken intern sida de landar på

Baserat på den erfarenhet som designers har samlat på sig tenderar användare att leta efter kontaktinformation till höger på sidan, så det är vettigt att placera länken "Kontakta oss" där. Du måste dock komma ihåg att denna information är av sekundär betydelse för användaren, så du bör inte göra den här delen av webbplatsen för märkbar eller påträngande. Länken till kontaktsidan som finns i det övre högra hörnet på sidan fungerar bäst. Och det värsta är en länk i en rullgardinsmeny, eftersom användare kanske helt enkelt inte märker det.

Enkla kontaktformulär

För kommersiella sajter är kontaktsidan väldigt viktig, detta har redan diskuterats ovan. Även om det kanske inte är lika vackert som andra sidor på sajten så ska det vara enkelt, användarvänligt och begripligt. Om informationen inte är korrekt strukturerad, fungerar dåligt eller är vilseledande, då är det osannolikt att sajtägaren kommer att kunna bygga långsiktiga relationer med sina kunder.

Det händer ofta att en användare som vill lämna ett meddelande lämnar sidan för att han inte kan fylla i kontaktformuläret. Eller så vill han inte om det är för långt eller komplicerat. Dagens användare vill inte slösa tid på att fylla i detaljerade formulär, så det är värt att tänka på att förenkla dem. Ju enklare form, desto bättre, även för användarupplevelsen, så du måste fokusera på att samla in grundläggande information.

Exakt formulering

Om vi ​​pratar om officiella webbplatser, måste du på alla sidor, inklusive kontaktsidan, följa ett tydligt och exakt språk om fördelarna som användaren kommer att få genom att bli kund hos företaget. Vad är det för? Information rensad från all onödig är det mest effektiva sättet att attrahera och behålla uppmärksamhet. Snyggt sammanfattad data bör vara kortfattad så att människor enkelt kan hitta det de behöver.

Glöm inte heller den visuella komponenten. Och vi pratar inte bara om attraktiva kontaktformulärdesigner. Om företaget har en fysisk adress kan du hjälpa användare genom att placera en karta på kontaktsidan. För företag som ligger i stora städer är det mycket viktigt att förklara för användarna hur det blir bekvämare för dem att ta sig till sitt kontor, butik eller lager.

Kontaktsidans lyhördhet

För alla onlineföretag är lyhördhet allt. Detta är en strikt regel, inga undantag. Eftersom internet utvecklas i snabb takt, och allt fler nya enheter dyker upp på marknaden, innebär det att kontaktuppgifter måste finnas tillgängliga oavsett vilken webbläsare eller enhet en person använder. Idag är det väldigt lätt att förlora i konkurrensen – allt du behöver göra är att inte optimera din kontaktsida för visning på mobila enheter.

Integrerade komponenter

Vilket är bättre: en e-postadress eller ett kontaktformulär? Användare behöver enkla sätt förbindelser med leverantörerna av de tjänster de behöver, så du måste möta dem halvvägs. Du kan fokusera på kommunikation via e-post eller placera ett kontaktformulär – varje metod har sina för- och nackdelar.

Kontaktformulär

• Kontaktformuläret ska inte tvinga användare att gå till en annan sida
• Kontaktformuläret är inte avsett att skapa konto eller logga in via e-post
• Formuläret bör ha en autokompletteringsfunktion om möjligt
• Kontaktformuläret ska ha funktionalitet för att skicka meddelanden och aviseringar

E-post

• Kommunikation via e-post måste vara säker för användaren
• Det är tillrådligt att spara all skickad data för framtida bruk.
• Arbete med mottagna meddelanden bör utföras systematiskt, man måste också vara försiktig säkerhetskopiering data

Valideringsformulär

Verifieringsformulär har stor betydelse när du behöver veta mer om webbplatsanvändare. Dessutom guidar valideringsprocessen på något sätt användaren i rätt riktning, eftersom den kan dra uppmärksamheten till felaktigt inmatade data eller tomma fält. Således sparar verifieringsformuläret klienterna tid, eftersom personen i slutet av fyllningsprocessen kommer att vara säker på att hans meddelande kommer att gå till rätt adress.

Telefonnummer

Många företag listar inte telefonnummer på sin kontaktsida eftersom de är rädda för att ständiga samtal ska störa arbetsprocessen. Men precis som med kortet ökar telefonnummer på kontaktsidan användarnas förtroende för varumärket, kunderna känner sig trygga och tror att de i en svår situation kommer att kunna kontakta en företagsanställd och diskutera problemet. Ett telefonnummer minskar avståndet mellan webbplatsägaren och användaren, det gäller både traditionella företag och onlinetjänster som saknar fysisk adress.

Sociala medier profiler

Knappar för sociala medier finns allt oftare på kontaktsidor. Detta tillvägagångssätt kan avsevärt förbättra webbplatsens kapacitet, särskilt om kundsupport tillhandahålls 24/7. Många tycker att det är bekvämare att ansluta till ett företag via ett socialt nätverk, så det är värt att tänka på det här sättet att interagera med användaren.

Designa en kontaktsida

Riktigt bra kontaktsidor indikerar de höga kvalifikationerna hos de designers som designat dem. Och den viktigaste delen av designen är den visuella stilen på kontaktsidan. När det gäller kontaktformulär innebär det stora fält som gör det enklare att lämna in uppgifter. Ser formen fin ut så fungerar den bättre.

Innan designen påbörjas bör konstruktören genomföra en detaljerad studie av all kontaktinformation som kunden tillhandahåller. Alla element måste vara välorganiserade, dessutom måste de vara harmoniskt kombinerade. Du bör också komma ihåg att kontaktsidan ska matcha sajtens färgschema så att användaren tydligt identifierar både sajten och varumärket.

Slutsats

Kontaktsidan ska alltid vara synlig. Detta gäller inte bara huvudsidan utan även alla andra sidor på sidan. När du designar en kontaktsida måste du komma ihåg att användare endast kommer att kunna kontakta webbplatsägaren eller supportteamet på det sätt som de ser på fliken "Kontakter". I det här fallet är nyckeln till framgång bekvämlighet och enkelhet. Vi måste ge användarna vad de vill ha. Om användaren måste ange sina personliga uppgifter på webbplatsen, är det bäst att ställa grundläggande frågor: förnamn, efternamn, e-postadress. Kontaktformuläret ska inte innehålla onödiga fält. Du måste också ta hand om kontaktsidans anpassningsförmåga - de ska visas i vilken webbläsare som helst och på vilken enhet som helst. Om kontaktsidan är rätt utformad ökar sajtens chanser att lyckas med användarna avsevärt.

Från författaren: En bra kontaktsida är mycket viktig för att upprätthålla en relation med dina besökare. Oavsett om vi pratar om e-handel, tidningar, personliga webbplatser, onlinetjänster – brukar användare leta efter en kontaktsida som det första sättet att kommunicera med dig. Konstigt nog försummar många webbdesigners den ödmjuka kontaktsidan, till och med betraktar den som en av de minst viktiga aspekterna av en webbplats. Låt oss fixa det här.

Vikten av en bra kontaktsida

Kontaktsidan förbises ofta. Hur många webbplatser har du besökt för att komma i kontakt för att klaga på en produkt eller tjänst, eller ställa en fråga? Och hur ofta har du fått kämpa med ett kontaktformulär?

En bra kontaktsida är fördelaktig för alla typer av företag. Hon kan öka kundnöjdheten genom att hjälpa till att lösa deras problem. Det kan också hjälpa till att förbättra dina produkter och tjänster genom att tillhandahålla en tydlig väg för värdefull feedback.

När det gäller direkt feedback från användare kan andra kanaler vara begränsade. TV, radio, tidskrifter, tidningar... de är alla former av enkelriktad kommunikation. Onlinekommunikation bör vara en tvåvägsgata; dialog mellan företag och besökare. Båda parter tjänar på detta, varför en bra kontaktsida är så viktig.

Plats

Första steget: var du ska placera din kontaktinformation. Det är ingen idé att ha världens bästa kontaktsida om dina besökare inte kan hitta den. Du kan hjälpa dem om du följer några designtraditioner.

I allmänhet finns kontaktuppgifter på två ställen:

Huvudnavigering– en idealisk plats att länka till kontaktsidan. Besökare letar vanligtvis efter kontaktsidan till höger eftersom den verkar vara ett sekundärt element. Därför kommer du helt enkelt att se en länk till kontaktsidan som ett av de sista delarna av webbplatsens navigering.

Vi kan också titta på den mindre undernavigeringen i det övre högra hörnet på skärmen. Detta är också en värdefull position för en kontaktsida. För övrigt är det bättre att undvika att placera kontaktsidan i rullgardinsmenyn, då det är lätt att missa där.

sidfotär också en populär plats för kontaktinformation. Den kan innehålla en länk till en kontaktsida:

...eller den viktigaste kontaktinformationen:

Det är svårt att förutsäga trafikflödet till din kontaktsida, så att placera länkar på minst två av de nämnda platserna ger dig en bra försäkring.

Det viktigaste på kontaktsidan

Nu har du sinnesro att dina besökare kommer att kunna hitta till kontaktsidan, det är dags att fundera över själva innehållet. Låt oss börja med grunderna och överväga den information som bör presenteras.

E-post/kontaktformulär

En e-postadress är det enklaste sättet att kommunicera online i affärer. Alternativt kan du använda ett kontaktformulär som skickar ett mejl. Genom att använda ett formulär får du mer kontroll över innehållet (obligatoriska fält) och på så sätt kan du förhindra spam. Vi kommer att prata om kontaktformulär i den här artikeln nedan.

Adress

Ett företag med en tegelbutik bör inte glömma att nämna sin adress. Om du har många butiker är det bäst att skapa en individuell sida för var och en. Fyll i den med specifik kontaktinformation för den butiken, öppettider, vägbeskrivning etc. Detta är inte bara användbart för besökare, utan det kan också hjälpa din webbplats i lokala sökningar.

Telefon

Att visa ett telefonnummer skapar en känsla av tillit. Detta ses ofta som ett tecken på ett riktigt företag, och hjälper verkligen online-återförsäljare.

Många webbplatser har börjat lägga till knappar för sociala medier på sin kontaktsida. Även om detta kanske inte gynnar alla webbplatser, har det ett mervärde för vissa besökare. Speciellt eftersom fler och fler företag erbjuder kundsupport via Twitter (ibland till och med 24/7).

Dessutom

Det finns ingen lösning som passar alla för en bra kontaktsida. Alla webbplatser eller företag kräver vissa element som kan vara onödiga på andra webbplatser.

Det finns mycket ytterligare information eller egenskaper som du kommer att ha nytta av på kontaktsidan. För traditionella butiker är det en bra idé att nämna exempelvis öppettider. Stora företag kan använda en länk till sin livechatt, och e-handelssajter kan bygga upp användarnas förtroende genom att visa deras momsnummer.

Bekväm information

Enkel användning av information kommer att skydda dina besökare från besvikelse med kontaktsidan.
Istället för bilder, inkludera din information som HTML-text. HTML-text kan kopieras och klistras in, vilket gör det enklare för besökaren att spara dina kontaktuppgifter.

E-postadressen måste använda mailto-länken. Detta ger besökaren möjlighet att klicka på den och skicka ett meddelande utan att behöva kopiera leveransadressen och öppna e-postklient. Ett problem med denna teknik kan dock vara spambots som samlar in e-postadresser som är kopplade till mailto:-länken. Så du kan bestämma dig för att förstöra dem genom att använda en tjänst som mailtoencoder.com.

Sidanteckning: Telefonnummer bör också vara klickbara. Förra året la vi upp ett litet tips om hur man gör ett telefonnummer klickkänsligt. Tack vare en liten bit kod känner smartphones igen telefonnummer och gör det möjligt att ringa dem. Detta är verkligen bekvämt för mobilanvändare.

Företag som förlitar sig mycket på sina fysiska butiker har ofta stor nytta av en interaktiv karta, vilket gör att användaren snabbt kan hitta till butiker. Att visa butiksadressen är bra, men att lägga till interaktiv karta bättre.

Tack vare Google kartor Att infoga den här användbara egenskapen kunde inte vara enklare. Ange bara din adress i Google Maps och klicka på länkikonen i sidofältet. Det finns en inbäddningskod för dig där.

Visste du att du kan anpassa kartan så att den passar dig? Du kan redigera kartfärger, lägga till anpassade kartmarkörer och skapa en förklaring. Du kan läsa mer om detta på developers.google.com. Du kan också överväga att använda alternativa tjänster, som den ganska attraktiva Mapbox.

Glöm inte sökmotoroptimering

Som besökare kommer du direkt att känna igen adressen på kontaktsidan. Sökmotorer det krävs dock lite hjälp för att känna igen de olika elementen.

Kontaktformulär

De flesta webbplatser använder ett kontaktformulär på sin sida. Vissa formulär är dock onödigt komplicerade och användarovänliga.

Hur enkelt ett kontaktformulär än kan verka är det faktiskt en kombination av flera komponenter. De måste alla arbeta tillsammans för att säkerställa bästa möjliga användarupplevelse.

Inmatningsfält

Inmatningsfält som t.ex textfält, alternativvalsknappar (radioknappar), kryssrutor, etc., låter användaren ange nödvändig information.

Webbplatsbesökare är mer benägna att fylla i korta formulär eftersom de kräver mindre ansträngning. Antalet inmatningsfält är en balansgång mellan användarupplevelse och affärsbehov. Hubspot analyserade över 40 000 formulär och tittade på effekten av att öka antalet inmatningsfält. Deras forskning tyder på att du bör använda så få formulärfält som möjligt och vara särskilt försiktig med komplexa textområden och rullgardinslistor.

Hjälp dina besökare att fylla i fälten med rätt format. Telefonnummer och datum kan vara en fallgrop, särskilt för internationella besökare. HTML5-platshållarattributet hjälper dig.

Se sedan till att välja de obligatoriska fälten (de är traditionellt markerade med en asterisk *). Det är säkrast att tydligt ange de obligatoriska och valfria fälten.
Slutligen är det användbart att markera det aktiva fältet. Det kan indikeras knappt eller mycket ljust - som du vill.

Nedan är ett exempel på ett kontaktformulär från Jim Nielsens handledning. Den använder en röd stjärna för obligatoriska fält, ger råd om format och markerar det aktiva fältet.

Formulärvalidering

Intern validering kan också förhindra vissa kontaktformsjukdomar. Att behöva skicka och skicka in ett formulär på nytt för att du har skrivit in felaktiga uppgifter eller uppgifter i fel format är väldigt irriterande. Som nämnts här är det bäst att hjälpa besökare genom att visa önskat format (t.ex. datum, telefonnummer...).

Knappar

Det finns inget kontaktformulär utan en skicka-knapp. Det borde vara i slutet. För knapptext, använd "skicka meddelande" istället för "skicka" för att påminna kunder om vad de gör.
Den vanliga standarden från förra året är att inkludera en "återställ"- eller "rensa formulär"-knapp. Gör inte det. Den kommer att klickas av misstag. Det finns inget värre än att skriva ett genomtänkt, detaljerat meddelande och få det förlorat på grund av återställningsknappen.

Svar

Besökaren angav sin kontaktinformation, skrev ett meddelande och klickade på knappen "skicka". Nu då? Kom meddelandet fram eller inte?

Försäkra dina besökare att meddelandet skickades framgångsrikt genom att visa ett motsvarande meddelande. Ett bekräftelsemail är också en bra idé.

Samma råd gäller för misstag. Att visa ett fel när ett meddelande inte skickas är en nödvändighet som kan förhindra många framtida tvister. Felmeddelandet ska vara vänligt, så undvik att visa alarmerande felkoder.

Kontaktsida design

Det finns många tillämpningar för utformningen av en kontaktsida. tekniska krav, men låt oss inte glömma en av de viktigaste ögonblicken: visuella stilar.

Om du använder ett kontaktformulär, gör fälten stora, vänliga och inbjudande att fylla i. Vitt utrymme och stoppning kommer att tjäna dig väl.

Webbplatsbesökare följer ett F-format mönster när de tittar på en webbsida, så tänk på detta när du skapar din uppmärkning. För kontaktformulär är det bäst att arrangera alla fält vertikalt istället för att placera dem bredvid varandra. Detta minskar antalet nödvändiga ögonrörelser för besökaren när du fyller i formuläret.

Kontaktsidan bör överensstämma med webbplatsens visuella egenskaper. Konsekvens är nyckeln till excellens. Titta till exempel på den här kontaktsidan utformad för att se ut som ett vykort.

Och, som med de flesta webbdesignrelaterade uppgifter; kreativitet lönar sig stort. Neil Patel skapade sin kontaktsida som en infografik och tredubblade antalet kontaktförfrågningar.

Exempel på kontaktformulär

På tal om bra kontaktformulär, låt oss titta på dessa exempel för inspiration (klicka på bilden för att besöka motsvarande webbplats):

Slutsats

Innan du designar din kontaktsida, se till att dina besökare kan hitta den. Länka till det från din huvudnavigering eller sidfot. Kom ihåg att de flesta letar efter kontaktinformation till höger på skärmen.

Fundera över vilken information du behöver inkludera. Möjligheten att skicka ett meddelande via e-post eller kontaktformulär är avgörande. En adress och telefonnummer kan också vara till hjälp. ytterligare information, till exempel länkar till profiler i i sociala nätverk och öppettider för vissa typer av verksamhet behövs också.

Interaktivitet är viktigt. Använd mailto-attributet för e-postadresser och tel:-attributet för telefonnummer(mycket användbart för besökare från mobila enheter). Du kan infoga en interaktiv karta som Google Maps, men överväg resultatet.

Kontaktformulärets användbarhet kan skapa eller bryta en kontaktsida. Be bara om den mest nödvändiga informationen. Du kan undvika huvudvärk genom att visa rätt format på inmatningsfälten och använda intern validering. Glöm inte att visa hur framgångsrika meddelanden har skickats när du skickar in formuläret.

Är din webbplats redan optimerad för mobila enheter? Om inte än så är det inte världens undergång. Moderna webbläsare innehåller innovationer som nypzoom och automatisk justering textstorlek.

Om du inte har tid eller pengar att optimera din webbplats för mobilen, här är tio enkla saker du kan göra just nu för att få din webbplats att se anständig ut för mobilbesökare.

1. Ställ in rätt formulärfältsattribut

Om du använder inmatningsfält för användarnamn eller adress på din webbplats, stäng av autokorrigering och aktivera autocapitalize :

Ditt namn:

Om du inte gör detta kommer det automatiska inmatningssystemet T9 att ersätta namn, till exempel "Erwan", med något som "Erevan".

Ställa in automatisk användning av först stora bokstäver i ordtyper kommer användarna att befrias från behovet att inkludera versaler av bokstäver varje gång - det vill säga att varje ord börjar med en stor bokstav (till exempel "Ken burns" kommer att bli "Ken Burns"):

Tänk på alla fallgropar som en användare kan stöta på på din webbplats.

Och utan att gå långt från ämnet. Om din webbplats begär ett e-postmeddelande från användaren, använd e-postfältet så att besökaren inte behöver ange @-symbolen från tangentbordet på en mobil enhet:

Din email:

2. Ställ in lämplig bredd för mobila enheter

Öppna din webbplats i din dators webbläsare och minska bredden på programfönstret tills du inte kan läsa något i det.

Detta kommer att vara den minsta tillåtna bredden. Ta det aktuella breddvärdet och ställ in det på egenskapen @viewport genom att ställa in en metatagg i sidans huvud:

Nästa gång din webbplats är öppen mobilenhet, kommer bredden du anger att ställas in automatiskt. Webbplatsbesökaren behöver inte använda Zoom:

Den här bilden visar det extra utrymmet till höger:

Och den här bilden visar det korrekt inställda breddvärdet.

Om din webbplats är byggd på en flytande layout och fungerar med alla skärmstorlekar, blir din uppgift ännu enklare. Du måste experimentera med bredden på vilken webbplatsen ser snygg och läsbar ut på en mobil enhet, och ställa in detta värde i metataggen.

3. Ställ in bildens bredd till 100 %

Nu när din webbplats har en viss bredd kommer vissa bilder att bli väldigt breda. Detta har inte hänt tidigare, eftersom upplösningarna på skrivbordsskärmar är ganska breda och de flesta bilder passar i bredd:

För att undvika detta, ställ in den maximala bredden på dina bilder till 100 %. På så sätt kommer bilderna automatiskt att ändra storlek i de fall de är för stora för den mobila enhetens skärm. Lägg till koden nedan i din webbplats CSS-stilar:

img (maxbredd: 100 %)

Om du använder bilder som andra bakgrunder än att använda en img-tagg, ställ helt enkelt in egenskapen CSS background-size till att innehålla . Detta kommer att få bakgrundsbilden att ändra storlek när skärmupplösningen inte räcker till för att visa den i 100 % skala:

Rubrik ( bakgrund: url(header.png) 50 % ingen upprepning; bakgrundsstorlek: innehåller )

Om du är orolig för att bilden ska bli mindre tydlig, då är du orolig förgäves. Detta kommer inte att hända på moderna mobila enheter.

När en besökare använder förstoring drar webbläsaren fördel av en ökad bildskärpa. Se dock till att din webbplats inte har egenskapen user-scalable=no i metataggen. Om så inte är fallet kommer användaren inte att kunna använda zoom:

4. Ställ in bredden på inmatningsfälten till 100 %

När bildens bredd är inställd via egenskapen max-width, gör ett liknande knep med inmatningsfälten. Lägg bara till i din webbplats CSS-fil:

input, textarea (max-width:100% )

När du tittar på webbplatsen på en mobil enhet kommer det här alternativet att förhindra att inmatningsfälten sträcker sig utanför skärmen.

5. Var försiktig när du använder Inaktivera för bekräftelseknappar för formulärinlämning

För att undvika flera klick på bekräftelseknappen för formulärinlämning bör du göra inlämningen inaktiv efter det första klicket på den.

Till skillnad från stationära enheter förlorar mobila enheter ofta anslutningen till nätverket. Om du gör en knapp inaktiv kommer användaren inte att kunna klicka på den igen. Och i den här situationen, kom ihåg att orsaken till en sådan situation inte bara kan vara förlusten av nätverket.

Under inkommande samtal Den mobila enhetens webbläsare stängs. Och då kommer situationen med den blockerade bekräftelseknappen att upprepas. Användaren kommer inte att kunna skicka in ett redan ifyllt formulär.

Och om du ändå bestämmer dig för att avaktivera knappen Skicka, gör det i några sekunder.

6. Använd ordlindning på långa rader

Ibland är det nödvändigt att visa långa strängar som kodexempel, länkar, bankkontonummer. Om din webbplats visar sig vara smal för att visa hela raden, kan den "gå" bortom den mobila enhetens skärm:

Undvik denna situation genom att använda egenskapen word-wrap. Detta lindas när linjen når kanten av skärmen. Användaren kommer att se allt han behöver utan att rulla:

Ditt lösenord: 435143a1b5fc8bb70a3aa9b10f6673a8

7. Var försiktig med mellanslag

En vanlig praxis när man visar långa strängar är att använda mellanslag vart femte tecken. Detta kommer att göra det bekvämare för användaren att komma ihåg dem för att gå in i en annan applikation.

En smart användare kommer dock inte att göra detta manuellt. Han kommer att använda urklippet. Men i fallet med utrymmen måste han ta bort dem. Hur bekvämt och snabbt är det att ta bort utrymmen på en mobil enhet?

För att undvika sådana situationer, använd indrag istället för mellanslag mellan grupper av tecken:

Din kod: 435143a1b5fc8bb

Som du kan se finns "mellanslagen" mellan tecken kvar, men med skillnaden att när du kopierar och klistrar in behöver du inte radera någonting. Åtminstone är det bekvämt och sparar tid!

8. Fördelar med mediafrågor

Du kan skapa anpassade stilar som bara fungerar när du tittar på webbplatsen på mobila enheter (eller visas i ett litet webbläsarfönster), medan den normala versionen av webbsidan fungerar på en stationär dator. För att göra detta, använd målstilar i mediefrågor som i exemplet nedan:

Nu vet du ett annat knep som hjälper din webbplats att se bättre ut på en mobil enhet.

9. Undvik fast positionering

Om din webbplats sidhuvud eller sidofält är placerad på ett fast sätt, är egenskapen CSS position inställd på fix . Var försiktig.

När du markerar så här kommer din titel att växa med sidan och eventuellt ta upp hela skärmutrymmet:

Den enklaste lösningen är att inte använda fasta elementpositioner för visning på mobila enheter.

Exemplet nedan, med hjälp av mediafrågemetoden, visar hur du implementerar detta:

10. Använd standardteckensnitt

Att använda anpassade teckensnitt ger en webbplats utseendet av en professionell produkt, men användarna måste ladda ner teckensnittsfiler. Detta görs innan webbplatsen visas på enheten.

Som regel är volymen av sådana filer ganska stor. På en mobil enhet kan denna process ta lång tid. För närvarande ser vi tomt utrymme på skärmen istället för text.