Հեռավոր պրակտիկա `շարժական ընկերական կայք կառուցելու համար

կառուցելով շարժական բարեկամական կայք


2015-ին Google- ը դուրս բերեց «Mobilegeddon» ալգորիթմը, որը պատժի ենթակա կայքեր են, որոնք շարժական բարեկամական չեն: Համաձայն այս ալգորիթմի, կնվազի այն կայքերի դասակարգումը, որոնք շարժական չեն եղել.

Ինչպես տեսնում եք, որ բջջային հեռախոսն անցել է աշխատասեղաններին և նոութբուքերին և հանդիսանում է առավել լայնորեն օգտագործվող սարք ինտերնետի զննման համար: Google- ը խրախուսել է բիզնեսին նախ մտածել բջջայինի մասին.

բջջային տվյալների տրաֆիկի գլոբալ աճը

Սա նշանակում է, որ գրաֆիկական դիզայներներն ու շուկայավարողները կայքէջում աշխատելիս պետք է ընդլայնեն իրենց տեսողությունը անցյալ աշխատասեղաններն ու նոութբուքերը.

Ինչ է շարժական ընկերական կայք?

ինչ է շարժական բարեկամական կայքը

Ինչպես անունն է հուշում, բջջային կապի համար նախատեսված կայքը կայքն է, որը մշակված, մշակված և օպտիմիզացված է, որպեսզի կայքը դյուրին լինի բջջային հեռախոսների վրա – այն ավելի խճճված և հրամայական է, քան թվում է: Առավել հիմնական մակարդակում. Օգտվողները ցանկանում են պարունակություն, որը հեշտ է դիտել բջջային սարքերում.

Եթե ​​ձեր տեքստը շատ փոքր է, կամ պատկերները չեն բեռնվում, օգտվողները կզգան և կթողնեն: Հետևաբար շատ կարևոր է բովանդակությունը պատշաճ չափորոշել: Դժբախտաբար, դժվար է իրականացնել, քանի որ սմարթֆոնները, պլանշետները տարբեր չափերի և լուծումներ են ունենում. հետևաբար գոյություն չունի ֆիքսված ձևաչափ, որպեսզի բովանդակությունը կատարյալ ցուցադրվի «յուրաքանչյուր» սարքում.

Ահա մի քանի խորհուրդներ, որոնք կօգնեն ձեզ օպտիմիզացնել ձեր կայքը բջջայինի համար.

Խուսափեք շարժական ընկերական առանձին կայք կազմելուց.

խուսափեք շարժական ընկերական առանձին կայք կազմելուց

Իրականացումը դյուրին դարձնելու համար, երբեմն, դիզայներները, միաժամանակ բջջային կայք մշակելու համար, որոշում են բովանդակությունը կրճատել «տեղավորվելու» համար, և որ մասերը չեն ցուցադրում բջջայինում: Այնուամենայնիվ, մենք չենք կարող վերահսկել, թե որ տիպի բովանդակությունն են օգտվողները ցանկանում տեսնել, և ոչ էլ հնարավոր է աշխատասեղանի համար առանձին տարածք ստեղծել, բացի աշխատասեղանից.

Google- ը կպատժի ձեզ, եթե պարզի, որ դուք նույն բովանդակություն ունեք երկու նույն կայքերի համար `մեկը սեղանադիր և / կամ նոութբուքերի տարբերակ է, մյուսը` բջջային տարբերակ, քանի որ կա միայն մեկ Google: Այսպիսով, նույնիսկ մի մտածեք բջջային ցանցի համար առանձին կայք ստեղծելու մասին.

Օգտագործեք պատասխանատու ձևավորումներից.

օգտագործեք պատասխանատու դիզայնի ձևանմուշներ

Պատասխանատու ձևավորումը թույլ է տալիս կայքի մշակողներին ստեղծել կայք, որը հեշտությամբ կարելի է դիտել տարբեր չափերի սարքերի վրա. Սա նվազեցնում է հավելյալ ջանքերի քանակը, որոնք պետք է ներդրողները ներդնեն, որպեսզի կայքը համատեղելի լինի սարքի տարբեր չափերի հետ.

Պատասխանատու դիզայնի մեջ օգտագործվում են ճկուն պատկերներ, ճկուն դասավորություններ և ոճային թերթի մեդիա հարցումների մեծացում: Երբ այս պատասխանատու ձևավորումն օգտագործվում է կայքում, վեբ-էջը կկարողանա հայտնաբերել օգտագործողի էկրանի չափը և դիրքավորումը, այնուհետև համապատասխանաբար կարգավորել վեբ էջի դասավորությունը.

Օգտագործեք լրատվամիջոցների հարցումները.

Լրատվամիջոցների հարցումները թույլ են տալիս հարցնել մի սարք դրա չափի մասին, այնուհետև մատնանշել զննարկչին ՝ ցուցադրելու իրերը կոդով սահմանած CSS- ի շարքից հետո.

օրինակ ՝ լրատվամիջոցների էկրանի հարցումներից

Լրատվամիջոցների հարցումները հանդիսանում են շարժական ընկերությունների համար առավել կարևոր վեբ կայքերի հիմնական մասը, բայց մինչ այդ պետք է համոզվել, որ համակարգը պատշաճ կերպով կազմաձևված է ներկայումս օգտագործվող բոլոր սարքերի համար `ոչ միայն երկու կամ երեք ամենատարածված շարժական սարքերը: Այս տեղեկությունները ստանալու համար պահեք սարքերի ցուցակը, կամ կարող եք բաժանորդագրվել.

