Хариуцлагатай дизайны тест хийхэд javascript ашиглах. Responsive вэб дизайныг хэрхэн шалгах вэ? Гар утасны дэлгэцийн жижиг элементүүд

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

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

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

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

Дасан зохицох дизайны дутагдал нь онлайн дэлгүүрийн урьдчилсан туршилтаар амархан тодорхойлогддог боловч олон худалдагчид үүнийг хийх нөөцгүй байдаг. Мөнгө алдах эрсдэлийг бууруулахын тулд Chrome, IE, Firefox, Safari гэх мэт үндсэн хөтчүүд дээр сайтын эргэн тойронд хэрэглэгчийн гол маршрутуудыг туршиж үзээрэй. үйлдлийн системүүд– Алдартай гар утасны төхөөрөмж дээрх Windows, Mac OS, Android, IOS. Өөрчлөлт хийх бүртээ туршиж үзээрэй; BrowserStack эсвэл Viewport Resizer зэрэг үйлчилгээ нь туршилтын хугацааг хэдэн цаг хүртэл бууруулахад тусална.

Ухаалаг утасны дэлгэц дээр илүү их зай багтаахын тулд онлайн дэлгүүрийн эзэд "үйлдэлд уриалах" товчлуурын хэмжээг харамсдаг. Худалдан авах товчийг дарахын тулд хэрэглэгчдийг томруулж болохгүй, жижиг элементүүдийг бие биендээ хэт ойр байрлуулж болохгүй, эс тэгвээс таны хэрэглэгчид илүү тохиромжтой сайт руу орохыг сонгох болно. Том хэмжээний навигацийн элементүүд болон үйлдэлд уриалах товчлуурын хэмжээ бүхий интерфейсийг зохион бүтээх.

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

Агуулгыг өөр өөр таб болгон тусгаарла, жишээлбэл, бүтээгдэхүүний хуудас нь зөвхөн үндсэн зураг, тайлбар, үнэ болон "Худалдан авах" товчийг агуулж болно. Хэрэглэгчийн тойм, видеог тусдаа таб дээр байрлуулж, хуудасны үндсэн хэсгийн "жин" -ийг багасгаж болно. Агуулгаас гадна ачаалах хурдад нөлөөлдөг бусад элементүүдийг оновчтой болгох - CSS файл, зураг, скрипт, зөвхөн шаардлагатай өгөгдлийг илгээх. Нөөцийн файлуудын хэмжээ, ачаалах хугацааг багасгах хэрэгслүүд танд энэ талаар туслах болно: Uglify эсвэл JSCompress.

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

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

Сайтын хувьд бүх зүйл хэвийн байгаа тул хариу үйлдэл үзүүлэх дизайн нь ширээний компьютер болон хөдөлгөөнт төхөөрөмж дээр сайн ажилладаг. Гэвч цахим шуудан нь хариу өгөхгүй байгаа тул гар утасны хэрэглэгчид захиалгын дэлгэрэнгүй мэдээллийг шалгах эсвэл санал болгож буй бүтээгдэхүүний төгсгөлгүй жагсаалтыг гүйлгэн гүйлгэж худалдан авалтаа дуусгах хэрэгтэй болдог. ИмэйлүүдЭнэ бол үйлчлүүлэгчтэй харилцах гол цэг бөгөөд хариу үйлдэл үзүүлэх имэйлийн дизайныг гар утасны стратегидаа нэгтгэх явдал юм. Захидал, мэдээллийн товхимолыг боловсруулж, туршиж үзээрэй; захидлын загварууд нь "хөнгөн" байх ёстой бөгөөд зөвхөн чухал мэдээллийг агуулсан байх ёстой.

Зохиогчоос: "Энэ хөтчийн хэмжээг өөрчлөхөө боль, удахгүй устах болно!" Та үүнийг хэр олон удаа сонсдог вэ? За, тийм ч олон биш байж магадгүй, гэхдээ хэрэв та хариу үйлдэл үзүүлэх вэб сайт хөгжүүлбэл миний юу ярьж байгааг мэдэж байгаа байх: DOM эсвэл CSS-г засварлах бүртээ та хөтчийн ирмэгийг нааш цааш чирж, өөрчлөлтийг туршиж үздэг. мөн алдаа дутагдлыг хайж байна.

Ерөнхийдөө эдгээр хүчин чармайлтын ихэнх нь янз бүрийн төхөөрөмжүүдийн дэлгэцийн хэмжээг дуурайх оролдлого юм.

