Ինչպես ստեղծել էջի բջջային տարբերակը: Միացնել թխուկների ծանուցումները: Ինչպես ավելացնել պիտակներ «գլուխ» բաժնում

Ինչպես խոստացել էի, ժամանակն է պատմելու, թե ինչ է իրենից ներկայացնում «Adaptive layout»-ը և ինչպես կատարել կայքի բջջային տարբերակը սմարթֆոնների և պլանշետների համար, ինչպես նաև գոհացնել որոնման համակարգերին:

Ինչու է ընդհանրապես այս ամենը անհրաժեշտ: Ի վերջո, նրանք ապրում էին նույնը, ինչ նախկինում և ոչինչ։ Դե ինչ ասեմ, ինտերնետը փոխվում է, լավանում։ Որոնման համակարգերն անում են հնարավոր ամեն ինչ՝ օգտատերերի հարմարավետության և հարմարավետության համար... Հիանալի, իսկապես

Այո, և գաջեթներից տրաֆիկը օրեցօր ավելի ու ավելի է աճում: Վեբ վարպետը պետք է հաշվի առնի սա...

Ամենայն հավանականությամբ, Google որոնողական համակարգը ծանուցել է բոլոր վեբ վարպետներին, որ վարկանիշի նախապատվությունը կտրվի այն կայքերին, որոնք օպտիմիզացված են բջջային սարքերի համար։ Բայց միայն այն պայմանով, որ հարցումը չի արվել անհատական ​​համակարգչի միջոցով։

Այսինքն, եթե օգտատերը մուտք է գործել սմարթֆոնի կամ պլանշետի միջոցով, ապա նրա համար նախատեսված կայքերն ու բլոգերը միշտ ավելի բարձր կլինեն, քան նրանք, որոնք չունեն դա: Մնացած դեպքերում, ինչպես հասկանում եմ, այս կանոնը չի գործում։

Թվում է, թե հստակ բացատրված է. Ո՞վ չհասկացավ։ Գրեք մեկնաբանություններում, եկեք միասին քննարկենք։

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

Լավագույն օրերից մեկում ես էլ(սակայն բոլորը ստացել են այն) ստացել են հետևյալ հաղորդագրությունը.

Եվ իմ բոլոր ծրագրերը փլուզվեցին... Կարծում եմ, որ մենք պետք է հետ չմնանք ժամանակի հետ... և մենք հեռանանք: Առաջին հերթին, իհարկե, ես որոշեցի ցանցում գտնել ինչ-որ plug-in, որն ամեն ինչ կանի հստակ և առանց ինձ

Բջջային WordPress կայք պլագիններով:

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

Եթե ​​դուք դեռ ցանկանում եք օգտագործել պլագիններ այս նպատակով, ապա լավագույններն են.

WPtouch Mobile Plugin - Ինձ ամենաշատը դուր եկավ այս փլագինը, ամեն ինչ բավականին պարզ է և պարզ, իմ բլոգը ճիշտ ցուցադրվեց առանց որևէ խցանումների:

Ես չեմ նկարագրի յուրաքանչյուր plugin, փորձեք ինքներդ և որոշեք.

• MobilePress;
• WordPress Mobile Pack
• Duda Mobile Website Builder
• WordPress Mobile Pack
• WordPress PDA & iPhone;
• WPmob Lite;
• WPtap News Press;
• WP շարժական դետեկտոր;
• WiziApp.

Փլագինների մեկ այլ թերությունն այն է, որ դրանք երբեմն խափանում են, օրինակ, ես անցնում եմ սմարթֆոնի միջով - ամեն ինչ լավ է, ես նորից կրկնեցի կամ թարմացրի այն, այն ցույց է տալիս սովորական կայք: Ինչ առեղծված

Մի խոսքով, դա ինձ չէր սազում, և ես շարունակեցի ավելի լավ լուծում փնտրել:

Հետո որոշեցի այս աշխատանքը վստահել ֆրիլանս բորսայի մասնագետին, բայց երկար մտածելուց հետո որոշեցի սովորել հարմարվողական դասավորություն և ամեն ինչ ինքս անել: Ի վերջո, ես վեբ կայքի մշակող եմ և ժամանակն է կատարելագործել իմ հմտությունները…

Եթե ​​որևէ մեկին հետաքրքրում է, ապա կայքի վերաձևավորումը հարմարվողականի վրա արժե մոտ 5000 ռուբլի և ավելի... Ես խորհուրդ չեմ տալիս աշխատանքի ընդունել դժբախտ մասնագետների, ովքեր ավելի էժան են գանձում. թշվառը երկու անգամ է վճարում: Եվ ստուգեք ակնարկները ...

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

Այժմ ես ձեզ հետ կկիսվեմ իմ գիտելիքներով և կպատմեմ ձեզ ամենակարևոր կետերի մասին...

Բջջային կայք ստեղծելու տարբերակներ:

Կա, որքան գիտեմ, երեք ուղղություն. Եկեք վերլուծենք յուրաքանչյուր տեխնոլոգիա առանձին, որո՞նք են դրական և բացասական կողմերը, որոնց կարող ենք հանդիպել:

Կայքի առանձին տարբերակ- Սա մի տեսակ առանձին թեթև կայք է, որը ստեղծվել է հատուկ դիտելու համար շարժական սարքերկամ ինտերնետի ցածր արագությամբ..կայք կամ http://mobile.site. Այս դեպքում օգտագործվում է վերահղում:

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

• Կրկնվող բովանդակություն - քանի որ նույն բովանդակությունը կլինի հիմնական և բջջային տարբերակում: Միգուցե rel=canonical մետա թեգը կփրկի, բայց կան շատ այլ խնդիրներ:
• Ֆունկցիոնալության մի հատված. ինչ էլ ասի, բայց նման կայքը կլինի հիմնական կայքի կրճատված պատճենը, հետևաբար բոլորովին այլ վիճակագրություն: Իսկ այցելուների մեծամասնությունը չի սիրում տարբեր տեսակի սահմանափակումներ և միշտ գնում է հիմնական կայք...
• Վերահղումներ – Ինչպես գիտեք, տարբեր տեսակի վերահղումները բացասաբար են ազդում SEO-ի վրա:

RES տեխնոլոգիա- Այստեղ օգտագործվում է սերվերի կողմից հաշվարկ, կախված նրանից, թե որ սարքից է մուտքագրվել, ստեղծվում է այս կամ այն ​​դասավորությունը (html և css): Սա կոչվում է հրաշք արձագանքող վեբ դիզայն+ հատուկ ծրագրային ապահովումսերվերի կողմից (RESS - Պատասխանատու վեբ դիզայն և սերվերի կողմի բաղադրիչներ):

• Ներբեռնման արագություն - տարբեր անհարկի սցենարներ, ոճեր հեռացնելու ունակություն;
• Էջի ավելի քիչ քաշ - տարրերը թաքցնելու փոխարեն, ինչպես հարմարվողական դասավորության մեջ, կարող եք պարզապես ջնջել դրանք;
• Նավիգացիա - որոշակի սարքերի համար կառուցվածքը հարմարեցնելու ունակություն:

• Սահմանում - կայքի ցանկալի տարբերակը թողարկելու համար անհրաժեշտ է ճշգրիտ որոշել այցելուի սարքը, և ինչպես ես լսել եմ, սրա հետ ամեն ինչ միշտ չէ, որ հարթ է:

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