Օգտագործեք Bootstrap- ի նման շրջանակներից.

Առջեւի ավարտի համար կարող եք օգտվել ազատորեն մատչելի շրջանակներից, ինչպիսիք են Հիմնադրամ 3, Կմախք այլն: Լավագույն անվճար շրջանակն է Twitter- ի Bootstrap- ը.

օգտագործել bootstrap շրջանակը

Bootstrap- ը առաջնային շրջանակ է, որը նախատեսված է ձեր կայքի վեբ էջը արագ և անխուսափելիորեն չափելու ցանկացած սարքի համար:. Նախապես կառուցված համակարգն աշխատելը շատ ավելի հեշտ է, քան նոր կոդ ստեղծելը յուրաքանչյուր հնարավոր համադրության համար ինքնուրույն (և նույնիսկ փորձարկել) – և դա շատ ավելի ցածր է և դուրս.

Բայց նախքան որևէ շրջանակ օգտագործելը, համոզվեք, որ ուսումնասիրեք, թե արդյոք շրջանակն ամբողջությամբ համատեղելի է ձեր կայքի և նպատակների հետ: Որքան ավելի շատ են ձեր վեբ կայքում տեղադրված մաքսային ծածկագրերն ու գործառույթները, այնքան ավելի դժվար կլինի ապահովել, որ ամեն ինչ սահուն աշխատի շարժական սարքի վրա. օգնություն ստացեք մասնագետից, եթե որևէ դժվարության եք հանդիպում.

Միշտ օգտվեք վիրտուալ Meta Tag- ից:

Դիտումը վիրտուալ տարածք է, որն օգտագործվում է զննարկչի մեկնաբանող շարժիչի կողմից ՝ որոշելու, թե ինչպես է բովանդակությունը մասշտաբավոր և չափավոր: Ասելով դա, դա շատ կարևոր ծածկագիր է ՝ բազմաբնակարանային փորձառություն կառուցելիս: Առանց այս ծածկագրի ՝ ձեր կայքը լավ չի աշխատի բջջային սարքի վրա.

Viewport պիտակը ձեր զննարկչին ասում է, որ էջը պետք է տեղավորվի էկրանին. Կան բազմաթիվ այլ կազմաձևեր, որոնք դուք կարող եք ասել ձեր տեսադաշտը վերահսկելու համար: Հետևյալը առաջարկվում է, որը պետք է օգտագործվի փաստաթղթի սկզբում.

