Həssas test dizaynı üçün javascript-dən istifadə. Cavab verən veb dizaynı necə sınamaq olar? Mobil ekranlar üçün kiçik elementlər

Onlayn mağaza mobil cihazlar üçün optimallaşdırılmalıdır. Bu vəzifə saytı istənilən platformada düzgün göstərməyə imkan verən adaptiv dizaynın köməyi ilə həll edilir. Bununla belə, həssas dizaynı qəbul etmək standart tələlərlə üzləşir. Onlayn alış-veriş saytları üçün xarakterik olan ən çox rast gəlinən 8 problemi təqdim edirik.

Mobil seqmentə daxil olmaq üçün tələsik pərakəndə satıcıları ziyarətçi davranışının ciddi analitikasını aparmadan sayt dizayn etməyə məcbur edir. Ziyarətçi davranışının təhlili hazırlığın ən vacib mərhələsidir ki, bu da ən populyar mobil cihazları müəyyən etməyə və ilk növbədə onlar üçün saytı optimallaşdırmağa imkan verir. Analitika ən "məşhur" istifadəçi hərəkətini müəyyən etməyə kömək edir, məsələn, məhsul şəklini böyütmək; mobil ziyarətçilərin dönüşüm nisbətini və s. göstərir. Bu məlumatlar istifadəçi davranışındakı üstünlüklər haqqında fikir verəcək və mobil auditoriyanın gözləntilərini qarşılamağa kömək edəcək. Təhlil mobil trafik nəticələri sistematik və ardıcıl şəkildə həyata keçirmək, saytı alıcıların ehtiyacları üçün yekunlaşdırmaq və optimallaşdırmaq lazımdır.

Bir qayda olaraq, onlayn mağazanın masaüstü versiyası mobil ekranlar üçün yenidən işlənir, baxmayaraq ki, mobil cihazın kiçik ekranını götürmək və sonra masaüstünü genişləndirmək daha məntiqlidir. Pərakəndə satıcılar çox vaxt xəbərsiz olurlar texniki problemlər masa üstü üçün nəzərdə tutulmuş veb-saytın smartfon ölçüsünə gətirilməsi.
üçün dizayn başlayır mobil ekranlar, siz mobil istifadəçilərin istehlakçı təcrübəsinə diqqət yetirirsiniz. Nəticədə, hər iki kanal üçün dizayn etmək daha asan olacaq: masaüstü və mobil.

Onlayn mağazanın mobil dizaynını sınaqdan keçirmək məcburi bir başlanğıc addımıdır, lakin bir çox sahiblər tez-tez buna məhəl qoymur və sınaqdan keçirmədən işə salırlar. Nəticədə, saytın mobil qurğular üçün canlı versiyasında hətta alış-veriş etmək və sifariş vermək prosesində belə səhvlər yarana bilər.

Cavab verən dizayn qüsurları onlayn mağazanın əvvəlcədən sınaqdan keçirilməsi ilə asanlıqla müəyyən edilir, lakin bir çox satıcının bunu etmək üçün resursları yoxdur. Pul itirmək riskini azaltmaq üçün əsas brauzerlərdə - Chrome, IE, Firefox, Safari və sayt vasitəsilə əsas istifadəçi marşrutlarını sınayın. əməliyyat sistemləri– Populyar mobil cihazlarda Windows, Mac OS, Android, IOS. Hər dəfə dəyişiklik etdiyiniz zaman sınaqdan keçirin, BrowserStack və ya Viewport Resizer kimi xidmətlər sınaq müddətini bir neçə saata qədər azaltmağa kömək edəcək.

Smartfon ekranında daha çox yer tutmaq üçün onlayn mağaza sahibləri fəaliyyətə çağırış düymələrinin ölçüsünə qənaət edirlər. İstifadəçiləri "Al" düyməsini böyütməyə məcbur etməyin və kiçik əşyaları bir-birinə çox yaxın qoymayın, əks halda istifadəçiləriniz daha yaxşı sayta getməyə üstünlük verəcəklər. Böyük naviqasiya elementləri və hərəkətə çağırış düymələrinin ölçüləri ilə dizayn interfeysləri.

Mobil auditoriya sürətli veb saytları və minimum yükləmə müddətlərini sevir. Komponentlərinizi qiymətləndirin mobil səhifələr- şəkillər, düymələr, mətn, skriptlər - onlar mobil cihazlar üçün optimallaşdırılmalıdır. Google SERP-lərində və teqlərində səhifənin yüklənmə vaxtını nəzərə alır və mobil saytları yuxarı sıralarda yerləşdirir ki, "yüngül" saytlar əlavə böyük üstünlük əldə etsin.