Хэрэв та аж ахуйн нэгжийн хөгжүүлэлт хийж байгаа бол танд компаниас өгсөн маш олон төхөөрөмж байгаа байх. Миний ажилладаг газар бидэнд iPad, iPhone, өөр нэг эсвэл хоёр таблет, зөөврийн компьютер, ширээний компьютер байдаг. Хэрэв танд ийм тансаглал байхгүй бол та өөрт байгаа зүйлээ ашиглах хэрэгтэй.

Гэртээ би хоёр өөр зөөврийн компьютертэй, хоёр өөр Android төхөөрөмжүүд: Kindle болон Nexus 7. Би эдгээр төхөөрөмжүүдийг өөрийн бие даасан хөгжүүлэлтээ шалгахын тулд ашигладаг, гэхдээ энэ нь бүрэн сонголт биш нь ойлгомжтой. iOS үйлдлийн системтэй төхөөрөмж огт байхгүй, би хэдийгээр эрт хэрэглэгчдэд тооцогддог ч шинэ утас/таблет/таблет бүрийг худалдаанд гармагц худалдаж авах бодолгүй байна.

Тэгэхээр хөгжүүлэгч юу хийх ёстой вэ? Аз болоход, олон төрлийн төхөөрөмжүүдийн дэлгэцийн хэмжээг дуурайдаг хөтөч дээр суурилсан хэрэгслүүдийн тоо нэмэгдсээр байна. Янз бүрийн хэрэгслүүд нь мэдээжийн хэрэг өөр өөр функц, үр ашгийн янз бүрийн түвшинд ирдэг. Бид тэдгээрийн заримыг нь эндээс авч үзэх болно.

Туршилтын зорилгоор би анхны жинхэнэ мэдрэмжтэй PajamasOnYourFeet.com вэбсайтыг ашигласан. Энэ нь Brownie HTML5 загвар дээр суурилсан бөгөөд EGrappler дээрх хөгжүүлэгчдийн нийгэмлэгт маш өгөөмөр бөгөөд чөлөөтэй өгдөг.

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

Ширээний компьютер - 1600 x 992px, масштабаар багасч (0.3181)

Зөөврийн компьютер - 1280 x 802px, хэмжээ багасч (0.277)

Таблет - 768 x 1024px, масштабаар буурч байна (0.219)

Гар утас - 320 x 480px, масштабаар багасч (0.219)

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

deviceponsive нь Am I Responsive сайттай төстэй юу? Энэ нь таны сайтыг энгийн бөгөөд цэвэрхэн харуулдаг боловч төхөөрөмжтэй холбоотой ямар ч хяналтгүй эсвэл боломжтой сонголтгүй. Бүгдийг нэг урт хуудсан дээр нэгэн зэрэг харуулав. Энэ нь сонирхолтой шинж чанартай - та толгой хэсгийг дэвсгэр өнгийг нь засаж, өөрийн логог оруулаад дараа нь "хэвлэх" боломжтой. Ингэснээр та үйлчлүүлэгчид дэлгэцийн агшинг үзүүлэхдээ сайтаа брэнд болгож чадна. Энэ сайт дээр загварчилсан төхөөрөмжүүд болон дэлгэцийн хэмжээ:

Macbook - 1280 x 800

iPad (хөрөг) - 768 x 1024

iPad (ландшафт) - 1024 x 768

Kindle (хөрөг) - 600 x 1024

Kindle (ландшафт) - 1024 x 600

iPhone (хөрөг чиг баримжаа) - 320 x 480

iPhone (ландшафт) - 480 x 320

Галактик (хөрөг) - 240 x 320

Галакси(ландшафт) - 320 x 240

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

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

