Вэбсайтыг хэрхэн хариу үйлдэл үзүүлэх вэ?

Ухаалаг утас, таблетыг ардчилснаар вэб сайттай болсон хариу зайлшгүй болсон. Хариуцлагатай сайт нь янз бүрийн хайлтын төхөөрөмжүүдэд автоматаар дасан зохицож чаддаг. ширээний компьютер, гар утас, таблет - хэрэглэгчийн оновчтой туршлагыг хангах. Хариуцлагатай вэбсайт нь бас тохиромжтой вэб лавлагаа.

Google-ийн мэдээлснээр хайлтын 60 гаруй хувь нь одоо байна гар утаснаас хийсэн. Тиймээс эдгээр төхөөрөмжүүдэд зориулж сайтаа оновчтой болгох нь зайлшгүй шаардлагатай, эс тэгвээс таны урсгал буурах болно. Гэсэн хэдий ч олон сайтууд дасан зохицох байдлаар зохион бүтээгдээгүй хэвээр байна.

Өнөө үед "вэб сайт" гэж нэрлэгддэг дизайнхариу” (эсвэл дасан зохицох чадвартай) чухал болсон. Гэхдээ энэ нь яг юу гэсэн үг вэ? Та бүх дэлгэцийн хэмжээнд хэрхэн оновчтой вэб сайт хийх вэ?

Хариуцлагатай дизайн нь бүх төхөөрөмж дээр хэрэглэгчийн оновчтой туршлагыг санал болгохын тулд байршил, хэмжээсийн хувьд автоматаар дасан зохицох чадвартай сайтыг бий болгохоос бүрдэнэ. ширээний компьютер 🖥️, таблет 💻, ухаалаг утас 📱.

Төгс мэдрэмжтэй сайтыг бий болгохын тулд хэрэгжүүлэх гол шилдэг туршлагууд энд байна:

🚀 CSS дээр пикселийн оронд харьцангуй нэгж (%, em, rem) ашиглана уу

Элементүүдийн бүрэн дасан зохицох боломжийг олгохын тулд хэмжилтийн харьцангуй нэгжийг ашиглахыг зөвлөж байна %, em эсвэл rem Таны CSS дүрэмд тогтмол пикселээс илүү. Хувь хэмжээ нь дэлгэцийн хэмжээнээс хамааран автоматаар хэмжээг өөрчлөх боломжийг олгодог.

Гол шилдэг туршлагын нэг мэдрэмжтэй сайт үүсгэх нь зайлсхийх явдал юм CSS дүрэмдээ тогтмол пикселүүдийг ашиглах. Үнэн хэрэгтээ пиксел нь элементийн хэмжээг төхөөрөмжөөс хамааран тохируулахыг зөвшөөрдөггүй.

гэх мэт харьцангуй нэгжийг илүүд үзэхийг зөвлөж байна хувь (%), em эсвэл rem байрандаа. Ялангуяа % нь хайрцаг, текст, захын зай гэх мэт хэмжээг автоматаар өөрчлөх боломжийг олгоно. дэлгэцийн хэмжээнээс хамаарна.

Жишээлбэл, өргөнийг тохируулсан CSS дээр 50% Энэ элемент нь компьютер, таблет эсвэл ухаалаг гар утасны дэлгэц дээр байгаа өргөний 50% -ийг үргэлж эзэлнэ. Энэхүү шингэн арга нь төгс зохицсон уян хатан байрлалыг бий болгоход тохиромжтой.

🚀 CSS загварын хүснэгтэд медиа асуулга тодорхойлох

CSS медиа асуулга нь чухал заавар юм мэдрэмжтэй вэбсайт үүсгэх. Эдгээр нь дэлгэцийн цонхны өргөнөөс (харах цонх) хамаарах тодорхой CSS дүрмийг тодорхойлох боломжийг танд олгоно.