Məzmunu müxtəlif tablara ayırın, məsələn, məhsul səhifəsində yalnız əsas şəkil, təsvir, qiymət və “İndi al” düyməsi ola bilər. Müştəri rəyləri və videoları ayrı bir sekmədə yerləşdirilə və səhifənin əsas hissəsinin "çəkisini" azalda bilər. Məzmuna əlavə olaraq, yükləmə sürətinə təsir edən digər elementləri optimallaşdırın - CSS faylları, şəkillər və skriptlər, yalnız lazımi məlumatları göndərin. Resurs fayllarının ölçüsünü və onların yükləmə vaxtını azaldan alətlər bu işdə sizə kömək edəcək: Uglify və ya JSCompress.

Tez-tez zaman, tərtibatçılar məzmunun bir hissəsini gizlədirlər ki, mobil cihazlarda yükləmə daha sürətli olsun. Bununla belə, çox vaxt səhifənin ölçüsü əslində kiçilmir və məzmun istifadəçiyə sadəcə göstərilmir. Mağazanız dinamik olaraq səhifə yarada, səhifənin çəkisini azalda və mobil ziyarətçilər üçün yükləmə vaxtlarını sürətləndirə bilməlidir. Bundan əlavə, mobil istifadəçilərə daha az məzmun vermək pisdir, istehlakçı təcrübəsinə mənfi təsir göstərir. Bir qayda olaraq, onlayn alış-veriş edənlərin təxminən 90%-i kimi, onlar alış prosesində müxtəlif cihazlardan istifadə edirlər. Onları həssas dizayn üsulları ilə məhdudlaşdırmaq böyük səhvdir.

Yaxşı cavab verən veb-sayt, cihazın növündən asılı olaraq şəkillərin həllini avtomatik olaraq dəyişdirəcək, ağır şəkillər yükləmə müddətini artırır. Şəklin ölçüsünü avtomatik dəyişməyin bir neçə yolu var. xüsusi cihaz. "Çevik" şəkillər (maye şəkillər) - ehtiva edən elementin genişliyindən asılı olaraq təsviri sıxmağa və uzatmağa imkan verən CSS-əsaslı üsul və ya hər növ üçün istədiyiniz ölçülü şəkil yükləməyə imkan verən HTML5 elementi cihazın.

Elə olur ki, saytın özü ilə hər şey qaydasındadır, adaptiv dizayn masaüstü kompüterlərdə və mobil cihazlarda yaxşı işləyir. Lakin e-poçtlar cavab vermir və mobil istifadəçilər sifariş təfərrüatlarını yoxlamaq üçün mübarizə aparmalı və ya tamamlanmış satınalmaların siyahısına daxil olmaq üçün tövsiyə olunan əşyaların sonsuz siyahısına keçməlidirlər. E-poçtlar bu müştəri ilə əsas əlaqə nöqtəsidir, mobil strategiyanıza cavab verən e-poçt dizaynı yaradın. E-poçt və bülletenlərinizi dizayn edin və sınaqdan keçirin, e-poçt şablonları "yüngül" olmalı və yalnız vacib məlumatları ehtiva etməlidir.

Müəllifin qeydi: "Bu brauzerin ölçüsünü dəyişməyi dayandırın, o, silinmək üzrədir!" Necə tez-tez eşidirsən? Yaxşı, ola bilsin ki, tez-tez deyil, amma cavab verən veb-saytlar hazırlayırsansa, nədən danışdığımı bilirsən: hər dəfə DOM və ya CSS-ni redaktə edəndə brauzerin kənarını irəli-geri sürükləyirsən, dəyişiklikləri sınayır və qeyri-dəqiqlik axtarırsan.

Ümumiyyətlə, əksər hallarda bu cür səylər müxtəlif cihazların ekran ölçülərini təqlid etmək cəhdidir.

Müəssisə inkişafı ilə məşğul olursunuzsa, yəqin ki, sınaqdan keçirmək üçün şirkət tərəfindən təmin edilmiş bir çox cihazınız var. İşlədiyim yerdə iPad, iPhone, bir və ya iki başqa planşet, noutbuk və masaüstü kompüterimiz var. Əgər belə bir lüksünüz yoxdursa, əlinizdə olandan istifadə etməlisiniz.