• Անվտանգություն - անկախ սարքից, օգտագործվում են նույն բովանդակությունը և html կոդերի մի շարք.
• Մեկ URL - նույն URL-ները և բովանդակությունը օգտագործվում են տարբեր դասավորությունների համար, կրկնօրինակներ չկան:

• Բեռնման արագություն - քանի որ հիմնական կայքի բոլոր տարրերն ու սցենարները բեռնված են, նույնիսկ եթե դրանք թաքնված են:
• Նավիգացիա - լավ մտածված բջջային նավիգացիա ստեղծելու դժվարությունը:

Մենք ինքնուրույն պատրաստում ենք հարմարվողական դասավորություն

Ես ընտրեցի իմ բլոգի համար պատասխանատու դասավորությունը մի քանի պատճառով.

1. կարիք չկա խախտել հիմնական կայքի, բլոգի ամբողջականությունը.
2. օգտագործում է մեկ բովանդակություն, մեկ տվյալների բազա և այլն;
3. Անձամբ ինձ համար իրականացման հեշտություն (html և css-ի իմացությունը պարտադիր է):

Այժմ ես ձեզ կասեմ, թե ինչ է պետք անել, որպեսզի ձեր ռեսուրսը հարմարվի ցանկացած թույլտվությանը և հավանի Google-ին

Նախ, դուք պետք է գրեք մետա թեգը :

Սրանով մենք զննարկիչին ասում ենք, որ կայքի լայնությունը պետք է հավասար լինի գաջեթի, սարքի կամ այն ​​ամենի լայնությանը, ինչ դուք ունեք այնտեղ։

Նաև եթե ավելացնենք նաև maximum-scale=1.0, user-scalable=no, ապա սրանով մենք կարգելենք մասշտաբը, բայց ես խորհուրդ չեմ տալիս դա անել, թող մարդն ինքը որոշի, գուցե տեսողության խնդիրներ ունի...

Այստեղ սկիզբն արված է, հիմա եթե սմարթֆոնի կամ այլ բանի միջով անցնենք, կտեսնենք, թե ինչ տեսք ունի մեր կայքը։ Տխուր հա?!

Այս դեպքը պետք է շտկվի՝ օգտագործելով Media Queries ֆայլում css ոճերը, պարամետրն ունի հետևյալ տեսքը.

@media էկրան և (min-լայնություն՝ 240px) և (առավելագույն լայնությունը՝ 720px) (
պիտակներ և ատրիբուտներ այստեղ
}

Այսինքն՝ այս ոճերը բրաուզերի կողմից կկիրառվեն 240px նվազագույն լայնությունից մինչև սարքի առավելագույն լայնությունը՝ 720px: Եթե ​​այս արժեքներից շատ կամ պակաս լինի, ապա կկիրառվեն կայքի հիմնական ոճերը։ Ամեն ինչ պարզ է!

Եվ այսպես մենք գրում ենք ոճեր տարբեր սարքերի լուծումների համար: Օրինակ:

• սմարթֆոններ ուղղահայաց - 240-ից 340, 341-ից 420;
• սմարթֆոններ հորիզոնական և որոշ պլանշետներ ուղղահայաց - 421-ից մինչև 540, 541-ից մինչև 670;
• հաբեր ուղղահայաց - 671-ից 800;
• պլանշետներ հորիզոնական - 801-ից 1024

Եթե ​​Ձեզ անհրաժեշտ է որևէ տարր ցույց տալ՝ display:block, եթե ցանկանում եք թաքցնել այն՝ display:none;

Տեսնելու համար, թե ինչ տեսք ունի կայքը կամ բլոգը տարբեր սարքերկան մի քանի հիանալի ծառայություններ.

• http://quirktools.com
• http://www.emulateurmobile.com/
• http://webmark.com.ua

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

Ինձ համար այսքանն է: Հուսով եմ, որ իմ հոդվածը իսկապես օգնեց ձեզ, ի երախտագիտություն, կիսվեք այն =)

Գրանցվել է հաճախորդի կայքում աշխատանքի օրինակ հարմարվողական դասավորություն, եթե դեռ չեք հասկանում նրա աշխատանքի սկզբունքը, անպայման նայեք։ Կհանդիպենք շուտով: Գրեք մեկնաբանություններ...

Հարգանքներով՝ Վլադիմիր Սավելիև

Պրեմիում դասեր webformyself ակումբից

Սա նոր հեղափոխական արտադրանք է կայքերի ստեղծման կրթության ոլորտում: Բոլոր լավագույն վիդեո ձեռնարկները հավաքված են մեկ տեղում և բաժանված են կատեգորիաների՝ WordPress, Joomla, PHP, HTML, CSS և JavaScript... Տվյալների բազան անընդհատ թարմացվում է, և այժմ դրանում կա ավելի քան 200 դաս: Ընդամենը մեկ տարում դուք կարող եք դառնալ փորձառու վեբ-վարպետ «զրոյից»:

Ավելին

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

Մեթոդի հիմքն այն է, որ սերվերը որոշում է կայք այցելող օգտատիրոջ սարքը, այնուհետև վերահղում դեպի ցանկալի վեբ էջ՝ օգտագործելով HTTP վերահղում և Vary HTTP վերնագիր: Հիմնական կայքը կունենա տիրույթ բարձր մակարդակ(site.ru), բջջային ենթադոմեյն (m.site.ru):

Կայքի բջջային տարբերակի առավելություններն ու թերությունները ենթադոմեյնի վրա

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

Մեկ այլ կարևոր գործոն այն է, որ, ի տարբերություն հարմարվողական դասավորության, մենք կկարողանանք օպտիմիզացնել բջջային կայքը այնպես, ինչպես հարկն է՝ վերացնելով ավելորդ JS սկրիպտները և այլ տվյալներ այնտեղից։

SERP-ներում կրկնվող բովանդակությունից և բացասական ազդեցությունից խուսափելու համար որոնման համակարգեր, մշակողները ստիպված կլինեն կսմթել մետա թեգերը: Օգտագործողի վերահղում ստեղծելու համար ցանկալի էջանհրաժեշտ է նաև լրացնել էջերը լրացուցիչ կոդով։

Կայքի բջջային տարբերակի ստեղծման փուլերը ենթադոմեյնում

Շատ մշակողներ կորչում են վերահղման պլանավորման փուլում: Իրոք, ցանցում բավականին շատ է գրվել այս մասին, բայց ոչ բոլոր մեթոդներն են կարողանում ճիշտ նույնականացնել բոլոր շարժական սարքերը:

Վերահղում կայքի հիմնական տարբերակից

Կայքի հիմնական փաստաթղթի հենց վերևում տեղադրեք.

AT բջջային տարբերակբավական է նշել անմիջապես թեգից առաջ :

Ամբողջական կայք գնալու հղում

Նախկինում մենք արդեն կանոն ենք սահմանել, որպեսզի մեզ հետ չուղարկեն, ուստի անցում կատարենք ամբողջական տարբերակըկայքը շատ պարզ տեսք ունի.

«>Կայքի ամբողջական տարբերակը

Մետա թեգեր

Հիմնական տիրույթում դուք պետք է նշեք, որ էջն ունի բջջային տարբերակ.

">

Կանոնական թեգը նշված է ենթադոմեյնում, սակայն Yandex-ը գրում է, որ անտեսում է այս կանոնը, բայց դա ոչ մի կերպ չի ազդի կայքի վարկանիշի վրա։ Տեղադրեք բջջային տարբերակի մեջ.

" />

