Респонсив (responsive) дизайн

Респонсив дизайн дэлгэцийн хэмжээнд хэрхэн тохирч өөрчлөгддөг вэ?

Респонсив вэбсайт нь "дэлгэцийн өргөн тодорхой хэмжээнээс нарийн бол ингэж байрлуул" гэсэн дүрмийг урьдчилан тогтоож, үйлчлүүлэгчийн дэлгэцийн өргөнд тохирох дүрмийг сонгон харуулдаг. Энэ дүрэм солигдох өргөнийг "breakpoint" гэж нэрлэдэг.

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

Вэбсайтын кодын хамгийн дээд хэсэгт "энэ дэлгэцийг төхөөрөмжийн өргөнд тааруулж харуул" гэсэн нэг мөр (viewport тохиргоо) ордог. Энэ нэг мөр дутвал утсан дээр компьютерийн дэлгэц жижгэрсэн чигтээ харагдана.

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

Респонсив, адаптив, зөвхөн мобайл сайт юугаараа ялгаатай вэ?

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

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

Хэрэв та аль хэдийн m.yourshop.kr шиг зөвхөн мобайл сайт ашиглаж байгаа бол шинээр хийхдээ респонсив болгон нэгтгэж, хуучин m. хаягийг шинэ хаяг руу автоматаар чиглүүлж тохируулаарай. Ингэж байж өмнө нь тархсан холбоосоор орж ирсэн үйлчлүүлэгч ч төөрөхгүй.

Утасны дэлгэц дээр юу өөр байх ёстой вэ?

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

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

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

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

• Үндсэн текстийн үсгийг томруулахгүйгээр уншигдахаар том болгох
• Товч, холбоосыг хуруугаар дарахад хангалттай хэмжээ, зайтай болгох (ихэвчлэн өргөн, өндөр нь 48 пиксел орчим байхыг зөвлөдөг)
• Утасны дугаар дээр дарахад шууд залгадаг, хаяг дээр дарахад газрын зургийн апп нээгддэг байх
• Эхний дэлгэцийг том popup-аар халхлахгүй байх
• Зурган дотор текст оруулахгүй, текстийг текстээр нь байлгах (утсан дээр жижгэрч уншигдахгүй)
• Зургийг утасны дэлгэцэд тохирох хэмжээгээр багасгаж хурдан ачаалдаг болгох

Одоогийн вэбсайтаа респонсив болгож болох уу?

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

Эхлээд вэбсайтаа ямар байдалтай байгааг шалгаад үзээрэй. Утсаар нээхэд үсэг маш жижиг болж хуруугаараа томруулж байж харагддаг бол респонсив биш байх магадлал өндөр. Зөвхөн зарим дэлгэц хажуу тийш гулсдаг бол тэр хэсгийг л засахад хангалттай тохиолдол бий.

Шинээр хийх бол энэ далимд утасны дэлгэцийг үндэс болгон агуулгаа дахин цэгцлэх нь зүйтэй. Жишээ нь хуучин хоолны газрын вэбсайтын цэсний зургийг текст цэс болгон солибол утсан дээр уншихад амар болохоос гадна хайлтад ч хоолны нэрс нь илэрнэ.

Респонсив вэбсайтыг яаж шалгах вэ?

Хамгийн найдвартай арга бол хэд хэдэн бодит утсаар нээж, үйлчлүүлэгчийн хийдэг үйлдлийг яг адилхан давтаж үзэх явдал. Дэлгэц гоё эсэхээс илүү утасдах · цаг захиалах · зам заах үйлдэл саадгүй ажиллаж байгаа эсэхийг эхэлж хараарай.

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

1. 01Өөрийн утсаар эхний дэлгэцээс төгсгөл хүртэл гүйлгэж, хажуу тийш гулсдаг хэсэг байгаа эсэхийг хар.
2. 02Утсаа хэвтээ эргүүлээд ч нэг хар.
3. 03Өөр төрлийн утас (iPhone · Galaxy) болон таблет дээр ч нээж үз.
4. 04Компьютер дээр хөтчийн цонхны өргөнийг аажмаар багасгаж байрлал жигд өөрчлөгдөж байгаа эсэхийг хар.
5. 05Утасдах · газрын зураг нээх · цаг захиалах товчийг өөрөө дарж үз.
6. 06Wi-Fi-аа унтрааж утасны датаар нээгээд зураг хэт удаан ачаалж байгаа эсэхийг хар.

Респонсив вэбсайт хийлгэхдээ юуг их орхигдуулдаг вэ?

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

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

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

• Утасны дэлгэцийн загварыг тусад нь үзүүлэх үү?
• Үнийн жагсаалт · хүснэгт · хуваарь утсан дээр хэрхэн өөрчлөгдөх вэ?
• Зургийг дэлгэцийн хэмжээнд тааруулж багасгаад байршуулдаг уу?
• Нээхээс өмнө ямар төхөөрөмжүүдээр шалгадаг вэ?