Adaptiv veb-sayt dizaynı eyni veb-saytı müxtəlif növ cihazlarda onlayn göstərmək üçün əlverişli sistemdir. Sadə dillə desək, bu, noutbukda, smartfonda və digər qadcetlərdə bir veb səhifəyə baxmaq imkanıdır.
İnsanlar müxtəlif formatlarda interneti aktivləşdirən qadcetlər əldə etdikdən sonra veb cavablılığı zərurətə çevrilib. Şirkətlər, onlayn mağazalar və hətta sadəcə məlumatlandırıcı saytlar hər cür uyğunlaşaraq, tamaşaçılarını sevindirməyə çalışırlar. Cavab verən dizayn rahatlıq problemini həll edir, ona görə də o, əvəzolunmaz iş elementidir.
Responsive Veb Dizaynının Xüsusiyyətləri
Dizayn rahatlığı bir neçə əsas meyarla xarakterizə olunur.
- Ölçü. Cavab verən veb-sayt dizaynında səhifəni müxtəlif cihazlarda göstərərkən kiçik fərqlər olmalıdır, buna görə də görüntülərin, mətnin və baxılan digər elementlərin ölçüləri cihazların öz ölçülərinə uyğun olmalıdır. Bunun üçün veb tərtibatçıları dizaynı elə uyğunlaşdırırlar ki, onun çoxsaylı baxış versiyaları olsun.
- Məzmun uyğunlaşması. Saytı dolduran material (şəkillər, videolarvə digər multimedia elementləri) həmçinin displeyin keyfiyyətini itirmədən tələb olunan ekran təsvirlərinə uyğun olmalıdır.
- Dizayn çevikliyi. Baxdığınız veb səhifəni dəyişdirərkən saytın dizaynını tez bir zamanda tənzimləməyə imkan verən elementlərin işlənib hazırlanmasına daxil edilməsi. Məsələn, istifadəçi səhifəni yuxarı və aşağı sürüşdürür, müxtəlif bölmələr arasında gəzir və ya ekran mövqeyini şaqulidən üfüqiyə və əksinə dəyişir.
- Daha yaxşı istifadə üçün elementləri cihaza görə sadələşdirin.
- Daha kiçik ekranlarda əhəmiyyətsiz blokları gizlədin.
Əsaslar
Veb saytının qurulması mütləq proqramlaşdırma dilləri ilə bağlıdır, çünki onlarsız sadəcə edə bilməzsiniz. HTML və CSS-dən istifadə edərək brauzer obyektlərin (mətnlər, illüstrasiyalar, videolar) tərkibini və sırasını tanıyır - sayt belə formalaşır.
CSS rəng, üslub, ölçülər, şriftlər, düzülmələr, doldurma, fon elementləri, formalar və s. üçün cavabdehdir. HTML saytın ümumi məzmununa və strukturuna cavabdehdir. Beləliklə, veb resurs iki ən vacib təsvir metodunun məcmusunda qurulur.
CSS isə əvəzedilməz dizayn vasitəsidir. HTML-dən üstün olan çoxlu xüsusiyyətlərə malikdir:
- Birdən çox səhifədə dizayn ardıcıllığını, saytın görünüşünü təmin edir və HTML sənədlərinin göstərilməsinə nəzarət edir.
- Sizə dizayn və məzmunu eyni vaxtda etmək imkanı verir.
- Birdən çox üslub və bacarığı tətbiq edirmüxtəlif cihazlarda baxılır.
- Mürəkkəb dizayn qərarları verir.
- Yüksək sürət ilə xarakterizə olunur.
Vebsayt hazırlamaq üçün bəzi əsas anlayışları bilməlisiniz.
CSS selektoru xassələri və formatlaşdırma seçimlərini müəyyən edən üslubun adı ilə işarələnir. O, brauzerə xassələrin hansı xüsusi elementə aid olduğunu bildirir.
Əmlak struktur vahiddir. O, xarici parametrləri (ölçü, yer, rəng, forma və s.) müəyyən edir və xüsusi kodda ifadə edilir.
Tək bir obyekti görünüş və məkanda təsvir edən müəyyən edilmiş CSS xassələri dəsti var.
Bu elementlər birlikdə aşağıdakı sxemi əmələ gətirir:
Seçici { xüsusiyyət1: dəyər; əmlak2; dəyər }.
Düzen ölçüləri və ayırdetmə ölçüləri
Dizayn hazırlanması Photoshop və ya digər qrafik proqramlarda tərtibatın hazırlanması ilə başlayır. Rahatlıq üçün modul şəbəkənin xüsusi işarələri kətana daxil edilir, xüsusi girintilər müşahidə olunur. Beləliklə, veb-dizayner tərtibatçıya gələcək saytın strukturlaşdırılması prinsiplərini və veb elementlərinin düzgün yerləşdirilməsini göstərir.
Əsas cihaz növləri üçün cavab verən veb dizayn qətnamələri və ölçüləri:
- Bu dizayn mobil icazə ilə işə başlamaq prinsipinə uyğundur. Smartfon üçün tərtibat 460 × 960 piksel ölçüsündə yaradılmışdır.
- Planşet tərtibatının ölçüsü 768 × 1024-dür.
- Noutbuk ölçüsü 1280 × 802.
- PC ölçüsü 1600 × 992.
Saytın mobil versiyasındabütün əsas funksiyaları saxlamaqla mümkün qədər sadələşdirilməlidir. Dizayn bütün sadələşdirmələrlə onlayn mağaza üçün hazırlanırsa, onun əsas təsviri, məhsul kataloqu, sifariş seçimi, alış-veriş səbəti və s. olmalıdır - tam hüquqlu işləmək üçün bütün lazımi elementlər, PC-də tam formatlı baxışda olduğu kimi. Mobil versiyanın rahatlığı ondan ibarətdir ki, burada yükləmə zamanı vaxta qənaət etmək üçün əlavə səhifələrdən qaça bilərsiniz.
Uyğunlaşan məzmunda html kodundan istifadə edərək, həqiqətən lazım olmayan bəzi elementləri gizlədə bilərsiniz. Məsələn, yüksək rezolyusiyada saytda təsviri, qiyməti, çatdırılma məlumatları və “Səbətə” əlavə etmək imkanı olan məhsul kartı göstərilir. Mobil ayırdetmədə proses foto, qiymət və satın alma düyməsinə qədər sadələşdirilib.
Responsive dizayn üçün orta və minimum rezolyusiya istifadəçinin oxuması və baxması asanlığını nəzərə almalıdır.
Layout
Uyğunlaşdırıcı dizayn tərtibatının məqsədi çevik tərtibat yaratmaqdır və ya adət halında desək, "rezin şablon". Nəticə birrəqəmli səhifə ölçülərində deyil, bütün cihazlarda asan baxmaq üçün şablonun mütənasib sıxılma qabiliyyətidir.
Əsasən CSS üzərində qurulub. İnkişaf zamanı ekran ölçülərinin nəzarət nöqtələri müəyyən edilir. Beləliklə, qalan obyektlərin eni müəyyən edilir. Bunun üçün səhifənin eni css max-width xassəsi ilə təyin edilir, bu meyarlardan asılı olaraq digər elementlərin ölçüsü faizlə seçilir. Məsələn, əsas blokun ölçüsüsəhifə 600px, yan panel blokunun eni (saytın yan paneli) 400px-dir, müvafiq olaraq məzmunun eni 60%, yan panelin eni isə 40% olacaq.
Bir neçə növ cavab verən tərtibat var. Xüsusiyyətlərdən və tikintidən asılı olaraq hər biri fərdi olaraq seçilir.
Baxışlar:
- Ekran ayırdetmə qabiliyyəti azaldıqda blokların sarılmasına imkan verən düzən növü. Çox sütunlu saytlarda əlavə bloklar ekranın aşağısına köçürülür.
- Hər icazə üçün ayrıca nümunə işləndikdə. Bu tip həssas dizayn daha uzun çəkir, lakin ən oxunaqlıdır.
- Bütün elementləri miqyaslamağı hədəfləyən sadə dizayn növü. Bu çevik deyil.
- Panel növü ekranın mövqeyini dəyişdirərkən əlavə funksiyalar görünən mobil proqramlarda istifadə üçün əlverişlidir.
Reaktiv təbəqələrin yaradılması işin yalnız bir hissəsidir. Adaptiv təsvirlər ayrı bir haldır, onların öz problemləri və həlli üsulları var.
Bir şəkil fərqli ekran qətnamələrində aydın şəkildə göstərilməlidir. Burada bir problem var - qətnamənin dəyişməsindən asılı olmayaraq şəklin həmişə eyni qalmasına necə əmin olmaq olar. Bu halda sadə CSS kodunu daxil etmək kifayət etməyəcək.
Nümunə: img {maksimum genişlik: 250px;} - burada şəklin özünün deyil, şəklin olduğu konteynerin ölçüsünün məhdud olduğu metodu tətbiq etməlisiniz. Bu belə görünəcək: div img {maksimum genişlik: 250px;}. Bu üsul problemi həll edirkiçik şəkillərin tərtibatı, lakin böyük təsvirlər üçün uyğun deyil.
Ona görə də, bir çox tərtibatçılar serveri həddən artıq yükləmədən istənilən şəkli uyğunlaşdırmağa imkan verən javascript dillərindən istifadə etməyi üstün tuturlar. Javascript çoxlu sayda alternativ skript təklif edir.
Responsive layoutun müsbət və mənfi cəhətləri
Müsbətlər:
- Bütün elementlərin yerini yadda saxlayın. İstifadəçi saytın tam versiyasına öyrəşdikdə bu rahatdır.
- Domenləri və ünvanları yadda saxlayın.
- Digər icazə formatları üçün tam fərdiləşdirmə.
Mənfilər:
- Funksional çeviklik itir
- İstənilən məlumat yüklənməsi bir çox istifadəçini daha sürətli seçimlərə keçməyə məcbur edən veb resursun uzun müddət işə salınması ilə doludur.
Vebsayt yaratmaq
Sayt strukturu bir neçə bölmə və bloka bölünür. Ənənəvi olaraq tərtibat saytın yuxarı hissəsindən (başlıq), loqodan, menyudan, məzmun blokundan və saytın yekun hissəsindən (məsələn, ətraflı əlaqə məlumatlarından) ibarətdir. Gəlin sadə şablondan cavab verən veb-sayt dizaynını necə edəcəyinizi görək.
Yazmaq üçün köməkçi teqlər:
- wrapper - bütün şablon elementlərini birləşdirən etiket;
- başlıq h1 - loqo;
- başlıq - menyu və digər vacib elementlər üçün başlıq;
- məzmun - blok;
- colLeft - məzmun ölçüsü;
- colRight - yan panel (yan sütun);
- footer - saytın son hissəsi;
- media ekranı - dəstləristədiyiniz qətnamə.
Sayt yazarkən bu elementlər ehtiyacdan asılı olaraq fərqli ardıcıllıqla hərəkət edə bilər. Məsələn, yüksək qətnamələrdə menyu şaquli şəkildə göstərilə bilər. Mobil versiyada tərtibat menyunun üfüqi vəziyyətdə sürüşməsi üçün qurula bilər.
- viewport - dizaynın daha kiçik versiyasında mətnin ölçüsünü saxlamağa imkan verən etiket. O, teqlər arasında yerləşir.
- maksimum genişlik - 1000 pikseldən yuxarı təsvirlərdə uzanmamaq üçün saytı optimallaşdırmaq üçün.
Layout həyata keçirərkən, blokların üslubunu və strukturunu dəyişmək lazım olduqda jQuery kitabxanası çox kömək edir.
Responsiv və mobil dizayn arasındakı fərq nədir
Tam başa düşmək üçün bir neçə illüstrativ nümunə nəzərdən keçirin, çünki bu iki anlayış arasında qarışıqlıq nadir deyil.
Anlamalısınız ki, mobil versiya subdomeni olan əsas saytın analoqudur. Saytın xarici təqdimatı üslub və funksionallığı tamamilə təkrarlayır, onun strukturu və məzmunu əsas versiyadan fərqlənə bilər, çünki versiya lazımi elementlərə qədər kəsilir.
Responsive dizayn bütün cihazların təsvirləri üçün optimaldır. O, miqyaslana bilir və baxış şəraitindən asılı olmayaraq düzgün şəkildə göstərilir.
Bunlar saytın iki fərqli təqdimatıdır, hansının daha yaxşı olduğunu mübahisə edən mübahisələr. Qeyd edək ki, hələlik dəqiq qərar verilməyib. Kimsə bu dizaynı tərifləyir, moda meylini və bir çox üstünlükləri göstərir. Mobil versiya eyni zamanda cavab verən dizaynda olmayan bir sıra üstünlüklərə malikdir. Buna görə də, başlamaq üçün əsas ehtiyacları başa düşməlisiniz.
Faydalar
Responsiv dizayn mobildən nə dərəcədə yaxşıdır?
Çox yönlülük. Bizim dövrümüzdə, bazarın belə qəzəbli böyüməsi ilə, istehlakçıların istəklərini təmin edən məlumatları fərqli bir şəkildə təqdim etmək sadəcə lazımdır. Cavab verən dizayn bu problemi həll edir.
Axtarış motorlarında effektiv tanıtım. Adaptiv cihazın əsas üstünlüklərinə nə aid edilə bilməz. Axtarış motorları istifadəçilərə cavab verən vebsaytlar verməyə üstünlük verir.
Uyğunluq. Cavab verən dizayn adətən ən yaxşı dizayn həllərində tərtib edilir ki, bu da istifadəçilərin vizual qavrayışı üçün gözəl hədiyyədir.
Həm layihənin həyata keçirilməsində, həm də istifadəsində asanlıq və sadəlik.
Yaxşı konvertasiya dərəcələri. Adaptiv dizaynda nümayiş üçün daha çox imkan olduğundan, çevrilmənin özü artır.
İqtisadiyyat. Bu, ayrıca mobil versiya yaratmaq və tanıtmaqdan nisbətən daha ucuzdur.
Mobil versiyanın müsbət və mənfi cəhətləri
Cavablı mobil dizayn yaratmaq çox yönlülük və ardıcıllıq tələb edir. Əvvəla, texniki tapşırığı ətraflı yazmaq tövsiyə olunur, bu, əlbəttə ki, lazımsız işlərdən qaçmağa və vaxta qənaət etməyə kömək edəcək, həmçinin saytın yerləşəcəyi serverin xüsusiyyətlərini nəzərə alacaqdır..
Mobil cavab verən dizaynın müəyyən üstünlükləri və mənfi cəhətləri var.
Tərəfləri:
- Hazır saytınız varsa, sıfırdan mobil versiya üçün dizayn hazırlamağa ehtiyac yoxdur. Bu tərtibatı tələb olunmayan funksionallıqdan azad etməklə yalnız bir neçə dəyişiklik edilə bilər.
- Bütün növ sadələşdirmələrə görə mobil versiya endirərkən daha sürətli hesab olunur.
- İstifadəçi bütün məzmunda ən vacib məlumatı görür.
- Sürətli icra. Teqləri və kodları bilmirsinizsə belə, mobil uyğunlaşmanı həyata keçirə biləcəyiniz plaginlər var.
- Axtarış mühərriki seçimləri adaptiv versiyalara üstünlük verir, çünki onların təhlili daha az vaxt aparır.
Mənfi cəhətləri:
- Bütün mobil versiyalar mobil cihazın təsvirlərinə uyğun olmaya bilər. Sayt, əlbəttə ki, açılacaq, lakin ekranın həlli həmişə tərtibata uyğun gəlmir. Bəzən yaxşı dizayn edilmiş smartfon dizaynı planşet kimi açıldıqda fərqli görünə bilər.
- Mobil versiyalar ayrıca ödənişli domenlər tələb edir.
- Məzmun yerləşdirməklə bağlı bəzi kiçik problemlər var. Eyni anda bir neçə versiya varsa, məzmun eyni anda bütün formatlar üçün tənzimlənməlidir. Əsas saytda yeni material təqdim etmək və onu mobil versiyaya köçürmək oğurluq sayıla bilər. Bu problemdən qaçmaq üçün resursların əlaqəsini sübut etməli ola bilərsiniz.
Tətbiq üsulları
Əsas icra üsulları:
- Layout və layout dizaynını yaratdıqdan sonra, istifadə edərək tələb olunan ölçülərə yüklənir.operator saytı və əsas kodu. Bu, orta və kiçik versiyaların (planşetlər, smartfonlar və s.) yaradılması zamanı istifadə edilən klassik üsuldur.
- BootStrap sadə və aydın uyğunlaşma alətləri dəstidir. Açılış səhifəsi və digər çox mürəkkəb olmayan veb layihələr üçün versiyalar yaratmaq üçün uyğundur. O, interfeys funksiyalarında çoxlu müxtəlif üslubları tətbiq etmək üçün yaxşı imkan verir.
- Responsive Grid System çox yönlü alətlər toplusudur. Tətbiq etmək asandır və dərin bilik tələb etmir. Geniş çeşiddə infoqrafika daxildir.
- GUMBY - Çevik cavab vermə qabiliyyəti və əla alətlərlə öyünən CSS çərçivəsi.
- Kukilər - cavab verən şəkilləri həyata keçirməyə imkan verir. Brauzer tərəfindən tələb olunan faylları avtomatik müşayiət edir.
- ExpressionEngine cavab verən şəkillər yaratmağın başqa bir yoludur. Cihazın mobil olub-olmadığını, şəkilləri tələb olunan rezolyusiyaya dəyişdirə bilən olduğunu müəyyən edir.
- ProtoFluid - Sürətli prototipləşdirməni təmin edir. Bütün növ cihazlar üçün uyğundur.
