Saytın ilk ekranında gözəl şəkil var, amma telefonda açılarkən əvvəl boş sahə görünür. Sonra mətn yerini dəyişir, düymə aşağı sürüşür. Belə vəziyyətdə yalnız interneti günahlandırmaq düzgün diaqnoz deyil. Şəklin fayl ölçüsünü, ekrandakı yerini və brauzerə necə təqdim olunduğunu birlikdə yoxlamaq lazımdır. Məqsəd şəkilləri yox etmək deyil, hər ekrana uyğun faylı çatdırmaqdır.
Əvvəl əsas şəkli tapın
Ana səhifəni telefonla açın və ilk görünən böyük görüntünü müəyyən edin. Karusel varsa, bütün slaydların dərhal yüklənib-yüklənmədiyini yoxlayın. Kiçik kart üçün bir neçə min piksel enində fayl göndərmək lazımsız yük yarada bilər. Faylın diskdəki ölçüsü ilə səhifədə görünən ölçünü ayrı qeyd edin.
Telefon üçün uyğun variant hazırlayın
Eyni şəklin kiçik və böyük ölçüləri müxtəlif ekranlara xidmət edə bilər. Brauzerin uyğun faylı seçməsi üçün responsive şəkil qaydaları düzgün qurulmalıdır. Sadəcə CSS ilə böyük görüntünü kiçiltmək onun yükləmə həcmini azaltmır. Hazırlanmış variantları real telefon ekranında müqayisə edin və məhsulun vacib hissəsinin itmədiyinə baxın.
Kəsimi məzmunla birlikdə yoxlayın
Masaüstündə yaxşı görünən geniş foto telefonda əsas obyekti kənarda qoya bilər. Məhsul, insanın üzü və ya sifariş düyməsi görüntünün üzərindədirsə, fərqli enlərdə ayrıca baxın. Şəklin içinə uzun reklam mətni yerləşdirmək əvəzinə, oxunan başlığı səhifənin mətn hissəsində saxlamaq daha idarəolunan yanaşmadır.
Şəkil üçün əvvəlcədən yer ayırın
En və hündürlük nisbəti brauzerə məlum olanda görüntü açılana qədər onun yeri ayrıla bilir. Bu, səhifədəki elementlərin sonradan sıçramasını azaltmağa kömək edir. Forma və əlaqə düyməsi yaxınlığında belə hərəkət xüsusilə narahatdır. Təkcə şəkli deyil, onun yerləşdiyi blokun ölçülərini də yoxlayın.
Gec yükləməni hər yerə tətbiq etməyin
Aşağıdakı qalereya şəkillərinin lazım olduqda yüklənməsi faydalı ola bilər. İlk ekrandakı əsas şəkli də avtomatik gecikdirmək isə gözlənilən nəticəni verməyə bilər. web.dev responsive şəkillər bələdçisi bu fərqi izah edir. Dəyişiklikdən əvvəl və sonra eyni səhifəni, cihazı və şəraiti müqayisə edin.
Nəticəni biznes səhifəsində yoxlayın
Şəkil sıxıldıqdan sonra rənglərə, məhsul detalına və mobil oxunaqlığa baxın. Əlaqə forması və WhatsApp düyməsi işləməlidir. StarWeb Solutions ilə texniki işi planlaşdırarkən yoxlanacaq səhifələri əvvəlcədən siyahıya alın; tək bir sürət balını bütün saytın keyfiyyəti kimi qəbul etməyin.
Üz qabığı süni intellektlə hazırlanmış illüstrativ görüntüdür.