Өдрийн мэнд, өнөөдөр бид дасан зохицох вэбсайтын зохион байгуулалтын талаар ярих болно. Энэ нь яагаад ийм шаардлагатай бөгөөд сайт бүрт байх ёстой вэ, энэ нь юугаараа ялгаатай вэ? гар утасны зохион байгуулалтдасан зохицох чадвараас. Олон хүмүүс энэ байршлын сонголт гэж юу болох, жишээлбэл, сайтын гар утасны хувилбараас юугаараа ялгаатай болохыг андуурч эсвэл ойлгоогүй хэвээр байна.

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

2015 оны 4-р сарын 21-ээс эхлэн Google сайтын дасан зохицох загварт суурилсан сайтуудыг эрэмблэх шинэ аргуудыг танилцуулж байна. Хэрэв таны сайт мэдрэмжтэй дизайнгүй бол таны нөөц хайлтын үр дүнд буурах болно Хайлтын систем. Энд бол гайхамшиг юм хөдөлгөөнт төхөөрөмжүүд.

Таны сайт бүх төхөөрөмж дээр адилхан харагдах ёстой. Бүгдэд бүрэн зориулав! гар утаснаас хүртэл өндөр нарийвчлалтайхянах. Үндсэндээ том дэлгэцтэй холбоотой асуудал байхгүй, ямар ч байсан тэнд бүх зүйл тодорхой, гэхдээ таблет, гар утасны асуудал байдаг. Сайтуудыг жижиг дэлгэц дээр зөв харуулахгүй байгаа нь хэрэглэгчдэд ихээхэн хүндрэл учруулдаг.

Монитор дээр сайтын хуудас нь нэг форматаар, таблет дээр нөгөө форматаар, утсан дээр гурав дахь хэлбэрээр харагдах ёстой. Үүнээс гадна хэвтээ гүйлгэх мөр байх ёсгүй. Сайт нь өөрөө төхөөрөмжийн дэлгэцэнд дасан зохицох ёстой.Энэ бол сайтын дасан зохицох зохион байгуулалтын гоо үзэсгэлэн юм.

Ер нь юуны тухай асуултанд нь, дасан зохицох зохион байгуулалт гэж юу вэ. Таны сайт дэлгэцэнд тааруулж тохируулсан НЭГ кодыг ашиглан НЭГ мэдрэмжтэй дизайнтай байх ёстой. руу шилжих гар утасны хувилбарэнэ нь цаашид ажиллахгүй, энэ нь зөв биш юм. нээж болно google-ийн гарын авлагамөн мэдээллийг илүү дэлгэрэнгүй уншина уу.

Таны сайтыг нээсэн хэрэглэгч томруулж, жижигрүүлэх шаардлагагүй. Ийм тохиолдлууд ихэвчлэн хүмүүсийг дарамталдаг, тэд эвгүй байдалд ордог бөгөөд тэд танай сайтыг хурдан хаахыг хүсдэг. Ийм тохиолдлууд тусгаарлагдахгүй бөгөөд энэ нь маш муу харагдах болно зан үйлийн хүчин зүйлүүдблог эсвэл вэбсайт. Үүнтэй ижил жишээ нь зочин унших текстэд хамаарна. Текстийг үзэх үед хэвтээ гүйлгэх шугам байхгүй байхаар зохион байгуулалт нь масштабаа өөрчлөх ёстой.

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

Дасан зохицох зохион байгуулалт гэж юу вэ

Мэдээжийн хэрэг, бидний хүн бүрийн гарт монитор, таблет, утас байдаггүй. Сайтдаа дасан зохицох эсэхийг шалгахын тулд бүх төрлийн төхөөрөмж байх шаардлагагүй. Хэрэв та хэрэглэж байгаа бол Google хөтөч Chrome, та өөрөө нэртэй өргөтгөл суулгаж болно Цонхны хэмжээг өөрчлөх. Үүний тусламжтайгаар та өөрийн мэдрэмжтэй дизайны сонголтуудын ихэнхийг хурдан турших боломжтой.

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

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

