Дасан зохицох вэб сайт дизайн нь өөр өөр төрлийн төхөөрөмж дээр нэг вэбсайтыг онлайнаар харуулахад тохиромжтой систем юм. Энгийнээр хэлбэл, энэ нь зөөврийн компьютер, ухаалаг гар утас болон бусад хэрэгслээр нэг вэб хуудсыг үзэх боломж юм.
Хүмүүс интернетэд холбогдсон янз бүрийн форматтай хэрэгсэлтэй болсноос хойш вэбэд хариу үйлдэл үзүүлэх нь зайлшгүй шаардлагатай болсон. Компаниуд, онлайн дэлгүүрүүд, тэр байтугай зүгээр л мэдээллийн сайтууд үзэгчдээ баярлуулахыг хичээдэг бөгөөд үүнд бүх талаараа дасан зохицдог. Хариуцлагатай дизайн нь тав тухтай байдлын асуудлыг шийддэг тул энэ нь зайлшгүй шаардлагатай ажлын хэсэг юм.
Responsive вэб дизайны онцлог
Дизайн тав тухтай байдал нь хэд хэдэн үндсэн шалгуураар тодорхойлогддог.
- Хэмжээ. Хариуцлагатай вэб сайтын дизайн нь өөр өөр төхөөрөмж дээр хуудсыг харуулахад бага зэргийн ялгаа байх ёстой тул үзсэн зураг, текст болон бусад элементүүдийн хэмжээ нь төхөөрөмжийн хэмжээтэй тохирч байх ёстой. Үүнийг хийхийн тулд вэб хөгжүүлэгчид дизайныг олон хувилбартай байхаар тохируулдаг.
- Агуулгын дасан зохицох. Сайтыг дүүргэх материал (зураг, видеоболон бусад мультимедиа элементүүд) нь дэлгэцийн чанарыг алдагдуулахгүйгээр шаардлагатай дэлгэцийн нягтралтай тохирч байх ёстой.
- Дизайн уян хатан байдал. Үзэж буй вэб хуудсаа өөрчлөх үед сайтын дизайныг хурдан тохируулах боломжийг олгодог элементүүдийг боловсруулахад оруулах. Жишээлбэл, хэрэглэгч хуудсыг дээш доош гүйлгэх, өөр өөр хэсгүүдэд шилжих эсвэл дэлгэцийн байрлалыг босоо байрлалаас хэвтээ болон эсрэгээр өөрчлөх боломжтой.
- Ашиглахад тохиромжтой байхын тулд эд зүйлсийг төхөөрөмжөөр хялбарчлаарай.
- Жижиг дэлгэцэн дээр чухал биш блокуудыг нуу.
Үндсэн мэдээлэл
Вэбсайт бүтээх нь програмчлалын хэлтэй холбоотой, учир нь тэдэнгүйгээр хийх боломжгүй. HTML болон CSS-ийг ашиглан хөтөч нь объектын бүтэц, дарааллыг (текст, зураг, видео) таньдаг - сайт ийм байдлаар үүсдэг.
CSS нь өнгө, хэв маяг, хэмжээ, фонт, зэрэгцүүлэх, дэвсгэр, дэвсгэр элемент, хэлбэр зэргийг хариуцдаг. HTML нь сайтын ерөнхий агуулга, бүтцийг хариуцдаг. Тиймээс вэб нөөцийг хамгийн чухал хоёр тайлбарын аргын нийлбэрээр бүтээдэг.
Харин CSS бол дизайны зайлшгүй хэрэгсэл юм. HTML-ээс илүү олон тооны функцуудтай:
- Олон хуудсууд, сайтын харагдах байдал, HTML баримт бичгийн дэлгэцийг хянадаг дизайны нийцтэй байдлыг хангана.
- Танд дизайн болон контентыг зэрэг хийх боломжийг олгоно.
- Олон төрлийн хэв маяг, чадварыг ашигладагөөр төхөөрөмж дээр үзэж байна.
- Зураг төслийн нарийн төвөгтэй шийдвэр гаргадаг.
- Өндөр хурдаараа онцлог.
Вэбсайтыг хөгжүүлэхийн тулд та зарим үндсэн ойлголтуудыг мэдэх хэрэгтэй.
CSS сонгогчийг шинж чанар болон форматын сонголтыг тодорхойлсон загварын нэрээр тэмдэглэнэ. Энэ нь хөтчид ямар тодорхой элементэд шинж чанарууд хамаарахыг хэлж өгдөг.
Өмч нь бүтцийн нэгж юм. Энэ нь гадаад параметрүүдийг (хэмжээ, байршил, өнгө, хэлбэр гэх мэт) тодорхойлдог бөгөөд тодорхой кодоор илэрхийлэгддэг.
Ганц объектыг гадаад төрх, байршлаар нь тодорхойлдог CSS шинж чанаруудын багц байдаг.
Эдгээр элементүүд нийлээд дараах схемийг бүрдүүлнэ:
Сонгогч { шинж чанар1: утга; өмч 2; утга }.
Бүдүүвчний хэмжээ, нягтрал
Дизайн хөгжүүлэлт нь Photoshop эсвэл бусад график программ дээр зураг төслийг бэлтгэхээс эхэлдэг. Тохиромжтой болгохын тулд зураг дээр модульчлагдсан торны тусгай тэмдэглэгээг оруулж, тусгай догол мөрийг ажиглав. Тиймээс вэб дизайнер нь ирээдүйн сайтын бүтэц, вэб элементүүдийн зөв зохион байгуулалтын зарчмуудыг зохион бүтээгчид харуулж байна.
Төхөөрөмжийн үндсэн төрлүүдэд зориулсан вэб дизайны мэдрэмжийн нарийвчлал, хэмжээ:
- Энэ загвар нь гар утасны зөвшөөрлөөр ажил эхлэх зарчмыг баримталдаг. Ухаалаг гар утасны загвар нь 460 × 960 пикселийн хэмжээтэй байна.
- Таблетын бүдүүвчийн хэмжээ 768 × 1024.
- Тэмдэглэлийн дэвтрийн хэмжээ 1280 × 802.
- Компьютерийн хэмжээ 1600 × 992.
Сайтын гар утасны хувилбар дээрбүх үндсэн функцийг хадгалахын зэрэгцээ аль болох хялбаршуулсан байх ёстой. Хэрэв зохион байгуулалтыг бүх хялбаршуулсан байдлаар онлайн дэлгүүрт зориулж бэлтгэж байгаа бол үндсэн тайлбар, бүтээгдэхүүний каталог, захиалгын сонголт, худалдааны тэрэг гэх мэт - бүрэн ажиллагаатай ажиллахад шаардлагатай бүх элементүүд, компьютер дээр бүрэн форматаар үзэхтэй адил. Мобайл хувилбарын тав тухтай байдал нь энд ачаалах үед цаг хэмнэхийн тулд нэмэлт хуудаснаас зайлсхийх боломжтой юм.
Дасан зохицох контентод html кодыг ашигласнаар үнэхээр шаардлагагүй зарим элементүүдийг нууж болно. Жишээлбэл, өндөр нарийвчлалтайгаар сайт нь бүтээгдэхүүний картыг түүний тайлбар, үнэ, хүргэлтийн мэдээлэл, "Сагс" -д нэмэх боломжтой харуулдаг. Мобайл нягтаршилтай бол үйл явцыг зураг, үнэ болон худалдан авах товчлуур болгон хялбаршуулсан.
Мэдрэмжтэй дизайн хийх дунд болон хамгийн бага нарийвчлал нь хэрэглэгчийн унших, үзэхэд хялбар байдлыг харгалзан үзэх ёстой.
Бүдүүвч
Дасан зохицох загвар зохион байгуулалтын зорилго нь уян хатан зохион байгуулалтыг бий болгох, эсвэл "резин загвар" гэж хэлдэг. Доод шугам нь нэг оронтой хуудасны хэмжээгээр биш, харин бүх төхөөрөмж дээр хялбархан үзэхийн тулд загварын пропорциональ шахалтаар байна.
Энэ нь ихэвчлэн CSS дээр бүтээгдсэн. Хөгжүүлэлтийн явцад дэлгэцийн хэмжээсийн хяналтын цэгүүдийг тодорхойлдог. Тиймээс үлдсэн объектуудын өргөнийг тодорхойлно. Үүнийг хийхийн тулд хуудасны өргөнийг css max-width шинж чанараар тохируулах бөгөөд эдгээр шалгуураас хамааран бусад элементүүдийн хэмжээг хувиар сонгоно. Жишээлбэл, үндсэн дээр блокийн хэмжээхуудас нь 600px, хажуугийн блокийн өргөн (сайтын хажуугийн хэсэг) нь 400px, агуулгын өргөн нь 60%, хажуугийн самбарын өргөн нь 40% байна.
Хэд хэдэн төрлийн мэдрэмжтэй бүдүүвчүүд байдаг. Онцлог болон хийцээс хамааран тус бүрийг дангаар нь сонгоно.
Үзсэн:
- Дэлгэцийн нягтрал багассан үед блокуудыг боох боломжийг олгодог бүдүүвчийн төрөл. Олон баганатай сайтууд дээр нэмэлт блокуудыг дэлгэцийн доод хэсэгт зөөдөг.
- Зөвшөөрөл бүрт тусдаа загвар гаргах үед. Энэ төрлийн мэдрэмжтэй дизайн илүү удаан хугацаа шаарддаг ч хамгийн уншигдахуйц загвар юм.
- Бүх элементийг томруулах зорилготой энгийн загвар. Энэ нь уян хатан биш.
- Дэлгэцийн байрлалыг өөрчлөх үед нэмэлт функц гарч ирэх үед уг самбарын төрөл нь гар утасны программуудад ашиглахад тохиромжтой.
Хариуцлагатай давхаргууд үүсгэх нь ажлын зөвхөн нэг хэсэг юм. Дасан зохицох зураг нь тусдаа асуудал бөгөөд тэдгээрийг шийдвэрлэх өөрийн гэсэн асуудал, арга барилтай байдаг.
Нэг зургийг өөр өөр дэлгэцийн нягтралтайгаар тодорхой харуулах ёстой. Энд нэг асуудал байна - нарийвчлалын өөрчлөлтөөс үл хамааран зураг үргэлж ижил хэвээр байгаа эсэхийг хэрхэн баталгаажуулах вэ. Энэ тохиолдолд энгийн CSS код оруулах нь хангалтгүй.
Жишээ нь: img {max-width: 250px;} - энд та зураг өөрөө биш, харин зураг агуулсан савны хэмжээ хязгаарлагдмал байх аргыг хэрэглэнэ. Энэ нь иймэрхүү харагдах болно: div img {хамгийн их өргөн: 250px;}. Энэ арга нь асуудлыг шийддэгжижиг зургийн зохион байгуулалт, гэхдээ том дүрслэлд тохиромжгүй.
Тиймээс олон хөгжүүлэгчид серверийг хэт ачаалалгүйгээр дурын дүрсийг тохируулах боломжийг олгодог JavaScript хэлийг ашиглахыг илүүд үздэг. Javascript нь олон тооны өөр скриптүүдийг санал болгодог.
Responsive байршлын давуу болон сул талууд
Эерэг тал:
- Бүх элементийн байршлыг хадгал. Энэ нь хэрэглэгч сайтын бүрэн хувилбарыг ашиглахад тохиромжтой.
- Домэйн болон хаягийг хадгал.
- Бусад зөвшөөрлийн форматын бүрэн тохируулга.
Сөрөг:
- Функциональ уян хатан чанар алдагдсан
- Мэдээллийн хэт ачаалал нь вэб нөөцийг удаан ажиллуулахад хүргэдэг бөгөөд энэ нь олон хэрэглэгчдийг илүү хурдан сонголт руу шилжүүлэхэд хүргэдэг.
Вэбсайт үүсгэх
Сайтын бүтэц нь хэд хэдэн хэсэг, блокуудад хуваагдана. Уламжлал ёсоор, зохион байгуулалт нь сайтын дээд хэсэг (толгой), лого, цэс, агуулгын блок, сайтын эцсийн хэсгээс (жишээлбэл, дэлгэрэнгүй холбоо барих мэдээлэл) бүрдэнэ. Энгийн загвараас хэрхэн хариу үйлдэл үзүүлэх вэб сайт дизайн хийхийг харцгаая.
Бичих туслах шошго:
- wrapper - бүх загварын элементүүдийг нэгтгэсэн шошго;
- толгой h1 - лого;
- толгой - цэс болон бусад чухал элементүүдийн гарчиг;
- контент - блоклох;
- colLeft - агуулгын хэмжээ;
- баруун баруун - хажуугийн хэсэг (хажуугийн багана);
- footer - сайтын эцсийн хэсэг;
- медиа дэлгэц - багцХүссэн нягтрал.
Сайт бичих үед эдгээр элементүүд хэрэгцээ шаардлагаас хамааран өөр дарааллаар шилжиж болно. Жишээлбэл, өндөр нарийвчлалтай үед цэсийг босоо байдлаар харуулж болно. Мобайл хувилбарт цэсийг хэвтээ байрлалд гулсуулж байхаар зохион байгуулалтыг хийж болно.
- viewport - дизайны жижиг хувилбарт текстийн хэмжээг хадгалах боломжийг олгодог шошго. Энэ нь шошгоны хооронд байрладаг.
- max-width - 1000 пикселээс дээш нягтралтайгаар сунгахаас зайлсхийхийн тулд сайтыг оновчтой болгох.
Бүдүүвчийг хэрэгжүүлэхэд jQuery номын сан нь блокуудын хэв маяг, бүтцийг өөрчлөх шаардлагатай үед маш их тусалдаг.
Responsive болон гар утасны дизайны ялгаа нь юу вэ
Бүрэн ойлгохын тулд эдгээр хоёр ойлголтын хооронд төөрөгдөл гарах нь ховор биш тул хэд хэдэн жишээ жишээг авч үзье.
Мобайл хувилбар нь дэд домайнтай үндсэн сайтын аналог гэдгийг та ойлгох хэрэгтэй. Сайтын гадаад танилцуулга нь хэв маяг, функцийг бүрэн давтдаг бол хувилбар нь шаардлагатай элементүүдийг багасгасан тул бүтэц, агуулга нь үндсэн хувилбараас ялгаатай байж болно.
Хариуцлагатай дизайн нь төхөөрөмжийн бүх нягтралд тохиромжтой. Энэ нь өргөтгөх боломжтой бөгөөд үзэх нөхцөлөөс үл хамааран зөв дүрслэгддэг.
Эдгээр нь сайтын хоёр өөр танилцуулга бөгөөд аль нь дээр вэ гэсэн маргаан үргэлжилсээр байна. Одоогоор тодорхой шийдвэрт хүрээгүй байгааг хэлэх хэрэгтэй. Хэн нэгэн энэ загварыг магтаж, загварын чиг хандлага, олон давуу талыг онцолж байна. Хөдөлгөөнт хувилбар нь мэдрэмжтэй дизайнд байдаггүй хэд хэдэн давуу талтай. Тиймээс эхлээд та үндсэн хэрэгцээгээ ойлгох хэрэгтэй.
Ашиг тус
Мэдрэмжтэй дизайн гар утаснаас юугаараа дээр вэ?
Олон талт байдал. Зах зээлийн ийм галзуу өсөлттэй өнөө үед хэрэглэгчдийн хүслийг хангахуйц мэдээллийг өөр хэлбэрээр харуулах шаардлагатай байна. Хариуцлагатай загвар нь энэ асуудлыг шийддэг.
Хайлтын системд үр дүнтэй сурталчилгаа. Дасан зохицох төхөөрөмжийн гол давуу талуудыг юу гэж нэрлэж болохгүй вэ. Хайлтын системүүд хэрэглэгчдэд хариу үйлдэл үзүүлэх вэб сайт өгөхийг илүүд үздэг.
Ашиглах боломж. Хариуцлагатай дизайн нь ихэвчлэн шилдэг дизайны шийдлээр бүтээгдсэн бөгөөд энэ нь хэрэглэгчдийн нүдэнд харагдах сайхан бэлэг юм.
Төслийг хэрэгжүүлэх болон ашиглахад хялбар, энгийн байдал.
Хөрвөлтийн хувь хэмжээ сайн. Дасан зохицох загвартай бол харуулах илүү олон боломж байгаа тул хөрвүүлэлт өөрөө нэмэгддэг.
Эдийн засаг. Энэ нь тусдаа гар утасны хувилбар үүсгэж сурталчлахаас харьцангуй хямд юм.
Мобайл хувилбарын давуу болон сул талууд
Мэдрэмжтэй гар утасны загварыг бий болгох нь олон талт байдал, тогтвортой байдлыг шаарддаг. Юуны өмнө ажлын даалгаврыг нарийвчлан бичихийг зөвлөж байна, энэ нь мэдээжийн хэрэг шаардлагагүй ажил хийхээс зайлсхийх, цаг хугацаа хэмнэхээс гадна сайтыг байршуулах серверийн онцлогийг харгалзан үзэх болно..
Мобайл мэдрэгчтэй дизайн тодорхой давуу болон сул талуудтай.
Давуу тал:
- Хэрэв танд бэлэн сайт байгаа бол гар утасны хувилбарын загварыг эхнээс нь боловсруулах шаардлагагүй. Энэ бүдүүвчийг шаардлагагүй функцээс чөлөөлөх цөөн хэдэн өөрчлөлт хийх боломжтой.
- Бүх төрлийн хялбаршуулсаны улмаас мобайл хувилбарыг татаж авахад илүү хурдан гэж үздэг.
- Хэрэглэгч бүх контентын хамгийн чухал мэдээллийг хардаг.
- Хурдан хэрэгжилт. Та шошго, код мэдэхгүй байсан ч гар утасны дасан зохицох боломжтой залгаасууд байдаг.
- Хайлтын системийн сонголтууд нь дүн шинжилгээ хийхэд бага хугацаа зарцуулдаг тул дасан зохицох хувилбаруудыг илүүд үздэг.
Сул тал:
- Бүх мобайл хувилбарууд гар утасны төхөөрөмжийн нарийвчлалтай таарахгүй байж магадгүй. Мэдээжийн хэрэг сайт нээгдэх болно, гэхдээ дэлгэцийн нягтрал нь байршилтай үргэлж таарч байдаггүй. Заримдаа ухаалаг гар утасны сайн загвар нь таблет хэлбэрээр нээгдэхэд өөр харагдаж болно.
- Мобайл хувилбарууд нь тусдаа төлбөртэй домэйн шаарддаг.
- Агуулга нийтлэхэд бага зэргийн асуудал байна. Хэрэв нэг дор хэд хэдэн хувилбар байгаа бол агуулгыг бүх форматад нэгэн зэрэг тохируулах хэрэгтэй. Үндсэн сайт дээр шинэ материал оруулж, гар утасны хувилбарт хуулж авах нь хулгайлсан гэж үзэж болно. Энэ асуудлаас зайлсхийхийн тулд та нөөцийн холболтыг нотлох шаардлагатай байж магадгүй.
Хэрэгжүүлэх арга
Хэрэгжүүлэх үндсэн аргууд:
- Бүдүүвч, бүдүүвчийн загварыг гаргасны дараа шаардлагатай хэмжээсүүдийг ашиглан ачаална.операторын сайт болон үндсэн код. Энэ нь дунд болон жижиг хувилбаруудыг (таблет, ухаалаг утас гэх мэт) үүсгэхэд ашигладаг сонгодог арга юм.
- BootStrap нь дасан зохицох хэрэгслүүдийн энгийн бөгөөд ойлгомжтой багц юм. Landing Page болон бусад тийм ч төвөгтэй биш вэб төслүүдийн хувилбаруудыг бий болгоход тохиромжтой. Энэ нь интерфэйсийн функцэд олон янзын хэв маягийг ашиглах сайхан боломжийг олгодог.
- Responsive Grid System нь олон талт хэрэглүүрийн алдартай багц юм. Хэрэглэхэд хялбар, гүнзгий мэдлэг шаарддаггүй. Олон төрлийн инфографик багтсан.
- GUMBY - Уян хатан хариу үйлдэл, гайхалтай хэрэглүүрээр сайрхдаг CSS хүрээ.
- Күүки - танд мэдрэмжтэй зургуудыг хэрэгжүүлэх боломжийг олгоно. Хөтөчөөс хүссэн файлуудыг автоматаар дагалдана.
- ExpressionEngine нь мэдрэмжтэй зураг үүсгэх өөр нэг арга юм. Төхөөрөмж нь хөдөлгөөнт бөгөөд зургийг шаардлагатай нягтралтайгаар өөрчлөх чадвартай эсэхийг тодорхойлно.
- ProtoFluid - Прототипийг хурдан гаргах боломжтой. Бүх төрлийн төхөөрөмжид тохиромжтой.
