Ի՞նչ է ռեսպոնսիվ դիզայնը։

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

Հիմնական սկզբունքներ՝

Համընկնող ցանց (Fluid Grid): Օգտագործել հարաբերական չափման միավորներ (համամասնություններ, em, rem)՝ ֆիքսված պիքսելների փոխարեն՝ ձևավորման տարրերի չափերը որոշելու համար:
Համընկնող պատկերներ (Flexible Images): Պատկերները սահում են կոնտեյների չափերի համապատասխան՝ կանխելով դուրս գալը:
Մեդիա հարցումներ (Media Queries): CSS կանոններ, որոնք թույլ են տալիս կիրառել տարբեր ոճեր՝ կախված սարքի բնութագրերից՝ էկրանային լայնությունից, ուղղությունից, լուծումից:

Տիպիկ օրինակ՝ մեդիա հարցումների կիրառման:

/* Հիմնական ոճեր */
.container {
    լայնություն: 960px;
    մարգին: 0 auto;
}

/* 768px-ից փոքր էկրանների համար */
@media (max-width: 767px) {
    .container {
        լայնություն: 95%;
        padding: 0 10px;
    }
    .column {
        float: none;
        լայնություն: 100%;
    }
}

Практиկայում, ադապտիվ դիզայնի փորձարկման ժամանակ, ես ստուգում եմ՝

Դիտարկման ձևաչափ: Չկա՞ հորիզոնական սահում, արդյոք բլոկները ճիշտ են դասավորված:
Տեքստի ընթերցելիություն: Ֆոնտի չափը պետք է լինի հարմար բոլոր սարքերում:
Նավիգացիա: Մենյու պետք է լինի հասանելի և հարմար (օրինակ՝ "բուրգեր-մենյու" մոբայլներում):
Ֆունկցիոնալություն: Բոլոր ինտերակտիվ տարրերը (կոճակներ, ֆորմաներ) պետք է աշխատեն ճիշտ:
Աշխատունակություն: Բեռնում ժամանակը մոբայլ սարքերում: Օգտագործել <picture> կամ srcset պատկերների օպտիմալացման համար:

Հիմնական առավելությունները՝

Միայնական կոդային բազա բոլոր սարքերի համար:
SEO ցուցանիշների բարելավում (Google-ը նախընտրում է ադապտիվ կայքերը):
Ավելի լավ օգտատիրական փորձ:
Ժամանակի և միջոցների խնայողություն՝ տարբերակների ստեղծումից:

Տարբերությունը ադապտիվ դիզայնից (Adaptive Design) այն է, որ վերջինը օգտագործում է ֆիքսված կետեր (breakpoints) տարբեր ձևանմուշների կիրառման համար, մինչդեռ ադապտիվ դիզայնը ավելի հոսում է ցանկացած չափի էկրանին։ Այս տերմինները հաճախ օգտագործվում են որպես սինոնիմներ տարբեր սարքերի զարգացման համատեքստում։