Сайтаа бүгдийг нь худалдаж авахгүйгээр төрөл бүрийн төхөөрөмж дээр туршиж үзээрэй.
Бид цахим ертөнцөөр аялахдаа янз бүрийн вэб сайт, программууд болон дижитал контентоор дүүрэн ертөнцөд байдаг. Веб сайтын дизайн нь бидний өдөр бүр төхөөрөмжийнхөө дэлгэцэн дээр хардаг эдгээр сонирхолтой хуудсуудын цаад хүчин зүйл юм. Гэхдээ нэг вэб сайт нь янз бүрийн төхөөрөмж, дэлгэцийн хэмжээс дээр хэрхэн гайхалтай харагдаж, төгс ажиллах боломжтой талаар та бодож байсан уу? Энэхүү сорилт нь responsive вэб дизайн гэж нэрлэгддэг зүйл бөгөөд энэ нь вэбсайтыг ямар ч дэлгэц дээр үзсэн том, жижиг бүх төхөөрөмж дээр төгс харагдахыг баталгаажуулах арга техник юм.
Энэ нийтлэлд бид мэдрэмжтэй вэб дизайны ертөнц рүү шумбаж, янз бүрийн төхөөрөмж, дэлгэц дээр загвараа хялбархан туршиж үзэх гайхалтай хэрэгслүүдийг судлах болно. Та сайтынхаа зочдод ямар төхөөрөмж ашиглаж байгаагаас үл хамааран хэрэглэгчийн оновчтой туршлагад хэрхэн хүрэх талаар суралцах болно. Энэхүү сэтгэл хөдөлгөм ертөнцтэй танилцаж, хариу үйлдэл үзүүлэх вэб дизайн нь таны сайтыг бүх төхөөрөмж дээр хэрхэн гэрэлтүүлж болохыг олж мэдэцгээе.
Олон төхөөрөмж дээр вэбсайтынхаа хариу үйлдэл үзүүлэх чадварыг шалгах шилдэг хэрэгслүүдийн жагсаалт
Таны сайт бүрэн интерактив байгаа эсэхийг шалгахын тулд та үүнийг янз бүрийн төхөөрөмж дээр туршиж үзэх хэрэгтэй.
Гэсэн хэдий ч бидний ихэнх нь бодит туршилт хийхэд шаардлагатай хэдэн зуун физик төхөөрөмжийг авахын тулд төсөвтэй тэмцдэг. Гэсэн хэдий ч санаа зовох хэрэггүй! Эдгээр хэрэгслүүд нь таны мэдрэмжтэй дизайнуудыг виртуал орчинд туршиж үзэх боломжийг олгодог.
1. Chrome Scan Tool
шалгах хэрэгсэл (Шалгах) Chrome Browser-д Жагсаалт дээрх анхны хариу үйлдэл үзүүлэх тестийг таны Chrome хөтөч дээр шууд ашиглах боломжтой. Таны вэбсайтын кодыг шалгахад ашигладаг хэрэгсэл нь дэлгэцийн хэмжээ, өргөнийг шалгах нэмэлт функцтэй.
- Зүгээр л дурын сайт дээр хулганы баруун товчийг дараад "Шалгах".
- Шалгах цонх нээгдэх үед та товчлуурын хажууд "техник хангамжийн дүрсийг харах болно"Элемент"(Элементүүд).
- "Төхөөрөмжүүд" товчийг дарахад дэлгэцэн дээрх байршлыг өөр өөр хэмжээтэй дэлгэцээр харах болно. Та гараар тодорхой хэмжээг оруулах эсвэл цонхны буланг чирж таслах цэгийг өөрчлөх боломжтой.
Энэ нь дизайн нь янз бүрийн үзэгдэлд хэрхэн дасан зохицож байгааг судлахад маш хэрэгтэй.
2. Хариуцлагатай туршилтын хэрэгсэл
гэж үздэг Хариуцлагатай туршилтын хэрэгсэл Бусад ихэнх хариу шалгах сайтуудтай төстэй хэрэгсэл. Дэлгэцийн дээд хэсэгт байрлах хайлтын талбарт шалгахыг хүссэн хуудасныхаа URL хаягийг оруулахад л хангалттай. Энэ хэрэгсэл нь сонгох боломжтой урьдчилан тохируулсан төхөөрөмжийн хэмжээсийн урт жагсаалтыг агуулдаг.
Хэрэв танд тусгай хэмжээ хэрэгтэй бол та өөрийн хэмжилтийг зааж өгч болно. Загварын өөрчлөлтийг харахыг хүсвэл " дээр дарна уу.Шалгахдахин ачаалах.
Туршилтын цонхонд гүйлгэх боломжтой товчлуур байгаа бөгөөд 'эргэхБосоо болон хэвтээ байрлалыг шалгах. Энэ хэрэгслийг бүтээсэн хөгжүүлэгч нь танд хариу үйлдэл үзүүлэх вэб сайтуудын сүлжээний системд хандах боломжийг олгодог бөгөөд үүнийг баруун дээд буланд байгаа гэрлийн чийдэнгийн дүрсээс харж болно.
3. Хариуцагч
шидэт хэрэгсэл Хариуцагч хялбархандаа л оршдог. Зүгээр л өөрийн вэб хуудасны URL-г оруулна уу, вэб хөтөч дээр суурилсан энэхүү үнэгүй хэрэгсэл нь танд хамгийн алдартай дэлгэцийн хэлбэр, хэмжээн дээр хуудсыг хэрхэн төлөвлөхийг харуулах болно.
Хамгийн сайн зүйл бол та хуудастайгаа амархан харьцах, холбоос дээр дарах, хайлтын талбарт бичих гэх мэт боломжтой юм. Эдгээр төхөөрөмжүүд нь ерөнхий төхөөрөмжүүд бөгөөд тодорхой төрлүүдэд хамаарахгүй гэдгийг тэмдэглэх нь зүйтэй.
Энэ хэрэгсэл нь нийтлэг төхөөрөмж дээр хурдан скан хийхэд хэрэгтэй боловч хэрэв та бүх таслах цэгийг скан хийхийг хүсвэл энэ нь хязгаарлагдмал.
4. Screenfly
хэрэгсэл Screenfly Энэ нь танд вэбсайтаа янз бүрийн дэлгэц, төхөөрөмж дээр шалгах боломжийг олгодог үнэгүй хэрэгсэл юм. Хэдийгээр худалдаанд гараад хэдэн жил болж байгаа ч маш их алдартай, үүргээ маш сайн гүйцэтгэдэг.
Энэ нь өмнөх жишээнүүдийн адил хариу шалгах боломжуудыг санал болгодог өөр нэг сайт боловч урьдчилсан тохируулгууд нь бага зэрэг хуучирсан байна. Хамгийн сүүлийн iPhone тохиргоо нь 7X юм. Гэсэн хэдий ч, хэрэгсэл нь сайн ажилладаг бөгөөд танд тохируулсан хэмжээ, эргүүлэх, дахин ачаалах товчлуурууд, гүйлгэх чадварыг солих товчлуурыг ашиглах боломжийг олгодог.
Таны хийх ёстой зүйл бол вэбсайтынхаа URL хаягийг оруулах, боломжтой жагсаалтаас зорилтот төхөөрөмж болон дэлгэцийн хэмжээг сонгох явдал юм. Та тухайн төхөөрөмж дээр вэбсайтынхаа гүйцэтгэлийг хялбархан хянах боломжтой болно. Дэмжигдсэн төхөөрөмжүүдэд ширээний компьютер, таблет, зурагт, ухаалаг утас орно.
5. DesignModo
Үүнийг авч үздэг DesignModo нь вэбсайт болон цахим шуудангийн бүтээгч бөгөөд хариу өгөх чадварыг шалгах үнэгүй хэрэгслийг өөрийн сайтын нэг хэсэг болгон агуулдаг. Энэ хэрэгсэл нь өмнөх хэрэгслүүдийн бүх боломжуудтай бөгөөд чирэх товчлууртай бөгөөд та харагдах байдлыг томруулж, томруулж байхдаа дизайн хэрхэн өөрчлөгдөхийг харах боломжтой.
Мэдээжийн хэрэг, энэ хэрэгсэл нь үндсэн үйлчилгээндээ зар сурталчилгаа, хэрэглэгчийг бий болгох хэрэгсэл болж ажилладаг. Цорын ганц дутагдалтай тал нь багажийн үзүүлсэн хэмжилтүүд нь дэлгэцийн масштаб дээр биш, нягтрал дээр суурилдаг бөгөөд энэ нь зарим төөрөгдөл үүсгэж болзошгүй юм.
6. Би хариу үйлдэл үзүүлж байна уу
хэрэгсэл Би хариу үйлдэл үзүүлж байна уу"Яг Хариуцагч Энэ нь тодорхой төхөөрөмж дээр шалгагдсан сайтыг харуулдаг. Энэ хэрэгслийн эерэг шинж чанар нь үр дүнгийн дэлгэцийн агшинг авч, багцдаа ашиглах боломжтой юм. Үүнээс гадна дэлгэц бүрийг бие даан гүйлгэж болно.
7. Pixeltuner
Responsive Web Design Testing Tool нь вэб сайт биш, хөтчийн нэмэлт юм. Та үүнийг хөтөч дээрээ ашиглах боломжтой нэмэлтүүд эсвэл нэмэлтүүдийн сангаас олох болно. Доорх холбоос нь Chrome-ын өргөтгөл юм, гэхдээ энэ хэрэгсэл нь Safari болон Firefox дээр бас ажилладаг.
Нэмэх дүрс дээр дарахад та урьдчилан тохируулсан тохиргооны жагсаалтаас сонгох боломжтой бөгөөд дараа нь сайт таны сонгосон өргөнтэй шинэ цонхонд нээгдэнэ. Урьдчилан тохируулгууд нь бага зэрэг хуучирсан боловч та шинэ төхөөрөмж нэмж, өөрийн дуртай хослолуудыг үүсгэж болно.
Дүгнэлт
Товчхондоо, responsive вэб дизайн нь энэ дижитал эрин үед аливаа вэбсайтын амжилтын хүчин зүйлүүдийн нэг юм. Хэрэв та сайтаа янз бүрийн үзэгчидтэй үр дүнтэй харилцаж, бүх төхөөрөмж, дэлгэцэн дээр гайхалтай харагдахыг хүсч байвал responsive дизайны технологи зайлшгүй шаардлагатай.
Энэ нийтлэлд бид танд дизайныг янз бүрийн төхөөрөмж, дэлгэц дээр хялбар бөгөөд үр дүнтэй туршиж үзэх боломжийг олгодог гайхалтай хэрэгслүүдийг санал болгож байна. Та мэргэжлийн эсвэл анхан шатны вэб дизайнер байгаа эсэхээс үл хамааран эдгээр хэрэгслүүд нь таны сайтыг зочин бүрт гайхалтай хэрэглэгчийн туршлагыг хүргэхэд тусална.
Хэрэв та вэб дизайны ертөнцөд амжилтанд хүрэхийг хүсч байвал мэдрэмжтэй дизайны ач холбогдлыг үл тоомсорлож болохгүй. Эдгээр хэрэгслүүдийг туршиж үзээд өөрт тохирохыг нь сонгоод, технологийн хөгжилд хөл нийлүүлэн алхаж, үзэгчдийнхээ олон төрлийн хэрэгцээг хангахуйц хүчирхэг суурин дээр сайтаа байгуулаарай.
Та мөн дараахь зүйлийг сурах сонирхолтой байж магадгүй юм.
- 10 оны шилдэг 2023 үнэгүй кодлох програм
- 10 оны шилдэг 2023 блоггер сайт
- Загвар, дизайны нэр, ямар ч сайтад ашигладаг нэмэлтүүдийг хэрхэн яаж мэдэх вэ
- 10 оны мэргэжлийн онлайн лого дизайны шилдэг 2023 үнэгүй сайт
- Зургийг вэб рүү хөрвүүлэх, сайтынхаа хурдыг сайжруулах хамгийн сайн програм
- 13 онд PNG файлын хэмжээг багасгах шилдэг 2023 вэб сайт
Энэ нийтлэл танд олон төхөөрөмж дээр өөрийн сайтын хариу үйлдэл үзүүлэх чадварыг шалгах шилдэг хэрэгслүүдийг мэдэхэд хэрэг болно гэж найдаж байна. Сэтгэгдэл хэсэгт бидэнтэй санал, туршлагаа хуваалцаарай. Мөн нийтлэл танд тусалсан бол найзуудтайгаа хуваалцахаа мартуузай.