Evdə iki fərqli noutbukum var, ikisi fərqli android cihazları: Kindle və Nexus 7. Mən bu cihazlardan müstəqil inkişaflarımı sınamaq üçün istifadə edirəm, lakin aydındır ki, bu, tam seçim deyil. İOS cihazları ümumiyyətlə yoxdur və mən erkən tətbiq edən hesab etsəm də, hər yeni telefon/planşet/planşet satışa çıxan kimi almağı planlaşdırmıram.

Beləliklə, bir tərtibatçı nə etməlidir? Xoşbəxtlikdən, birdən çox cihazın ekran ölçülərini təqlid edən brauzer əsaslı alətlərin sayı getdikcə artır. Fərqli alətlər, əlbəttə ki, müxtəlif xüsusiyyətlər dəstləri və müxtəlif səmərəlilik səviyyələri ilə gəlir. Onların bəzilərini burada nəzərdən keçirəcəyik.

Sınaq məqsədləri üçün yaratdığım ilk həqiqətən həssas saytı, PajamasOnYourFeet.com-u götürdüm. O, EGrappler-də tərtibatçılar cəmiyyətinə çox nəzakətlə pulsuz təqdim edilən Brownie HTML5 şablonuna əsaslanır.

Mən cavabdehəm? - dörddə necə göstəriləcəyi baxımından saytınızın tamamilə asan, ani görünüşü müxtəlif cihazlar. Dördü də iOS-dandır və saytdakı tərtibatçı öz seçimini izah edir. O, heç bir nəzarət və ya seçim təklif etmir, sadəcə çox sadə və zərif ekrandır. Görünüş sahəsinin ölçüləri:

İş masası - 1600 x 992px kiçildilmiş (0.3181)

Noutbuk - 1280 x 802px kiçildilmiş (0,277)

Planşet - 768 x 1024 piksel kiçildilmiş (0,219)

Mobil - 320 x 480px kiçildildi (0.219)

Tərtibatçıdan sitat gətirmək üçün: “Bu sınaq vasitəsi deyil, bunu real cihazlarda etmək çox vacibdir. Lakin bu, sürətli skrinşotlar çəkmək üçün bir vasitədir (mənim üçün) və müştəri görüşlərində ağlınızda olanları "danışmaq" üçün vizual imkan təmin edir."

deviceponsive sayta bənzəyir Mən cavab verirəmmi? saytınızı sadə və səliqəli şəkildə göstərən, cihazlara gəldikdə heç bir nəzarəti və ya mövcud seçimləri olmayan biri. Hamısı eyni vaxtda bir uzun səhifədə göstərilir. Onun maraqlı xüsusiyyəti var - siz onun fon rəngini redaktə edərək və öz loqotipinizi, sonra isə "prinscreen"i daxil etməklə başlığı dəyişdirə bilərsiniz. Bu yolla siz müştəriyə ekran görüntülərini göstərərkən müəyyən mənada saytınızı brendləşdirə bilərsiniz. Bu saytda simulyasiya edilmiş cihazlar və ekran ölçüləri:

Macbook - 1280x800

iPad (portret) - 768 x 1024

iPad (landşaft) - 1024 x 768

Kindle (portret) - 600 x 1024

Kindle (landşaft) - 1024 x 600

iPhone (portret) - 320 x 480

iPhone (landşaft) - 480 x 320

Qalaktika (portret) - 240 x 320

Qalaktika(landşaft) - 320 x 240

Əksər oxşar alətlərdə olduğu kimi, sürüşdürmə çubuqları kiçik cihazlarda görünür. Onlar real cihazda görünməyəcək, lakin qeyri-toxunul cihazda test görünüşünü sürüşdürə bilmək üçün bəzi güzəştlər edilməlidir.

Cihaza cavab verən kimi, cavab verən test saytınızı bir çox cihazda göstərir, lakin onların hamısını bir səhifədə göstərmək əvəzinə, siz səhifənin yuxarısındakı sadə menyudan hansı cihazı izləyəcəyinizi seçirsiniz. Bu saytı orta ölçülü noutbukda nəzərdən keçirərkən gördüm ki, səhifənin böyüdülməsi əla işləyir və test edilən cihazın pəncərəsində bütün saytı görməyə imkan verir.