Та байршил, фонт, захын зай гэх мэтийг хялбархан зааж өгч болно. Хэрэглэгч нь ширээний компьютер, таблет эсвэл ухаалаг утас хэрэглэж байгаа эсэхээс хамаарч өөр өөр байдаг. Жишээлбэл, бид үүнийг тодорхойлж чадна 768 пикселээс доош өргөн, навигаци нь гамбургерын цэс рүү шилждэг.

Медиа асуулга нь дэлгэцийн хэмжээнээс хамааран элементүүдийн дүрслэл, зохион байгуулалтыг нарийн тохируулах боломжийг танд олгоно. Уян хатан CSS нэгжүүдтэй хослуулан эдгээр нь зайлшгүй шаардлагатай төгс сайт бий болгох мэдрэмжтэй, хамгийн сайн хэрэглэгчийн туршлагыг хангана.

🚀 Зургийг мэдрэмжтэй болгоно

Зургууд нь бас байх ёстой дасан зохицох тодорхой төхөөрөмж дээр пропорциональ бус сунахаас урьдчилан сэргийлэх. Тиймээс байх ёстой SEO-д зориулж зургуудаа оновчтой болгох. Энгийн шилдэг туршлага бол HTML код эсвэл CSS-ээр дамжуулан өргөнийг нь хувиар тогтоох явдал юм.

Бид мөн CSS шинж чанарыг ашиглаж болно "хамгийн их өргөн: 100%" Ингэснээр зураг нь өөрийн пропорцийг хадгалахын зэрэгцээ саванд дасан зохицдог. Мөн нэг зургийн өөр өөр нягтралтай хэд хэдэн хувилбарыг тодорхойлж, дэлгэцийн хэмжээнээс хамааран аль хувилбарт үйлчлэхийг хөтөчдөө "атрибутаар зааж өгөхийг зөвлөж байна.srcset".

Хариуцлагатай үед зураг бүх төхөөрөмж дээр оновчтой чанарыг хангахын тулд сунгахын оронд автоматаар хэмжээг өөрчлөх ёстой.

🚀 Хариуцлагатай CSS хүрээ ашиглана уу

Хариуцлагатай CSS хүрээг ашиглах нь вэбсайтыг хариу үйлдэл үзүүлэх шилдэг туршлагын нэг юм. Bootstrap, Foundation, Bulma, Materialize зэрэг CSS фреймворкууд нь урьдчилан тодорхойлсон байршлын сүлжээ болон хариу үйлдэл үзүүлэх бүрэлдэхүүн хэсгүүдийг санал болгодог бөгөөд энэ нь хариу үйлдэл үзүүлэх вэбсайт үүсгэхэд хялбар болгодог.

Эдгээр фрэймворкүүд нь танд зураглал үүсгэх боломжийг олгодог ашиглахад бэлэн CSS ангиудыг өгдөг уян хатан, мэдрэмжтэй хуудас. Тэд сайтыг үзэхийн тулд ашигласан төхөөрөмжийн дэлгэцийн хэмжээнээс хамааран байршил, хэв маягийг автоматаар тохируулахын тулд медиа асуулга гэх мэт арга техникийг ашигладаг.

Хариуцлагатай CSS хүрээг ашигласнаар та өөр өөр төхөөрөмж болон дэлгэцийн хэмжээтэй нийцүүлэн вэбсайтынхаа үндсэн бүтцийг хурдан тохируулах боломжтой. Та бүх төхөөрөмж дээр тууштай байрлуулах боломжийг олгодог хүрээний сүлжээг ашиглан сайтынхаа элементүүдийг хялбархан зохион байгуулж болно.

🚀 Бүх төхөөрөмж дээр рэндэрлэх туршилт

Компьютер, таблет, ухаалаг гар утсан дээрх вэбсайтаа дэлгэцийн өргөн бүрт төгс зохицож байгаа эсэхийг шалгах нь чухал юм.