Բջջային սարքերի համար կայքի հարմարեցումը հաջող առաջխաղացման անհրաժեշտ բաղադրիչն է, քանի որ օգտատերերի մեծ մասը սիրում է հարմարավետությունը: Վերջերս Google-ի և Yandex-ի նման որոնողական համակարգերը սկսել են իջեցնել այն կայքերը, որոնք հարմարեցված չեն շարժական սարքերի համար: Արդյունքում, կայքի տրաֆիկը նվազում է։ Հետեւաբար, այս ցուցանիշը պահպանելու համար ձեզ անհրաժեշտ կլինի wordpress-ի բջջային տարբերակը։

Սկզբից արժե վերլուծել կայքի ընթացիկ ցուցադրումը շարժական սարքերում: Դա անելու համար պարզապես գնացեք Google-ի վեբ-վարպետի վահանակ: Այստեղ դուք մանրամասն տեղեկություններ կսովորեք թերությունների մասին և կկարողանաք շտկել դրանք ծրագրավորման գիտելիքների օգնությամբ։

Լավագույն լուծումը կլինի այս տեքստը ավելացնել ձեր թեմայի CSS բաժնում.

#բովանդակություն (առավելագույն լայնությունը՝ 1280px;)

Բացի այդ, խորհուրդ է տրվում փոխել բջջային տարբերակի էջերի լայնությունը (դրա համար պատասխանատու է «լայնություն» հատկանիշը): Երբ գտնեք այն CSS բաժնում, դուք պետք է փոխեք դրա արժեքը «100%»: Սա թույլ կտա զննարկիչին ավտոմատ կերպով տեղավորել ձեր կայքը ցանկացած էկրանին: Բայց հարկ է նշել, որ հարմարվողականության այս մեթոդը արդյունավետ չէ, քանի որ կայքի բեռնումը երկար ժամանակ կպահանջի։ Բջջային տարբերակի հիմնական նպատակներն են արագ բեռնումև ապահովելով հարմարավետություն: Բացի այդ, այս տեսակի հարմարվողականությունը արագ չէ: Դուք ստիպված կլինեք փնտրել ճիշտ ատրիբուտներ, փորձարկել դրանց արժեքները, եթե որևէ թերություն առաջանա և այլն:

Եթե ​​դուք չունեք ծրագրավորման գիտելիքներ, ապա պետք է տեղադրեք հատուկ փլագիններ, որոնք կօգնեն ձեզ խնայել ժամանակն ու արագացնել բջջային տարբերակի բեռնումը։

1. Համմիպահանջվում է շարժական սարքերում պատկերների համաչափ ցուցադրման համար: Աշխատանքի մեխանիզմն այն է, որ plugin-ը փոխում է ստանդարտ img պատկերի զանգի պիտակը պատկերի: Ցանկության դեպքում plugin-ի կարգավորումներում կա որոշակի դասի պատկերների ցուցադրումն անջատելու տարբերակ: Սա անհրաժեշտ է նորությունների և ցանկացած այլ խոշոր պորտալների հարմարեցման ժամանակ: Հակառակ դեպքում կայքի բեռնումը շատ ավելի երկար կպահանջի:

2. Պատասխանատու վիդջեթներանհրաժեշտ է հատուկ վիջեթներ ստեղծելու համար, որոնք կցուցադրվեն միայն շարժական սարքերում: Վիջեթը կայքի բլոկ է, որը պարունակում է որոշ տեղեկություններ (վերջին կամ հայտնի նորություններ, հարցումներ և այլն): Վիջեթների ընտրությունը բավականաչափ լայն է՝ բազմաֆունկցիոնալ կայք ստեղծելու համար։

3. Փլագին WP Lightbox 2կօգնի ստեղծել թռուցիկ պատուհաններ բջջային կայքում: Այն սկսում է աշխատել ակտիվացումից անմիջապես հետո: Ցանկության դեպքում կարող եք փոխել ցուցադրման տևողությունը: Ընդհանուր առմամբ, տեղադրման հետ կապված խնդիրներ չպետք է լինեն:

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

5. Եթե ցանկանում եք րոպեների ընթացքում ստեղծել պատրաստի ռեսպոնսիվ կայք, ապա պետք է օգտագործեք փլագին WP Touch. Այն բավականին տարածված է, քանի որ ավելի քան 5 միլիոն վեբ վարպետներ օգտագործում են այն: Այս փլագինը պարունակում է հիմնական կարգավորումներ (անուն, լեզու, տարածաշրջան) և մեկ թեմա: Եթե ​​ցանկանում եք ստեղծել կայքի ավելի ֆունկցիոնալ բջջային տարբերակը սմարթֆոնների համար, ապա պետք է գնեք WP Touch Pro-ի պրեմիում տարբերակը։ Կան մեծ թվով տարբեր թեմաներ և լրացուցիչ կարգավորումներ, այնպես որ ձեր կայքը միապաղաղ չի լինի:

6. WP շարժական դետեկտորնախատեսված է որոշելու այն սարքը, որից այցելուն մուտք է գործում կայք: Այն կարողանում է ճանաչել մոտ 5 հազար տարբեր սարքեր։ Փլագինը նաև գրավում է եզակի այցելությունների վիճակագրությունը, ուղղորդման աղբյուրները և շատ ավելին:

7. Սա բազմաֆունկցիոնալ պլագին է։ Դրա շնորհիվ կարող եք հարմարեցնել տարբեր գծային կոճակների ցուցադրումը (ավելացնել էջանիշներին և այլն), կայքի տարբերակը դասականից բջջայինի փոխելու կոճակներ և Google-ի կամ AdMob-ի գովազդով արգելափակումներ: Այն նաև պարունակում է կայքի կառավարման վահանակի բջջային տարբերակը: Սա զգալիորեն կբարձրացնի հարմարավետությունը, քանի որ կառավարման վահանակի ստանդարտ տարբերակում շարժական սարքերի վրա աշխատելիս որոշ տարբերակներ հասանելի են սահմանափակ:

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

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

10. MobilePressբավական պարզ է. Այս փլագինը կստեղծի գործնական բջջային տարբերակ՝ առանց հատուկ էֆեկտների: Նման plugin-ի առավելությունը սերվերի բեռի նվազեցումն է: Ինչպես գիտեք, որքան քիչ տարբեր վիդջեթներ ունենա կայքը, այնքան ավելի արագ կբեռնվի սարքի էկրանին:

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

12. Օգտագործելիս Wapple Architect Mobileդուք կստանաք հարմարեցված տարբերակ, որը կունենա նույն URL-ը, ինչ դասականը: Այսինքն՝ «m.site.com» ձևի ենթադոմեյն վերահղում չի լինի։ Սա ոչ մի կերպ չի ազդում SEO-ի վրա: Այս հավելվածի առանձնահատկությունը նաև շարժական սարքերի համար բացարձակապես ցանկացած թեմա հարմարեցնելու ունակությունն է (լինի դա նույնիսկ մեծ թվով տարբեր վիդջեթներով թեմա): Դրա շնորհիվ դուք ստիպված չեք լինի լրացուցիչ ժամանակ ծախսել դիզայնի հետ աշխատելու համար:

Ինչպե՞ս է իրականացվում հարմարեցումը առանց պլագինների օգտագործման:

Եթե ​​դուք չեք ցանկանում օգտագործել պլագիններ, ապա կան հատուկ ծառայություններ, որոնց շնորհիվ կարող եք բջջային տարբերակ պատրաստել ցանկացած սարքի համար։

