Cavab verən dizaynı pulsuz olaraq necə sınaqdan keçirmək olar. JavaScript skriptindən istifadə edərək cavab verən tərtibat Cavab verən dizaynın sınanması
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 vebsaytlarda olacaq, çünki getdikcə daha çox insan mobil cihazlardan istifadə edir.
Və demək istərdim ki, onunla olan saytlar onsuz deyil, bu cür cihazlarda oxumaq daha rahatdır.
Bu gün sizi 5 çox faydalı və sərin xidmətlə tanış etmək istəyirəm, onların köməyi ilə veb saytınızın uyğunlaşma qabiliyyətini yoxlaya bilərsiniz.
Beləliklə, gedək.
Veb saytınızın uyğunlaşma qabiliyyətini yoxlaya biləcəyiniz 5 xidmət. www.responsivedesigntest.netSaytları yoxlamaq üçün yaxşı xidmət. Həm planşetlər, həm də telefonlar üçün çoxlu ekran qətnamələri var.
mattkersley.comMett Kersley-dən veb-saytı yoxlamaq üçün sadə xidmət. Bütün məşhur mobil cihaz qətnamələri də mövcuddur.
İstənilən saytı yoxlayacaq çox gözəl xidmət. Dizaynı da, funksionallığı da çox xoşuma gəldi.
Çox gözəl və funksional xidmət. Hətta saytın TV-də necə görünəcəyini yoxlamaq mümkündür :-)
Müəllifdən: "Bu brauzerin ölçüsünü dəyişməyi dayandırın, tezliklə silinəcək!" Bunu nə qədər 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ınaqdan keçirirsən. və qeyri-dəqiqliklər axtarır.
Ümumiyyətlə, bu səylərin əksəriyyəti müxtəlif cihazların ekran ölçülərini təqlid etmək cəhdidir.
Əgər siz müəssisənin inkişafı ilə məşğul olursunuzsa, yəqin ki, sınaqdan keçirmək üçün şirkət tərəfindən təmin edilmiş çoxlu cihazınız var. İşlədiyim yerdə iPad, iPhone, bir və ya iki başqa planşet, noutbuk və stolüstü kompüterlərimiz var. Əgər bu 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. Dəyməz iOS cihazları, 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, müxtəlif cihazların ekran ölçülərini simulyasiya 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. Onlardan bəzilərinə burada baxacağıq.
Sınaq məqsədləri üçün yaratdığım ilk həqiqətən həssas veb saytı, PajamasOnYourFeet.com-u götürdüm. O, EGrappler-də tərtibatçı cəmiyyətinə çox səxavətlə və sərbəst şəkildə təqdim edilən Brownie HTML5 şablonuna əsaslanır.
Mən cavabdehəm?Mən cavab verirəm? – dörd fərqli cihazda necə görünəcəyi baxımından saytınızın tamamilə asan, ani baxışı. Dördü də iOS-dur və tərtibatçı öz seçimini veb saytında izah edir. O, heç bir nəzarət və ya seçim təklif etmir, sadəcə çox sadə və zərif ekrandır. Pəncərə ölçülərinə baxın:
İş masası - 1600 x 992px, miqyasda azalma (0,3181)
Noutbuk - 1280 x 802px, miqyasda azalma (0,277)
Planşet - 768 x 1024px, miqyasda azalma (0,219)
Mobil - 320 x 480px, miqyasda azalma (0.219)
Tərtibatçıdan sitat gətirmək üçün: “Bu sınaq vasitəsi deyil, bunu real cihazlarda etmək çox vacibdir. Ancaq bu, sürətli ekran görüntüləri çəkmək üçün bir vasitədir (mənim üçün) və müştəri görüşlərində nə demək istədiyinizi "dərk etmək" üçün vizual fürsət təmin edir."
deviceponsive Am I Responsive saytına bənzəyir? saytınızı sadə və səliqəli şəkildə göstərən, lakin 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. Maraqlı bir xüsusiyyətə malikdir - arxa fon rəngini redaktə edərək və öz loqotipinizi daxil etməklə başlığı dəyişdirə və sonra "çap edə bilərsiniz". Bu yolla, 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 - 1280 x 800
iPad (portret) - 768 x 1024
iPad (landşaft) - 1024 x 768
Kindle (portret) - 600 x 1024
Kindle (landşaft) - 1024 x 600
iPhone (portret oriyentasiyası) - 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, kiçik cihazlarda sürüşmə çubuqları 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 etməlisiniz.
Cihaza cavab verən kimi, cavab verən test saytınızı birdən ç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ı görə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 kiçildilmə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 sözdə "Crappy Android"ə (düzünü desəm, onların "adlı bir seçimi də var. Android daha yaxşıdır"(Daha 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örünməli olduğu yalnız mavi bir çubuq var.
Bu, əvvəlki ikisinə çox bənzəyir və responsive.is-i onlardan fərqləndirən yeganə şey displeyin bir cihazdan digərinə hamar animasiyası, həmçinin saytın daşınmaz əmlakının baxış pəncərəsindən düşdüyünü göstərən şəffaf örtükdür. .
Burada mövcud olan yeganə cihaz seçimləri brauzerinizin pəncərəsini dolduran avtomatik seçimlərdir və sayta getdiyiniz zaman onu görərdiniz: İş masası; Planşet (landşaft oriyentasiyası); Planşet (portret istiqaməti); Smartfon (landşaft oriyentasiyası) və Smartphone (portret oriyentasiyası), piksel ölçüləri verilmir.
Yenə bir neçə fərqli xüsusiyyət və seçim Screenqueries-i digər saytlardan fərqləndirir. Portret və landşaft rejimlərini dəyişmək üçün ayrıca elementi olan 14 telefon və 12 planşet qurğusu var. Bunlar 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. Ekranın kənarları sürüklənə bilər ki, siz fərdi ölçüləri sınaya bilərsiniz. Sınaq sahəsinə sürüşdürün və ya klikləyin və fon daha az qarışıq görünüşlə boz rəngə çevriləcək.
Maraqlı xüsusiyyət bu sayt - bir neçə cihaz üçün saytınızı bu cihaza təyin edilmiş xrom brauzerə bükülmüş şəkildə göstərən "Əsl görünüş" seçimi var. Təəssüf ki, mən artıq buna öyrəşmişəm, Firefox test saytının şəkil slayderini göstərə bilmir. Narahat olmayın, brauzerlərə gəldikdə mən həqiqətən Firefox-a ü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ə qədər planşetlərdən daha böyük doqquz cihaz, beş planşet, doqquz smartfon, üç televizor ölçüsü və fərdi ekran ölçüsü seçimi təklif edir. Seçdiyiniz hər hansı seçim menyuda ayrıca nəzarətdən istifadə etməklə portret və ya landşaft oriyentasiyasına çevrilə bilər. Siz sürüşdürməyə icazə verib-verməməyi seçə və bir düyməyə bir kliklə paylaşıla bilən link yarada bilərsiniz.
Sayt piksel ölçüsü məlumatlarını təqdim etməkdə fəal şəkildə faydalıdır. 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ınaq edilə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 ideal bir vasitə halına gətirərdi, lakin Screenfly tərtibatçıları onu sadəcə yüksək səviyyəli etmək imkanı tapdılar və proxy server mülkiyyətini təmin etdilər. Veb saytlarından sitat gətirərək: “Screenfly onların veb-saytlarına baxarkən cihazları təqlid etmək üçün proxy serverdən istifadə edə bilər. Proksi seçdiyiniz cihazların istifadəçi agent sətirini simulyasiya edir, lakin həmin cihazların davranışını deyil." Burada əhatə olunan bütün digər alətlər yalnız CSS ilə məşğul olur. Screenfly istifadəçi agent sətirinə əsaslanaraq test etməyə imkan verən yeganədir.
Bu şəkildə bir saytı sınaqdan keçirərək mövcud saytlarla yaratdım mobil versiya, deyə bilərəm ki, nəticələr çox yaxşı idi. Hər şey gözlədiyim kimi göstərildi və xüsusiyyətlər sınaqdan keçirildi. Demək lazımdır ki, istifadəçi agent sətirlərini sınaqdan keçirmək ənənəvi hala gəldi, lakin bu sayt çoxdan hazırlanmışdı və proxy mülkiyyəti həqiqətən də ona çox faydalı bir əlavə oldu.
Beləliklə, cavab verən veb saytları sınamaq üçün çoxlu 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. Biz tərtibatçılar həqiqətən daha çoxumuz var faydalı alətlər, daha yaxşı.
Onlayn mağaza mobil cihazlar üçün optimallaşdırılmalıdır. Bu problem saytın istənilən platformada düzgün göstərilməsinə imkan verən adaptiv dizayndan istifadə etməklə həll edilir. Bununla belə, həssas dizaynın həyata keçirilməsi standart tələlər dəsti ilə gəlir. Onlayn alış-veriş saytları üçün xarakterik olan ən çox rast gəlinən 8 problemi sadalayaq.
Ziyarətçi davranış analitikasına məhəl qoymamaqMobil seqmentə daxil olmaq üçün tələsik pərakəndə satıcıları ziyarətçi davranışının ciddi analitikasını aparmadan veb-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 çevrilmə sürətini və s. göstərir. Bu məlumatlar istifadəçi davranışı seçimləri haqqında məlumat 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ərin sistematik və ardıcıl şəkildə həyata keçirilməsi, müştərilərin ehtiyaclarını ödəmək üçün saytı yekunlaşdırmaq və optimallaşdırmaq lazımdır.
İş masası mağazasının dizaynıTipik 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 onu masaüstünə qədər genişləndirmək daha məntiqlidir. Pərakəndə satıcılar tez-tez masaüstü kompüter üçün hazırlanmış veb-saytı smartfon ölçüsünə gətirməyin texniki problemlərini dərk etmirlər. 
üçün dizayn başlayır mobil ekranlar, siz mobil istifadəçi 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 tərtibatının sınaqdan keçirilməsi işə salınmanın məcburi mərhələsidir, 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 cihazlar üçün canlı versiyasında hətta alış-veriş və sifarişin verilməsi prosesində belə səhvlər yarana bilər.
Adaptiv dizaynın çatışmazlıqları onlayn mağazanın ilkin sınaqları ilə asanlıqla müəyyən edilir, lakin bir çox satıcının bunun üçün resursları yoxdur. Pul itirmək riskini azaltmaq üçün əsas brauzerlərdə - Chrome, IE, Firefox, Safari və sayt ətrafında əsas istifadəçi marşrutlarını sınaqdan keçirin. əməliyyat sistemləri– Populyarda Windows, Mac OS, Android, IOS mobil cihazlar. 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ə bilər.
Mobil ekranlar üçün kiçik elementlərSmartfonun ekranında daha çox yer sığdırmaq üçü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 sıxmaq üçün böyütməyə məcbur etməyin və kiçik elementləri bir-birinə çox yaxın yerləşdirməyin, əks halda istifadəçiləriniz daha rahat sayta getməyi seçə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.
Yavaş səhifə yükləmə sürətiMobil auditoriya sürətli 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ə səhifənin yüklənmə müddətini nəzərə alır və mobil saytları sıralayır və onlara yuxarıda üstünlük verir ki, “yüngül” saytlar əlavə ciddi ü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ə “Al” düyməsi ola bilər. Müştəri rəyləri və videoları ayrıca tabda yerləşdirilə və səhifənin əsas hissəsinin "çəkisi"ni 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ənmə vaxtını azaldan alətlər bu işdə sizə kömək edəcək: Uglify və ya JSCompress.
Mobil istifadəçilər üçün məzmunun kəsilməsiTez-tez tərtibatçılar məzmunun bir hissəsini gizlədirlər ki, mobil cihazlara 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 mobil ziyarətçilər üçün səhifənin çəkisini və yükləmə vaxtlarını azaldaraq dinamik şəkildə səhifə yarada bilməlidir. Bundan əlavə, mobil istifadəçilərə daha az məzmun vermək pisdir və istehlakçı təcrübəsinə mənfi təsir göstərir. Bir qayda olaraq, satın alma prosesi zamanı istifadə edirlər müxtəlif cihazlar, onlayn alış-veriş edənlərin təxminən 90%-i bunu edir. Onları həssas dizayn üsulları ilə məhdudlaşdırmaq böyük səhvdir.
Yalnız bir qətnamədə şəkilləri dəstəkləyirCavab verən dizaynı olan yaxşı veb-sayt, cihazın növündən asılı olaraq şəkillərin həllini avtomatik olaraq dəyişir; ağır şəkillər yükləmə müddətini artırır. Şəkil ölçülərini uyğunlaşdırmaq üçün avtomatik tənzimləmənin bir neçə yolu var xüsusi cihaz. "Çevik" şəkillər (maye şəkillər) CSS-əsaslı bir üsuldur, onu ehtiva edən elementin genişliyindən asılı olaraq təsviri sıxmağa və uzatmağa imkan verir və ya hər biri üçün tələb olunan ölçülü bir şəkil yükləməyə imkan verən HTML5 elementidir. cihazın növü.
"Cavab verməyən" e-poçtlarElə olur ki, saytın özü ilə hər şey qaydasındadır; cavab verən 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 və ya tamamlanmış satınalmalarına çatmaq üçün tövsiyə olunan məhsulların sonsuz siyahısını vərəqləmək üçün mübarizə aparmalıdırlar. 
E-poçtlar müştərinin əsas əlaqə nöqtəsidir, ona görə də cavab verən e-poçt dizaynını mobil strategiyanıza inteqrasiya edin. Məktublarınızı və bülletenlərinizi dizayn edin və sınaqdan keçirin; məktub şablonları "yüngül" olmalı və yalnız vacib məlumatları ehtiva etməlidir.
Veb texnologiyalarının inkişafı ilə veb inkişafı üçün tələblər də artır. Veb tərtibatçıları, layout dizaynerləri və ya bu gün frontend tərtibatçıları adlandırdıqları kimi, ən çox təzyiq hiss edirlər.
Bu yazıda adaptiv layout haqqında bir az danışacağıq, çünki bu "hiylə" indi çox bahadır. Adaptiv tərtibata gəldikdə, istənilən səviyyəli tərtibatçılar müştərilərə və ya layihə menecerlərinə, yumşaq desək, qəzəblə baxırlar, çünki onlar bunun nə qədər çətin olduğunu başa düşürlər.
Bir çox insanlar adaptiv tərtibatı çevik tərtibatla qarışdırmağa başlayır; bu, təcrübəsiz tərtibatçıların çox yayılmış səhvidir. Nə fərqi var soruşursan?
Əvvəlcə gəlin, sizə aydın olması üçün və desək, bütün nöqtələri qoyun və orada hansı tərtibat növlərinin olduğuna baxın.
4 növ layout var:
Bütün növləri daha ətraflı nəzərdən keçirək.
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 quruluş
Bloklar brauzer pəncərəsinin ölçüsündən asılı olaraq enini dəyişir. Maksimum və minimum dəyərləri qəbul edə bilər (maksimum genişlik xüsusiyyəti). Ancaq ekran kiçikləşdikcə 50% -dən 100% -ə qədər 50% edə bilməzsiniz.
#temnyi, #svetlyi (en: 50%; )
3. Adaptiv tərtibat
@media və ya skriptlərdən istifadə etməklə həyata keçirilir. Xüsusi məlum cihazlar (320, 768, 1024 və s.) üçün fərdiləşdirilmişdir. Hər hansı bir dəyişiklik müəyyə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 çətin. Ancaq nəticə ən məqbuldur. Saytın istənilən cihaza uyğunlaşacağını söyləmək təhlükəsizdir.
#temnyi, #svetlyi ( en: 50%; ) @media (maks. en: 1006px) ( #temnyi, #svetlyi ( en: 100%; ) )
Beləliklə, biz veb sayt tərtibatının 4 növü haqqında danışdıq. İndi möcüzəli adaptiv layout skriptimizin vaxtı gəldi. Ümid edirəm ki, heç nə izah etməyə ehtiyac yoxdur, skript olduqca sadədir, sadəcə olaraq deyirik ki, siz dəyişəndə hansısa blok hardasa qarışacaq və bu qədər. Əlbəttə ki, bu, CSS üslubları vasitəsilə də mümkündür, lakin siz bütün üsulları bilməlisiniz, bəzən bəzi yerlərdə bəziləri işləməyəcək, bəziləri isə düzgün olacaq.
Adaptiv düzən skripti:
/* Gəlin kodda rahat istifadə etmək üçün monogest sinifləri yerləşdirə biləcəyiniz dəyişən yaradaq. Yəni, burada onları bir dəfə aşkarlayır və 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 eni dəyişəninə qoyan 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