Том дэлгэцээс эхлээд арван гурван өөр цонхыг энд санал болгож байна Суурин компьютер"Crappy Android" гэж нэрлэгддэг (үнэнийг хэлэхэд тэд бас " гэсэн сонголттой. Android нь илүү дээр юм"(Илүү сайхан Android).

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

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

Ганцхан боломжтой сонголтуудЭнд байгаа төхөөрөмжүүд нь таны хөтчийн цонхыг дүүргэх автомат төхөөрөмжүүд бөгөөд хэрэв та түүн рүү очсон бол тухайн сайтыг харуулдаг: Ширээний компьютер; Таблет (ландшафтын чиглэл); Таблет (хөрөг чиг баримжаа); Ухаалаг утас (ландшафтын чиг баримжаа) болон ухаалаг утас (хөрөг чиг баримжаа), пикселийн хэмжээсийг өгөөгүй.

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

Энэ сайтын сонирхолтой онцлог нь олон төхөөрөмжүүдийн хувьд тухайн төхөөрөмжид тохирох харагдацаар таны сайтыг харуулсан "Үнэн харах" сонголт байдаг. Chrome хөтөч. Харамсалтай нь, би үүнд аль хэдийн дассан тул Firefox туршилтын сайтын зургийн слайдыг харуулах боломжгүй байна. Санаа зоволтгүй, хөтчүүдийн хувьд би Firefox-г илүүд үздэг ч азаар бидэнд сонголтууд байгаа.

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

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

Дээр дурдсан бүх зүйл нь үүнийг аль хэдийн хамгийн тохиромжтой хэрэгсэл болгосон байсан ч Screenfly хөгжүүлэгчид үүнийг зүгээр л дээд зэрэглэлийн болгох боломжийг олж, прокси серверийн өмчөөр хангасан. Тэдний вэб сайтаас иш татсан нь: "Screenfly таны вэбсайтыг үзэх үед төхөөрөмжүүдийг дуурайхын тулд прокси сервер ашиглаж болно. Прокси нь таны сонгосон төхөөрөмжүүдийн хэрэглэгчийн агентийн мөрийг дуурайдаг боловч тэдгээр төхөөрөмжүүдийн үйлдлийг биш." Энд дурдсан бусад бүх хэрэгслүүд нь зөвхөн CSS-тэй холбоотой. Screenfly нь хэрэглэгчийн агент мөр дээр суурилсан туршилтыг зөвшөөрдөг цорын ганц зүйл юм.

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

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

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

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

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

За ингээд явцгаая.

Сайтуудыг шалгах сайн үйлчилгээ. Таблет болон гар утасны дэлгэцийн нягтрал ихтэй байдаг.

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

Ямар ч сайтыг шалгах маш сайхан үйлчилгээ. Надад дизайн, функциональ байдал нь маш их таалагдсан.

Маш үзэсгэлэнтэй, ажиллагаатай үйлчилгээ. Сайт нь зурагтаар хэрхэн харагдахыг ч шалгах боломжтой :-)

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

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

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

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

4 төрлийн зохион байгуулалт байдаг:

Бүх төрлийг илүү нарийвчлан авч үзье.

1. Тогтмол зохион байгуулалт

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

#temnyi, #svetlyi (өргөн: 440px; )

2. Резинэн загвар

Блокууд нь хөтчийн цонхны хэмжээнээс хамаарч өргөнөө өөрчилдөг. Энэ нь хамгийн их ба хамгийн бага утгыг (хамгийн их өргөний шинж чанар) авч болно. Гэхдээ дэлгэц багасах тусам та 50% -ийг 50% -аас 100% болгож чадахгүй.

#temnyi, #svetlyi (өргөн: 50%; )

3. Дасан зохицох зохион байгуулалт

@media эсвэл скрипт ашиглан хэрэгжүүлсэн. Тодорхой мэдэгдэж буй төхөөрөмжүүдэд (320, 768, 1024 гэх мэт) тохируулсан. Заасан түвшний аль нэгэнд хүрсний дараа ямар нэгэн өөрчлөлт jerks-д тохиолддог. Мэдээж тохиромжтой

#temnyi, #svetlyi ( өргөн: 430px; ) @media (хамгийн их өргөн: 1220px) ( #temnyi, #svetlyi ( өргөн: 380px; ) ) @media (хамгийн их өргөн: 1120px) ( #temnyi, #svetlyi ( өргөн : 325px; ) ) @media (хамгийн их өргөн: 680px) ( #temnyi, #svetlyi (өргөн: 200px; ) )

4. Хариуцлагатай зохион байгуулалт

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

#temnyi, #svetlyi ( өргөн: 50%; ) @media (хамгийн их өргөн: 1006px) ( #temnyi, #svetlyi (өргөн: 100%; ) )

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

Дасан зохицох байршлын скрипт:

/* Кодоор ашиглахад тохиромжтой байх үүднээс моногест ангиудыг оруулах хувьсагчийг үүсгэцгээе. Өөрөөр хэлбэл, энэ нь дээж бүрийн өмнө биш, тэдгээрийг нэг удаа илрүүлдэг. энэ нь ашигтай функц юм */ var my = ( цонх: $(цонх) ); /*Үнэндээ функц нь өөрөө*/ $(цонх).resize(функц () ( /*Цонхны өргөнийг тодорхойлж, өргөн хувьсагчид оруулах хувьсагч*/ var width = my.window.width( ); /*цонхны хувиргалт нөхцөл, өөрөөр хэлбэл цонхны өргөн нь тодорхой хэмжээнд хүрсэн үед хийгдэх нөхцөл */ 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") } });

Тэгээд л болоо. Хэрэв танд асуух зүйл байвал коммент хэсэгт бичнэ үү

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

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

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

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

Алдартай интернет хөтөч (хөтөч) Mozilla Firefoxвэб сайтын дизайныг хөдөлгөөнт төхөөрөмж дээр харуулахад тохиромжтой эсэхийг шалгах хэрэгслүүдээр тоноглогдсон. Үүнийг ашиглахын тулд "Цэс" - "Хөгжил" - "Дасан зохицох загвар" руу очно уу. Эсвэл гар дээрх гурван товчлуурыг зэрэг дарна уу ++[M]

Та иймэрхүү зүйлийг харах ёстой:

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

Хөтөч Гүүгл КромЭнэ нь мөн сайтын дизайны дасан зохицох чадварыг шалгах зориулалттай суурилуулсан дэмжлэгтэй. Үүнийг хийхийн тулд цэс рүү очоод "Нэмэлт хэрэгслүүд" -ийг сонгоод "хөгжүүлэгчийн хэрэгслүүд" (эсвэл товчлуурыг дарна уу).

Үүний дараа мэдрэмжтэй дизайны дүрс дээр дарна уу (эсвэл гар дээрх ++[M] товчийг нэгэн зэрэг дарна уу):

Дэлгэцийн дунд хэсэгт таны сайт мобайл төхөөрөмжийн дэлгэц дээр хэрхэн харагдахыг харах болно.

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

ашиглан дасан зохицох чадварыг шалгах Google үйлчилгээдараах хаягаар орж сайтынхаа нэрийг оруулна уу. https://www.google.com/webmasters/tools/mobile-friendly/.

Миний блогийг шалгасны үр дүнд дараах байдалтай байна.

Yandex-ийн хувьд энэ нь арай илүү төвөгтэй тул та Yandex.Webmaster үйлчилгээнд бүртгүүлж, интерфэйсийн бета хувилбарыг ашиглах ёстой.

Эдгээр үйлчилгээний гол үүрэг бол таны вэбсайт ямар харагдахыг харуулах (үзүүлэх) юм гар утас. Ийм функцтэй маш олон сайтууд байдаг. Би тэдний хэдхэнийг л өгье. Ихэнх тохиолдолд тэд FireFox болон Chrome-ийн суулгасан функцийг хуулбарладаг.

Би дасан зохицох чадвараа харуулах өөрийн үйлчилгээтэй Google-ээс дахин эхлэх болно: http://design.google.com/resizer/#

Хоёр дахь сайхан үйлчилгээ бол http://quirktools.com/screenfly/ юм. Энэ нь таны вэбсайт хэрхэн зурагтаар харагдахыг харуулах болно!

За, "дотоодын үйлдвэрлэгч" -ийг гомдоохгүйн тулд би өөр сайтын жишээг хэлье: http://symby.ru/adaptest/. Нэг хуудсан дээр та өөр өөр дэлгэцийн нягтралтай хэд хэдэн харагдацыг харах болно.

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

Google урьдын адил муруйгаас түрүүлж байна: https://developers.google.com/speed/pagespeed/insights/. Энэ үйлчилгээ нь утасны дэлгэцэн дээр сайт хэрхэн харагдахыг харуулж, хөдөлгөөнт төхөөрөмж дээр ачаалах хурдыг нэмэгдүүлэхийн тулд кодыг оновчтой болгох зөвлөмжийг өгөх болно.

Эцэст нь хэлэхэд би сайтыг хөдөлгөөнт төхөөрөмж дээр ямар харагдахыг харуулахаас гадна хурдыг нь харуулах үйлчилгээний жишээг өгөх болно: http://www.webpagetest.org/

Миний бодлоор өдөр тутмын ажилд сайтын дизайнд өөрчлөлт оруулахдаа суулгасан боломжуудыг ашиглах нь илүү хялбар байдаг. FireFox хөтчүүдболон Chrome. Үүний дараа мэдээж хайлтын системүүд таны дизайнд үнэнч байгаа эсэхийг шалгах хэрэгтэй. Зөвхөн дараа нь сэтгэлээ тайвшруулах эсвэл өөрийгөө харуулахын тулд та онлайн үйлчилгээг ашиглаж болно.