Adaptiv layout Webbplatsen tillåter webbsidor att automatiskt anpassa sig till skärmarna för tabletter och smartphones. Mobilt Internet-trafik växer varje år och för att effektivt bearbeta den här trafiken, måste du erbjuda användarnas anpassningsbara platser med ett bekvämt gränssnitt.
Sökmotorer använder ett antal kriterier för att bedöma platsens anpassningsförmåga när du tittar på mobila enheter. Google försöker förenkla användningen av Internet för ägarna av smartphones och tabletter, notera i mobilutgivning anpassad under mobila enheter SPECIAL MARK mobilvänlig.. Yandex fungerar också den algoritm som föredrar webbplatser med en mobil / adaptiv version för användare i en mobilsökning.
Du kan kontrollera visningen på sidan på mobila enheter på tjänsterna och.
Fikon. 1. Mobile Yandex och Google utfärdar med en anteckning om vänligheten på webbplatsen till mobila enheter Vad är en adaptiv layout
Adaptiv layout involverar frånvaron horisontell remsa Bläddra och skalbara områden när du tittar på vilken enhet, läsbar text och stora områden för klicerbara element. Med hjälp av media register kan du styra layouten och platsen för block på sidan, ombyggnad av mönstret så att det anpassar sig till olika storlekar av enheter.
De viktigaste teknikerna för att skapa en adaptiv webbplats anges i artikeln. För responsiv design Bredden på huvudbehållaren på platsen är inställd i%, medan den kan vara lika med både 100% bredd i webbläsarfönstret och mindre. Bredden på gallernas kolumner är också inställd i%. I adaptiv design Bredden på huvudbehållaren och gallerkolumnerna är fixerad med användning av värdena i PX.
Den adaptiva gummilyouten, som beaktas i den här lektionen, kommer att fungera perfekt på ett två-kolumnmönster, vilket gör att webbplatsen anpassas och bekvämt för visning på mobila enheter. Mallen antar en annan layout av huvudinnehållet på sidorna, i den här lektionen kommer att demonteras till huvudsidan.
Locker på huvudsidan
Sidan består av tre huvudblock: toppfoten (keps), omslagsbehållaren för huvudinnehåll och Sagebar, och sidfoten (sidfot). Som en vändpunkt för designpunkter, ta 768px och 480px.
Gölj i den första punkten den övre menyn och flytta sidofältet under behållaren med inlägg. Under den andra punkten kommer du att ändra platsen för rubrikelementen, avbryta positioneringen av knapparna av sociala nätverk i inläggen och avbryta flödet runt sidorna på sidorna.
Fikon. 2. Exempel på adaptiv layout 1. Metagelet och sektionen
1) Lägg till i avsnittet
De obligatoriska filerna är en länk till de använda tecknen, JQuery Library, liksom prefixfree-pluginet (inte att skriva för egenskaperna hos webbläsarprefix):
2. sidkapsling
I sidans rubrik
Logotyp ;
knappen för att visa / dölja huvudmenyn
< div class = "col-md-4" > [Skicka klass: BTN - Flat Class: Col - XS - 12 "Beställ"]< / div > < / div > |
Viktig notering:Kära vänner, i det här exemplet använder jag adaptiva stilar för att skapa ett kontaktformulär på WordPress, det vill säga det kan ta former av någon skärmstorlek.
Du kommer att se knappen i övre högra hörnet. Redan definitivt inte missa. 🙂
Vi har gjort en del av arbetet, nu går vi till nästa steg.
Ställa in postadresser för att ta emot applikationer
I det här steget måste vi göra några inställningar så att bokstäverna går till vår brevlåda. Hur man uppnår detta kommer att berätta nedan.
Vi måste klicka på den stora fliken "bokstaven". Det blir den andra efter formmallen.
Det första du ser är dina taggar som du lagt till, vi behöver dem infoga i brevet i brevet, det är att de kommer att ersätta de data som kommer in i användaren från formuläret. Jag tror att jag förklarade att det är begripligt.
Nu i fälten:
- För att (där ansökan skickas, i mitt fall är det här min e-postadress, du kan ange flera adresser där du vill skicka program)
- Från (där fältet är från, dvs att ersätta det värde som programmet kommer från min studio-webbplats)
- Tema (tjänar till att bestämma vilken formulär som helst, i vårt fall är det en ansökan med form av webbplatsfrämjande).
- Ytterligare rubriker (extra rubriker, rör inte dem, de behövs för korrekthet av sändningsformulär)
- Meddelande kropp (meddelandekroppen, här anger du från vilken brevet kom från och från vilken adress, till exempel: "Från: Ivan" "Mail Adress: vasya @ mail. Ru »)
- Filer (applikation till fil, rör inte)
Nu måste vi konfigurera meddelanden om de framgångsrika eller misslyckade e-postmeddelandena från WordPress-kontaktformuläret.
Dessa kommer att bli meddelanden som kommer att visas för användaren som svar på dess handlingar med formen. Som standard går de på engelska. Jag gjorde en överföring till ryssarna som är mest nödvändiga för dig. De kommer att vara mer än tillräckligt, och om inte, då översättaren Google hjälper dig. Så fortsätt.
- Om du skickar ett meddelande: "Ditt meddelande skickades framgångsrikt. Tack."
- Om du misslyckas med att skicka ett meddelande från formuläret: "Fel när du skickar ett meddelande. Vänligen försök senare eller kontakta webbplatsadministratören. "
- Fyllningsfel: "Fyllningsfel. Vänligen kolla alla fält och skicka igen. "
- De skickade data definieras som spam: "Fel när du skickar ett meddelande. Vänligen försök senare eller kontakta webbplatsadministratören. "
- Vissa villkor måste accepteras: "Vänligen acceptera villkoren för fortsättning."
- Vissa fält måste fyllas: "Vänligen fyll i ett obligatoriskt fält."
- Längden på tecknen i fältet överskrids: "Det indikeras för mycket data."
- Otillräcklig symbollängd i fältet: "Data är för mycket."
- Ogiltigt datumformat: "Datumformat är felaktigt."
- Tidigt datum i minsta gräns: "Följande datum anges."
- Sendatum vid den maximala gränsen: "Det sista datumet anges."
- Misslyckad fil Laddar: "Misslyckades med att ladda upp en fil."
- Olöst filtyp: "Den här typen av fil är inte tillåten."
- Laddar för stor fil: "Den här filen är för stor."
- Filladdning misslyckades på grund av PHP-fel: "Skicka en fil misslyckades. Ett fel uppstod. "
- Det numeriska format som introduceras av avsändaren är felaktigt: "Numeriskt format är felaktigt."
- Numret är mindre än minsta gränsen: "Detta nummer är för litet."
- Numret är större än den maximala gränsen: "Detta nummer är för stort."
- Avsändaren angav inte rätt svar på frågan: "Du har introducerat ett felaktigt svar."
- E-postadress som introduceras av avsändaren är felaktig: "Felaktig e-post."
- Den URL som introducerades av avsändaren är felaktig: "Felaktig URL."
- Telefonnumret som anges av avsändaren är felaktigt: "Felaktigt telefonnummer."
Mycket bra. Med formuläret är vi färdiga, nu måste du infoga den till webbplatsen. För detta, den redan kända tekniken, låt oss gå till en befintlig sida eller skapa en ny. I ditt exempel visar jag ett exempel på en befintlig blankett på WordPress-webbplatssidan.
Eftersom vår form samlar in applikationer för webbplatsfrämjande, låt oss gå till en liknande sida.
För att infoga vår kontaktform måste vi kopiera, tilldelas den med ett plugin, en kortnummer. Det är tillgängligt som kallas din form.
Kopiera och sätt in i vår sida, efter att ha passerat textredigerare (inte visuell). Presenteras i skärmdumpen nedan:
Spara vår sida och se vad som hände i slutet i webbläsaren:
Super! Låt oss nu försöka skicka formuläret utan att fylla i. Och det är vad vi kommer att se.
Ett fel på att skicka från formuläret har inträffat, eftersom användaren inte anger nödvändiga data i fälten. Låt oss nu ange rätt data och se vad vi lyckas i det här fallet. 
Vi klickar för att skicka och det här är vad vår form skriver:
Låt oss nu se vad vår ansökan ser ut. De kommer från mig till Milovskaya Mail. Kontrollera leverans:
Låt oss gå in för att se till att kodningen och alla data är korrekta.
Allt är okej. Blanketten fungerar bra och skickar data. Nu kan vi samla in applikationer som kommer till dig när du gör om vi pratar om regional kampanj.
Så vi berättade hur du gör en kontaktformulär på WordPress på webbplatsens sida. Nu ska jag berätta för dig hur man gör popup Adaptive Feedback Form Använda vår plugin-kontaktformulär 7.
Vi gör en popup-anpassad återkopplingskontaktformulär på WordPress
För att vårt formulär ska kunna anpassas, d.v.s. gummi, måste vi ansluta ett annat plugin, och mer exakt dess tillägg till kontaktformulär 7 - det heter Bootstrap Kontaktformulär 7. Installera och helt enkelt aktivera och alla - det fungerar. Inga inställningar behöver inte göra med honom. Installerad och glömd.
I nästa steg kommer jag att berätta vilka förändringar som ska göras så att vår form blir popup och adaptiv. Jag gjorde en sådan realisering på huvudsida av sin studio webbplats. För att göra detta vänder vi oss till index.php-mallen, som ligger i avsnittet "Exteriör". Vi kommer bara att arbeta med koden, manuellt.
Vår popup-formulär visas i dialogrutan Modal enligt följande:
För att uppnå detta resultat behöver du följande kod, jag kommer att föreställa mig det helt i snippet:
Att beställa
< a href = "#" class = "btn btn-primary btn-flat" data - toggle = "modal" data - target = "#modal2" > Att beställa< / a > < ! -- Modal -- > < div class = "modal contact-modal fade" tabindex = "-1" id = "modal2" role = "dialog" aria - labelledby = "myModalLabel" aria - hidden = "true" > < div class = "modal-dialog" > < div class = "modal-content" > < div class = "modal-header" > < button type = "button" class = "close" data - dismiss = "modal" > < span aria - hidden = "true" > & Gånger;< / span > < span class = "sr-only" > Stänga< / span > < / button > < h4 class = "modal-title black" id = "myModalLabel" > Skicka in din ansökan< / h4 > < / div > |
Från författaren: En bra kontaktsida är mycket viktigt för att upprätthålla relationer med sina besökare. Oavsett om vi talar e-handel, tidskrifter, personliga webbplatser, online-tjänster - som det första verktyget för kommunikation med dig, söker vanligtvis en kontaktsida. Konstigt, men många webbdesigners försummar den blygsamma kontaktsidan, även om det är en av de minst viktiga aspekterna av webbplatsen. Låt oss fixa det.
Värdet på en bra kontaktsida
Kontaktsidan saknas ofta från vyn. Hur många webbplatser du besökte, som vill kontakta för att klaga på produkten eller tjänsten, eller ställa en fråga? Och hur ofta måste du kämpa med kontaktformuläret?
Bra kontaktsida är fördelaktig för alla typer av verksamheter. Hon kan öka kundnöjdheten, vilket hjälper till att lösa sina problem. Det kan också bidra till att förbättra sina produkter och tjänster, vilket garanterar ett brett sätt för en värdefull recension.
När det gäller att återkalla en direktanvändare kan andra kanaler vara begränsade. TV, radio, tidskrifter, tidningar ... Alla är en form av ensidig kommunikation. Online-kommunikation ska vara en dubbelsidig gata; Dialog mellan företag och besökare. Favorit från det här är båda parter, och det är därför den goda kontakterna är så viktig.
Plats
Första steget: Placering av din kontaktinformation. Det är ingen mening att ha den bästa kontaktsidan i världen, om dina besökare inte kan hitta den. Du kan hjälpa dem om du följer några designertraditioner.
I allmänhet kan kontaktinformation vara placerad på två ställen:
Huvudnavigering - Perfekt ställe att länka till kontaktsidan. Besökare söker vanligtvis en kontaktsida till höger, eftersom det ses av elementet i det sekundära värdet. Följaktligen kommer du helt enkelt att se en länk till kontaktsidan som ett av de senaste navigationsposterna.
Vi kan också titta på mindre subnavigation i det övre högra hörnet av skärmen. Detta är också ett värdefullt läge för kontaktsidan. Förresten är det bättre att undvika placeringen av kontaktsidan i rullgardinsmenyn, eftersom det är lätt att hoppa över det.
footer Det är också ett populärt resmål för kontaktinformation. Det kan innehålla en länk till kontaktsidan:
... eller den viktigaste kontaktinformationen:
Förutse flödet av besökare på kontaktsidan är svårt, så placeringen av referenser åtminstone på de två nämnda platserna kommer säkert att tvinga dig.
Det viktigaste på kontaktsidan
Nu är du lugn - dina besökare kommer att kunna hitta en väg till kontaktsidan, och det är dags att tänka på sitt faktiska innehåll. Låt oss börja med huvudet och överväga den information som måste vara representerad.
E-post Email / Kontaktformulär
E-postadress är det enklaste sättet till online-verksamhet i affärer. Alternativt kan du använda ett kontaktformulär som refererar till e-post. Genom formuläret får du mer kontroll över innehållet (nödvändigt för att fylla fältet) och så kan förhindras av spam. Vi kommer att berätta om kontaktformulär i den här artikeln nedan.
Adress
Affär med en traditionell butik bör inte glömma att nämna din adress. Om du har många butiker är det bäst att skapa en enskild sida för var och en. Fyll det med en separat kontaktinformation för den här butiken, arbetstid, färdschema, etc. Det är nödvändigt inte bara för besökare, men kan hjälpa din webbplats i lokala sökfrågor.
Telefon
Visningen av telefonnumret orsakar en känsla av förtroende. Detta anses ofta som ett tecken på ett riktigt befintligt företag, och det hjälper verkligen online-butiker.
Många webbplatser började lägga till knappen för de sociala nätverken till kontaktsidan. Även om det kanske inte gagnar alla webbplatser, för vissa besökare har ytterligare mening. Särskilt eftersom fler och fler företag erbjuder kundsupport genom Twitter (ibland även dygnet runt och utan dagar utanför).
Dessutom
Det finns ingen universell lösning för en bra kontaktsida. Varje webbplats eller företag kräver vissa delar som kan vara onödiga på andra platser.
Det finns många ytterligare information eller egenskaper som kommer att vara användbara på kontaktsidan. För traditionella butiker är en bra idé att nämna, säga, öppettider. Stort företag kan hänvisa till deras livechatt, och e-handelsplatser kan konsolidera användarförtroendet, som svävar sitt momsnummer.
Bekväm information
Enkel användning av information skyddar dina besökare från besvikelsen av kontaktsidan.
I stället för bilder, aktivera din information i form av HTML-text. Html text Du kan kopiera och klistra in som underlättar besökaren för att spara dina kontaktdata.
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. postklient. Med denna teknik kan det dock vara ett problem i ansiktet av spamrobs som samlar e-postadresser relaterade till mailto :. Därför kan du bestämma dig först för att förvirra dem med hjälp av tjänsten som mailtoencoder.com.
Bakgrund Obs! Telefonnummer ska också vara interaktiva. Förra året skrev vi ett litet tips om hur man gör ett telefonnummer känsligt för ett klick. Tack vare det lilla fragmentet av koden identifierar smartphones telefonnummer och gör det möjligt att ringa dem. Det är verkligen bekvämt att mobila användare.
Företag som är starkt beroende av sina traditionella butiker, får ofta mycket nytta av ett interaktivt kort, vilket ger användaren möjlighet att snabbt hitta vägen till försäljningspunkter. Visa butiksadressen, och lägg till ett interaktivt kort ännu bättre.
Tack Google kartor. sätta i användbar egendom lätt som en plätt. Ange bara din adress i Google Maps och klicka på ikonen Länkar i sidokolumnen. Där för dig finns en insatskod.
Visste du att du kan anpassa kortet till dig själv? Du kan redigera färgerna på kortet, lägga till anpassade pekare på kartan och skapa en legend. Du kan läsa mer om detta på utvecklare.google.com. Du kan också tänka på användningen av alternativa tjänster, till exempel ganska attraktiva Mapbox.
Glöm inte på sökmotoroptimering
Som besökare kommer du omedelbart att känna igen adressen på kontaktsidan. SökmotorerEn liten hjälp krävs dock när man känner igen olika element.
Kontaktformulär
De flesta av webbplatserna tillämpar kontaktformuläret på deras sida. Men vissa former är onödigt komplicerade och ovänliga för användaren.
Oavsett hur enkelt kontaktformuläret verkade, är det faktiskt en kombination av flera komponenter. De måste alla arbeta tillsammans för att garantera användarens bästa intryck.
Inmatningsfält
Inmatningsfält, till exempel textfält, alternativ för val av alternativ (radiopooler), kryssrutor etc., tillåter användaren att göra den nödvändiga informationen.
Webbplatsbesökare är mer benägna att fylla korta former, eftersom de kräver mindre ansträngning. Antalet inmatningsfält balanserar mellan användarens intryck och affärsbehov. Hubspot analyserade mer än 40 000 former och ansåg effekten av att öka antalet inmatningsfält. Resultatet av deras forskning säger att den ska användas så få av formulärfälten och vara särskilt försiktiga med komplicerade textområden och rullgardinsmenyn.
Hjälp dina besökare att fylla i fälten, ange rätt format. Telefonnummer och datum kan vara fallgrop, särskilt för utländska besökare. HTML5 Placeholder attribut hjälper dig.
Därefter, se till att du tilldelar fältet du behöver fylla det (de är traditionellt isolerade med hjälp av asterisker *). Surhet att definitivt ange det obligatoriska och valfria för att fylla fältet.
Slutligen är det användbart att markera det aktiva fältet. Det kan betecknas knappast eller mycket ljus - som du vill.
Nedan är ett exempel på en kontaktform från en Jim Nielsen Jim. Den använder ett rött kedjehjul för obligatoriskt att fylla i fälten, ge råd om formaten och belyser det aktiva fältet.
Validering av form
Intern validering kan också förhindra vissa sjukdomar i kontaktformer. Behovet av att skicka och överföra formuläret på grund av introduktionen av felaktiga data eller data i fel format är mycket irriterande. Som redan nämnts här är det bäst att hjälpa besökare genom att visa det nödvändiga formatet (till exempel datum, telefonnummer ...).
Knappar
Utan sändningsknappen finns det ingen kontaktformulär. Det måste vara i slutet. Som texten på knappen, använd "Skicka meddelande" istället för "Skicka" för att påminna kunder vad de gör.
Den vanliga standarden sedan förra året är att aktivera knappen "Återställ" eller "Clear Shape". Gör inte det. Det trycker slumpmässigt. Det finns inget värre än att skriva ett väl genomtänkt detaljerat meddelande och förlora det på grund av "RESET" -knappen.
Svar
Besökaren gjorde sin kontaktinformation, skrev ett meddelande och tryckte på "Skicka" -knappen. Nu då? Gjorde meddelandet eller inte?
Ansure dina besökare genom att meddelandet har skickats genom att visa det lämpliga meddelandet. Använd också ett e-postmeddelande för att bekräfta.
Samma råd gäller fel. Felvisning Om du misslyckas med att skicka ett meddelande - ett behov som kan förhindra många framtida tvister. Ett felmeddelande ska vara vänligt, så undvik att visa de alarmerande felkoderna.
Kontakt Siddesign
Många gäller för konstruktionen av kontaktstationen tekniska kravmen glöm inte en av de viktigaste punkterna: Visuella stilar.
Om du använder kontaktformuläret, gör fälten i stora, vänliga och monterade fyllda dem. Vitt utrymme och indrag kommer att tjäna dig en bra tjänst.
Webbplatsbesökare följer mallen i form av bokstaven F när du tittar på en webbsida, så att när du skapar din markering, kom ihåg det här. För kontaktformulär är det bäst att placera alla fält vertikalt istället för att placera sin nära den andra. Så antalet nödvändiga besökares visningsrörelser reduceras när formuläret fylls.
Kontakt sida måste kombineras med visuella funktioner på webbplatsen. Sekvensen är nyckeln till perfektion. Titta, till exempel på den här kontaktsidan, skapad som ett vykort.
Och, som i fallet med de flesta webbdesignuppgifter; Kreativt tillvägagångssätt lönar sig perfekt. Neil Petel (Neil Patel) skapade sin kontaktsida i form av infographics, som tredubblar antalet kontaktförfrågningar.
Exempel på kontaktformer
Talar om bra kontaktformulär, låt oss se inspiration för dessa exempel (klicka på bilden för att besöka motsvarande webbplats):
Slutsats
Innan du skapar designen på din kontaktsida, se till att besökare kan hitta den. Gör en hänvisning till den från huvudnavigering eller sidfot. Kom ihåg att de flesta söker kontaktinformation på höger sida av skärmen.
Tänk på vilken information du behöver aktivera. Möjligheten att skicka ett meddelande via e-post eller kontaktform är brådskande viktigt. Adress- och telefonnumret kan också vara användbart. ytterligare information, som länkar till profiler i sociala nätverk Och öppettiderna för vissa typer av affärer behövs också.
Interaktivitet är viktigt. Applicera MAJTO-attributet för e-postadresser och TEL-attributet: för telefonnummer (Det är mycket användbart för besökare från mobila enheter). Du kan infoga en interaktiv karta, som Google Maps, men överväga dess effekter för prestanda.
Användbarhetskontaktformulär kan skapa eller förstöra kontaktsidan. Begära endast den mest nödvändiga informationen. Du kan undvika huvudvärk, vilket visar rätt format av inmatningsfält och tillämpar intern validering. ON Glöm att visa en lyckad sändning av meddelanden när du skickar ett formulär.
