Կայքի արձագանքողությունը կայքի ճիշտ ցուցադրման կարողությունն է տարբեր սարքերտարբեր բնութագրերով:
Լրացուցիչ տեսանյութեր մեր ալիքում. սովորեք ինտերնետ մարքեթինգ SEMANTICA-ի հետ
Այսօր կայքերը դիտվում են անհատական համակարգիչներով, պլանշետներով, սմարթֆոններով: Յուրաքանչյուր սարք ունի իր առանձնահատկությունները՝ աշխատանքի արագությունը, էկրանի լուծաչափը:
Եթե կայքը ռեսպոնսիվ չէ, ապա այն ճիշտ կցուցադրվի համակարգչում։ Իսկ հեռախոսում այն կարող է «գնալ»՝ բլոկները կհամընկնեն միմյանց, տառատեսակը կարող է անընթեռնելի դառնալ։
Պատասխանատուություն տերմինն ինքնին լայնորեն օգտագործվում է Իթան Մարկոտի «Responsive Web Design - Responsive Web Design» գրքի թողարկումից հետո: Կայքերը, որոնք կարող են դինամիկ կերպով հարմարվել դիտման սարքերի տվյալ բնութագրերին, դարձել են հարմարվողական:
Պատասխանող դասավորության օրինակ
Ցուցադրել համակարգչի վրա.
Ափսեի վրա.
Սմարթֆոնի վրա.
Ինչու՞ է ձեզ անհրաժեշտ արձագանքող կայք
Տեխնոլոգիաները զարգանում են արագ տեմպերով, և սարքավորումներ արտադրողները հետևում են դրանց: Սմարթֆոնները, պլանշետները, հեռուստացույցները և ինտերնետին միացված այլ էլեկտրոնային սարքերը հասանելի են յուրաքանչյուր ճաշակի և բյուջեի համար, էկրանի չափի բազմաթիվ տարբերակներ կան:
Միևնույն ժամանակ, բովանդակության սպառումը աճում է էքսպոնենցիայով: Հաճախորդի համար պայքարում կայքի սեփականատերերը օգտագործում են բոլոր միջոցներն ու մեթոդները։ Մասնավորապես, մշակման փուլում սահմանվում է ձեր վեբ ռեսուրսի ճիշտ ցուցադրման հնարավորությունը տարբեր սարքերում:
Տարեցտարի ավելանում է սարքերի տոկոսը, որոնք թույլ են տալիս առցանց դիտել տեղեկատվություն: Ձևաչափերի և լուծումների բազմազանությունը բարդացնում է զարգացման գործընթացը որպես ամբողջություն, բոլոր փուլերում պետք է հաշվի առնել լրացուցիչ պահանջներ՝ դիզայներներ, դասավորության դիզայներներ և ծրագրավորողներ:
Ռեսպոնսիվ դիզայնի հայեցակարգը թույլ է տալիս պարզեցնել գործընթացը, քանի որ ձեզ հարկավոր չէ կայքի բազմաթիվ տատանումներ ստեղծել, ինչպես նախկինում էր, օրինակ, բջջային տարբերակների դեպքում: Այդ դեպքում առանձին ենթադոմեյնի վրա նախագծվել է գործառույթների առանձին հավաքածու։
Հին կայքերը պետք է բարելավվեն, և հարմարվողականության տարբեր մոտեցումները հնարավորություն են տալիս դա իրականացնել: Հիմնական բանը սկզբում ճիշտ գնահատելն է սանդղակը, որոշ դեպքերում ավելի հեշտ, արագ և էժան է օգտագործել նոր դիզայնի դասավորություններ և կաղապարներ: Եթե ձեր կորպորատիվ ինքնությունը ճանաչելի բրենդ չէ, հաճախ այն փաստը, որ այն բարոյապես հնացած է, նույնպես մղում է ձեզ վերամշակման: Եվ ոչ ոք չեղարկեց ռեբրենդինգը՝ որպես նոր մակարդակի անցման փուլ։ Պատասխանատու կայքը հզոր գործիք է ձեր բիզնեսի համար:
Կան ծառայություններ՝ ստուգելու, թե ինչպես է կայքը համապատասխանում հարմարվողականության պահանջներին:
Ավելին, այսօր Google-ը և Yandex-ի խոշորագույն որոնիչները հաշվի են առնում այս պարամետրը կայքերի վարկանիշավորման ժամանակ։ Քանի որ օգտագործելիությունը, նավիգացիան կայքի որակը գնահատելու անփոխարինելի գործոններից մեկն է: Տեղեկատվության բեռնման արագությունը, իսկ օպտիմիզացված պատկերների դեպքում այն ընկնում է, անընթեռնելի տեքստը և խեղաթյուրված տարրերը, որոնք չափազանց փոքր են կամ չեն տեղավորվում էկրանին, դժվարացնում են տեղեկատվություն գտնելը և պարզապես հանգեցնում են մերժումների ավելացմանը. փակում է էջը. Սրանք վարքագծային գործոններ են, որոնք նույնպես ազդում են որոնման արդյունքներում դիրքի վրա:
Կայքերի սեփականատերերի համար տեխնիկական տերմինաբանությունը և վարկանիշային պարամետրերը լիովին պարզ և շոշափելի չափանիշներ չեն: Բայց բավական է, որ հասկանան, թե դա ինչպես է ազդում հաճախումների դինամիկայի վրա։ Շատ ոլորտներում շարժական սարքերից տրաֆիկի տեսակարար կշիռը համեմատելի է և նույնիսկ գերազանցում է աշխատասեղանի տրաֆիկին: Սրա հետ պետք է հաշվի նստել: Ավելի ու ավելի քիչ հնարավոր է հանդիպել ծրագրավորողների, ովքեր չեն առաջարկում հարմարեցնել կայքը, բայց չի խանգարի նավարկելու այս հարցում՝ գործընթացը վերահսկելու համար:
Հարմարվողականության սկզբունքները
Թելադրում
Ենթադրենք, դուք դիզայն եք մշակել աշխատասեղանի բրաուզերների համար: Ամեն ինչ թույն է: Այս կայքը շարժական սարքից դիտելիս բլոկները տեղաշարժվում են և անցնում միմյանց տակ:
Սա կոչվում է հոսք: Իսկ այժմ այն հիմնական սկզբունքներից մեկն է, որն օգտագործվում է ռեսպոնսիվ դիզայնում։ Հաշվի առեք սա.
Միավոր հարաբերականություն
Դպրոցական ֆիզիկայի դասերից հայտնի է, որ արագությունը կարող է բացարձակ լինել, երբ շարժումը որտեղից էլ դիտես, արագությունը նույնն է լինելու։ Եվ հարաբերական - երբ, կախված հղման կետից, արագությունը կարող է փոխվել:
Միավորները նույնն են: Տարբեր սարքեր ունեն տարբեր պիքսելների խտություն: Իսկ չափը, օրինակ, 320 px-ը այլ կերպ կանդրադառնա համակարգչի և սմարթֆոնի էկրանին։
Լուծումը հարաբերական միավորների օգտագործումն է: Երբ դուք սահմանում եք բլոկի բոլոր չափերը, մասշտաբները և կոորդինատները համակարգչի էկրանին և սմարթֆոնի էկրանին գտնվող տարրի համեմատ: Օրինակ, վերին եզրագիծը:
Օգտագործելով անցակետեր
Սրանք տարրեր են, որոնց դասավորությունը փոխվում է միայն այն դեպքում, երբ դիտման համար օգտագործվում է որոշակի սարք տրված պարամետրերէկրան.
Օրինակ, եթե էջի բովանդակությունը «սողում է», ապա իմաստ ունի ավելացնել նման կետ և ուղղել բովանդակությունը։
Նվազագույն և առավելագույն արժեքներ
Բջջային հեռախոսում հոդվածը կարող է ցուցադրվել այնպես, ինչպես պետք է: Բայց հիմա դուք բացում եք նույն էջը լայնէկրան մոնիտորի վրա, և դուք գոհ չեք նկարից: Ամեն ինչ ձգված է, ընթեռնելիությունը բացառվում է։
Օրինակ, կարող եք նշել հատկությունները: Եթե էկրանի լայնությունը 1000 պիքսելից պակաս է, ապա բովանդակությունը պետք է ցուցադրվի ամբողջ էկրանով: Հակառակ դեպքում առավելագույն լայնությունը կլինի 1000 պիքսել:
Օբյեկտների բնադրում
Դա տեղի է ունենում, որ դուք պետք է օգտագործեք շատ տարրեր, որոնք կախված են այլ բլոկների դիրքից: Դժվար է վերահսկել: Նման առարկաները կարող եք բույն դնել մեկ տարայի մեջ։ Սա հարմար է այն բլոկների համար, որոնք դուք չեք ցանկանում հարմարեցնել էկրանի պարամետրերին՝ կոճակներ, լոգոներ և այլն:
Ճիշտ տառատեսակներ
Վեբ տառատեսակները գեղեցիկ տեսք ունեն: Բայց մի մոռացեք, որ դրանք բոլորը բեռնված են: Սա ազդում է օգտվողի համար էջերի բեռնման արագության վրա:
Ռաստերային և վեկտորային գրաֆիկայի ճիշտ օգտագործումը
Եթե նկարը շատ մանր մանրամասներ ունի, ապա օգտագործեք ռաստերային ձևաչափ: Հակառակ դեպքում - վեկտոր:
Բայց ոչ մի նկար չպետք է օգտագործվի առանց օպտիմալացման՝ սեղմման։ Վեկտորային պատկերները սովորաբար արդեն սեղմված են: Բայց ոչ բոլոր հին բրաուզերներն են դրանք աջակցում:
Հարգանք դասավորության նկատմամբ
Գոյություն ունեն ընդհանուր չափորոշիչներ, որոնց հիմնական չափերը սովորաբար առաջնորդվում են դասավորությունը մշակելիս:
Պատասխանատու դիզայնի մեջ կա այնպիսի բան, ինչպիսին է ընդմիջման կետերը: Սրանք պարամետրեր են, որոնք փոխանցվում են մեդիա ֆունկցիաներում: Նշեք, թե ինչ լուծումներով է տեղի ունենում դիզայնի փոփոխությունը:
- Բջջային հեռախոսի համար 320px, 480 px:
- 768px պլանշետների համար:
- Նեթբուքերի և որոշ պլանշետների համար 1024px:
- 1280px և ավելի անհատական համակարգիչների համար:
Կոնկրետ բանաձևի պարտավորեցումը կոշտ չէ: Կախված է սարքերի պարամետրերից և պարամետրերից:
Երբեմն կարիք չկա ստեղծել դասավորություն միջանկյալ լուծաչափերի համար, օրինակ՝ 480px, եթե դասավորությունը ճիշտ է ցուցադրվում 768 - 320px միջակայքում։
Եթե դասավորությունը «կոտրվում է» որոշակի գործիքի վրա, սխալ է ցուցադրվում այլ լուծաչափով, ապա այս էկրանի իրական արժեքները վերցվում են որպես ընդմիջման կետեր:
Մեդիա հարցումներ
Ռեսպոնսիվ կայքերի մշակումը հիմնված է մեդիա հարցումների միջոցով ոճի պարամետրերի սահմանման սկզբունքի վրա։
Հարցումները սահմանում են.
- Սարքի տեսակը՝ պրոյեկտորներ, սմարթֆոններ, մոնիտորներ, հեռուստացույցներ և այլն։
- Պայմաններ.
Համապատասխան հարցումը և պատասխանը կկիրառեն ցուցադրման համապատասխան կարգավորումները css ոճաթերթի ֆայլից:
Կայքի արձագանքման ստուգում
Դուք կարող եք ստուգել, թե ինչպես է ձեր կայքը ցուցադրվում շարժական սարքերի վրա՝ օգտագործելով տարբեր ծառայություններ և գործիքներ:
Օգտագործելով բրաուզեր
Օրինակ՝ Google Chrome-ն ունի ներկառուցված գործիքակազմ՝ կայքի դիզայնի ճշգրտությունը շարժական սարքերում ցուցադրելու համար ստուգելու համար: Դուք պետք է սեղմեք F12 ստեղնը կամ Ctrl + Shift + I, կամ ընտրացանկից ընտրեք «Լրացուցիչ գործիքներ» - «Developer Tools»:
Վ Mozilla Firefoxդա կարելի է անել այս կերպ «Մենյու» - «Զարգացում» - «Պատասխանող դիզայն» կամ Ctrl + Shift + M:
Google Mobile Friendly (Google Search Console)
Մենք պարզապես մուտքագրում ենք ամբողջական URL-ը տողի մեջ և ստանում արդյունքները: Ստուգումը սովորաբար տևում է մեկ րոպեից պակաս:
Պատասխանատու կայքը վեբ զարգացման ստանդարտ է, ինտերնետ ռեսուրսի որակի և օգտատերերի կարիքների նկատմամբ ուշադիր վերաբերմունքի ցուցիչներից մեկը:
Հարմարվողական դասավորությունկայքը թույլ է տալիս վեբ էջերին ավտոմատ կերպով հարմարեցնել պլանշետների և սմարթֆոնների էկրաններին: Բջջային ինտերնետի տրաֆիկը տարեցտարի աճում է, և այս տրաֆիկի արդյունավետ մշակման համար անհրաժեշտ է օգտատերերին առաջարկել ռեսպոնսիվ կայքեր՝ օգտագործողի համար հարմար ինտերֆեյսով:
Որոնման համակարգերն օգտագործում են մի շարք չափանիշներ՝ բջջային սարքերում դիտելիս վեբկայքի արձագանքողությունը գնահատելու համար: Google-ը փորձում է պարզեցնել ինտերնետի օգտագործումը սմարթֆոնների և պլանշետների սեփականատերերի համար՝ նշելով բջջային արդյունքները հարմարեցված շարժական սարքերհատուկ նշանով կայքեր շարժական սարքերի համար հարմար... Yandex-ն ունի նաև ալգորիթմ, որը բջջային որոնման օգտատերերի համար նախապատվություն է տալիս բջջային/պատասխանող տարբերակով կայքերին:
Դուք կարող եք ստուգել էջի ցուցադրումը բջջային սարքերում ծառայությունների և.
Բրինձ. 1. Yandex-ի և Google-ի բջջային որոնման արդյունքները՝ բջջային սարքերի նկատմամբ կայքի բարեկամականության մասին նշումով Ինչ է արձագանքող դասավորությունը
Պատասխանող դասավորությունը ենթադրում է դրա բացակայություն հորիզոնական շերտերոլորման և խոշորացնելու տարածքներ, երբ դրանք դիտվում են ցանկացած սարքի վրա, ընթեռնելի տեքստ և մեծ տարածքներ սեղմվող տարրերի համար: Մեդիա հարցումների միջոցով դուք կարող եք վերահսկել էջի բլոկների դասավորությունը և դիրքը՝ վերակառուցելով ձևանմուշը՝ հարմարեցնելով սարքի էկրանի տարբեր չափերին:
Ռեսպոնսիվ կայք ստեղծելու հիմնական տեխնիկան տրված է հոդվածում։ Համար արձագանքող դիզայնԿայքի հիմնական կոնտեյների լայնությունը սահմանվում է տոկոսներով, մինչդեռ այն կարող է հավասար լինել բրաուզերի պատուհանի լայնության 100%-ին կամ ավելի քիչ: Ցանցային սյուների լայնությունը նույնպես սահմանվում է %-ով: Վ արձագանքող դիզայնՀիմնական կոնտեյների և ցանցի սյուների լայնությունները ամրագրված են՝ օգտագործելով px արժեքները:
Այս դասում քննարկված արձագանքող հեղուկի դասավորության տեխնիկան հիանալի է աշխատում երկսյունանի դասավորության վրա՝ դարձնելով կայքը պատասխանատու և հեշտ դիտելու շարժական սարքերում: Կաղապարը ենթադրում է էջերի հիմնական բովանդակության այլ դասավորություն, այս դասում կվերլուծվի հիմնական էջի դասավորությունը։
Հիմնական էջի դասավորությունը
Էջը բաղկացած է երեք հիմնական բլոկներից՝ վերնագիր (վերնագիր), հիմնական բովանդակության և կողային տողի համար փաթաթված կոնտեյներ և ստորագիր (ստորատակ): Մենք կվերցնենք 768px-ը և 480px-ը որպես մեր դիզայնի հանգուցային կետեր:
Առաջին կետում մենք կթաքցնենք վերին ընտրացանկը և կողագոտին կտեղափոխենք կոնտեյների տակ՝ գրառումներով։ Երկրորդ կետում մենք կփոխենք վերնագրի տարրերի դիրքը, կչեղարկենք սոցիալական մեդիայի կոճակների տեղադրումը գրառումներում և կչեղարկենք փաթաթումը ստորագրի սյունակների շուրջ:
Բրինձ. 2. Պատասխանող դասավորության օրինակ 1. Մետա թեգեր և բաժին
1) Ավելացնել բաժին
անհրաժեշտ ֆայլեր՝ հղում օգտագործվող տառատեսակներին, jQuery գրադարանին և նախածանցների անվճար հավելվածին (որպեսզի չգրեք բրաուզերի նախածանցներ հատկությունների համար).
2. Էջի վերնագիր
Էջի վերնագրում
լոգոն ;
կոճակ՝ հիմնական ընտրացանկը ցուցադրելու/թաքցնելու համար