Burada böyük monitordan on üç müxtəlif baxış pəncərəsi təklif olunur masa üstü kompüter qondarma "crapy Android" (Crappy Android) üçün (düzünü desəm, onların "adlı bir seçimi də var. daha yaxşı android» (Gözəl Android).

Bir daha, Firefox bu saytda bir az büdrədi. Ekran görüntüsündə diqqət yetirin - yaşıl başlıq və ağ fonlu məzmun sahəsi arasında - şəkil kaydırıcısının göstərilməli olduğu yalnız mavi çubuq var.

O, əvvəlki ikisinə çox bənzəyir və responsive.is-i onlardan fərqləndirən yeganə şey, bir cihazın digərinə göstərilməsinin hamar animasiyası, eləcə də saytın “daşınmaz əmlakını” göstərən şəffaf örtükdür. , baxış pəncərəsindən çıxmaq.

Yalnız mövcud variantlar buradakı cihazlar brauzerinizin pəncərəsini dolduran və sayta keçdiyiniz zaman onu görəcəyiniz kimi göstərən avtomatik cihazlardır: İş masası; Planşet (landşaft); Planşet (portret istiqaməti); Smartfon (landşaft) və Smartfon (portret), piksel ölçüləri verilmir.

Yenə bir neçə fərqli xüsusiyyət və seçim Screenqueries-i digər saytlardan fərqləndirir. Burada 14 telefon və 12 var planşet cihazları portret və arasında keçid üçün ayrıca element ilə landşaft oriyentasiyası. Onlar nömrələnmiş piksel şəbəkəsində göstərilir, ölçüləri test ekranının sağ alt hissəsində göstərilir. Displey kənarları sürüklənə bilər, belə ki, xüsusi ölçülər sınaqdan keçirilə bilər. Test sahəsinə sürüşdürün və ya klikləyin və fon daha az izdihamlı görünüşlə boz rəngə çevriləcək.

Bu saytın maraqlı xüsusiyyəti ondan ibarətdir ki, birdən çox cihaz üçün saytınızı həmin cihaz üçün nəzərdə tutulmuş yerə bükülmüş şəkildə göstərən “Əsl görünüş” seçimi var. chrome brauzeri. Təəssüf ki, və mən buna öyrəşmişəm, Firefox test saytının şəkil slayderini göstərə bilmir. Söyüşmə, mən həqiqətən Firefox-a brauzer kimi üstünlük verirəm, amma xoşbəxtlikdən seçimlərimiz var.

Screenfly, həqiqətən istifadəlik faktorunu artırır. O, 10 düymlük noutbukdan 24 düymlük masaüstü kompüterə, beş planşetə, doqquz smartfona, üç televizor ölçüsünə və xüsusi ekran ölçüsü seçiminə qədər planşetlərdən daha doqquz cihaz təklif edir. Seçdiyiniz hər hansı seçim istifadə edərək portret və ya landşaft oriyentasiyası ilə fırlana bilər fərdi element menyu nəzarəti. Siz sürüşdürməyə icazə verib-verməməyi seçə və bir düyməni basmaqla paylaşıla bilən link yarada bilərsiniz.

Sayt piksel ölçüsü məlumatlarını təqdim etməkdə fəal kömək edir. Menyudakı hər bir cihaz ad və piksel ölçüləri ilə göstərilir, öz brauzerinizin pəncərəsinin ölçüsü pəncərənin yuxarı sağ küncündə, seçilmiş seçimin ölçüləri isə ekranın altındakı altbilgidə göstərilir. sınaqdan keçirilən saytın URL-i. Bu kiçik xüsusiyyət ekran görüntülərini sənədləşdirməyi və müştərilərlə məlumat paylaşmağı asanlaşdırır.

Yuxarıda göstərilənlərin hamısı onu artıq mükəmməl bir vasitəyə çevirərdi, lakin Screenfly tərtibatçıları onu ən yüksək səviyyəli etmək üçün bir yol tapdılar və proxy mülkiyyət təmin etdilər. Veb saytlarından sitat gətirərək: “Screenfly onların veb saytına baxarkən cihazları təqlid etmək üçün proksi serverdən istifadə edə bilər. Proksi server seçdiyiniz cihazların istifadəçi agent sətirini simulyasiya edir, lakin həmin cihazların davranışını deyil." Burada açıqlanan bütün digər alətlər yalnız CSS ilə əlaqəlidir. Screenfly istifadəçi agent sətirinə əsaslanaraq test etməyə imkan verən yeganədir.

Mövcud mobil versiya ilə yaratdığım bir saytı bu şəkildə sınaqdan keçirərək deyə bilərəm ki, nəticələr çox yaxşı idi. Hər şey gözlədiyim kimi göstərildi və funksiyalar sınaqdan keçirilə bilərdi. Deməliyəm ki, istifadəçi agent sətirlərinin sınaqdan keçirilməsi ənənəvi hala gəldi, lakin bu sayt çoxdan yaradılıb və proxy server mülkiyyəti ona həqiqətən çox faydalı bir əlavə oldu.

Beləliklə, cavab verən saytları sınamaq üçün kifayət qədər resurs olduğunu görə bilərsiniz. Onlar unikal xüsusiyyətləri ilə fərqlənirlər; istifadə etdiyiniz saytlar şəxsi üstünlüklərinizdən və tələblərinizdən asılı olacaq və mən sizi onları araşdırmağa və sınaqdan keçirməyə təşviq etməyə çalışıram. Tərtibatçıların həqiqətən faydalı olan alətləri nə qədər çox olsa, bir o qədər yaxşıdır.

Salam əziz blog oxucuları. Təəccüblü deyil ki, adaptiv dizayn Rusiya İnternetində getdikcə populyarlaşır. Və əlbəttə ki, layout dizaynerləri bunu öyrənməlidirlər. Tezliklə cavab verən dizayn demək olar ki, bütün saytlarda olacaq, çünki getdikcə daha çox insan mobil cihazlardan istifadə edir.

Və demək istəyirəm ki, olan saytlar onsuz deyil, bu cür cihazlarda oxumaq daha rahatdır.

Bu gün mən sizə 5 çox faydalı və sərin xidmət təqdim etmək istəyirəm ki, onların köməyi ilə saytın uyğunlaşma qabiliyyətini yoxlaya bilərsiniz.

Beləliklə, gedək.

Saytları yoxlamaq üçün yaxşı xidmət. Həm planşetlər, həm də telefonlar üçün çoxlu ekran qətnamələri var.

Mett Kersley-dən veb-saytı yoxlamaq üçün sadə xidmət. Mobil cihazların bütün məşhur qətnamələri də mövcuddur.

İstənilən saytı yoxlayacaq çox gözəl xidmət. Dizayn və funksionallığı çox bəyəndim.

Çox gözəl və funksional xidmət. Hətta saytın televizorda necə görünəcəyini yoxlamaq mümkündür :-)