Туршлагаас харахад та бараг бүх сайтаас алдаа олж болно. Зарим нь муруй логотой, зарим нь маш нарийхан талбартай тайлбартай гэх мэт. Ялангуяа ядаргаатай нь утсаар сэтгэгдэл үлдээх нь бодитой бус сайтууд юм. Энэ нь намайг хааж, дахиж нээхгүй байхыг хүсдэг. Энэ бол хасах нэг сэтгэгдэл бөгөөд над шиг нэгээс олон хүн байгаа нь гарцаагүй.

Энэ нь зөвхөн тэдгээрт төдийгүй бүх хуудсыг хэвийн харуулахад зориулагдсан бөгөөд таны сайтын дасан зохицох зохион байгуулалтыг бүх төхөөрөмж дээр хийх ёстой. Бүх хэсгүүд, тайлбар бүхий бүх блокууд, бүх хуудаснууд, сайтын толгой хэсэг, сайтын хөл болон Онцгой анхааралтаны цэсэнд үлдээсэн байх ёстой.

Байршлын жишээ

Би дасан зохицох сайтын жижиг жишээг өгөх болно, би хайлтаар шинжлэх ухааны нудрах аргаар энэ сонголтыг аяндаа олсон. Энэ нь ямар загвар байсан, хаанаас олж авсныг би хараагүй, одоо асуулт өөр байна. Би энэ сонголтод үнэхээр дуртай, бүгд өөрийн гэсэн хэв маягтай. Монитор дээр сайт нь нэг хэлбэрээр харагддаг, iPhone дээр энэ нь огт өөр харагдаж байна.

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

Хариуцлагатай сайтын энэ жишээнд бүх зүйл байрандаа, бүх зүйл жигд, үзэсгэлэнтэй. Дээд талд хуруугаа дарахад нээгдэх цэс, дараа нь блогын тайлбар, сайтын хайлт, гарчиг, шинэчлэлтийн захиалга байна. Мэдээний жагсаалтыг доор харуулав. Гоо сайхан ... үнэхээр бүх зүйлийг бодож үзсэн.

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

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

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

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

1. Өөрийнхөө хариу үйлдэл үзүүлэх байршлыг хэрхэн хийх вэ.
2. Хэвлэл мэдээллийн асуулга гэж юу вэ.
3. Хэвлэл мэдээллийн асуулгыг хэрхэн зөв ашиглах вэ.
4. Хэрхэн мэдрэмжтэй цэс хийх вэ.
5. Хэрхэн мэдрэмжтэй галерей хийх вэ.
6. Мөн өөр олон зүйл.

Хэрэв та энэ сэдвийг гүнзгийрүүлэн судлахаар шийдсэн бол Бен Фрейний Html5 ба CSS3 ямар ч хөтөч, төхөөрөмжид зориулсан вэб сайт хөгжүүлэх номны хичээлүүд эхлэхэд тохиромжтой. Үүн дээр та мэдрэмжтэй дизайны талаар бүх зүйлийг сурах болно, үүний ачаар сайтууд бүх төхөөрөмж дээр үзэсгэлэнтэй харагдах болно. Өндөр сайн ном, энэ нь А-аас Я хүртэлх бүх үйл явцыг тодорхойлдог.

Хэвлэл мэдээллийн асуулга гэж юу вэ?

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

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

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

@media (хамгийн их өргөн: 1010px) ба (мин-өргөн: 992px)

Хариуцлагатай байршлын жишээ

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

Загвар бүхий шинэ файл үүсгэх (үүнийг холбох нүүр хуудас) эсвэл байгаа файлд медиа асуулга нэмэх. @media (хамгийн их өргөн: 770px) - Дэлгэцийн хамгийн дээд өргөн нь 770px. Мөн бид энэ саванд өгөгдсөн дэлгэцийн өргөнд шаардлагатай бүх өөрчлөлтийг нэмнэ.

