Responsiv veb dizayn yoxlama siyahısı, rəqəmsal varlığınızın bütün ekran ölçülərində və cihaz növlərində düzgün işləməsini təmin etmək üçün lazım olan çərçivəni təmin edir. Google, istifadəçinin cihazından asılı olmayaraq eyni URL-də eyni HTML kodundan istifadə etdiyi üçün responsiv veb dizaynı tövsiyə edir ki, bu da texniki xidməti və indeksləşdirməni sadələşdirir. Strukturlaşdırılmış yanaşmanı izləməklə, ziyarətçinin masaüstü monitor, planşet və ya mobil telefondan istifadə etməsindən asılı olmayaraq məzmunun əlçatan qalmasını təmin edir və bununla da müasir veb naviqasiya üçün əsas istifadəçi gözləntilərinə cavab verirsiniz.
Niyə çevik şəbəkə sistemi dizaynınızın təməlidir?
Çevik şəbəkə sistemi, kiçik ekranlarda tərtibatın pozulmasının ümumi səbəbi olan sabit piksel enlərindən uzaqlaşır. Konteynerləri 960px kimi təyin etmək əvəzinə, faizlər və ya viewport vahidləri kimi nisbi vahidlərdən istifadə etməlisiniz. Məsələn, konteyner enini 90% təyin etmək, brauzer pəncərəsi dəyişdikcə məzmunun mütənasib şəkildə kiçilməsinə və genişlənməsinə imkan verir. Bu yanaşma, mətn sütunlarınızın, şəkil qalereyalarınızın və yan panel vidjetlərinizin hazırda bazarda olan hər mümkün ekran icazəsi üçün xüsusi kəsilmə nöqtələri tələb etmədən ölçülərini avtomatik tənzimləməsini təmin edir.
Tərtibatçılar bir tərtibat qurduqda, çox vaxt əsas məzmunu saxlayan ilkin konteynerdən başlayırlar. Maksimum en xüsusiyyətini tətbiq etməklə, tərtibatın böyük masaüstü monitorlarda çox genişlənməsinin qarşısını alırsınız, bu da mətn sətirlərini oxumağı çətinləşdirə bilər. Tipik bir hesab konfiqurasiyası, böyük ekranlar üçün 1200px maksimum en təyin edə bilər, eyni zamanda konteynerin kiçik cihazlarda ekranın 95%-ni tutmasına imkan verir. Bu balans üfüqi sürüşmənin qarşısını alır və müxtəlif aparat spesifikasiyaları arasında təmiz bir görünüş saxlayır.
Şəkil optimallaşdırılması üçün vacib addımlar hansılardır?
Şəkillər səhifənin ümumi çəkisinin əhəmiyyətli bir hissəsini təşkil edir və düzgün ölçülməmiş şəkillər mobil şəbəkələrdə yavaş yüklənmə vaxtlarının əsas səbəbidir. Brauzeri böyük yüksək keyfiyyətli faylı yenidən ölçməyə məcbur etmək əvəzinə, həmişə ekran konteyneri üçün düzgün ölçülmüş şəkilləri təqdim etməlisiniz. Müasir veb standartları, brauzerə cihazın ekran sıxlığına və viewport eninə əsasən ən səmərəli faylı seçməyə imkan verən, şəklin çoxsaylı versiyalarını təyin etmək üçün srcset atributundan istifadə etməyə imkan verir.
Sıxılma, responsiv yoxlama siyahınızdakı digər kritik bir tapşırıqdır. TinyPNG kimi alətlər və ya WordPress kimi məzmun idarəetmə sistemlərindəki daxili şəkil prosessorları, görünən keyfiyyəti itirmədən fayl ölçülərini əhəmiyyətli dərəcədə azalda bilər. Yerli elektron ticarət mağazası üçün tipik bir hesabda, məhsul şəkillərini ekran ölçülərinə uyğunlaşdırmaq ümumi səhifə çəkisini 50%-dən çox azalda bilər. Bu, bant genişliyinin məhdud ola biləcəyi və ya baxış sessiyası zamanı qeyri-ardıcıl ola biləcəyi 4G və ya 5G bağlantılarındakı istifadəçilər üçün daha sürətli bir təcrübə yaradır.
Media performansı üçün yoxlama siyahısı
- Müxtəlif ekran ölçüləri üçün çoxsaylı şəkil icazələri təmin etmək üçün srcset atributundan istifadə edin.
- JPEG və ya PNG-dən daha yaxşı sıxılma nisbətlərinə nail olmaq üçün WebP kimi müasir fayl formatlarını tətbiq edin.
- Əsas məzmunu prioritetləşdirmək üçün ekranın aşağısında görünən şəkillərdə tənbəl yükləmə atributlarını təyin edin.
- Səhifə yüklənərkən tərtibat dəyişikliklərinin qarşısını almaq üçün CSS-də şəkillər üçün sabit ölçülər təyin edin.
- Kiçik konteynerlər tərəfindən kəsildikdə fokus nöqtələrini itirmədiklərindən əmin olmaq üçün fon şəkillərini yoxlayın.
Mobil cihazlar üçün naviqasiya menyularını necə idarə edirsiniz?
Masaüstü naviqasiya panelləri çox vaxt standart smartfon ekranına üfüqi şəkildə nadir hallarda sığan beş-yeddi keçid ehtiva edir. Ümumi bir nümunə, üfüqi menyunu klikləndikdə şaquli bir siyahını göstərən hamburger ikonuna çevirməkdir. Bu nümunə şaquli boşluğu qoruyur və əsas məzmunu əlçatan saxlayır. Bu gizli menyudakı toxunma hədəflərinin barmaqlar üçün kifayət qədər böyük olduğundan əmin olmalısınız, təsadüfi kliklərin qarşısını almaq üçün hər keçid üçün ümumiyyətlə minimum 44 piksel hündürlük tövsiyə olunur.
Bu keçidi dizayn edərkən, istifadəçinin planşetdə menyu ilə mobil telefona nisbətən necə qarşılıqlı əlaqədə olduğunu nəzərə alın. Planşetlərdə naviqasiyanın sadələşdirilmiş versiyasını göstərmək üçün kifayət qədər eniniz ola bilər, telefonlar isə tam çəkmə menyusunu tələb edir. Aydın bir bağlama düyməsini təmin etmək istifadə rahatlığı üçün vacibdir, çünki istifadəçilər səhvən açdıqları təqdirdə menyudan asanlıqla çıxmaq üçün bir yola ehtiyac duyurlar. Keçid animasiyalarının titrəməyə və ya məzmunun atlamasına səbəb olmadığından əmin olmaq üçün menyu dizaynınızı müxtəlif brauzerlərdə yoxlayın.
Kəsilmə nöqtələri arasında tipoqrafiya və oxunaqlılıq
Tipoqrafiya cihazdan asılı olmayaraq oxunaqlı qalmalıdır, bu da şrift ölçülərinin və sətir hündürlüklərinin diqqətli planlaşdırılmasını tələb edir. Şrift ölçüləri üçün rem və ya em kimi nisbi vahidlərdən istifadə etmək, istifadəçilərə tərtibatınızı pozmadan brauzerlərinin standart mətn ölçüsünü tənzimləməyə imkan verir. Məsələn, baza mətnini 1rem (adətən 16px) təyin etmək, məzmununuzun yüksək keyfiyyətli masaüstü ekranlarda müvafiq şəkildə miqyaslanarkən mobil cihazlarda oxunaqlı qalmasını təmin edir. Bədən mətni üçün sabit piksel ölçülərindən istifadə etməyin, çünki bu, mobil istifadəçiləri əl ilə böyütməyə məcbur edə bilər.
Sətir hündürlüyü oxunaqlılıq üçün eyni dərəcədə vacibdir. 1.5 sətir hündürlüyü standartdır, lakin şrift ailəsindən və konteynerin enindən asılı olaraq bunu tənzimləməli ola bilərsiniz. Dar ekranlarda, daha qısa bir sətir hündürlüyü bəzən daha yaxşı hiss edilə bilər, daha geniş masaüstü tərtibatlar isə gözü istiqamətləndirmək üçün sətirlər arasında daha çox boşluqdan faydalanır. Başlıqlarınızın necə miqyaslandığını da yoxlayın; böyük başlıqlar masaüstündə yaxşı görünsə də, mobil cihazlarda qəribə şəkildə bükülməsinin və ya bütün ekranı tutmasının qarşısını almaq üçün ölçülərinin azaldılması lazım ola bilər.
Toxunma qarşılıqlı əlaqələrini və giriş cihazlarını idarə etmək
Responsiv dizayn yalnız ekran ölçüsü ilə bağlı deyil; bu, həm də istifadəçilərin məzmununuzla necə qarşılıqlı əlaqədə olması ilə bağlıdır. Masaüstü istifadəçiləri, hover vəziyyətlərinə və dəqiq klikləməyə imkan verən siçan kursorlarına güvənirlər. Mobil istifadəçilər, hover vəziyyəti olmayan və daha böyük, daha bağışlayan hədəf sahələri tələb edən toxunmaya güvənirlər. Yalnız siçanla işləyən hover menyularına və ya düymələrinə güvənməkdən çəkinməlisiniz, çünki bunlar hərəkəti tetikləmək üçün ikinci dərəcəli bir yolları olmadıqca smartfon istifadəçiləri üçün əlçatmaz olacaqdır.
Formalar üçün girişlərin mobil klaviaturalar üçün optimallaşdırıldığından əmin olun. ’email’ və ya ‘tel’ kimi düzgün HTML giriş növlərindən istifadə etmək, məlumat daxil etməyi daha sürətli edən müvafiq mobil klaviaturanı avtomatik olaraq tetikləyir. Tipik bir hesabda, sahələr şaquli olaraq yığıldıqda və etiketlər giriş qutusunun üstündə yerləşdirildikdə forma tərk etmə nisbətləri azalır. Bu tərtibat, istifadəçinin yazarkən etiketi görə bilməsini təmin edir, xüsusən kiçik ekranlarda göndərmə prosesi zamanı qarışıqlığın və səhvlərin qarşısını alır.
Qarşılıqlı əlaqə dizaynı yoxlama siyahısı
- Toxunma ekranlarında işləməyən hover-ə əsaslanan naviqasiya menyularından çəkinin.
- Bütün interaktiv düymələrin ölçüsünü ən azı 44×44 pikselə qədər artırın.
- Təsadüfi toxunma səhvlərinin qarşısını almaq üçün bütün forma sahələrinin kifayət qədər boşluğa malik olduğundan əmin olun.
- Düzgün virtual klaviatura tərtibatını tetikləmək üçün müvafiq giriş növlərindən istifadə edin.
- Sabit başlıqların çoxlu məzmunu örtmədiyindən əmin olmaq üçün sürüşmə davranışını yoxlayın.
Cross-device uğuru üçün sınaq və doğrulama
Saytınızı faktiki cihazlarda sınaqdan keçirmək, dizaynınızın real dünya şəraitində dayandığını yoxlamağın yeganə yoludur. Brauzer tərtibatçı alətləri sürətli yoxlamalar üçün faydalı olsa da, müxtəlif əməliyyat sistemlərinin və ya toxunma həssaslığının nüanslarını təkrarlaya bilməzlər. Brauzer göstərmə mühərriklərinin CSS-inizi necə idarə etdiyini müşahidə etmək üçün saytınızı ən azı bir Android cihazında və bir iOS cihazında sınaqdan keçirməlisiniz. Onlarla cihaza girişiniz yoxdursa, müxtəlif aparat konfiqurasiyalarına uzaqdan giriş təmin edən bulud əsaslı sınaq xidmətlərindən istifadə edin.
Sınaqlarınızı Core Web Vitals-a, xüsusən də yaxşı istifadəçi təcrübəsi üçün ideal olaraq 2.5 saniyə və ya daha az olması lazım olan Ən Böyük Məzmunlu Boya (LCP) üzərində cəmləyin. Şəkillər və ya reklamlar ayrılmış boşluğa malik olmadıqda, responsiv saytlar yüklənmə prosesi zamanı bəzən tərtibat dəyişikliklərindən əziyyət çəkə bilər. HTML-də hündürlük və en atributlarını təyin etməklə, elementlər yükləndikcə səhifənin sabit qalmasını təmin edərək bu dəyişikliklərin qarşısını ala bilərsiniz. Bu ardıcıllıq peşəkar bir görünüş saxlamaq və texniki performans meyarlarına cavab vermək üçün çox vacibdir.
Bu həftə haradan başlamaq lazımdır
Brauzerinizdə mobil simulatordan istifadə edərək ən vacib açılış səhifənizi yoxlamaqla başlayın. Ekrandan daşan və ya üfüqi sürüşmə tələb edən hər hansı bir elementi müəyyən edin, çünki bunlar düzəliş üçün ən yüksək prioritetdir. Çevik vahidləri tətbiq edərək bu konteyner problemlərini həll edin, sonra şəkillərinizi mobil sürət üçün optimallaşdırmağa keçin. Alien Road, bütün saytınızı bir gecədə yenidən dizayn etməyə çalışmaq əvəzinə, hər dəfə bir səhifə ilə məşğul olmağı təklif edir, çünki bu, istifadəçi cəlb edilməsində və sıçrayış nisbətlərindəki yaxşılaşmaları sistemli şəkildə ölçməyə imkan verir.
Tərtibat çevik olduqdan sonra, naviqasiyanızı və toxunma hədəflərinizi əlçatan olduqlarından əmin olmaq üçün nəzərdən keçirin. Analitika platformanızda mobil cihazlarda yüksək sıçrayış nisbətləri görürsünüzsə, şrift ölçülərinizə və forma sahələrinizə diqqətlə baxın. Bu kiçik, artan dəyişiklikləri etmək, ziyarətçiləriniz üçün, məzmununuza daxil olmaq üçün istifadə etdikləri cihazdan asılı olmayaraq daha yaxşı bir təcrübəyə səbəb olacaqdır. Bu əsas prinsiplərə diqqət yetirərək, istifadəçilərinizə illərlə effektiv şəkildə xidmət edəcək davamlı bir təməl qurursunuz.
Oxumağa davam edin: Veb Dizayn və İnkişaf · Veb Dizayn