Veb texnologiyalarının inkişafı ilə veb inkişafı üçün tələblər də artır. Ən çox, veb tərtibatçıları, tərtibat dizaynerləri və ya bu gün deyildiyi kimi, frontend tərtibatçıları özlərini ən çox hiss edirlər.

Bu yazıda adaptiv layout haqqında bir az danışacağıq, çünki bu "hiylə" indi çox qiymətləndirilir. Adaptiv tərtibata gəldikdə, istənilən kateqoriyadan olan tərtibatçılar müştərilərə və ya layihə menecerlərinə, yumşaq desək, bədxahlıqla baxırlar, çünki onlar bunun nə qədər çətin olduğunu başa düşürlər.

Bir çoxları uyğunlaşma düzümü maye düzümü ilə qarışdırmağa başlayır, bu, başlanğıc tərtibat dizaynerlərinin çox yayılmış səhvidir. Nə fərqi var soruşursan?

Başlayanlar üçün gəlin bunu sizin üçün aydınlaşdıraq və belə desək, bütün nöqtələri üstünə qoyun və tərtibatın hansı növləri olduğunu nəzərdən keçirək.

4 növ layout var:

Bütün növləri daha ətraflı nəzərdən keçirin.

1. Sabit tərtibat

Bloklar öz enini dəyişmir. Aşağı rezolyusiyaya malik monitorlarda üfüqi sürüşmə çubuğu görünür.

#temnyi, #svetlyi (en: 440px; )

2. Rezin tətbiq

Bloklar brauzer pəncərəsinin ölçüsündən asılı olaraq enini dəyişir. O, maksimum və minimum qiymət ala bilər (maksimum genişlik xüsusiyyəti). Amma ekran azaldıqca 50%-dən 100% etmək mümkün deyil.

#temnyi, #svetlyi (en: 50%; )

3. Cavab verən tərtibat