dudamobile.com ծառայությունը բավականին տարածված է, քանի որ այն ունի ընտրանքների լայն շրջանակ: Այնուամենայնիվ, այս ծառայությունը վճարովի է: Գինը կկազմի 9 դոլար։ Դա արժանի գին է, որը պետք է վճարվի, հաշվի առնելով, որ դուք չպետք է օգտագործեք որևէ plugin:

Սկսելու համար անհրաժեշտ է գրանցվել այստեղ կամ անցնել թույլտվության միջոցով Facebook-ի միջոցով: Դրանից հետո անցեք «Դիզայն» բաժինը և սեղմեք «Layout» դաշտը: Դուք կտեսնեք նավիգացիայի տեղադրման հնարավոր տարբերակները: Ընտրելու համար պարզապես անհրաժեշտ է սեղմել այն տարբերակը, որը ձեզ դուր է գալիս: Գունային սխեմաները հարմարեցնելու համար հարկավոր է սեղմել «Ոճ» դաշտը: Կարող եք նաև վերբեռնել ձեր սեփական ֆոնային պատկերը: «Վերնագիր» դաշտը պատասխանատու է տարբերանշանի համար: Դուք կարող եք այն վերբեռնել որպես պատկեր կամ ներկայացնել որոշ տեքստով։ Ընդհանուր առմամբ, նախագծման գործընթացը տեղի է ունենում տեսողական ռեժիմով: Դուք «կազմաձևում» եք, և ծառայությունը ստեղծում է հատուկ կոդ: Հարկ է նշել նաև, որ կա նաև անվճար տարբերակ։ Բայց այս դեպքում կայքը ավտոմատ կերպով կցուցադրի գովազդ:

Ավելի պարզ մեկը mippin.com-ն է, որը զգալիորեն ավելի քիչ տարբերակներ է պարունակում: Աշխատանքի մեխանիզմը նման է նախորդ ծառայությանը.

Հարմարվողականության թեստ

Կատարված գործողություններից հետո դուք պետք է ստանաք ցանկալի արդյունքը։ Բայց, որպեսզի համոզվեք, որ շարժական սարքի հարմարեցումը ճիշտ է կատարվել, դուք պետք է օգտվեք հետևյալ ծառայություններից.

Առաջին հերթին, դուք պետք է վերադառնաք Google-ի վեբ-վարպետի վահանակ և տեսնեք, թե որքանով է այն գնահատում ձեր բջջային տարբերակի աշխատանքը: Եթե ​​դուք ունեք 100% արժեք, ապա նպատակը լիովին հասել է: Ձեր կայքը կբարձրանա վարկանիշով և կունենա լավ տրաֆիկ: Եթե ​​արժեքը մի քանի տոկոսով պակաս է, ապա դա էական խնդիր չի լինի։ Եթե ​​արդյունքը գոհացուցիչ չէ, պետք է վերանայել հարմարվելու ճանապարհը։ Կաղապարն առանցքային դեր է խաղում հարմարվողականության մեթոդի ընտրության հարցում: Եթե ​​պլագինները լավ են աշխատում ձեր կաղապարի հետ, ապա խնդիրներ չպետք է լինեն: Հակառակ դեպքում, ցանկալի կլինի, որ դուք ապաակտիվացնեք տեղադրված կաղապարները և օգտվեք վճարովի ծառայությունից։ Անհրաժեշտության դեպքում դուք պետք է դիմեք մասնագետին կամ տեղադրեք ավելի պարզ ձևանմուշ:

iPad Peek ծառայության միջոցով դուք կարող եք բացարձակապես անվճար տեսնել ձեր բջջային տարբերակի ցուցադրման առանձնահատկությունները սարքերում, ինչպիսիք են iPad-ը, iPhone-ը և Apple-ի այլ հարմարանքներ: Այս ծառայությունը հայտնի է, քանի որ ինտերնետ օգտագործողների մեծ մասը նախընտրում է Apple սարքերը:

Կարող եք նաև օգտվել Mobile Phone Emulator ծառայությունից, որը թույլ է տալիս տեսնել ձեր բջջային տարբերակի ցուցադրումը ոչ միայն Apple-ի, այլ նաև Samsung-ի, HTC-ի և BlackBerry-ի արտադրանքների վրա:

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

Եթե ​​չեք ցանկանում ևս մեկ անգամ որևէ կայք այցելել, ապա մեկ անգամ տեղադրեք Opera Mobile Emulator-ը: Սա հայտնի Opera բրաուզերի հավելումն է: Այն անվճար է և հեշտ օգտագործման համար:

Բարև իմ սիրելի բլոգի ընթերցողներ: Գալիուլին Ռուսլանը կապի մեջ է։ Այսօր մենք կխոսենք կայքերի բջջային տարբերակների մասին, որոնք պետք է ունենան յուրաքանչյուր կայք կամ բլոգ՝ որոնման համակարգերի TOP առաջխաղացման համար: Հոդվածում ես կտամ ոճային կոդեր և պատրաստի էջի դասավորության օրինակներ, որոնք կարող եք ներբեռնել ձեր համակարգչում։

Եթե ​​ձեր կայքը դեռ հարմար չէ շարժական սարքերի համար, խորհուրդ եմ տալիս օգտվել իմ խորհուրդներից կամ դիմել մասնագետներին. http://www.mobile-version.ruով ամեն ինչ կանի որոնման համակարգերի չափանիշներով։ Կարող եք նաև ստուգել ձեր կայքը շարժունակության համար՝ օգտագործելով նույն հղումը:

2013 թվականին Google-ը սկսեց ճնշում գործադրել վեբ վարպետների վրա ( https://webmasters.googleblog.com/2013/06/changes-in-rankings-of-smartphone_11.html), համոզելով վեբ կայքի թեթև փոփոխություններ ստեղծելու անհրաժեշտության մեջ, և 2015 թվականից շարժունակությունը դարձել է վարկանիշային ասպեկտներից մեկը ( https://webmasters.googleblog.com/2015/04/rolling-out-mobile-friendly-update.html) Յանդեքսը հետ չի մնում՝ ստեղծելով հատուկ Վլադիվոստոկ ալգորիթմ, որը հաշվի է առնում կայքի համապատասխանությունը հեռախոսներից դիտելու համար։

Mobile Friendly-ն այսօր ոչ միայն այցելուների մասին հոգալն է, այլ առաջխաղացման անփոխարինելի պայման:

Երբ կայքը ստեղծվում է զրոյից, կիրառվում է Mobile First մոտեցումը: Բայց շատերն ունեն հին աշխատանքային նախագծեր: Հիմնական հարցը, որ առաջացնում է կայքի մոբայլ տարբերակը նման իրավիճակներում, այն է, թե ինչպես անել այն՝ չփչացնելով գոյություն ունեցող կաղապարը։

Գոյություն ունի երեք մոտեցում.

• Առանձին հասցե և դասավորություն - տեղադրված m.site.ru ձևի ենթադոմեյնում: Վերահղումը տեղի է ունենում օգտագործողի գործակալի կողմից սերվերի վերահղման միջոցով:
• Պատասխանատու դիզայն. url-ը և html-ը մնում են նույնը, ինչ աշխատասեղանի ձևաչափում, սակայն CSS-ում մեդիա հարցումները վերադարձնում են կանոններ տարբեր էկրանների համար:
• RESS-ը ռեսպոնսիվ դիզայն է, հասցեն մնում է նույնը, բայց սերվերը ուղարկում է ոճերի հավաքածուներ՝ կախված նրանից, թե ինչ տեսակի սարքավորում է պահանջում էջը:

Հին նախագծերի սեփականատերերի համար լավագույն ընտրությունը հարմարվողական դասավորության օգտագործումն է: Ինչպես դա անել ինքներդ և առանց վտանգավոր պլագինների օգտագործման, մենք կքննարկենք քայլ առ քայլ:

Կայքի բջջային տարբերակը. ինչպես դա անել ճիշտ

Հետագա քայլերը կպահանջեն html-ի և css-ի հիմնարար գիտելիքներ կամ անհասկանալի բաներ արագ google-ում փնտրելու ունակություն:

Տեղեկություն սկսնակների համար. CSS-ում գանգուր փակագծերից առաջ բառերը նշանակում են html ֆայլի այն հատվածները, որոնք նրանք պատասխանատու են ցուցադրելու համար: Ավելի հաճախ գրվում է կետով կամ հեշ նշանով՝ #տեղ (հատկություն՝ արժեք;):

Քայլ 1. Հեռացրեք սահմանափակումները:

Հեղուկ դասավորության սեփականատերերը կարող են բաց թողնել այս քայլը: Մնացածը պետք է շատ աշխատի։

Լայնությունը- մենք կոդի մեջ մեծ հատվածներ ենք փնտրում խիստ սահմանված էկրանով: Եթե ​​պարամետրը նշված է պիքսելներով կամ կետերով, դուք պետք է փոխեք դրա արժեքը տոկոսներով, ems-ով և շրջակա միջավայրի նկատմամբ զգայուն այլ միավորներով: Հաճախ հիմնական կոնտեյների կամ բովանդակության տարածքն ունի ֆիքսված լայնություն. շատ դեպքերում սահմանափակումները հանվում են՝ այն փոխարինելով առավելագույն լայնությամբ:

Նկարներ- Հստակ չափերի փոխարեն img պիտակի համար սահմանում ենք հատկություններ, որոնք հարմարվողականություն կտան պատկերներին։ Լուսանկարները կփոխեն չափերի հարաբերակցությունը իրենց մայր կոնտեյներով:

img (

Առավելագույն լայնությունը՝ 100%

բարձրությունը՝ ավտոմատ;

սեղաններ- Ամբողջական հարմարվողականությունը հնարավոր չէ սահմանել, բայց դուք կարող եք դրանցով էջեր դարձնել հարմար շարժական սարքերի համար՝ ավելացնելով այս կոդը.

սեղան (

ցուցադրում:բլոկ;

Լայնությունը՝ 100%;

overflow-x: ոլորել;

հորդել-y՝ թաքնված;

ms-overflow-style. -ms-autohiding-scrollbar;

webkit-overflow-scrolling՝ հպում;

Wraps - սահմանվում են float հատկությամբ: Այս ընտրանքի կարգավորումը թույլ կտա տուփերը շարժվել պատուհանի կարգավորումների հիման վրա՝ հարմարեցնելով կայուն դիրք ունեցող տարրերին կամ մայր տարաների ներսում: Ստանդարտ div-տարրերը լռելյայնորեն թարգմանում են յուրաքանչյուրը նոր տողով: Օրինակ, տեղադրելով 200 px div բլոկներ 1000 px կոնտեյների մեջ, կարող եք տեսնել այս նկարը:

Բլոկները դրված են իրար վրա: Փաթաթման ավելացումով հեռացնում են նոր գծերը, տարրերը գծում են դնում ողջ հասանելի տարածության վրա:

Քայլ 2. Բովանդակության վերակազմակերպման պլան:

Պարզեք, թե աշխատասեղանի կայքի ինչ մանրամասներ պետք է ցուցադրվեն շարժական սարքերում: Դա անելու համար պատասխանեք ինքներդ ձեզ հետևյալ հարցերին.

• Ո՞ր բլոկներն են կատարում միայն դեկորատիվ գործառույթներ: - Ավելի հաճախ դրանք սլայդերներ են, կողագոտու զարդեր, հարցաթերթիկներ, պատահական լուսանկարներ:
• Ի՞նչն են անտեսում այցելուները: - Սեղմումների և ուղիների ջերմային քարտեզները կօգնեն պատասխանել այս հարցին: Մենք անխղճորեն թաքցնում ենք ամենաքիչ ակտիվ տարրերը։
• Ի՞նչ պետք է մնա բջջային տարբերակում: - Սովորաբար սա գովազդ է, հետադարձ կապի ձև, բաժանորդագրություններ կամ սոցիալական լրատվամիջոցների կոճակներ:
• Մտածեք, թե ինչպես պետք է կայքը նայվի պլանշետների, սմարթֆոնների և փոքր հին հեռախոսների վրա. դուք կարող եք յուրաքանչյուր սարքի համար ձեր սեփական տեսքը սահմանել:

Քայլ 3. Հարմարավետություն.

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

Բովանդակության տարածք. հեռախոսները սովորաբար սահմանում են CSS-ի հիմնական բլոկի լայնությունը մինչև 100%՝ կախված առկա տարածքից: Սա նշանակում է, որ տեքստը, մոդուլները, գովազդը, կողագոտու բովանդակությունը կցուցադրվեն փոքր սարքերում մեկ սյունակում:

Սենսորներ. մատներն այնքան ճշգրիտ չեն, որքան մկնիկը, նրանց համար շատ տեղ թողեք: Հղումների և այլ ակտիվ տարրերի շուրջ տարածությունը պետք է լինի առնվազն 28 x 28 պիքսել:

Օգնեք ձեր այցելուներին սահմանել ակտիվ տարածությունը՝ լիցքավորում, ընդգծում, գույնի փոփոխություն և այլ բաներ, որոնք կարող են սահմանվել հպումների համար, սահմանել սավառնող կեղծ դասը հղումների և կոճակների համար:

Մեդիա հարցումների իրականացում օրինակներով

Եթե ​​դուք երբևէ ստեղծել եք CSS աղյուսակներ տպագրության համար, ապա արդեն պատկերացում ունեք առանձին ոճեր նշանակելու հնարավորությունների մասին՝ կախված պայմաններից։

Մեդիա հարցումները տրամաբանական արտահայտություններ են, որոնց մուտք գործելը ենթադրում է ճիշտ կամ կեղծ պարամետրով պատասխան: Եթե ​​հարցման արդյունքը ճշմարիտ է, այսինքն՝ օգտագործողի գործակալի կամ սարքի չափերը համընկնում են տվյալ մեդիայի տեսակի հետ, ապա մեդիա բլոկի ներսում նշված ոճի կանոնները ավտոմատ կերպով կիրառվում են։

Մեդիա հարցումները կարող են նշանակվել ըստ պարամետրերի.

• բրաուզերի պատուհանի լայնությունը և բարձրությունը;
• սարքի լայնությունը և բարձրությունը;
• կողմնորոշում - լանդշաֆտ կամ դիմանկար ռեժիմ;
• էկրանի լուծում:

Փաստարկների արդի ցանկը հասանելի է այստեղ պաշտոնական հստակեցում.

Անցնենք օրինակներին։ Կա պատրաստի ձևանմուշ, դրա բովանդակային մասի չափը 1000 պիքսել է, բոլոր ներքին տարրերն ու մանրամասները կազմաձևված են այս պարամետրի հետ կապված։

Եթե ​​օգտագործողի էկրանն ավելի նեղ է, քան նշված բովանդակության մասը, կհայտնվի ոլորման տող: Լողացող դիզայնի տարրերը կարող են անկանխատեսելի վարքագիծ դրսևորել՝ բախվել միմյանց, տարածվել, չափից շատ նեղանալ:

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

Այն շտկելու համար մենք հեռացնում ենք ֆիքսված շրջանակները՝ ավելացնելով կաղապարի ոճերը.

@media միայն էկրան և (առավելագույն լայնությունը՝ 1000px) (

Nav (լայնությունը՝ 100%;)

Այժմ, եթե օգտատիրոջ էկրանի լայնությունը 1000px-ից պակաս է, ապա մենյուի լայնությունը հավասար կլինի դրա չափի 100%-ին։ Կաղապարի հիմնական տարբերակը կարծես նույնն է, ինչ նախկինում: Գույքը փոխարինելով էկրանը փոքրացնելիս հեռացվեց ներքևի ոլորման տողը:

Բայց բլոկները դեռ կասկածելի են թվում. եկեք փոխենք դրանց ցուցադրությունը՝ մեծացնելով լայնությունը որպես տոկոս՝ ցանկալի չափերին համապատասխանելու համար:

Նույն մեդիա հարցմանը մենք ավելացնում ենք.

Բլոկ (լայնությունը՝ 35%;)

Ինչպե՞ս պարզել ձեր կայքի բլոկների օպտիմալ չափերը: Հաշվեք ձեռքով կամ հիմք ընդունեք ցանկացած պատրաստի ցանց՝ հեղուկ ցանց: Դուք կարող եք կենտրոնանալ գոյություն ունեցող ստանդարտների վրա. 980-1050px պատուհանի լայնությամբ երկսյունակ դասավորություններում փաթաթումը վերցվում է 95%, բովանդակությունը՝ 60%, իսկ 30% մնում է կողագոտին։ Մնացած տարածքը գնում է սահմանների և լուսանցքների ձևավորմանը ճշտության համար:

Այնուամենայնիվ, դուք կարող եք կիրառել տուփի չափսեր բովանդակության վրա, որպեսզի ամեն անգամ չհաշվեք պիքսելները, այլ աշխատեք ըստ ընդհանուր չափերի:

Եկեք անցնենք ավելի ցածր լուծաչափով էկրանների ցուցադրումը կարգավորելուն.

Միայն @media էկրան և (առավելագույն լայնությունը՝ 600px) (

Արգելափակել (

float:none;

Լայնությունը՝ 85%;

Լուսանցք՝ 1em auto;

Եթե ​​էկրանը 600 px-ից պակաս է, ապա մեր բլոկները պետք է տեղավորվեն մեկ սյունակի մեջ. մենք հեռացնում ենք փաթաթումը, դնում ենք նոր նահանջներ, կենտրոնացնում և փոխում ենք լայնությունը: Ավելի հաճախ սահմանվում է 100%, բայց եթե ինչ-ինչ պատճառներով դա անհարմար է, մենք սահմանում ենք մեր չափը:

Այսպիսով, դուք կարող եք սահմանել ոչ միայն բովանդակության բլոկների չափերը, այլև դրանց ցուցադրումը: Օրինակ՝ արգելել խոշոր տարրերի ցուցադրումը, դրանք փոխարինելով ցանկացած հարմարով։

Եկեք ցույց տանք հնարավորությունները՝ օգտագործելով գույների և էկրանների փոփոխման օրինակը:

Սմարթֆոնի տարբերակում հիմնական ընտրացանկը թաքնված է, և բլոկի գույնը փոխվում է կապույտի, մինչդեռ ավելի մեծ էկրանը ցուցադրում է դիզայնը առանց այդ փոփոխությունների:

Նավիգացիան թաքցնելը շատ դեպքերում պահանջվում է. այն փոխարինվում է կոճակով: Ավելի նպատակահարմար է դա անել javascript-ի միջոցով, կարող եք օգտագործել պատրաստի լուծումներ։

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

Դուք կարող եք հայտարարել @media կանոնները գոյություն ունեցող ոճաթերթի ներսում ցանկացած վայրում, կամ կարող եք ստեղծել առանձին մեկը այս հայտարարագրերի համար, այնուհետև ներմուծել այն հիմնական CSS՝ օգտագործելով @import կանոնը:

Կայքի բջջային տարբերակը՝ ինչպես պատրաստել և ինչ փնտրել

Mediacware-ը հասկանում են բոլոր ժամանակակից բրաուզերները, բայց այն չի աշխատի IE 8-ում և ավելի ցածր: Խնդիրը լուծվում է պայմանական մեկնաբանությունների միջոցով հղում կատարելով հին IE-ին։ Դրանք պետք է գրվեն կաղապարի կոդում, այլ ոչ թե CSS-ում։

Սցենարն ինքնին հասանելի է github-ում ( https://github.com/scottjehl/respond), ավելացնում է նվազագույն և առավելագույն չափերի և մեդիա հարցումների աջակցություն ավելի հին IE-ներին:

Մյուս խնդիրն այն է, որ արձագանքող դիզայնը ենթադրում է Html5-ի օգտագործում, որը կրկին անհասկանալի է հին բրաուզերների համար: Վերաբերվում է հաքերով.

Կոդը գրված է html-ով, բացի այդ, ստեղծված տարրերի բլոկ ցուցադրումը դրված է CSS-ում.

վերնագիր, նավարկություն, բաժին, հոդված, մի կողմ, ստորագիր (ցուցադրում՝ արգելափակում;)

Անմիջապես անդրադառնանք հարցին՝ ինչպես անել, որ որոշ սցենարներ հայտնվեն միայն այն դեպքում, երբ էկրանի պարամետրերը սահմանված են: Եթե ​​jquery-ն տեղադրված է, դուք պետք է կաղապարի կոդի մեջ ավելացնեք պարզ սցենար: Համարները փոխված են անհրաժեշտների։ Այն կարդում է այսպես՝ եթե պատուհանի լայնությունը գերազանցում է 980 պիքսելը, ուղու վրա նշված սկրիպտը կիրառվում է էջի վրա։ Դուք կարող եք նշել մի քանիսը, շարահյուսությունը գրվում է անալոգիայով՝ գանգուր փակագծերի ներսում գտնվող կետ-ստորակետի միջոցով:

Եթե ​​($(փաստաթուղթ).width() > 980) (

$.getScript ("ուղի դեպի սցենար");

Մեկ այլ կետ՝ iPhone-ի բջջային բրաուզերը ինչպես պետք է մշակի տվյալ բովանդակությունը, թույլատրելի է արդյոք դրա ավելացումը։ Դա անելու համար սկզբնական սանդղակը գլխում գրված է.

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

Եթե ​​կայքը փոխարկվում է տեղական սերվեր, ճիշտությունը կարելի է որոշել ami.responsivedesign.is. Պատշաճ ցուցադրման համար Դենվերի սեփականատերերը պետք է փոխեն կոդավորումը utf-8-ի՝ խմբագրելով սերվերի httpd.conf ֆայլը:

Ծառայությունը ցույց կտա, թե ինչպես է նախագծի տեսքը տարբեր սարքերում:

Բացի այդ, կաղապարը փորձարկվում է https://developers.google.com/speed/pagespeed/insights/կամ հատուկ ձևով https://www.google.com/webmasters/tools/mobile-friendly, ինչպես նաև վեբ վարպետներում։

Yandex-ում սա մանրամասն է թվում, և Google-ը պարզապես կհայտնի, որ խնդիրներ չկան:

Եթե ​​ամեն ինչ ճիշտ արվի, ապա ոլորում, ավելորդ տարրեր չեն լինի։ Բջջային տարբերակը պատրաստ է, և այժմ դուք սովորել եք, թե ինչպես պատրաստել այն ինքներդ։ Եթե ​​նյութը օգտակար էր ձեզ համար, ապա հավանեք և բաժանորդագրվեք բլոգի տեղեկագրին: Ամենայն բարիք։

Ստորև՝ սեղմելով կոճակներից մեկի վրա, կարող եք ներբեռնել այս դասում ծալված էջի 2 օրինակ և հեշտ է աշխատել դրա հետ։ պատրաստի էջերև պատճենեք կոդը:

Հարգանքներով՝ Գալիուլին Ռուսլան։

Ստացիոնար համակարգիչներն այլևս տեղեկատվության միակ աղբյուրը չեն: Շարժման ընթացքում օգտվողը նաև ձգտում է տեղյակ լինել այն ամենի մասին, ինչ առաջարկում է: գլոբալ ցանցՀամացանց. Ներկա իրավիճակն այնպիսին է, որ ռեսուրսի բջջային տարբերակների արդիականությունը դառնում է անհերքելի։ Վերջին տասնամյակում շարժական գաջեթները «շքեղ իրերի» կատեգորիայից անցել են «անհրաժեշտ ապրանքների» կատեգորիայի: Առևտրային ռեսուրսները պետք է զգայուն լինեն նման փոփոխությունների նկատմամբ, որպեսզի պահպանեն փոխարկման տոկոսադրույքը: Կայքի բջջային տարբերակը դարձել է ապրանքներ կամ ծառայություններ վաճառող ՑԱՆԿԱՑԱԾ ինտերնետ հարթակի անբաժանելի մասը:

Վիճակագրությունն անողոք է, հայտնում է, որ 2016 թվականի հոկտեմբեր-նոյեմբերին բջջային գաջեթների միջոցով ինտերնետ այցելությունների տեսակարար կշիռը զգալի ցուցանիշ է կազմել՝ 51%։ Այսինքն, ամբողջ տրաֆիկի կեսից ավելին շարժական սարքերից առաջացած տրաֆիկ է՝ սմարթֆոններ, պլանշետներ, հեռախոսներ:

Հետաքրքիր նշում. Ռուսաստանում, օրինակ, վիճակագրությունն ավելի շատ ուղղված է աշխատասեղանի օգտին։ Պատճառն այն է, որ «Яндекс»-ը` Ռուսաստանում ամենահայտնի որոնողական համակարգը, ունի բջջային օգտատերերի ամենացածր տեսակարար կշիռը:

Բայց մասնաբաժնի աճի միտումը բջջային տրաֆիկ Yandex-ը նույնպես ունի, ինչը նշանակում է, որ շուտով մենք կհայտնվենք «վեբ կայքի մոբիլիզացիայի» շեմին. դասավորության դիզայներները բավականաչափ աշխատանք կունենան…

Ավելին, այն մարդկանց 80 տոկոսը, ովքեր իրականում այցելում են ինտերնետ, ունեն սմարթֆոններ: Նույնիսկ այն հաճախորդները, ովքեր այցելում են նախագիծը սեղանադիր համակարգիչ, հաջորդ անգամ կարող է դա անել հեռախոսից: Եվ մնացեք դժգոհ։

Խնդիրն այն է, որ գաջեթի էկրանը, նույնիսկ ամենաառաջադեմը, բավականին փոքր է սեղանադիր համակարգչի կամ նոութբուքի մոնիտորի համեմատ։ Եվ այն չի կարող տեղավորել նույն քանակությամբ տեսողական տեղեկատվություն:

Արդյունքում, դիզայն և տեքստ, մոդուլներ և բլոկներ - ամեն ինչ սխալ է ցուցադրվում: Դիզայնի ողջ էությունը կորել է, օգտագործելիությունը (հարմարավետությունը) խախտվել է, մարքեթինգային շեշտադրումն անհետանում է, հաճախորդին անհնար է ճիշտ փոխանցել USP-ը (յուրահատուկ վաճառքի առաջարկ): Կայքն ուղղակի իր գործը չի անում։

Այս խնդրի լուծումը ռեսուրսը բջջային տարբերակով տրամադրելն է։ Ցավոք, նույնիսկ խոշոր առևտրային նախագծերը միշտ չէ, որ հասկանում են դա և շարունակում են կորցնել հսկայական տրաֆիկ և, համապատասխանաբար, շահույթ:

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

Վերլուծեք ձեր թիրախային լսարանը (TA)
Նախքան կայքի ճիշտ բջջային տարբերակ ստեղծելու խնդրին անցնելը, պետք է ուշադիր ուսումնասիրել սեփական լսարանը։ Շարժական կառույցի ստեղծումն է Բարդ մոտեցում, որում անհրաժեշտ է հաշվի առնել բազմաթիվ գործոններ, որոնք ազդում են օգտագործողների կողմից հաջող գնահատման վրա։ Հետևաբար, դուք պետք է իմանաք ձեր թիրախային լսարանի բոլոր ասպեկտները: Վիճակագրությունը հայտնում է, որ որքան ցածր է լսարանի տարիքային կատեգորիան, այնքան մեծ է հավանականությունը, որ ռեսուրսը այցելեն ՄԻԱՅՆ բջջային տարբերակից։

Վերլուծությունը պետք է ներառի այնպիսի ասպեկտներ, ինչպիսիք են աշխարհագրական դիրքը, վարքային գործոն, տարիքը, գենդերային բնութագրերը, եկամտի մակարդակը, օգտատիրոջ համար առցանց գնումների համապատասխանությունը:

Կայքի բջջային տարբերակների տեսակները
Այսպիսով, կայքի բջջային տարբերակի օպտիմալացումը հնարավոր է հետևյալ տարբերակների միջոցով.

1. Կայքի առանձին տարբերակի ստեղծում՝ իր URL-ով։Փաստորեն, սա ռեսուրսի ենթադոմեյն է, որը հանդիսանում է հիմնական կայքի լիարժեք գործընկերը։ Ճիշտ է, հաճախ շատ կրճատված ֆունկցիոնալությամբ: Այս լուծումն ունի մի քանի առավելություններ՝ յուրաքանչյուր կայքի բովանդակությունը առանձին ուղղելու հնարավորություն, կատարյալ ցուցադրում և փոխզիջումային դիզայնի կարիք չկա: Այնուամենայնիվ, օգտագործողի համար այս տարբերակը ամենահարմարը չէ: Նա ստիպված կլինի հիշել առանձին հասցե, որը կարող է շփոթության պատճառ դառնալ։ Նախագծի սեփականատիրոջ համար կան նաև թերություններ՝ նոր կայքի առանձին վարչարարության անհրաժեշտություն, ֆինանսական ծախսեր։ Նաև, CSS-ի բարելավման շնորհիվ, առանձին բջջային տարբերակը դառնում է ավելի ու ավելի քիչ արդյունավետ;

2. Բջջային գաջեթներին հարմարվելու ամենահեշտ ձեւը ռեսուրսը արտաքին պլագիններով ապահովելն է։Պլագինը ծրագրային մոդուլ, որն ընդլայնում է կայքի շարժիչի հնարավորությունները։ Լուծումը էժան է և հարմար, բայց ոչ ֆունկցիոնալ: Նույնիսկ լավագույն կոնտակտներըդեռ պարունակում է բազմաթիվ սխալներ, էջերի սխալ ցուցադրում է հայտնվում: Օրինակ կարող է լինել WP Mobile Edition հավելվածը WordPress CMS, համապատասխանաբար։ Լուծումը հարմար չէ լուրջ տրաֆիկի ալիք ունեցող ընկերությունների համար.

3. Բջջային հավելվածի մշակում։Սա շատ հարմար լուծում է: Հավելվածը մշակված է հատուկ ծրագրերի համար (IOS, Android): Արդյունքում օգտատերը աշխատում է առավել ծանոթ ֆունկցիոնալությամբ: Ճիշտ է, դրա համար անհրաժեշտ է ներբեռնել հենց հավելվածը: Իսկ օգտատիրոջը համոզել, որ այս ռեսուրսը այցելելու անհրաժեշտությունը նրա համար այնքան կարևոր է, որ նա պետք է տեղադրի արտաքին ծրագրակազմ (ծրագրային ապահովում), դժվար գործ է։ Հետևաբար, նման լուծումը հաճախ օգտագործվում է որպես լրացուցիչ միջոց կայքի արդեն գոյություն ունեցող լիարժեք բջջային տարբերակի հետ.

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

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

Օպտիմալացնել ռեսուրսի տեքստերի չափը
Շատ հակասական կարծիքներ կան տեքստի քանակի վերաբերյալ, հատկապես վայրէջքի էջերի համար։ Ներկայիս միջին ծավալը հաճախ հիմնված է արժեքի վրա՝ 2000 բառ: Այնուամենայնիվ, արդյոք դա օպտիմալ է:

Նախ, էջի թեման մեծ նշանակություն ունի։ Եթե ​​հոդվածի թեման ներառում է տարածական հիմնավորում, ապա մեծ քանակությամբ տեքստ ունի կյանքի իրավունք: Բայց եթե օգտատերը գա հստակ պատասխանի, ապա նա երախտապարտ չի լինի կայքին, որը ստիպում է նրան կարդալ շատ ավելորդ տեղեկություններ։

Երկրորդ, ժամանակակից վիճակագրությունը ցույց է տալիս, որ հակիրճ տեքստերն ունեն փոխակերպման ավելի բարձր տեմպեր: Բջջային օգտվողների համար վայրէջքի էջեր(վայրէջքի էջերը) 2000 բառի համար չափազանց մեծ է տեքստի չափը: Ուստի արժե այն կրճատել՝ միջին դիրք փնտրելով համակարգիչների և սմարթֆոնների այցելուների միջև: Խորհուրդ է տրվում վայրէջքի էջերի տեքստերը կրճատել մինչև 1000 բառ: Եվ համապատասխանաբար արժե ավելի հակիրճ դարձնել կայքի բոլոր էջերը։ Միևնույն ժամանակ, նման որոշումը կարող է ենթադրել ամբողջ իմաստային միջուկի ամբողջական վերանայում:

Սա էներգատար աշխատանք է, բայց դրա անհրաժեշտությունը կասկածից վեր է։ Կարգախոսը՝ «դարձնել պարզ» ժամանակակից միտում է, որը շատ տարածված է սմարթֆոնների ամենաառաջադեմ օգտագործողների շրջանում: Բնականաբար, պետք չէ կրճատել կայքի տեքստերի հիմնական թեզերը, պարզապես ուղղել դրանք՝ ստեղծելով ավելի տարողունակ ու փոքր տարբերակներ։ Սա վերաբերում է իրենց ապրանքներն ու ծառայություններն առաջարկող կայքերին, սակայն, օրինակ, լրատվական կայքերը պետք է պարունակեն ավելի ծավալուն տեքստեր։

Եղեք կոնկրետ ձեր վերնագրերում
ClickBait վերնագրի միտումը մարում է: Մշուշոտ ու երկարաձգված վերնագրեր, որոնք առանց պատասխանի հարց են, կոտրված արտահայտություն՝ այս ամենը կորցնում է իր արդյունավետությունը։ Կարճ վերնագրերը, որոնք անմիջապես հստակորեն կոնկրետացնում են հոդվածի տեղեկատվությունը, այն են, ինչ այժմ փնտրում են օգտատերերը։

Վերնագիրը պետք է հնարավորինս համապատասխան լինի (համապատասխանի) հենց էջի հետ։ Հակառակ դեպքում օգտատերը իրեն խաբված կզգա և դժվար թե գոհ հաճախորդի վերածվի:

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

Սա շատ կարևոր է, քանի որ բջջային օգտագործողը ցանկանում է հստակ տեսնել այն հիմնական կետերը, որոնք նրան առաջարկում է տեքստը: Կայքի բջջային տարբերակի առանձնահատկությունները պահանջում են հատուկ ձևաչափում և կառուցվածք, որն ամբողջությամբ ազատվում է «տեքստի կտորներից»: Նայեք Seoquick կայքի տեքստերից մեկի կառուցվածքին:

Ստուգեք էջի բեռնման արագությունը
Էջի բեռնման արագությունը Բջջային հեռախոսսովորաբար տարբերվում է ԱՀ-ի նույն ցուցանիշից: Գաջեթների համակարգի ավելի համեստ պարամետրեր, խնդրահարույց Շարժական ինտերնետ-Այս ամենն իր ազդեցությունն ունի։ Հետեւաբար, փորձեք արագացնել էջի բեռնումը ռեսուրսի բջջային տարբերակում: Դրա համար օգտագործեք ֆայլի սեղմում: Առաջին հերթին ուշադրություն դարձրեք այնպիսի ծառայությունների վրա, ինչպիսիք են.

HTML կոմպրեսոր, որը կարգավորում է սկրիպտների չափերը և հենց էջի կոդը;
. JavaScript կոմպրեսոր, որը սեղմում է Java սկրիպտները;
. CSS կոմպրեսոր, համապատասխանաբար, աշխատում է ոճային թերթիկների հետ:

Մի մոռացեք օգտվել պատկերները սեղմող ծառայություններից: Հաճախ հենց պատկերներն են ստեղծում հենց էներգիայի ինտենսիվությունը, որը թույլ չի տալիս ձեր էջը արագ բեռնել:

Մի անտեսեք սովորական մեթոդները, ինչպիսիք են բրաուզերի քեշի հետ աշխատելը: Բրաուզերի քեշ - պահպանված պատճեն վիրտուալ էջոր օգտատերն արդեն այցելել է։ Անընդհատ փորձարկեք ռեսուրսների բեռնման արագությունը հատուկ ծառայությունների միջոցով: Այս դերում լավ է թվում PageSpeed ​​​​Insights կամ.

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

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

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

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

Իդեալում, ռեսուրսը պետք է սկզբունքորեն հրաժարվի plug-ins-ից: Եթե ​​դա չի հանգեցնում ֆունկցիոնալության կամ դիզայնի ասպեկտների կորստի: Սա այն նշաձողն է, որին պետք է ձգտի ռեսուրսը:

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

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

Ամփոփելով
Կայքի բարձրորակ բջջային տարբերակի հիմնական չափանիշներից մեկը դրա միտումների համապատասխանությունն է: Հարկավոր է տեղյակ լինել, արագ արձագանքել միտումի ցանկացած փոփոխության։ Ի վերջո, բջջային տարբերակի օպտիմալացումը շատ առումներով սմարթֆոնների օգտագործողների համար հարմարության ձգտումն է: Եվ նրանք սովորաբար ամենաառաջադեմ հաճախորդներն են, ովքեր շատ թերահավատորեն են վերաբերվում ռեսուրսներին, որոնք ցույց են տալիս հնության նշաններ: