Կայքի հարմարվողական դիզայնը հարմար համակարգ է նույն կայքը տարբեր տեսակի սարքերում առցանց ցուցադրելու համար: Պարզ ասած՝ սա նոութբուքի, սմարթֆոնի և այլ հարմարանքների վրա մեկ վեբ էջ դիտելու հնարավորությունն է։
Վեբ արձագանքումը դարձել է անհրաժեշտություն այն ժամանակվանից, երբ մարդիկ ստացան տարբեր ձևաչափերի ինտերնետ միացված գաջեթներ: Ընկերությունները, առցանց խանութները և նույնիսկ պարզապես տեղեկատվական կայքերը ձգտում են գոհացնել իրենց լսարանին՝ ամեն կերպ հարմարվելով դրան: Արձագանքող դիզայնը լուծում է հարմարության խնդիրը, հետևաբար այն անփոխարինելի աշխատանքային առարկա է։
Արձագանքող վեբ դիզայնի բնութագրերը
Դիզայնի հարմարավետությունը բնութագրվում է մի քանի հիմնական չափանիշներով:
- Չափ. Պատասխանող վեբ կայքի ձևավորումը պետք է փոքր տարբերություններ ունենա էջը տարբեր սարքերում ցուցադրելիս, այնպես որ պատկերների, տեքստի և դիտված այլ տարրերի չափերը պետք է համապատասխանեն հենց սարքերի չափերին: Դա անելու համար վեբ մշակողները հարմարեցնում են դիզայնն այնպես, որ այն ունենա բազմաթիվ դիտումների տարբերակներ:
- Բովանդակության հարմարեցում. Նյութ, որը լրացնում է կայքը (պատկերներ, տեսանյութերև այլ մուլտիմեդիա տարրեր) նույնպես պետք է համապատասխանեն էկրանի պահանջվող լուծաչափերին՝ չկորցնելով ցուցադրման որակը:
- Դիզայնի ճկունություն: Ներառում է այնպիսի տարրերի մշակման մեջ, որոնք թույլ են տալիս արագորեն հարմարեցնել կայքի դիզայնը, երբ փոխում եք ձեր դիտած վեբ էջը: Օրինակ՝ օգտատերը ոլորում է էջը վերև վար, նավարկում է տարբեր բաժիններով կամ փոխում է էկրանի դիրքը ուղղահայացից հորիզոնական և հակառակը:
- Պարզեցրեք տարրերն ըստ սարքի ավելի լավ օգտագործելիության համար:
- Թաքցնել անկարևոր բլոկները փոքր էկրանների վրա:
Հիմունքներ
Վեբկայքի ստեղծումը միանշանակ կապված է ծրագրավորման լեզուների հետ, քանի որ առանց դրանց պարզապես չեք կարող։ Օգտագործելով HTML և CSS, զննարկիչը ճանաչում է օբյեկտների կազմը և կարգը (տեքստեր, նկարազարդումներ, տեսանյութեր)՝ այսպես է ձևավորվում կայքը։
CSS-ը պատասխանատու է գույնի, ոճերի, չափերի, տառատեսակների, հավասարեցումների, լիցքավորման, ֆոնային տարրերի, ձևերի և այլնի համար: HTML-ը պատասխանատու է կայքի ընդհանուր բովանդակության և կառուցվածքի համար: Այսպիսով, վեբ ռեսուրսը կառուցված է նկարագրության երկու ամենակարևոր մեթոդների ագրեգատում:
CSS-ը, մյուս կողմից, դիզայնի անփոխարինելի գործիք է: Ունի HTML-ին գերազանցող հատկանիշների մեծ փաթեթ՝
- Ապահովում է դիզայնի հետևողականությունը բազմաթիվ էջերում, կայքի տեսքը և վերահսկում է HTML փաստաթղթերի ցուցադրումը:
- Ձեզ հնարավորություն է տալիս միաժամանակ զբաղվել դիզայնով և բովանդակությամբ:
- Կիրառում է բազմաթիվ ոճեր և հնարավորությունդիտում տարբեր սարքերում։
- Կայացնում է դիզայնի բարդ որոշումներ:
- Բնորոշվում է բարձր արագությամբ։
Վեբկայք մշակելու համար դուք պետք է իմանաք մի քանի հիմնական հասկացություններ:
CSS ընտրիչը նշվում է ոճի անունով, որը սահմանում է հատկություններ և ձևաչափման տարբերակներ: Այն զննարկիչին ասում է, թե կոնկրետ որ տարրի վրա են կիրառվում հատկությունները:
Գույքը կառուցվածքային միավոր է: Այն սահմանում է արտաքին պարամետրերը (չափը, գտնվելու վայրը, գույնը, ձևը և այլն) և արտահայտվում է որոշակի կոդով։
Կա սահմանված CSS հատկությունների մի շարք, որոնք նկարագրում են մեկ օբյեկտ արտաքին տեսքով և դիրքով:
Այս տարրերը միասին կազմում են հետևյալ սխեման՝
Ընտրիչ { հատկություն1: արժեք; սեփականություն 2; արժեքը }.
Դասավորության չափերը և լուծումները
Դիզայնի զարգացումը սկսվում է Photoshop-ում կամ այլ գրաֆիկական ծրագրերում դասավորության պատրաստումից: Հարմարության համար կտավի մեջ մտցվում են մոդուլային ցանցի հատուկ գծանշումներ, նկատվում են հատուկ գծեր։ Այսպիսով, վեբ դիզայները դասավորության դիզայներին ցույց է տալիս ապագա կայքի կառուցվածքի և վեբ տարրերի ճիշտ դասավորության սկզբունքները։
Վեբ դիզայնի պատասխանող լուծումներ և չափսեր հիմնական սարքերի տեսակների համար.
- Այս դիզայնը հավատարիմ է բջջայինի թույլտվությամբ աշխատանք սկսելու սկզբունքին: Սմարթֆոնի դասավորությունը ստեղծվել է 460 × 960 px չափերով:
- Պլանշետի դասավորության չափը 768 × 1024 է:
- Նոթատետրի չափսը՝ 1280 × 802։
- Համակարգչի չափսը՝ 1600 × 992։
Կայքի բջջային տարբերակումպետք է հնարավորինս պարզեցված լինի՝ պահպանելով բոլոր հիմնական գործառույթները։ Եթե դասավորությունը պատրաստվում է առցանց խանութի համար, օգտագործման ողջ պարզեցմամբ, այն պետք է ունենա հիմնական նկարագրություն, ապրանքի կատալոգ, պատվերի տարբերակ, գնումների զամբյուղ և այլն՝ լիարժեք գործելու համար անհրաժեշտ բոլոր տարրերը, ինչպես ամբողջական ձևաչափով համակարգչով դիտելու դեպքում: Բջջային տարբերակի հարմարավետությունն այն է, որ այստեղ դուք կարող եք խուսափել լրացուցիչ էջերից՝ բեռնելիս ժամանակ խնայելու համար:
Ադապտիվ բովանդակության մեջ, օգտագործելով html կոդը, դուք կարող եք թաքցնել որոշ տարրեր, որոնք իրականում անհրաժեշտ չեն: Օրինակ՝ բարձր լուծաչափով կայքը ցուցադրում է ապրանքի քարտ՝ իր նկարագրությամբ, գնով, առաքման տեղեկություններով և «Զամբյուղում» ավելացնելու հնարավորությամբ։ Բջջային լուծաչափով գործընթացը պարզեցված է լուսանկարի, գնի և գնման կոճակի տեսքով:
Արձագանքող դիզայնի միջին և նվազագույն լուծումները պետք է հաշվի առնեն օգտագործողի կողմից ընթերցանության և դիտման հեշտությունը:
Դասավորություն
Դիզայնի հարմարվողական դասավորության նպատակը ճկուն դասավորություն ստեղծելն է, կամ ինչպես ընդունված է ասել՝ «ռետինե կաղապար»: Հիմնական գիծը ոչ թե միանիշ էջերի չափերն է, այլ ձևանմուշի համաչափ սեղմելիությունը՝ բոլոր սարքերում հեշտ դիտելու համար:
Այն կառուցված է հիմնականում CSS-ի վրա։ Մշակման ընթացքում որոշվում են էկրանի չափսերի կառավարման կետերը: Այսպիսով, որոշվում է մնացած օբյեկտների լայնությունը: Դա անելու համար էջի լայնությունը սահմանվում է css max-width հատկությամբ, այս չափանիշներից կախված այլ տարրերի չափը ընտրվում է որպես տոկոս։ Օրինակ, բլոկի չափը հիմնականի վրաէջը 600px է, իսկ կողագոտի բլոկի լայնությունը (կայքի կողագոտի) համապատասխանաբար 400px է, բովանդակության լայնությունը կկազմի 60%, իսկ կողագոտի լայնությունը՝ 40%։
Գոյություն ունեն արձագանքող դասավորությունների մի քանի տեսակներ: Յուրաքանչյուրն ընտրվում է առանձին՝ կախված առանձնահատկություններից և կառուցվածքից:
Դիտումներ՝
- Դասավորության տեսակ, որը թույլ է տալիս բլոկներին փաթաթվել, երբ էկրանի լուծաչափը նվազում է: Բազմասյունակ կայքերում լրացուցիչ բլոկները տեղափոխվում են էկրանի ներքևի մաս:
- Երբ յուրաքանչյուր թույլտվության համար մշակվում է առանձին օրինակ: Արձագանքող դիզայնի այս տեսակն ավելի երկար է տևում, բայց ամենաընթեռնելին է:
- Դիզայնի պարզ տեսակ, որի նպատակն է մասշտաբավորել բոլոր տարրերը: Այն ճկուն չէ։
- Վահանակի տեսակը հարմար է բջջային հավելվածներում օգտագործելու համար, երբ էկրանի դիրքը փոխելիս լրացուցիչ գործառույթներ են հայտնվում։
Պատասխանող շերտերի ստեղծումը աշխատանքի միայն մի մասն է: Հարմարվողական պատկերները առանձին դեպք են, որն ունի դրանց լուծման իր խնդիրներն ու մեթոդները։
Մեկ պատկերը պետք է հստակ ցուցադրվի էկրանի տարբեր լուծաչափերով: Այստեղ խնդիր կա՝ ինչպես համոզվել, որ նկարը միշտ նույնը մնա՝ անկախ լուծաչափի փոփոխությունից։ Պարզ CSS կոդի մուտքագրումն այս դեպքում բավարար չի լինի:
Օրինակ՝ img {max-width: 250px;} - այստեղ դուք պետք է կիրառեք մի մեթոդ, որի դեպքում պատկերը պարունակող տարայի չափը սահմանափակ է, և ոչ թե պատկերն ինքնին: Այն կունենա մոտավորապես այսպիսի տեսք՝ div img {max-width՝ 250px;}: Այս մեթոդը լուծում է խնդիրըփոքր պատկերների դասավորություն, բայց հարմար չէ մեծ նկարազարդումների համար:
Հետևաբար, շատ ծրագրավորողներ նախընտրում են օգտագործել javascript լեզուներ, որոնք թույլ են տալիս հարմարեցնել ցանկացած պատկեր՝ առանց սերվերի ծանրաբեռնման: Javascript-ն առաջարկում է մեծ թվով այլընտրանքային սցենարներ:
Արձագանքող դասավորության առավելություններն ու թերությունները
Դրականներ.
- Պահպանել բոլոր տարրերի գտնվելու վայրը: Սա հարմար է, երբ օգտատերը սովոր է կայքի ամբողջական տարբերակին:
- Պահպանել տիրույթները և հասցեները։
- Լրիվ հարմարեցում այլ թույլտվությունների ձևաչափերի համար:
Բացասականներ.
- Ֆունկցիոնալ ճկունությունը կորել է
- Ցանկացած տեղեկատվական ծանրաբեռնվածություն հղի է վեբ ռեսուրսի երկար գործարկմամբ, ինչը ստիպում է շատ օգտատերերի անցնել ավելի արագ տարբերակների:
Կայքի ստեղծում
Կայքի կառուցվածքը բաժանված է մի քանի բաժինների և բլոկների: Ավանդաբար, դասավորությունը բաղկացած է կայքի վերին մասից (վերնագիր), լոգոն, մենյու, բովանդակության բլոկ և կայքի վերջնական մաս (օրինակ, մանրամասն կոնտակտային տվյալներ): Տեսնենք, թե ինչպես կարելի է ռեսպոնսիվ վեբ դիզայն պատրաստել պարզ ձևանմուշից:
Օժանդակ պիտակներ գրելու համար.
- wrapper - պիտակ, որը միավորում է կաղապարի բոլոր տարրերը;
- header h1 - logo;
- header - մենյուի և այլ կարևոր տարրերի վերնագիր;
- բովանդակություն - արգելափակում;
- colLeft - բովանդակության չափ;
- colRight - կողագոտ (կողային սյունակ);
- footer - կայքի վերջին մասը;
- մեդիա էկրան - հավաքածուներցանկալի լուծում։
Կայք գրելիս այս տարրերը կարող են շարժվել այլ հերթականությամբ՝ կախված կարիքից: Օրինակ՝ բարձր լուծաչափերով ցանկը կարող է ցուցադրվել ուղղահայաց: Բջջային տարբերակում դասավորությունը կարող է կառուցվել այնպես, որ ցանկը դուրս սահի հորիզոնական դիրքով:
- viewport - պիտակ, որը թույլ է տալիս պահպանել տեքստի չափը դիզայնի ավելի փոքր տարբերակում: Այն գտնվում է պիտակների միջև.
- max-width - կայքի օպտիմալացում՝ 1000 պիքսելից ավելի լուծաչափերով ձգվելուց խուսափելու համար:
Դասավորությունն իրականացնելիս jQuery գրադարանը շատ է օգնում, երբ անհրաժեշտ է փոխել բլոկների ոճն ու կառուցվածքը:
Ո՞րն է տարբերությունը արձագանքող և բջջային դիզայնի միջև
Լրիվ հասկանալու համար, հաշվի առեք մի քանի պատկերավոր օրինակներ, քանի որ այս երկու հասկացությունների միջև շփոթությունը հազվադեպ չէ:
Դուք պետք է հասկանաք, որ բջջային տարբերակը հիմնական կայքի անալոգն է ենթադոմեյնով: Կայքի արտաքին ներկայացումն ամբողջությամբ կրկնում է ոճն ու ֆունկցիոնալությունը, մինչդեռ դրա կառուցվածքն ու բովանդակությունը կարող են տարբերվել հիմնական տարբերակից, քանի որ տարբերակը կրճատված է ըստ անհրաժեշտ տարրերի։
Արձագանքող դիզայնը օպտիմալ է սարքի բոլոր լուծումների համար: Այն մասշտաբային է և ճիշտ է ցուցադրվում՝ անկախ դիտման պայմաններից:
Սրանք կայքի երկու տարբեր ներկայացումներ են, որոնց շուրջ անխոնջ վեճեր են բորբոքվում, թե որն է ավելի լավը: Նշենք, որ դեռևս հստակ որոշում չի կայացվել։ Ինչ-որ մեկը գովաբանում է այս դիզայնը՝ մատնանշելով նորաձևության միտումը և շատ առավելություններ։Բջջային տարբերակն ունի նաև մի քանի առավելություններ, որոնք արձագանքող դիզայնը չունի: Հետևաբար, սկզբից դուք պետք է հասկանաք հիմնական կարիքները:
Օգուտներ
Ինչպե՞ս է արձագանքող դիզայնն ավելի լավ, քան բջջային հեռախոսը:
Բազմակողմանիություն. Մեր ժամանակներում, շուկայի նման կատաղի աճի պայմաններում, պարզապես անհրաժեշտ է տեղեկատվությունը ներկայացնել այլ կերպ՝ բավարարելով սպառողների ցանկությունները։ Պատասխանատու դիզայնը լուծում է այս խնդիրը:
Արդյունավետ խթանում որոնման համակարգերում: Ինչը չի կարելի վերագրել հարմարվողական սարքի հիմնական առավելություններին: Որոնման համակարգերը նախընտրում են օգտատերերին տրամադրել ռեսպոնսիվ կայքեր:
Օգտագործելիություն. Պատասխանատու դիզայնը սովորաբար նախագծված է լավագույն դիզայներական լուծումներով, ինչը հաճելի նվեր է օգտատերերի տեսողական ընկալման համար:
Հեշտություն և պարզություն ինչպես նախագծի իրականացման, այնպես էլ դրա օգտագործման մեջ:
Լավ փոխակերպման տեմպեր: Քանի որ հարմարվողական դիզայնի դեպքում ցուցադրման ավելի շատ հնարավորություններ կան, փոխակերպումն ինքնին մեծանում է:
Տնտեսություն. Այն համեմատաբար ավելի էժան է, քան առանձին բջջային տարբերակ ստեղծելն ու գովազդելը:
Բջջային տարբերակի դրական և բացասական կողմերը
Արձագանքող բջջային դիզայնի ստեղծումը պահանջում է բազմակողմանիություն և հետևողականություն: Նախ, խորհուրդ է տրվում մանրամասն գրել տեխնիկական առաջադրանքը, ինչը, իհարկե, կօգնի խուսափել ավելորդ աշխատանքից և խնայել ժամանակը, ինչպես նաև հաշվի առնել այն սերվերի առանձնահատկությունները, որոնց վրա կտեղակայվի կայքը:.
Կան որոշակի առավելություններ և թերություններ բջջային արձագանքող դիզայնի համար:
Կողմ՝
- Եթե ունեք պատրաստի կայք, ապա կարիք չկա զրոյից դիզայն մշակել բջջային տարբերակի համար։ Միայն մի քանի փոփոխություններ կարող են կատարվել՝ ազատելով այս դասավորությունը չպահանջվող ֆունկցիոնալությունից:
- Բոլոր տեսակի պարզեցումների շնորհիվ բջջային տարբերակը ներբեռնելիս համարվում է ավելի արագ։
- Օգտատերը տեսնում է տեղեկատվության ամենակարևոր մասը ամբողջ բովանդակության մեջ:
- Արագ իրականացում. Կան փլագիններ, որոնցով կարող եք իրականացնել շարժական ադապտացիա, նույնիսկ եթե չգիտեք պիտակներ և կոդեր:
- Որոնման համակարգերի ընտրությունը նախընտրում է հարմարվողական տարբերակները, քանի որ դրանք ավելի քիչ ժամանակ են պահանջում վերլուծելու համար:
դեմ.
- Բջջային սարքերի ոչ բոլոր տարբերակները կարող են համապատասխանել շարժական սարքերի լուծումներին: Կայքը, իհարկե, կբացվի, բայց էկրանի լուծաչափը միշտ չէ, որ համընկնում է դասավորության հետ։ Երբեմն լավ մշակված սմարթֆոնի դիզայնը կարող է տարբեր տեսք ունենալ, երբ բացվում է որպես պլանշետ:
- Բջջային տարբերակները պահանջում են առանձին վճարովի տիրույթներ:
- Կան փոքր խնդիրներ բովանդակության տեղադրման հետ կապված: Եթե կան միանգամից մի քանի տարբերակներ, ապա բովանդակությունը պետք է ճշգրտվի միանգամից բոլոր ձևաչափերի համար: Հիմնական կայքում նոր նյութ ներկայացնելն ու բջջային տարբերակին պատճենելը կարելի է գողություն համարել։ Այս խնդրից խուսափելու համար գուցե ստիպված լինեք ապացուցել ռեսուրսների կապը:
Իրագործման եղանակներ
Իրագործման հիմնական մեթոդները՝
- Դասավորությունների և դասավորության դիզայնը ստեղծելուց հետո այն բեռնվում է պահանջվող չափսերով՝ օգտագործելովօպերատորի կայքը և հիմնական կոդը: Սա դասական մեթոդ է, որն օգտագործվում է միջին և փոքր տարբերակների (պլանշետներ, սմարթֆոններ և այլն) ստեղծման ժամանակ։
- BootStrap-ը հարմարեցման գործիքների պարզ և հստակ հավաքածու է: Հարմար է Landing Page և այլ ոչ շատ բարդ վեբ նախագծերի տարբերակներ ստեղծելու համար։ Այն լավ հնարավորություն է տալիս ինտերֆեյսի գործառույթներում կիրառել բազմաթիվ տարբեր ոճեր:
- Responsive Grid System-ը բազմակողմանի գործիքների հանրաճանաչ հավաքածու է: Հեշտ է կիրառելի և չի պահանջում խորը գիտելիքներ: Ներառում է ինֆոգրաֆիկայի լայն տեսականի:
- GUMBY - CSS շրջանակ, որը պարծենում է ճկուն արձագանքողությամբ և հիանալի գործիքակազմով:
- Cookies - թույլ է տալիս իրականացնել պատասխանող պատկերներ: Ավտոմատ կերպով ուղեկցում է դիտարկիչի կողմից պահանջվող ֆայլերը:
- ExpressionEngine-ը արձագանքող պատկերներ ստեղծելու ևս մեկ միջոց է: Որոշում է, թե արդյոք սարքը շարժական է, ի վիճակի է փոխել պատկերները պահանջվող լուծաչափով:
- ProtoFluid - Ապահովում է արագ նախատիպավորում: Հարմար է բոլոր տեսակի սարքերի համար։