O, @media-nın köməyi ilə və ya skriptlər sayəsində təcəssüm olunur. Xüsusi məlum cihazlar (320, 768, 1024 və s.) üçün itilənmişdir. Hər hansı bir dəyişiklik göstərilən səviyyələrdən birinə çatdıqdan sonra sarsıntılarda baş verir. üçün mütləq uyğundur

#temnyi, #svetlyi ( en: 430px; ) @media (maksimum en: 1220px) ( #temnyi, #svetlyi ( en: 380px; ) ) @media (maks. en: 1120px) ( #temnyi, #svetlyi ( genişlik) : 325px; ) ) @media (maksimum en: 680px) ( #temnyi, #svetlyi (en: 200px; ) )

4. Cavab verən tərtibat

Bu, maye və adaptiv layoutun birləşməsidir. Həyata keçirmək ən çətindir. Ancaq nəticə ən məqbuldur. Saytın istənilən cihaza uyğunlaşacağını əminliklə söyləmək olar.

#temnyi, #svetlyi ( en: 50%; ) @media (maks. en: 1006px) ( #temnyi, #svetlyi ( en: 100%; ) )

Beləliklə, biz 4 növ sayt tərtibatı haqqında danışdıq. İndi möcüzə ssenarimizin vaxtıdır adaptiv layout. Ümid edirəm ki, heç nə izah etmir, skript olduqca sadədir, sadəcə olaraq deyirik ki, dəyişərkən hansısa blok hardasa qarışır və bu belədir. Təbii ki, bu da vasitəsilə mümkündür CSS üslubları, lakin bütün üsulları bilməlisən, bəzən bəzi yerlərdə bəziləri işləməyəcək, bəziləri isə düz çıxacaq.

Cavab verən düzən skripti:

/*Kodda rahat istifadə etmək üçün bir neçə sinfi idarə edə biləcəyiniz dəyişən yaradaq. Yəni, burada onları bir dəfə aşkarlayır və hamısı budur, hər nümunədən əvvəl deyil! bu faydalı xüsusiyyətdir*/ var my = ( pəncərə: $(pəncərə) ); /*Əslində funksiyanın özü*/ $(pəncərə).resize(funksiya () ( /*Pəncərənin enini təyin edən və onu genişlik dəyişəninə aparan dəyişən*/ var width = my.window.width(); /*pəncərənin çevrilmə şərti, yəni pəncərə eni müəyyən ölçüyə çatdıqda yerinə yetirilən şərt */ if(my.window.width()< 640) { $(".right-content").css("float:none; clear:both"); $(".header-menu").css("float","left"); if(width < 480) { /*какое нибудь условие*/ if(width < 320) { /*какое нибудь условие*/ } } } /*Возвращает все стили на свои места т.е при расширении он примет первоначальный вид*/ else { $(".right-content").css("float:left; clear:none"); $(".header-menu").css("float:none") } });

Hamısı budur. Hər hansı bir sualınız varsa, şərhlərdə yazın, gedin

Bu gün kimisə ehtiyaca inandırmağa ehtiyac yoxdur mobil versiya Sayt. Axı, hər gün smartfon və planşetlərdən daha çox ziyarətçi var. Bu yazının yazıldığı vaxt bloquma gələnlərin təxminən 20%-i gözdən keçirmək üçün mobil cihazlardan istifadə edir. Yəni hər beşinci saytıma telefon və ya planşetdən daxil olur.

Bir neçə il əvvəl belə ziyarətçilər haqqında düşünmürdüm, lakin onların sayı 10% -dən çox olanda ümumi sayı Responsive layout istifadə etməyə başladım. Bu, məzmunu mobil cihazlarda düzgün nümayiş etdirməyə və həm ziyarətçilərin, həm də sayta gələnlərin sədaqətini artırmağa imkan verdi. Axtarış motorları.

Saytın mobil versiyası və adaptiv dizayn eyni şey deyil. Bu məqalə, saytın dizaynı ziyarətçinin cihazının ekran qətnaməsindən asılı olaraq dəyişdikdə, adaptiv tərtibatın sınaqdan keçirilməsinə yönəldiləcəkdir.

Saytınızın mobil cihazlarda düzgün göstərildiyinə əmin olmaq üçün yoxlamaq lazımdır və bunun üçün bir neçə var faydalı xidmətlər və alətlər.