Ихэнх орчин үеийн хөтөч, тухайлбал Google Chrome болон Mozilla Firefox, хөгжүүлэлтийн нэгдсэн арга хэрэгслийг санал болгож байна. Эдгээр хэрэгслүүд нь вэбсайтын дүрслэлийг дүрслэн харуулахын тулд янз бүрийн төхөөрөмж, дэлгэцийн хэмжээг дуурайх боломжийг олгодог. Та хуудсан дээр хулганы баруун товчийг дараад "-г сонгосноор эдгээр хэрэгслүүдэд хандах боломжтой.шалгах" эсвэл "Элементийг шалгана уу".

зэрэг үнэгүй онлайн үйлчилгээнүүд байдаг BrowserStack болон CrossBrowserTesting Энэ нь олон төрлийн төхөөрөмж болон хөтөч дээр вэб сайтын дүрслэлийг шалгах боломжийг танд олгоно. Эдгээр үйлчилгээ нь танд вэбсайтаа өөр өөр виртуал эсвэл физик төхөөрөмж дээр үзэх боломжийг олгодог бөгөөд энэ нь төхөөрөмж тус бүр дээр хэрхэн харагдах талаар тодорхой ойлголт өгөх боломжийг олгодог.

Төхөөрөмжийн эмуляторууд болон симуляторууд нь бодит төхөөрөмжүүдийн шинж чанар, үйл ажиллагааг давтдаг програм хангамж юм. Жишээлбэл, iOS дээр тест хийхийн тулд та Apple-ийн төхөөрөмжүүдэд зориулсан Xcode эмулятор ашиглаж болно.

Android-д Android Studio эмулятор ашиглах боломжтой. Эдгээр хэрэгслүүд нь өөр өөр дэлгэцийн нягтрал бүхий виртуал төхөөрөмж дээр вэбсайтаа шалгах боломжийг олгодог.

🚀 Тогтмол хэмжээтэй элементүүдээс зайлсхий

Вэбсайтыг хариу үйлдэл үзүүлэхийн тулд тогтмол хэмжээтэй элементүүдээс зайлсхийх нь чухал юм. Үүнд хүрэх зарим зөвлөмжийг энд оруулав.

Хэмжилтийн уян хатан нэгжийг ашиглах: Элементүүдийн хэмжээг тодорхойлохын тулд пиксел (px) ашиглахын оронд хувь (%) эсвэл харах хэсэг (vh, vw) гэх мэт уян хатан хэмжих нэгжийг ашиглана уу. Энэ нь элементүүдийг дэлгэцийн хэмжээтэй пропорциональ хэмжээгээр нэмэгдүүлэх боломжийг олгодог.

Уян хатан тавиур ашиглах: Хариуцлагатай CSS хүрээнүүдийн нэгэн адил уян хатан сүлжээнүүд нь уян хатан багана, мөрүүдийг ашиглан дасан зохицох бүдүүвчийг үүсгэх боломжийг танд олгоно. Энэ нь дэлгэцийн хэмжээнээс хамааран элементүүдийг автоматаар өөрчлөх боломжийг олгодог бөгөөд энэ нь бүх төхөөрөмж дээр тогтвортой хэрэглэгчийн туршлагыг хангадаг.

Зургийн тогтмол өргөнөөс зайлсхий: Зургийн тогтмол өргөнийг зааж өгөхийн оронд CSS шинж чанарыг ашиглана уу "max-width: 100%;" зургийн савны хэмжээтэй пропорциональ хэмжээг өөрчлөх боломжийг олгох. Энэ нь зургуудыг өөр өөр төхөөрөмжид хальж, гажуудуулахгүйгээр зөв тохируулах боломжийг олгодог.

Ашиглах медиа асуулга: Медиа асуулга нь дэлгэцийн хэмжээнээс хамааран өөр өөр хэв маягийг ашиглах боломжийг олгодог CSS дүрэм юм. Төхөөрөмж бүр дээр үзэхийг оновчтой болгохын тулд дэлгэцийн өөр өөр нягтаршилд зориулсан элементүүдийн хэв маягийг тохируулахын тулд тэдгээрийг ашиглана уу.

🚀 Гар утасны навигацийг хялбаршуулна уу

Гар утасны навигацийг хялбаршуулж, хэрэглэгчийн туршлагыг сайжруулахын тулд дараах зөвлөмжийг дагаж мөрдөх шаардлагатай.

Гар утасны навигацийн цэсийг ашиглах: Уламжлалт навигацийн цэсийг гамбургер цэс гэх мэт гар утасны навигацийн цэсээр соль. Энэ төрлийн цэс нь дэлгэцийн эмх замбараагүй байдлыг багасгаж, хөдөлгөөнт хэрэглэгчдэд навигацийг илүү ойлгомжтой болгодог.

Навигацийн элементүүдийн тоог хязгаарлах: Гар утасны цэсэнд харагдах навигацийн зүйлийн тоог багасга. Хялбар чиглүүлэхийн тулд хамгийн чухал элементүүдийг тодорхойлж, тэдгээрт анхаарлаа хандуулаарай. Та урт цэснээс зайлсхийхийн тулд ижил төстэй зүйлсийг ангилалд багтааж болно.

Нэг түвшний навигац ашиглана уу : Хөдөлгөөнт төхөөрөмж дээр олон түвшний дэд цэс бүхий нарийн төвөгтэй унждаг цэсүүдээс зайлсхий. Үүний оронд нэг түвшний навигацыг сонгоорой, ингэснээр хэрэглэгчид олон түвшинд шилжихгүйгээр сайтын үндсэн хэсгүүдэд шууд шилжих боломжтой.

Тодорхой үйлдлийн товчлууруудыг ашиглана уу: Хэрэглэгчдийг сагсанд бүтээгдэхүүн нэмэх, маягт илгээх зэрэг тодорхой үйлдлүүдэд чиглүүлэхийн тулд тодорхой, хялбар дарж болох үйлдлийн товчлууруудыг ашиглаарай. Товчнууд нь хуруугаараа амархан дарахад хангалттай том эсэхийг шалгаарай.

Зөн совингийн дүрсийг ашигла: Гар утасны навигацийн цэсэн дэх үйлдэл эсвэл категориудыг илэрхийлэхийн тулд танигддаг дүрсүүдийг ашиглана уу. Сайн зохион бүтээсэн дүрс нь хэрэглэгчдэд урт шошго унших шаардлагагүйгээр навигацийн элементийн утгыг хурдан ойлгоход тусална.

🚀 Хаах

-ийн дизайн Хариуцлагатай сайтууд зайлшгүй шаардлагатай болсон бүх төхөөрөмж дээр чанартай хэрэглэгчийн туршлагыг хангах.

Уян хатан CSS нэгжийг ашиглах, медиа асуулга хийх эсвэл зургийг оновчтой болгох зэрэг шилдэг туршлагуудыг дагаж мөрдвөл ямар ч вэбсайтыг төгс зохицох боломжтой болгож чадна.

Эдгээр хэдэн энгийн дүрмийн ачаар та вэбсайтаа ширээний компьютер, таблет, ухаалаг гар утсан дээр оновчтой харуулах баталгаатай болно. Томруулж, жижигрүүлэх шаардлагагүй тав тухтай навигацийн хувьд!

Цаашид явахын тулд би ашиглахыг зөвлөж байна WordPress дээрх хүчирхэг WP Rocket залгаас. Энэ нь танд аль болох оновчтой болгох боломжийг олгоно таны сайтыг ачаалах хурд мэдрэмжтэй. Дасан зохицох чадвартай, хэт хурдан сайт бол гол түлхүүр юм хэрэглэгчийн туршлага өөгүй!

тусламж

А: Responsive дизайн гэж юу вэ?

Х: The responsive design вэб сайт хийх зорилготой вэб дизайны арга юм дасан зохицох, функциональ бүх төхөөрөмж болон дэлгэцийн хэмжээ. Энэ нь ширээний компьютер, таблет эсвэл ухаалаг гар утсан дээрх хэрэглэгчийн оновчтой туршлагыг хангахын тулд контент болон зохион байгуулалтыг автоматаар тохируулах боломжийг олгодог.