@media (хамгийн их өргөн: 770px) ( их бие, html ( халих-х: далд; хамгийн бага өндөр: 960 пиксел; дэвсгэрийн хэмжээ: 100%; ) #mail_bg_horizontal div (зүүн: 274px; байрлал: харьцангуй; дээд: 40px; өргөн: 340px; ) #mail_bg_horizontal .module_subscribe зураг ( padding-top: 46px; ) #footer_menu (дэлгэц: none; ) #header (background-size: 100%; padding-top: 48%;) #logo-site ( top) : -60px; үсгийн хэмжээ: 7vw; өргөн: 100%; захын зай: 10px;) #лого сайтын зай(дэлгэц:дотор блок; padding-left:10px;) #slogan( дээд: -77px; үсгийн хэмжээ : 3vw; захын зай: 10px;)

@media (хамгийн их өргөн: 770px ) ( бие, html ( халих - x : далд ; мин - өндөр: 960px; дэвсгэр хэмжээ: 100%; #mail_bg_horizontal div ( зүүн: 274px; албан тушаал: харьцангуй; дээд: 40px; өргөн: 340px #mail_bg_horizontal .module_subscribe зураг ( дэвсгэр - дээд: 46px; #footer_цэс ( дэлгэц: байхгүй; #толгой (арын хэмжээ: 100%; дэвсгэрийн дээд хэсэг: 48%;) #лого сайтын зай(дэлгэц:дотор блок; padding-left:10px;)

Одоо бид цаашаа явлаа, хамгийн ихдээ 770 пиксель өнгөрч, бид жижиг өргөн рүү шилжлээ. @media (хамгийн их өргөн: 650px) - бид 650px-ийг өргөжүүлэхэд шаардлагатай бүх өөрчлөлтийг нэмнэ. Бүх зүйл ижил аргаар явагддаг, зөвхөн хамгийн ихдээ 650 пикселийн өргөнтэй. Энэ медиа асуулгад шаардлагатай бүх өөрчлөлтийг нэг нийтлэг саванд нэмсэн.

@media (хамгийн их өргөн: 650px) ( #холбогдох_буудлууд (доод хүрээ: 1px цул #ccc; хүрээ-дээд: 1px цул #ccc; дүүргэгч дээд: 20px; өргөн: 545px; ) хүрээ: дунд биш; өндөр: 28px ; зүүн: 93px; байрлал: харьцангуй; дээд: -12px; өргөн: 159px; ) #толгой .wrapper ( өргөн: 100%;) #толгой .боодол > nav ul > li ( хөвөх: байхгүй; өргөн: 100%; захын зай -зүүн: 0; текстийг зэрэгцүүлэх: төвд; ))

@media (хамгийн их өргөн: 650px ) ( #Холбоотой бичлэгүүд ( дэвсгэр - дээд: 20px; өргөн: 545px; #mail_bg_horizontal .module_subscribe товч ( хил : дунд зэргийн байхгүй ; өндөр: 28px; зүүн: 93px; албан тушаал: харьцангуй; дээд: - 12px; өргөн: 159px #толгой .wrapper (өргөн: 100%;) #толгой .wrapper > nav ul > li ( хөвөх: байхгүй өргөн: 100% захын зай - зүүн: 0; текст - зэрэгцүүлэх: төв;

Үүний дараа дараагийн өргөн рүү шилжих, жишээлбэл 500 пиксел. Бид энэ саванд хамгийн ихдээ 500 пикселийн өргөнтэй дэлгэцэн дээр багтах шаардлагатай бүх шинж чанаруудыг нэмнэ. @media (хамгийн их өргөн: 500px).

@media (хамгийн их өргөн: 500px) ( их бие > #контент > .wrapper .navigation > .next (арын дэвсгэр: rgba(0, 0, 0, 0) url("images/bow_right.png") давтагдахгүй гүйлгэх 0 0; дэлгэц: байхгүй; хөвөх: зүүн; өндөр: 30 пиксел; зүүн талын зай: 1 пиксел; захын дээд: -4 пиксел; өргөн: 34 пиксел; ) #mail_bg_horizontal .module_subscribe товч (хүрээ: дунд зэрэг; өндөр: 28px; зүүн: 96px ; байрлал: харьцангуй; дээд: -12px; өргөн: 159px;))

@media (хамгийн их өргөн: 500px ) ( бие> #контент > .wrapper .navigation > .next ( дэвсгэр: rgba (0, 0, 0, 0) url ("images/bow_right.png") үгүй ​​- давтан гүйлгэх 0 0; дэлгэц: байхгүй; хөвөх: зүүн; өндөр: 30px захын зай - зүүн: 1px; захын зай - дээд: - 4px; өргөн: 34px #mail_bg_horizontal .module_subscribe товч ( хил : дунд зэргийн байхгүй ; өндөр: 28px; зүүн: 96px; албан тушаал: харьцангуй; дээд: - 12px; өргөн: 159px ) )

Төгсгөлд нь бид медиа асуулгын өргөнийг 400 пиксел болгон багасгадаг. Энэ саванд бид өгөгдсөн өргөнд шаардлагатай бүх өөрчлөлтийг зааж өгнө. @media (хамгийн их өргөн: 400px). Нэмэлт болгоны дараа бид юу болсныг шалгадаг. Та хүссэн үедээ файлын хэв маягийг өөрчилж, тохируулга хийх боломжтой.

@media (хамгийн их өргөн: 400px) ( #толгой ( padding-дээд: 61%;) #mail_bg_horizontal div (дээд: 11px; зүүн: 37px; өргөн: 174px; үсгийн хэмжээ: 13px;) #mail_bg_horizontal ( module_subscribe . :харьцангуй; дээд:-15px; зүүн:-69px;) #mail_bg_horizontal .module_subscribe товч (дээд: -10px; зүүн: 18px;) #mail_bg_horizontal (өндөр: 186px;) #холбогдох_мэдээлэл (хязгаар-доод: 1px хатуу #ccc; хилийн дээд: 1px хатуу #ccc; padding-top: 1px; өргөн: 255px; ))

@media (хамгийн их өргөн: 400px ) ( #толгой (дээр нь дүүргэх: 61%;) #mail_bg_horizontal div (дээд: 11px; зүүн: 37px; өргөн: 174px; үсгийн хэмжээ: 13px;) #mail_bg_horizontal .module_subscribe (байрлал:харьцангуй; дээд:-15px; зүүн:-69px;) #mail_bg_horizontal .module_subscribe товч (дээд: -10px; зүүн: 18px;) #mail_bg_horizontal (өндөр: 186px;) #Холбоотой бичлэгүүд ( хүрээ - доод : 1px хатуу #ccc; хүрээ - дээд : 1px хатуу #ccc; дэвсгэр - дээд: 1px; өргөн: 255px

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

Шинэчлэгдсэний дараа Google роботын css файлууд, залгаас файлууд, сэдэв, скриптүүд болон зургуудад хандах хандалтыг нээхийг зөвлөж байна, үүний дараа л та шалгалтыг амжилттай давах боломжтой.Үүний тулд та шаардлагатай файлуудын бүх замыг нээх хэрэгтэй. robots.txt файлыг ашиглан робот тэднийг харах боломжтой. Миний robots.txt дээрх жишээ энд байна:

/wp-content/themes/*. jpg

Зөвшөөрөх : / wp - агуулга / сэдэв / * . png

Би 2015 оны эхээр сайтын дасан зохицох загвар зохион бүтээхэд сонирхолтой тохиолдол гарсан. Үйлчлүүлэгч бүх үгсийг маш нухацтай авч үзсэн бөгөөд миний түүнд Chrome-ын нэмэлт дээр үзүүлсэн дэлгэцийн бүх нягтралд тохирсон дизайн хийхийг хүссэн. Би үйлчлүүлэгчийн хүсэл эрмэлзэлтэй маргаагүй бөгөөд үүнийг бүх боломжит хувилбаруудад бүрэн тохируулсан. Эзэмшигч - Барин, үнэнийг хоёр дахин төлсөн.

Хариуцлагатай дизайн psd файл

Хэрэв та өөртөө зориулж шинэ өвөрмөц дизайн захиалахыг хүсч байвал энэ нь тийм ч чухал биш боловч өөрийн хүсэл эрмэлзэлийнхээ psd загвартай байхыг зөвлөж байна. AT PSD файлХөдөлгөөнт төхөөрөмж, таблетуудад зориулсан бүрэн бэлэн загвар байх болно. Зохион бүтээгч таны түүнээс юу хүсч байгааг харж, ойлгох болно. Хэрэв та өөрөө PSD зураг зурах боломжгүй бол. мэргэжлийн хүмүүс эсвэл чөлөөт солилцоонд хандаарай. Хөрөнгийн бирж дээр та ийм төрлийн ажлыг хийх хүсэлтэй, бага хэмжээний төлбөртэй олон хүнийг олох болно. Та бэлэн схемийг эхнээс нь бүрэн зурах шаардлагагүй, дасан зохицох загвар нь их хүчин чармайлт шаарддаггүй.

Сайтын цэс хэрхэн харагдах, түүнийг дагасан зүйл гэх мэт. Заримдаа зарим блокуудыг хэрэгжүүлэх нь тийм ч хялбар биш бөгөөд хэрэв таны ажил дэмий хоосон байвал ичгүүртэй байх болно. Ажлаа мэддэг, ойлгодог хүмүүс нь холбогдоорой гэдгийг дахин сануулъя.

PSD зохион байгуулалтын шаардлага

Загвар зохион бүтээгчээс зураг төсөл захиалахаасаа өмнө эхлээд түүн дээр юу харахыг хүсч байгаагаа тодорхойл. Ирээдүйд аль хэдийн хийгдсэн ажлыг засахгүйн тулд юу, хаана байрлуулахаа өөрөө шийдээрэй. Танд блог цэс хаана байх вэ, сайтын хайлт хаана байх вэ (таны хувилбарт энэ нь танд хэрэгтэй юу). Бусдаас харахад олон хүн хажуугийн хөндлөвчөө золиослодог. Үүний үр дүнд утсан дээр цэс, хайлт, бичлэгийн жагсаалт бүхий блок нээгдэнэ. Дээр Энэ мөчэнэ бол хамгийн их хэрэглэгддэг сонголт юм.

Мэдээжийн хэрэг, та догол мөр, хил хязгаарын талаар юу ч ойлгохгүй байна ... зураг төсөл дэх стандартын дагуу юу, яаж байх ёстой вэ (энэ нь танд хэрэггүй), гэхдээ зарим зүйлд анхаарлаа хандуулаарай. Энэ нь дизайнерт зориулсан TOR-ийн төслийг боловсруулахаас өмнө холхивчоо авахад тусална.

1. Байршил нь форматтай байх ёстой PSD(Өөрөөр нь).
2. Загварын элемент бүр нь тусдаа давхарга дээр байх ёстой.
3. Хэт олон зураг оруулах хэрэггүй.
4. Хэт олон фонт бүү ашигла.
5. Стандарт фонт ашиглах.
6. Бүх зүйл зөвхөн зайлшгүй шаардлагатай байдаг.
7. Нэмэлт зүйл байхгүй.
8. Өөрийнхөө унадаг цэсийг гарга.

Хамгийн түгээмэл дэлгэцийн нягтрал

Өмнө дурьдсанчлан, бүх дэлгэцийн нягтралд зориулж сайтыг бүрэн өөрчлөх шаардлагагүй. Хамгийн их эрэлт хэрэгцээтэй байгаа хүмүүсийг сонгоход хангалттай. Мэдээжийн хэрэг, энэ бүхэн таны хүслээс хамаарна ... хүссэн бүхнээ хий). Би хамгийн түгээмэл дэлгэцийн сонголтуудыг (Хамгийн бага өргөн ба хамгийн их өргөн) харуулсан хэдэн жишээ өгөхийг хичээх болно. Үнэн хэрэгтээ, зөвхөн заасан сонголтуудыг анхаарч үзэх хэрэгтэй, үүнээс арай илүү олон сонголтууд байдаг.

• Ухаалаг гар утасны хөрөг ба ландшафт (хамгийн багадаа 320 пиксел - хамгийн ихдээ 480 пиксел);
• Хөрөг болон ландшафтын таблетууд (хамгийн багадаа 768 пиксел - хамгийн ихдээ 1024 пиксел);
• Компьютер, зөөврийн компьютер (хамгийн багадаа 768 пиксел - хамгийн ихдээ 1024 пиксел);
• Компьютер ба зөөврийн компьютер (хамгийн багадаа 1824 пиксел);

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

Кодын зарим хэсгийг оруулсны ачаар загвар нь байнга асуудалтай байдаг IE зэрэг бүх хөтөч дээр хэвийн харагдах болно. Мөн joomla эсвэл wordpress ямар хөдөлгүүртэй байх нь хамаагүй. Дашрамд хэлэхэд, WordPress хөдөлгүүр дээр дасан зохицох боломжтой вэбсайтын зохион байгуулалтыг хийх нь миний хувьд таатай байна.

Сайн байцгаана уу, энгийн зочид, блог сайтын байнгын уншигчид!

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

Өгүүллийн товч тойм:

Өмнөх нийтлэлдээ яагаад хэрэгтэй байгаа талаар би аль хэдийн бичсэн. Гэхдээ ийм дасан зохицох чадварт хэрхэн хүрэх вэ?

Үүний тулд бий янз бүрийн арга замууд. Зарим нь javascript ашигладаг бол зарим нь өөр зүйл ашигладаг. Гэхдээ миний бодлоор хамгийн энгийн бөгөөд Зөв зам CSS-д хариу үйлдэл үзүүлдэг.

Хариуцлагатай вэб сайтыг хэрхэн яаж хийх вэ

Нэгдүгээрт, Хэрэв та дасан зохицох вэбсайтын дизайн хийхээр үүрэг хүлээсэн бол шошгоны хооронд дараах кодыг буулгана уу:

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

Төсөөлөөд үз дээ, би загвар зурж, дараа нь шаардлагатай бүх загвар, хүсэлтийг бичиж, сайтын дасан зохицох чадварыг өөр өөр нарийвчлалтайгаар шалгадаг. Бүх зүйл сайхан байх шиг байна! Харин ухаалаг утсан дээрээ блогоо нээхэд сайт зүгээр л хумигдаж байгааг харж байна. Энэ нь хөдөлгөөнт төхөөрөмжид дасан зохицож чадаагүй, харин үсгийн фонт, зураг гэх мэт хэмжээг багасгасан.

Яаж тэгэх вэ? Би бүх хэв маягийг давхар шалгаж эхэлсэн, би ангиудыг зөв бичсэн эсэх, үр дүнд нь JavaScript-ээр дамжуулан хөтөчийн цонхны өргөнийг px-ээр шалгасан хэмжээнд хүрсэн. Би цочирдсон. Би үүнийг зөөврийн компьютер дээрээ шалгахад 1024px үр дүн авсан бөгөөд ухаалаг гар утсаараа сайтыг нээхэд ижил үр дүн гарсан!

Гэхдээ ийм байж болохгүй!

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

Тэнэг, чадваргүйн улмаас би маш их цаг алдсан. Гэхдээ одоо би үүрд санаж байна))).

Хариуцлагатай CSS медиа асуулга

Үүнийг CSS-д хариу үйлдэл үзүүлэхийн тулд та медиа асуулга ашиглах хэрэгтэй.

Энэ ямар байна вэ? Тийм ээ, маш энгийн. CSS файлд та дараах асуултуудыг бичих хэрэгтэй.

@media дэлгэц ба (хамгийн бага өргөн: 1440px) болон (хамгийн их өргөн: 1599px)( )

Энэ код нь “( ) ” хооронд хавсаргасан загварууд нь хамгийн багадаа 1440px, хамгийн ихдээ 1599px өргөнтэй дэлгэцэнд ажиллана гэсэн үг.

Өөрөөр хэлбэл, дэлгэцийн нягтралаас хамааран тохируулах ёстой сайтын элементүүдийн хэв маягийг дэлгэцийн өргөн тус бүрээр тусад нь бичих ёстой.

Хариуцлагатай зохион байгуулалтад зориулсан дэлгэцийн хамгийн чухал нягтралууд

• 320px- Хөдөлгөөнт төхөөрөмж (хөрөг чиг баримжаа);
• 480px- Хөдөлгөөнт төхөөрөмж (ландшафтын чиглэл);
• 600px- жижиг шахмал;
• 768px- Таблет (хөрөг чиг баримжаа);
• 1024px- Таблет (ландшафт) / нэтбүүк;
• 1280px буюу түүнээс дээш- PC.

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

bootstrap responsive дизайн

Дасан зохицох загвар үүсгэхийн тулд bootstrap ашиглах нь маш тохиромжтой. Тохиромжтой тал нь блок, товчлуур, хүснэгт гэх мэт бүх хэв маягийг тохируулах явдал юм. bootstpap дээр аль хэдийн бүртгүүлсэн байна. Та аль элементэд ямар анги оноохыг л олох хэрэгтэй.

Эхлэхийн тулд bootstrap-ийн хамгийн сүүлийн хувилбарыг татаж аваад сайт руугаа холбоно уу. Загвар, скриптийг wordpress-тэй холбох нь өөрийн гэсэн онцлогтой гэдгийг анхаарна уу.

Ачаалагч дээрх байршил нь блок эсвэл дэлгэцийн өргөнийг 12 тэнцүү хэсэгт хуваасдгаараа ялгаатай. Мөн блокт тодорхой анги оноож өгснөөр блокийн өргөнийг хүссэн тооны хэсэгт тохируулж болно.

Жишээлбэл, энэ загвар нь 8 хэсэг өргөнтэй контентын нэг өргөн блок, дэлгэцийн 4 хэсгийн өргөнтэй хажуугийн нэг нарийн блокыг зөвшөөрөх болно.

Блокуудын өргөнийг дэлгэцийн өргөнөөс хамааран автоматаар тооцоолно. Мөн хөдөлгөөнт төхөөрөмж дээр үзэхэд эдгээр блокууд бие биенийхээ доор шилжих болно.

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

Энэ нь дэлгэцийн зүүн талаас 1 хэсэгээр доголдсон 10 хэсгийн өргөнтэй блок үүсгэх болно.

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

Цаашид bootsrap-тай ажиллах зааварчилгааг оруулахаар төлөвлөж байна. Тиймээс энэ мөчийг бүү алдаарай гэж зөвлөж байна.

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

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

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

За, нийтлэл танд хэр таалагдаж байна вэ? Бүгд ойлгомжтой юу? Үгүй бол сэтгэгдэл дээр бичээрэй, бид хамтдаа шийдэх болно.

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

Хариуцлагатай вэбсайт гэж юу болох талаар хоёр үндсэн буруу ойлголт байдаг. Зарим хүмүүс үүнийг зүгээр л элементүүд нь шахагдсан сайтын багасгасан дэлгэц гэж боддог. Бусад нь сайтын мобайл хувилбартай responsive дизайнтай адилтгахыг шаарддаг. Энэ нийтлэлд бид i дээр цэг тавьж, энэ нь үнэхээр ямар байгааг танд хэлэх болно.

Дасан зохицох зохион байгуулалт гэж юу вэ

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

Энгийнээр хэлбэл, хариу үйлдэл гэдэг нь сайтын жижиг хувилбар биш харин блокуудын динамик овоолго юм.

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

Та яагаад дасан зохицох зохион байгуулалт хэрэгтэй байна вэ?

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

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

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

Хариуцлагатай вэбсайт хэрхэн ажилладаг вэ

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

Responsive вэбсайт нь дэлгэцийн өргөнөөс хамааран төхөөрөмжид дасан зохицдог. Хуудасны бүх элементүүд дасан зохицдог: тэдгээрийн хэмжээ өөрчлөгддөг, зарим туслах агуулга, гоёл чимэглэлийн элементүүд гарч ирдэг / алга болдог. Үүний зэрэгцээ блокуудыг хэрэглэгчдэд тохиромжтой байдлаар дахин зохион байгуулдаг - чухал мэдээлэлд анхаарлаа хандуулж, хоёрдогч өгөгдлийг устгаж эсвэл нураадаг.

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

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

Хариуцлагатай вэбсайтуудын талаар мэдэх ёстой чухал баримтууд

1. Хариуцлагатай вэбсайт болон гар утасны хувилбар нь ижил биш юм.

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

2. Функц нь бүх төхөөрөмж дээр ижил байдаг.

Энд бүх зүйл тодорхой байна: сайт нь нэг учраас хэрэглэгчид аль төхөөрөмжөөс сайт руу нэвтэрч байгаагаас үл хамааран түүний боломжууд ижил байна.

3. Хариуцлагатай дизайн нь хязгаарлалттай байдаг.

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

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

4. Дасан зохицох чадвар нь бүрэн эсвэл хэсэгчилсэн байж болно..

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

5. Бүх вэбсайтууд бүрэн мэдрэмжтэй дизайнаас ашиг тус хүртдэггүй.

Ойлголтод хангалттай хэмжээний дэлгэцийн зай шаарддаг нарийн төвөгтэй ажиллагаатай сайтууд ба/эсвэл контент нь бүрэн хариу үйлдэл үзүүлэхэд сөргөөр нөлөөлдөг. Үйл ажиллагаа нь бүрэн дүүрэн байх төхөөрөмжүүдийн жагсаалтыг сонгож, тэдгээрийн хувьд хэсэгчлэн дасан зохицох боломжтой хувилбарыг хийх нь дээр, үлдсэн хэсэгт нь функцийг бууруулж, бүрэн дэлгэцийн хувилбар руу шилжих боломжтой гар утасны хувилбарыг хийх нь дээр. .

6. Хувийн мэдээллийг харуулахын тулд өөр өөр хөтөчХөтөч хоорондын нийцтэй байдлыг хангана.

Сайтыг өөр өөр хөтөч дээр ижил байдлаар харуулах нь танд чухал бол TOR-д энэ зүйлийг зааж өгөхөө мартуузай. Үгүй бол хөтчийн хуучин хувилбаруудад сайт алдаатай гарч, унших боломжгүй фонт үүсгэж болзошгүй. Энэ бол зорилтот үзэгчдийг алдах шууд зам юм.

Хэрэв та дасан зохицох загвар захиалахыг хүсвэл юу мэдэх хэрэгтэй вэ

"Амжилтын технологи" компани нь сайтын дасан зохицох зохион байгуулалтыг бий болгох үйлчилгээ үзүүлдэг. Үндсэн сайтыг боловсруулах үе шатанд дасан зохицох загварыг гаргаж, TOR дээр бичих нь дээр. Харин та .psd форматтай бэлэн загвартай манайд ирвэл бид танд бас тусалж чадна. Бид CorelDraw программ дээр хийсэн загвар зохион бүтээх ажлыг хариуцдаггүй - энэ тохиолдолд бид үйлчлүүлэгчиддээ эхлээд зураг төсөл, дараа нь зураг төслийг бэлтгэхийг санал болгож байна.

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

Дүрмээр бол дасан зохицох чадвартай корпорацийн вэбсайтыг зохион байгуулахад дунджаар 15 хоног зарцуулдаг бөгөөд дасан зохицох онлайн дэлгүүрийн зохион байгуулалтын нэр томъёо нь тухайн сайтын нарийн төвөгтэй байдлаас шууд хамаардаг.

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

Асуулт хэвээр байна: эсвэл гар утасны хувилбар уу? Дуудаарай үнэгүй дугаар 8 800 775-17-11 эсвэл дугаараа үлдээгээрэй, бид тан руу залгаад бүгдийг хэлнэ.