Zero- ն ավելի պարզ դիզայնով.

օգտագործել պարզ պատասխանատու դիզայն

Գրասեղանի և բջջային կայքերի միջև էական տարբերությունն այն է, որ բջջային հեռախոսը դիտելիս մարդիկ նախընտրում են վեբ կայքի պարզ ձևավորում: Սա իրական աշխարհի իրերի նման է, ինչպես և ցանկացած այլ բան. Մեծ ու բարդ գործերը դանդաղ են դառնում բջջային սարքի վրա, և օգտագործողների հիմնական պահանջներից մեկն այն է, որ կայքի բովանդակությունն անհապաղ հասանելի լինի:.

Նմուշները պարզ պահելը նաև դարձնում է հեռուստադիտողների ուշադրությունը այն բովանդակության վրա, որը դուք ցանկանում եք տեսնել: բջջային օգտագործողները ունեն ուշադրության ահռելի կարճ ժամանակահատված, և ձեր լավագույն շահերից է բխում դիզայնը պարզ պահել, այլ ոչ թե բարդույթ ներդնել: թեման.

Երբեք մի անտեսեք տառատեսակի չափը և կոճակի չափը.

Ձեր տառատեսակի տառատեսակը և կոճակի չափը շատ կարևոր են բջջային սարքերի համար: Տառատեսակի չափը պետք է լինի առնվազն 14px: Սա կարող է թվալ մեծ, բայց ավելի լավ է, քան օգտագործողը խոշորացնել ձեր բովանդակությունը կարդալու համար; նրանց համար այն պարզ դարձրեք `տառատեսակը առավելագույն պարզությամբ կարգավորելով: Միակ ժամանակը, երբ դուք պետք է օգտագործեք ավելի փոքր տառատեսակ (նվազագույնը 12px) պիտակի կամ ձևերի վրա է.

մի անտեսեք տառատեսակի չափը

Այժմ կոճակները գալուն պես, որքան մեծ է կոճակը, այնքան ավելի լավ, սա կնվազեցնի սխալ կոճակը հարվածելու կամ կոճակը բաց թողնելու հավանականությունը: Ինչպես Apple- ի ցուցումներում, կոճակի չափը պետք է լինի առնվազն 44px- ով 44px- ով: Այս ուղեցույցների օգնությամբ դուք կբարելավեք ձեր օգտագործողի փորձը և կբարձրացնեք էլեկտրոնային առևտրի փոխարկման փոխարժեքը.

Ավելացրեք պատկերի չափը.

Բջջային սարքերի հետ գործ ունենալիս նպատակը պատկերների համար ամենափոքր չափն ունենալն է, մինչդեռ այն դիտված էկրանին դեռ փխրուն ու հարուստ է թվում:. Պատճառն այն է, որ շարժական սարքի թողունակությունը շատ ավելի քիչ է աշխատասեղանի կամ նոութբուքի հետ համեմատ, ուստի հետևանք է ավելի երկար բեռնման ժամանակ.

Հետևաբար, եթե դուք պատրաստվում եք ձեր հեռուստադիտողներին ներբեռնել 1 ՄԲ ֆայլ, պարզապես մանրապատկերի պատկերը դիտելու համար, դրանք կվրդովվեն և կլքեն կայքը:.

Բջջային բարեկամականությունը միայն հաճելի կայք ունենալու մասին չէ, այլև բարելավում է օգտագործողի փորձը և բեռնման ժամանակը: Պատկերի չափը սեղմելով ՝ ավելի քիչ տվյալներ են օգտագործվում (սահմանափակ տվյալների պլանների տվյալների պահպանում), օգնում է էջն ավելի արագ բեռնել և թողնել դրական տպավորություն ձեր կայքում.

Ազատվել լռելյայն խոշորացումից.

Ավտոմատ խոշորացումը կարող է խառնաշփոթել դասավորության տարրերը, մասնավորապես `պատկերների և նավիգացիայի համար: Դա կարող է թվալ փոքր կամ շատ մեծ ձեր դասավորության մեջ: Այս խնդիրը լուծելու համար օգտագործեք Viewport մետատվյալը `բովանդակության մեջ մաքսային փոփոխականներ տեղադրելու համար: Համոզվեք, որ ձեր HTML- ն ավելացնում եք պիտակը.

Փորձեք օգտագործել ստանդարտ տառատեսակները.

Պատվերով, ստեղծագործական տառատեսակները ձեր կայքը դարձնում են գեղեցիկ, բայց բջջային սարքերի առկայության դեպքում օգտվողներին դուր չի գալիս, որ ձեզ հուշեն ներբեռնել տառատեսակ ՝ կայքէջը դիտելու համար: Հնարավոր է, որ նրանք չկարողանան ներբեռնել տառատեսակը և փոխարենը տեղափոխվել ինչ-որ այլ կայք.

Չնայած տառատեսակների մեծ մասը տեղադրված է բջջային սարքում, ուստի դուք կկարողանաք օգտագործել դրանք ձեր կայքի ձևավորման մեջ: Պետք է հիշել ևս մեկ բան, սակայն, որ որոշ տառատեսակներ ավելի հեշտ կամ դժվար են տարբեր չափեր հավաքել, հետևաբար վստահ եղեք, որ նախքան ձեր ձևավորման մեջ այն ստուգեք տառատեսակի ընթեռնելիությունը:.

Հիշեք, ուղղությունները.

Միջին աշխատասեղան կամ նոութբուք հորիզոնական է, իհարկե, մենք պտտվում ենք վեր ու վար, բայց այն լայն է: Մյուս կողմից, սմարթֆոնները հիմնականում նրբին ու զրպարտում են, հետևաբար բովանդակության լայնությունը կարող է տարբեր լինել, և հետևաբար պետք է հաշվի առնել. Երբ ստեղծում եք տեսանյութեր, պատկերներ, բաց թողումներ, հիշեք այն ուղղությունը, որը մարդիկ կօգտագործեն բովանդակությունը դիտելիս.

Մի վախեցեք, որ ապավինեք մասնագետին `ձեր կայքը շտկելու և այն ավելի բարեկամական դարձնելու համար, եթե որևէ բան ձախողվի: Սա կարող է պահանջել որոշակի ներդրումներ, բայց ամեն օր աճող բջջային օգտվողների և Google- ի թարմացված ալգորիթմի շնորհիվ այս ներդրումը կարող է ապացուցված լինել որպես հաշվարկված.

