Որքան ավելի հայտնի են դառնում շարժական սարքերը, այնքան ավելի անհարմար է ոլորումը շատ կայքերում: Այդ իսկ պատճառով 2012 թվականից վեբ վարպետներն օգտագործում են այնպիսի լուծում, որն ավելի հարմարավետ է դարձնում ցածր լուծաչափով ռեսուրսների դիտումը էկրանների վրա՝ հարմարվողական դասավորություն:
Ժամանակակից միտում
Այսօր Երկրի վրա մոտ հինգ միլիարդ մարդ օգտվում է բջջային հեռախոսներից, որոնց մեկ երրորդն ունի սմարթֆոններ: Հետևաբար, բջջային թրաֆիկը դառնում է ավելի կարևոր վեբ կայքերի սեփականատերերի համար: Հավանական է, որ այցելուների նման աղբյուրը միայն կաճի ժամանակի ընթացքում:Որոնիչները արագ արձագանքեցին այս միտումին: «Yandex» և Google խոշոր կորպորացիաները զգալի փոփոխություններ են կատարել որոնման արդյունքներում կայքերի վարկանիշավորման իրենց ալգորիթմներում՝ հաշվի առնելով հարմարվողական դասավորության և դիզայնի առկայությունը։ Պարզ ասած, բջջային հեռախոսների, սմարթֆոնների և պլանշետների համար օպտիմիզացված վեբ ռեսուրսները որոշակի առավելություն կունենան իրենց մրցակիցների նկատմամբ:
Արձագանքող դասավորության սահմանում
Adaptive layout-ը վեբ էջի շրջանակ ստեղծելու մեթոդ է,ավտոմատ կերպով փոխելով բլոկների գտնվելու վայրը՝ համապատասխան սարքի էկրանի լուծաչափին, որի վրա այն դիտվում է: Այսինքն, այս մոտեցմամբ ստեղծվում են առանձին ոճեր տարբեր բանաձեւերի համար։ Այս էֆեկտը ձեռք է բերվում հատուկ CSS ֆայլեր գրելով:
Ավելի վաղ խնդիրը մի փոքր այլ կերպ էր լուծվում. Մշակողները ստիպված էին շատ ավելի «մարմնի շարժումներ» անել՝ ստեղծելով կայքի հիմնական տարբերակի դասավորությունն ու դիզայնը և նույնն անելով բջջայինի համար։ Կախված սարքի էկրանից, որի վրա դիտվել է հասանելի բջջային հարթակով ինտերնետային նախագիծը, գործարկվել է կայքի համապատասխան տարբերակը։
Այս մոտեցումը շատ առումներով իրեն չարդարացրեց, և վեբ վարպետների մեծ մասը երբեք չձեռնարկեց բջջային տարբերակի ստեղծումը: Այժմ այս կարգը փոխարինվել է հարմարվողական դասավորությամբ: Ստեղծելով կայքի կմախք՝ օգտագործելով այս տեխնոլոգիան, վեբ-վարպետը կենտրոնացնում է իր բոլոր ջանքերը նախագծի մեկ տարբերակ ստեղծելու վրա, և այցելուները կարող են այն նույն հարմարավետությամբ դիտել ինչպես մեծ համակարգչի էկրանին, այնպես էլ բջջային հեռախոսի, սմարթֆոնի կամ պլանշետի վրա:
Պատասխանող դասավորության առավելությունները
Որո՞նք են հարմարվողական վեբ դասավորության առավելությունները: Նախկինում նշվել էր, որ առավելությունը ցանկացած սարքի վրա բոլոր էջերի բլոկների ճիշտ ցուցադրումն է։ Նաև ձևանմուշ ստեղծելու այս մոտեցման դրական կողմը փոփոխությունների իրականացման արագությունն է: Ի՞նչ է սա նշանակում:
Եթե կայքը ուներ երկու հարթակ, ապա դասավորության մեջ կատարված փոփոխությունները պետք է լինեն.նախ ներդնել աշխատանքային տարբերակում, իսկ հետո բջջային տարբերակում։ Եթե օրենսգրքում փոփոխությունները բավականին նշանակալից լինեին, ապա նման փոփոխությունների կատարման գործընթացը կարող էր երկար տևել։ Հարմարվողական դասավորությամբ կայքում աշխատանքն իրականացվում է մեկ ֆայլով։ Վեբ էջի դասավորության մեջ կատարված փոփոխությունները շուտով կարտացոլվեն ինչպես արտադրական, այնպես էլ բջջային տարբերակներում:
Այս մոտեցման թերությունը որոշ վեբ վարպետներ անվանում են դրա իրականացման բարդությունը: Բայց CSS 3-ի գալուստով, արձագանքող դասավորության ձևանմուշ ստեղծելը բավականին պարզ է դարձել: Նույնիսկ անփորձ վեբ-վարպետները կարող են իրենց կայքը դարձնել հարմարավետ շարժական սարքերի համար:
հարմարվողական դասավորության սկզբունքներ և առանձնահատկություններ
Ի՞նչ սկզբունքների հիմքում ընկած է վեբ դիզայնի պատասխանատու դասավորության մեթոդը:
- Օգտագործելով հեղուկ դասավորության տեսակը:
- «Ռետինե» պատկերներ։
- Օգտագործելով մեդիա հարցումներ (մեդիա-հարցումներ):
- Բջջային սարքերի մասին մտածելու անհրաժեշտությունը դասավորության հենց սկզբից:
Կաղապար ստեղծելու այս մեթոդի այս հիմնարար սկզբունքներից հետևում են հարմարվողական դասավորության հետևյալ հատկանիշները.
1. Կայքի դիզայնի նախագծում և ստեղծում՝ հաշվի առնելով լուծումների ողջ տիրույթի աշխատանքը՝ բջջայինից մինչև լայնէկրան էկրաններ:
2. Դասավորություն կասկադային ոճերի թերթիկներով՝ օգտագործելով մեդիա հարցումների տեխնոլոգիա, որը ներդրվել է CSS 3-ում:
3. Ծրագրավորում ինչպես հաճախորդի, այնպես էլ սերվերի կողմից՝ ավելի փոքր չափի և լուծաչափով պատկերներ շարժական սարքեր ուղարկելու համար:
Կարևոր ասպեկտ՝ հաշվի առնելով, թե որ հարմարվողական դասավորությունը ստեղծվում էՀանրաճանաչ էլեկտրոնային սարքերի լուծման մատրիցա: Դիզայնի մշակման այս մոտեցումը շատ հարմարավետ կդարձնի վեբ զննարկումը ցանկացած էկրանով: Բայց ինչպե՞ս գիտեք, թե որոնք ներառել ոճերում:
Որտե՞ղ սկսել արձագանքող դասավորությունից:
Վեբկայքերի մեծ մասը ստեղծված է այնպես, որ սմարթֆոնների և պլանշետների էկրաններին հայտնվում են ոլորման տողեր, որոնք այնքան էլ հարմար չեն սերֆինգի համար, իսկ ինտերնետային բազմաթիվ նախագծերի դիզայնն ու դասավորությունը պարզապես «լողում» են։ Վեբ դիզայնի դասավանդման համար ստեղծված կայքերը պարունակում են տարբեր սարքերի էկրանի տարբեր լուծումներ, որոնց տակ արժե տեղադրել ձեր կայքի էջերը:
Ադապտիվ դասավորությունը, որի օրինակները կարելի է գտնել բավականին հաճախ, ունի բազմաթիվ առավելություններ: Ի՞նչ պետք է նկատի ունենալ էջի դասավորությանը այս կերպ մոտենալիս:
Կաղապարի վրա աշխատելու ժամանակ կարևոր է պարբերաբար ստուգել, թե որքան լավ են ցուցադրվում բովանդակության և դասավորության բլոկները տարբեր էկրանների վրա: Դա անելու համար երբեմն բավական է պարզապես փոխել բրաուզերի պատուհանի լայնությունը: Style ֆայլը ստանում է մեդիա հարցումը և վերադիրքավորում է բլոկները՝ կատարելով էական փոփոխություններ։ Պատասխանող դասավորության ձևանմուշը փորձարկելու լավ գործիք կարող են լինել տարբեր մոդելների շարժական սարքերի էկրանները նմանակող կայքերը: Նման ծառայությունները թույլ կտան ուշադիր դիտարկել և գնահատել, թե ինչպես է դիզայնը նայում տարբեր շարժական սարքերի էկրաններին:
Չնայած նման արձագանքող դասավորության տեխնոլոգիան այնքան էլ պարզ չէ, դրա յուրացումը շատ շուտով իր պտուղները կտա:
