Ինչու՞ պետք է ձեր WordPress ձևերը հարմարեցված լինեն բջջային սարքերին
Բոլոր վեբ տրաֆիկի կեսից ավելին գալիս է բջջային սարքերից: Եթե ձեր ձևերը լավ չեն աշխատում հեռախոսների և պլանշետների վրա, դուք ամեն օր կորցնում եք հայտերը և հնարավոր է՝ հաճախորդներ:
Այս ուղեցույցում դուք կսովորեք, թե ինչու են կարևոր բջջային սարքերին հարմարեցված ձևերը և ինչն է դարձնում ձևը իսկապես բջջային սարքերին հարմարեցված։
Բջջային իրականություն
Բջջային երթևեկության վիճակագրություն
- 59% + համաշխարհային վեբ-երթևեկության մեծ մասը բջջային է
- 92% ինտերնետ օգտագործողների մուտքը բջջային հեռախոսի միջոցով
- 70% որոշ ոլորտներում վեբ տրաֆիկի մեծ մասը բջջային է
- Բջջային հեռախոսների օգտագործումը տարեցտարի շարունակում է աճել
Ինչ է սա նշանակում Forms-ի համար
Եթե ձեր կայքը օրական ունենում է 1,000 այցելու,
- Մոտ 600-ը գտնվում են բջջային սարքերի վրա
- Անպատասխանատու ձևերը հիասթափեցնում են այս այցելուներին
- Հիասթափված այցելուները լքում են ձևաթղթերը
- Լքված ձևաթղթեր = կորցրած հաճախորդներ, վաճառք, հետադարձ կապ
Ի՞նչ է պատահում չպատասխանող ձևերի հետ
Օգտագործողի փորձը
Անպատասխանատու ձևաթղթի վրա բջջային օգտատերերը բախվում են.
Փոքրիկ տեքստ
- Պիտակները չափազանց փոքր են կարդալու համար
- Հրահանգներին նայելիս աչքերը կկոցած նայում
- Կարևոր տեղեկատվության բացակայություն
Անհնար մուտքագրման դաշտեր
- Տեքստային տուփեր չափազանց փոքր է ճշգրիտ հարվածելու համար
- Սխալ մուտքագրում fields
- Մշտական մեծացում/փոքրացում
Կոտրված դասավորություններ
- Դաշտերը կտրում են էկրանի եզրերը
- Հորիզոնական գլորումը պարտադիր է
- «Ուղարկել» կոճակը թաքցված է կամ անհասանելի
Հիասթափեցնող փոխազդեցություններ
- Իջնող ցանկեր դժվար է ընտրել
- Տուփեր չափազանց փոքր է սեղմելու համար
- Ամսաթվի ընտրիչներ ոչ պիտանի
Արդյունքը
Օգտատերերը հանձնվում են։ Նրանք՝
- Ամբողջությամբ հրաժարվեք ձևից
- Թողեք ձեր կայքը հիասթափված
- Գնացեք ավելի լավ մարզավիճակ ունեցող մրցակցի մոտ
- Երբեք չվերադառնալ
Անպատասխանատու ձևերի արժեքը
Կորած կոնվերսիաներ
Յուրաքանչյուր լքված ձև կորցրած հնարավորություն է։
- Կապի ձև → Կորած հաճախորդ
- Գնանշման հարցում → Կորած վաճառք
- Գրանցում → Կորած հաճախորդ
- Հետադարձ կապի ձև → Կորած պատկերացումներ
Վնասված հեղինակություն
Վատ բջջային փորձը արտացոլվում է ձեր ապրանքանիշի վրա.
- «Այս ընկերությունը թվում է հնացած»
- «Նրանք չեն հետաքրքրվում օգտագործողի փորձով»
- «Եթե նրանց ձևաչափերը վատն են, ապա ի՞նչ կասեք նրանց արտադրանքի մասին»։
SEO ազդեցություն
Google-ը առաջնահերթություն է տալիս բջջային սարքերի համար հարմարեցված կայքերին.
- Բջջային հեռախոսների համար նախատեսված ինդեքսավորումը ստանդարտ է
- Վատ բջջային փորձը վնասում է վարկանիշին
- Ավելի ցածր վարկանիշ = ավելի քիչ այցելություններ
Մրցակցային անբարենպաստություն
Մինչ դուք հիասթափեցնում եք բջջային օգտատերերին, լավ ձևաչափերով մրցակիցները՝
- Գրավեք կորցրած հավանականությունները
- Կառուցեք հարաբերություններ ձեր պոտենցիալ հաճախորդների հետ
- Աճեք, մինչ դուք զարմանում եք, թե ինչու են կոնվերսիաները ցածր
Ինչն է դարձնում ձևաթուղթը բջջային սարքերին հարմարվողական
1. Հեղուկի լայնությունը
Ձևերը պետք է հարմարվեն էկրանի չափսին՝
- Լրիվ լայնություն փոքր էկրանների վրա
- Հարմար լայնություն մեծ էկրանների վրա
- Հորիզոնական գլորում երբեք չկա
2. Ընթեռնելի տեքստ
Բոլոր տեքստերը ընթեռնելի են առանց մեծացնելու։
- Պիտակներ՝ նվազագույնը 14-16px
- Մուտքային տեքստ՝ առնվազն 16px (կանխում է iOS-ի մեծացումը)
- Օգնության տեքստ՝ նվազագույնը 12-14px
- Բավարար հակադրություն
3. Հպման համար հարմար թիրախներ
Մատների չափի հպման ենթակա տարրեր՝
- Նվազագույն հպման նպատակը՝ 44×44 պիքսել
- Տարրերի միջև բավարար հեռավորություն
- Հեշտությամբ կարելի է սեղմել նշատուփերը և ռադիոները
4. Շերտավոր դասավորություն
Բջջային հեռախոսում, տարրերը դասավորեք ուղղահայաց՝
- Մեկ դաշտ մեկ տողի համար
- Պիտակներ մուտքագրումների վերևում (ոչ թե կողքին)
- Լիալայնությամբ կոճակներ
5. Բնիկ մուտքագրման տեսակներ
Միացրեք համապատասխան բջջային ստեղնաշարերը՝
- Էլ․ փոստի դաշտ → Էլ․ փոստի ստեղնաշար (@, .com)
- Հեռախոսի դաշտ → թվային ստեղնաշար
- URL դաշտ → URL ստեղնաշար
- Թվային դաշտ → Թվային մուտքագրում
6. Բջջային սարքերի համար հարմար բաղադրիչներ
Հպման համար նախատեսված տարրեր.
- Բնիկ ամսաթվի ընտրիչներ (գլորվող անիվներ)
- Մեծ իջնող ցանկի ակտիվացուցիչներ
- Հպման համար հարմար ֆայլերի վերբեռնում
7. Տեսանելի «Ուղարկել» կոճակ
Օգտատերերը պետք է կարողանան գտնել և սեղմել «Ուղարկել» կոճակը՝
- Լրիվ լայնությամբ կամ աչքի ընկնող չափս
- Բարձր կոնտրաստային գույն
- Հստակ տեսանելի է առանց գլորելու (եթե հնարավոր է)
Բջջային ձևաթղթերի լավագույն փորձը
Ձևերը կարճ պահեք
Բջջային հեռախոսների օգտատերերը ավելի քիչ համբերություն ունեն.
- Տվեք միայն կարևոր հարցեր
- Հեռացնել «ցանկալի է ունենալ» դաշտերը
- Ավելի երկար ձևերի համար դիտարկեք բազմաստիճան տարբերակը
Օգտագործեք միասյունակ դասավորություն
Բազմասյունակ դասավորությունները խափանվում են բջջային հեռախոսում.
- Բոլոր դաշտերը դասավորեք ուղղահայաց
- Ավելի հեշտ է սկանավորել և լրացնել
- Համապատասխան փորձառություն տարբեր սարքերում
Օպտիմալացնել դաշտերի կարգը
Դաշտերը տրամաբանորեն տեղադրեք՝
- Ամենակարևորը նախ
- Առնչվող դաշտերը խմբավորված են
- Հեշտ է հասնել բութ մատներով
Տրամադրեք հստակ պիտակներ
Պիտակները պետք է լինեն միանշանակ՝
- Դաշտի վերևում (ներսում լողացող չէ)
- Միշտ տեսանելի (մի՛ հույսը դրեք միայն տեղապահի վրա)
- Նկարագրական, բայց հակիրճ
Միացնել ավտոմատ լրացումը
Թույլ տվեք զննարկիչներին օգնել օգտատերերին՝
- Անուն, էլ․ հասցե, հեռախոսահամարի ավտոմատ լրացում
- Հասցեի ավտոմատ լրացում
- Նվազեցնում է փոքր ստեղնաշարերի վրա մուտքագրումը
Ցուցադրել վավերացումը տողի մեջ
Օգնեք օգտատերերին անմիջապես շտկել սխալները՝
- Սխալի հաղորդագրություններ դաշտերի կողքին
- Իրական ժամանակի ստուգում, երբ հնարավոր է
- Հստակ հրահանգներ շտկելու համար
Կոճակները դարձրեք ակնհայտ
Ուղարկել կոճակները պետք է առանձնանան՝
- Հակապատկեր գույն
- Մեծ թակման թիրախ
- Գործողության հստակ տեքստ («Ուղարկել», «Ուղարկել», «Գրանցել»)
Բջջային սարքերի արձագանքման թեստավորում
Բրաուզերի մշակման գործիքներ
Արագ փորձարկում աշխատասեղանի զննարկիչում.
- Բացեք ձեր ձևի էջը
- Սեղմեք F12 (մշակողի գործիքներ)
- Սեղմեք սարքի անջատիչի պատկերակը
- Ընտրեք տարբեր չափերի սարքեր
- Փորձարկման ձևի փոխազդեցություն
Իրական սարքի փորձարկում
Ոչինչ չի կարող համեմատվել իրական սարքերի հետ.
- Փորձարկում iPhone-ի և Android-ի վրա
- Փորձարկում պլանշետների վրա
- Փորձեք տարբեր էկրանի չափսեր
- Իրականում լրացրեք ձևը
Ինչ փորձարկել
- ✓ Կարո՞ղ եք կարդալ բոլոր պիտակները առանց մեծացնելու։
- ✓ Հե՞շտ է մուտքագրման դաշտերը սեղմելը։
- ✓ Արդյո՞ք ճիշտ ստեղնաշարը երևում է։
- ✓ Կարո՞ղ եք հեշտությամբ ընտրել ցանկից ընտրանքները։
- ✓ Հնարավո՞ր է հպել նշատուփերին/ռադիոներին։
- ✓ «Ուղարկել» կոճակը տեսանելի՞ է և հասանելի՞
- ✓ Արդյո՞ք ձևը հաջողությամբ է ներկայացվել։
- ✓ Սխալի հաղորդագրությունները տեսանելի և հստակ են՞
Google Mobile- ի Friendly Test
Ստուգեք էջի ընդհանուր հարմարությունը բջջային սարքերի համար՝
- Անցեք Google-ի բջջային սարքերի համար հարմարեցվածության թեստավորման գործիքին
- Մուտքագրեք ձեր ձևի էջի URL-ը
- Վերանայեք արդյունքները և առաջարկները
Հաճախակի խնդիրներ բջջային ձևաթղթերի հետ
Խնդիր՝ տեքստը չափազանց փոքր է
Պատճառը ` Ֆիքսված պիքսելների չափերը չեն մասշտաբավորվում
Լուծում Օգտագործեք հարաբերական չափման միավորներ (em, rem) կամ առնվազն 16px
Խնդիր՝ Դաշտերը չափազանց նեղ են
Պատճառը ` Ֆիքսված լայնության կոնտեյներներ
Լուծում Օգտագործել տոկոսային լայնություններ (100% բջջային հեռախոսի վրա)
Խնդիր. Ստեղնաշարի ծածկոցների ձև
Պատճառը ` Ստեղնաշարի հայտնվելիս ոլորման կարգավորում չկա
Լուծում Համոզվեք, որ կենտրոնացված դաշտը հայտնվում է տեսադաշտում
Խնդիր. Մեծացնել մուտքային ֆոկուսի վրա (iOS)
Պատճառը ` Տառատեսակի չափը մուտքագրումներում 16px-ից պակաս է
Լուծում Սահմանեք մուտքային տառատեսակի չափը առնվազն 16px
Խնդիր. Դժվար է օգտագործել ցանկերը
Պատճառը ` Հատուկ իջնող ցանկերը չեն օպտիմիզացված սենսորային էկրանի համար
Լուծում Օգտագործեք բնիկ ընտրության տարրեր կամ հպման համար հարմար այլընտրանքներ
Խնդիր. Ուղարկել կոճակը էկրանից դուրս է
Պատճառը ` Երկար ձևեր՝ առանց տեսանելի առաջընթացի
Լուծում Կպչուն ներկայացման կոճակ կամ հստակ ոլորման ցուցիչներ
Բջջային հեռախոսների համար նախատեսված առանձնահատկություններ
Սեղմեք զանգի համար հեռախոսային հղումներ
Հաստատումներում հեռախոսահամարները պետք է հասանելի լինեն սեղմելու համար։
- Կապեր tel: protocol-ի հետ
- Մեկ հպումով զանգահարեք
Տեղադրության հայտնաբերում
Հասցեի դաշտերի համար՝
- Ընթացիկ գտնվելու վայրն օգտագործելու տարբերակ
- Քաղաքի/շրջանի ավտոմատ լրացում
Տեսախցիկի ինտեգրում
Ֆայլերի վերբեռնման համար՝
- Տեսախցիկի անմիջական մուտքի հնարավորություն
- Լուսանկարների գրադարան մուտք
- Փաստաթղթերի սկանավորում
Հպեք Ժեստերը
Բնական բջջային փոխազդեցություններ.
- Սահեցրեք ձևի քայլերի միջև
- Քաշեք՝ թարմացնելու համար
- Մեծացնելու համար սեղմեք մատները (անհրաժեշտության դեպքում)
Արդյունավետություն բջջային սարքերում
Ինչու է արագությունն ավելի կարևոր բջջային հեռախոսներում
- Բջջային կապը հաճախ ավելի դանդաղ է
- Որոշ օգտատերերի համար տվյալների սահմանափակումներ
- Ավելի քիչ համբերություն բջջային հեռախոսի հետ
- Մարտկոցի սպառման նկատառումներ
Ձևի արդյունավետության խորհուրդներ
Նվազագույնի հասցնել ձևի քաշը
- Թեթև ձևաչափի հավելվածներ
- Նվազագույն CSS/JavaScript
- Օպտիմալացված ակտիվներ
Հնարավորության դեպքում դանդաղ բեռնում
- Բեռնեք ձևի տարրերը ըստ անհրաժեշտության
- Մի՛ բեռնեք թաքնված պայմանական դաշտերը նախապես
Օպտիմալացնել պատկերները
- Սեղմեք ցանկացած պատկեր ձևերում
- Օգտագործեք համապատասխան ձևաչափեր (WebP)
- Արձագանքող պատկերի չափսեր
Ավտոմատ ձևաթղթերի կառուցողի բջջային մոտեցումը
Ավտոմատ ձևաթղթերի կառուցող կառուցված է բջջային հեռախոսների համար նախատեսված՝
Լռելյայնորեն արձագանքող
- Բոլոր ձևերը ավտոմատ կերպով արձագանքում են
- Հատուկ կարգավորում անհրաժեշտ չէ
- Հարմարվում է ցանկացած էկրանի չափի
Հպման համար օպտիմալացված դաշտեր
- Ճիշտ չափի թիրախներ
- Բնական բջջային մուտքագրումներ
- Սենսորային ամսաթվի/ժամի ընտրիչներ
Բջջային հեռախոսների համար նախատեսված ոճավորում
- Փոքր էկրանների վրա կուտակման դասավորություն
- Լրիվ լայնությամբ դաշտեր բջջային հեռախոսում
- Ընթեռնելի տառատեսակների չափսեր
Թեթև կատարողականություն
- JavaScript-ի նվազագույն հետք
- Արագ բեռնվող ձևեր
- Օպտիմիզացված է բջջային ցանցերի համար
Ստուգաթերթիկ. Ձեր ձևաթուղթը հարմար է՞ բջջային սարքերի համար։
նախագիծ
- ☐ Մեկ սյունակ բջջային հեռախոսում
- ☐ Հորիզոնական գլորում չկա
- ☐ Լրիվ լայնությամբ դաշտեր
- ☐ Տարրերի միջև բավարար հեռավորություն
Տպագրություն
- ☐ Պիտակներ, որոնք կարդացվում են առանց մեծացման (14px+)
- ☐ Մուտքագրեք առնվազն 16px տեքստ
- ☐ Լավ կոնտրաստի հարաբերակցություններ
Փոխազդեցությունների
- ☐ Հպման թիրախներ՝ առնվազն 44px
- ☐ Ճիշտ ստեղնաշարի տեսակներ
- ☐ Հեշտ իջնող ընտրացանկ
- ☐ Հպելի նշատուփեր/ռադիոներ
Ֆունկցիոնալությունը
- ☐ Ձևաթուղթը հաջողությամբ ուղարկվել է
- ☐ Սխալի հաղորդագրությունները տեսանելի են
- ☐ Հաջողության մասին հաղորդագրությունը ցուցադրվում է
- ☐ Ֆայլերի վերբեռնումը գործում է
Performance
- ☐ Արագ բեռնվում է 3G-ում
- ☐ Արգելափակող սկրիպտներ չկան
- ☐ Տվյալների նվազագույն օգտագործում
Հաճախակի տրվող հարցեր
Ինչո՞ւ են իմ ձևերը մեծացվում iOS-ում, երբ ես սեղմում եմ որևէ դաշտի վրա։
iOS-ը ավտոմատ կերպով մեծացնում է մեծացումը, երբ մուտքային տառատեսակի չափը 16 պիքսելից փոքր է: Դա կանխելու համար սահմանեք մուտքային տառատեսակի չափը առնվազն 16 պիքսել:
Արդյո՞ք պետք է առանձին բջջային և համակարգչային ձևեր ստեղծեմ։
Ոչ՝ ադապտիվ դիզայնը լուծում է երկուսն էլ։ Մեկ լավ մշակված ադապտիվ ձևը աշխատում է բոլոր սարքերի վրա։ Առանձին ձևերի պահպանումը կրկնապատկում է ձեր աշխատանքը և ռիսկի է ենթարկում անհամապատասխանությունների։
Ինչպե՞ս փորձարկել այն սարքերի վրա, որոնք ես չունեմ։
Օգտագործեք դիտարկիչի մշակողի գործիքները հիմնական թեստավորման համար: Մանրակրկիտ թեստավորման համար օգտագործեք BrowserStack-ի նման առցանց ծառայություններ կամ հարցրեք տարբեր սարքեր ունեցող ընկերներին/գործընկերներին:
Արդյո՞ք բջջային օգտատերերը իրականում լրացնում են ձևաթղթեր։
Այո՛։ Բջջային առևտուրը և լիդերի գեներացումը հսկայական են։ Օգտատերերը ակնկալում են առաջադրանքներ կատարել բջջայինով։ Եթե ձեր ձևերը լավ են աշխատում, նրանք կօգտագործեն դրանք։
Ո՞րն է բջջային ձևի ամենակարևոր բարելավումը։
Ճիշտ չափսեր դիպչելու թիրախի համար։ Եթե օգտատերերը չեն կարողանում ճշգրիտ սեղմել դաշտերը և կոճակները, ապա ուրիշ ոչինչ կարևոր չէ։ Համոզվեք, որ բոլոր ինտերակտիվ տարրերը առնվազն 44×44 պիքսել չափի են։
Ամփոփում
Բջջային հեռախոսներին հարմարեցված ձևերի ստեղծում.
- Հասկացեք խաղադրույքները – 60%+ տրաֆիկը բջջային է
- Օգտագործեք արձագանքող դիզայն – Հեղուկ լայնություններ, դարսված դասավորություն
- Չափսը՝ դիպչելու համար – 44px նվազագույն հպման թիրախներ
- Ապահովեք ընթեռնելիությունը – 16px նվազագույն մուտքային տեքստ
- Ակտիվացնել աջ ստեղնաշարերը - Օգտագործեք համապատասխան մուտքագրման տեսակներ
- Փորձարկում իրական սարքերի վրա – Մի՛ օգտագործեք միայն սիմուլյատորներ
- Ընտրեք արձագանքող գործիքներ – Սկսեք բջջային սարքերի համար նախատեսված ձևաթղթերի կառուցողներից
Եզրափակում
Բջջային սարքերին հարմարեցված ձևերը պարտադիր չեն, դրանք անհրաժեշտ են։ Քանի որ վեբ տրաֆիկի մեծ մասը գալիս է բջջային սարքերից, հեռախոսների վրա չաշխատող ձևերը ամեն օր կորցնում են ձեզ հավանական հաճախորդներ, հաճախորդներ և հեղինակություն։
Ավտոմատ ձևաթղթերի կառուցող ավտոմատ կերպով ստեղծում է բջջային սարքերին հարմարվող ձևեր: Յուրաքանչյուր ձև հարմարվում է էկրանի չափսին, օգտագործում է սենսորային տարրեր և լավ է աշխատում բջջային ցանցերում: Կարգավորում անհրաժեշտ չէ. պարզապես ստեղծեք ձեր ձևը, և այն կաշխատի ամենուրեք:
Պատրա՞ստ եք բջջային սարքերի համար հարմարեցված ձևաթղթերի համար։ Ներբեռնեք ավտոմատ ձևաթղթերի կառուցիչը և ձեր բջջային կայքի այցելուներին տվեք այն փորձը, որին նրանք արժանի են։