Վերցրու:

Համաշխարհային մոբիլիզացմամբ շատ կարևոր է ձեր վեբ կայքը շարժուն բարեկամական պահել, և, փաստորեն, ինչ-որ բան ակնկալիքից վեր է, միայն դրանից հետո կարող եք օգտատերեր ներգրավել ձեր վեբ կայք: Համոզվեք, որ ձեր վեբ կայքի աշխատանքը սկսելուց առաջ կարդաք շարժական բարեկամության ցուցումներն ու կարծիքի եք փորձագետների կողմից: Հուսով եմ, որ այս խորհուրդները կօգնեն ձեզ ձեր կայքը դարձնել շարժական բարեկամական. Ձեր վեբ կայքը միակ բանը չէ, որ պետք է լինի շարժուն բարեկամական, վստահեցնելով, որ ձեր սոցիալական կառավարումը նույնպես շարժական է.

Էրլեն Բրաունը համագործակցում է հեղինակավոր SEO Services ընկերության հետ ՝ առաջատար SEO ընկերության Հնդկաստան: Ընկերությունը հիմնականում հանդիսանում է ՏՏ ծառայություններ մատուցող ընկերություն SEO ծառայություններ Հնդկաստան և նրան շատ են օգնել ՝ գրելու հմտությունները բարելավելու գործում:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map