А: Вэбсайтыг хариу үйлдэл үзүүлэх нь яагаад чухал вэ?

Х: Вэбсайтыг хариу үйлдэл үзүүлэх нь бүх төхөөрөмж дээр тогтвортой, чанартай хэрэглэгчийн туршлагыг хангахад зайлшгүй шаардлагатай. Хөдөлгөөнт төхөөрөмжийн хэрэглээ нэмэгдэхийн хэрээр вэбсайтаа хэрэглэгчийн хүлээлтэд нийцүүлэн тохируулах, хайлтын системийн зэрэглэлийг сайжруулах нь маш чухал юм.

А: Хариуцлагатай вэб хөгжүүлэлтийн гол зарчим юу вэ?

Хариулт: Хариуцлагатай вэб хөгжүүлэлтийн гол зарчмууд нь уян хатан сүлжээ ашиглах, тогтмол хэмжээтэй элементүүдээс зайлсхийх, дүрсийг тохируулах, зургийн хэмжээнээс хамааран өөр өөр хэв маягийг ашиглахын тулд медиа асуулга ашиглах, гар утсан дээрх навигацийг хялбаршуулах зэрэг орно.

Асуулт: Хариуцлагатай CSS хүрээ гэж юу вэ?

Х: А CSS бүтэц Responsive нь хариу үйлдэл үзүүлэх вэбсайт үүсгэхэд хялбар болгодог CSS-ийн урьдчилан бэлтгэсэн загвар, хариу үйлдэл үзүүлэх бүрэлдэхүүн хэсгүүдийн багц юм. Bootstrap, Foundation, Bulma зэрэг эдгээр хүрээ нь уян хатан бүдүүвч сүлжээ, ашиглахад бэлэн CSS анги, хариу үйлдэл үзүүлэх бүрэлдэхүүн хэсгүүдээр хангадаг бөгөөд хөгжүүлэлтийн процессыг хурдасгадаг.

Асуулт: Би вэбсайтыг өөр өөр төхөөрөмж дээр хэрхэн харуулахыг хэрхэн шалгах вэ?

Х: Өөр өөр төхөөрөмж дээр вэб сайт хэрхэн харагдахыг шалгахын тулд та өөр өөр дэлгэцийн хэмжээг дуурайх боломжийг олгодог хөтчийн хөгжүүлэгчийн хэрэгслийг ашиглаж болно. Та мөн онлайн үйлчилгээ, төхөөрөмжийн эмулятор эсвэл симулятор ашиглах эсвэл бодит физик төхөөрөмж дээр тест хийх боломжтой.

А: Хөдөлгөөнт навигацийг хялбарчлах шилдэг туршлагууд юу вэ?

Х: Гар утасны навигацийг хялбарчлахын тулд гамбургер цэс гэх мэт гар утасны навигацийн цэсийг ашиглах, навигацийн зүйлийн тоог хязгаарлах, нэг түвшний навигац ашиглах, тодорхой үйлдлийн товчлууруудыг ашиглах, ачаалах хурдыг оновчтой болгох, зөн совингийн дүрсүүдийг ашиглах, навигацийг янз бүрийн зүйл дээр тогтмол туршиж үзээрэй. төхөөрөмжүүд.

А: Би одоо байгаа вэбсайтаа хэрхэн хариу үйлдэл үзүүлэх вэ?

Х: Одоо байгаа вэбсайтаа хариу үйлдэл үзүүлэхийн тулд та дасан зохицох бүтцийг бий болгоход хялбар болгохын тулд хариу үйлдэл үзүүлэх CSS хүрээг ашиглаж болно. Мөн та уян хатан хэмжилтийн нэгжийг ашиглахын тулд одоо байгаа CSS кодыг өөрчлөх, тогтмол хэмжээтэй элементүүдээс зайлсхийх, медиа асуулга ашиглан өөр өөр дэлгэцийн хэмжээтэй тусгай хэв маягийг ашиглах шаардлагатай болно.