Populyar İnternet brauzeri (brauzer) Mozilla Firefox saytın dizaynını mobil cihazlarda nümayiş etdirmək üçün uyğunluğunu yoxlamaq üçün daxili alətlə təchiz edilmişdir. Onu istifadə etmək üçün "Menyu" - "İnkişaf" - "Adaptiv dizayn" bölməsinə keçin. Və ya klaviaturada eyni anda üç düyməni basın ++ [M]

Bunun kimi bir şey görməlisiniz:

Ekranın təsvir ölçüsünü və oriyentasiyasını dəyişdirməklə saytınızın mobil ziyarətçilərə necə göstəriləcəyini yoxlaya bilərsiniz.

Brauzer Google Chrome həmçinin saytın dizaynına uyğunlaşma qabiliyyətini yoxlamaq üçün daxili dəstəyə malikdir. Bunu etmək üçün menyuya gedin, "Əlavə alətlər" maddəsini və sonra "geliştirici alətləri" seçin (və ya düyməni basın).

Bundan sonra, cavab verən dizayn simgesini basın (və ya eyni zamanda klaviaturada ++[M] düyməsini basın):

Ekranın ortasında saytınızın mobil cihazların ekranlarında necə göstəriləcəyini görəcəksiniz:

Bildiyiniz kimi, iki dünya axtarış lideri Google və Yandex-in saytın mobil cihazların ekranlarında necə görünməsi ilə bağlı öz təvazökar fikirləri var. Və sayt mobil ziyarətçilər üçün əlverişsiz hesab edilərsə, axtarış nəticələrində aşağı düşür. Beləliklə, SEO nöqteyi-nəzərindən, mobil ziyarətçiləri itirmək istəmirsinizsə, nəinki cavab verən dizayna sahib olmalısınız, həm də axtarış motorları onu həssas, yəni mobil dost hesab etməlidir.

İlə uyğunlaşma qabiliyyətini yoxlamaq üçün Google xidməti aşağıdakı ünvana gedin və saytınızın adı ilə sürün: https://www.google.com/webmasters/tools/mobile-friendly/.

Bloqumu yoxlamağın nəticəsi belə görünür:

Yandex ilə bu bir az daha mürəkkəbdir, yoxlamaq üçün Yandex.Webmaster xidmətində qeydiyyatdan keçməli və interfeysin beta versiyasından istifadə etməlisiniz:

Bu xidmətlərin əsas vəzifəsi saytınızın necə görünəcəyini təqdim etməkdir (göstərmək). mobil cihaz. Bu cür funksionallığı olan bir çox sayt var. Onlardan yalnız bir neçəsini qeyd edəcəm. Əksər hallarda, onlar FireFox və Chrome-un daxili funksionallığını təkrarlayırlar.

Öz uyğunlaşma nümayişi xidmətinə malik olan Google ilə yenidən başlayacağam: http://design.google.com/resizer/#

İkinci gözəl xidmət http://quirktools.com/screenfly/-dir. Bu, saytınızın hətta TV-də necə görünə biləcəyini göstərəcək!

Yaxşı, "yerli istehsalçını" incitməmək üçün başqa bir saytdan nümunə verəcəyəm: http://symby.ru/adaptest/. Bir səhifədə eyni anda müxtəlif ekran qətnamələri ilə bir neçə baxış görəcəksiniz.

Saytınızın cavabdeh olduğuna və əksər cihazların ekranlarında düzgün göstərildiyinə əmin olduqdan sonra onun iş sürətini yoxlamalısınız. Yenə mobil ziyarətçilərə münasibətdə.

Google həmişə əyrinin qabağındadır: https://developers.google.com/speed/pagespeed/insights/ . Bu xidmət saytın telefon ekranında necə göründüyünü göstərəcək və mobil cihazlarda yükləmə sürətini artırmaq üçün kodun optimallaşdırılmasına dair tövsiyələr verəcək.

Və sonda mən saytın yalnız mobil cihazda necə göründüyünü deyil, həm də iş sürətini göstərəcək bir xidmət nümunəsi verəcəyəm: http://www.webpagetest.org/

Fikrimcə, gündəlik işdə saytın dizaynında dəyişiklik edərkən daxili funksiyalardan istifadə etmək daha asandır Firefox brauzerləri və Chrome. Bundan sonra, təbii ki, axtarış sistemlərinin dizaynınıza sadiqliyini yoxlamaq lazımdır. Və yalnız bundan sonra, ruhu sakitləşdirmək və ya lovğalanmaq üçün onlayn xidmətlərdən istifadə edə bilərsiniz.