Responsive dizayn nədir?

Təsəvvür edin ki, sevdiyiniz oyunu kompüterdə böyük ekranda oynayırsınız. Hər şey mükəmməl görünür. Sonra telefonu əlinizə alıb eyni oyunu açırsınız — amma hər şey kiçik, qarışıq və oxumaq çətin olur. Əsəbləşdirici, elə deyilmi?

Veb saytlar da eynidir! Yaxşı saytlar istənilən cihazda — böyük kompüter monitorunda, planşetdə və ya kiçik telefonda — gözəl və rahat görünməlidir. Buna Responsive Design deyilir. Bu gün sizə bu sehrli texnikanı sadə dillə izah edəcəyik!

Responsive Dizayn nədir?

Responsive Dizayn veb-saytın avtomatik olaraq istifadəçinin ekran ölçüsünə uyğunlaşması deməkdir. Bir dəfə kod yazırsan, sayt həm böyük, həm də kiçik ekranlarda gözəl görünür:

2010-cu illərdən əvvəl saytlar yalnız kompüter üçün hazırlanırdı. Telefon üçün ayrı versiya yaratmaq lazım idi.
Bu gün isə bir dizayn kifayətdir.

Niyə Responsive Dizayn Vacibdir?

Azərbaycanda və dünyada insanların 70%-dən çoxu internetə telefondan daxil olur.
Google axtarış nəticələrində mobil uyğun olmayan saytlar aşağı düşür.
İstifadəçi saytın yavaş və ya qarışıq olduğunu görsə, dərhal çıxır.

Yaxşı responsive sayt = daha çox ziyarətçi + daha xoşbəxt istifadəçilər!

Əsas Texnikalar

1. Media Queries (Ekran Ölçüsünə Görə Qayda): CSS-də xüsusi qaydalar yazırıq ki, "əgər ekran 600 pikseldən kiçikdirsə, belə görün".

2. Flexbox və Grid — Müasir Düzülüş Alətləri: Bu alətlər elementləri avtomatik səliqəyə salır və ekran dəyişəndə yerləşməni dəyişir.

3. Şəkillər və Mətnlərin Uyğunlaşması:

max-width: 100%; ilə şəkillər avtomatik kiçilir.
rem və em vahidləri ilə mətnlər də uyğunlaşır.

4. Viewport Meta Tagı (Çox Vacib!) : HTML-in <head> hissəsinə bunu əlavə etməsəniz, sayt mobil cihazlarda düzgün işləmir:

Praktiki Nümunə: Sadə Responsive Kart

Aşağıdakı kod 3 kartı böyük ekranda yan-yana, telefonda isə alt-alta göstərəcək:

HTML-də

CSS-də

Responsive Design öyrənmək yalnız texniki bacarıq deyil, həm də istifadəçiləri düşünmək bacarığıdır. Yaxşı frontend developer həmişə "Bu sayt mənim telefonumda necə görünəcək?" sualını verir.

Siz də cəhd edin!

Responsive dizayn öyrənmək üçün ən yaxşı yol dərhal praktika etməkdir. Sadə bir layihə seçin — məsələn, öz sevimli oyunlarınız haqqında kiçik bir veb-sayt. Əvvəlcə kompüterdə gözəl görünməsini təmin edin, sonra isə CSS Media Queries əlavə edərək telefonu da yoxlayın.

Hər dəfə ekran ölçüsünü dəyişib nəticəyə baxanda yeni bir şey öyrənəcəksiniz. Bu, əsl frontend inkişafının ən əyləncəli tərəfidir!

Bu gündən başlaya bilərsiniz — lazım olan yalnız bir kompüter, brauzer və bir az maraqdır.

İstəyirsiniz ki, bu biliyi praktikaya keçirib real nəticələr əldə edəsiniz? IT və Kompüter Mühəndisliyi kursumuzla addım-addım öyrənməyə başlayın. Ətraflı məlumat üçün linkə keçid edin: IT və Kompüter Mühəndisliyi kursu

Teqlər:

veb proqramlaşdırma frontend responsive dizayn HTML CSS