.

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

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

Дасан зохицох анхны арга

<div анги = "хүснэгт боох" > <хүснэгт > <толгой > <tr > <th >Үйлчилгээ</th> <th >Тодорхойлолт</th> <th >Үнэ</th> <th >Хөнгөлөлт</th> </tr> </толгой> <tbody > <tr > <td >Гар утасны зохион байгуулалт</td> <td >Утасны зохион байгуулалт</td> <td >$3000</td> <td > 50%</td> </tr> <tr > <td > CMS WordPress дээр буух</td> <td ></td> <td >$3000</td> <td > 30%</td> </tr> </tbody> </хүснэгт> </div>

Бүх зүйлийг загварчилцгаая (гол төлөв бид загварчлах хэрэгтэй ширээний боодол).

1 2 3 4 5 6 7 8 9 10 11 12 13

.хүснэгт боох (текстийг зэрэгцүүлэх: төвд; дэлгэц: шугаман блок; дэвсгэр өнгө: #fff; дэвсгэр өнгө: 2rem 2rem; өнгө: #000; ) .хүснэгт боох (халих: гүйлгэх; ))

Хүснэгтийг боох (текстийг зэрэгцүүлэх: төвд; дэлгэц: шугаман блок; дэвсгэр өнгө: #fff; дэвсгэр: 2rem 2rem; өнгө: #000; ) @media дэлгэц ба (хамгийн их өргөн: 600px) ( .table-wrap (халих-y: гүйлгэх; ))

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

Дасан зохицох хоёр дахь арга

Эхлээд тэмдэглэгээг өөрчилье:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

Үйлчилгээ Тодорхойлолт Үнэ Хөнгөлөлт Гар утасны зохион байгуулалт Утасны зохион байгуулалт $3000 50% CMS WordPress дээр буух Админтай хамт вэбсайт үүсгэх. самбар $3000 30%

Багана бүрт атрибут оноов өгөгдлийн шошго, энэ нь ирээдүйд бидэнд хэрэгтэй болно.

Үндсэн хэв маягийг тохируулах:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

их бие (текстийг зэрэгцүүлэх: төв; padding-top: 10% ; font-family: sans-serif ; background-image: url ("bg.jpg" ); background-size: cover; өндөр: 100vh; өнгө: #fff ; ) .хүснэгт боох (текстийг зэрэгцүүлэх: голд; дэлгэц: шугаман блок; дэвсгэр өнгө: #fff; дэвсгэр өнгө: 2rem 2rem; өнгө: #000; ) хүснэгт (хүрээ: 1px хатуу #ccc; өргөн: 100% ; зах : 0 ; дүүргэх : 0 ; хилийн уналт : хумих ; хил хоорондын зай : 0 ; ) хүснэгт tr ( хүрээ : 1px хатуу #ddd ; дүүргэлт : 5px ; ) хүснэгт th, хүснэгт td ( padding : 10px ; текстийг зэрэгцүүлэх : төв ; баруун хүрээ : 1px хатуу #ddd ; ) хүснэгт th (өнгө : #fff ; дэвсгэр өнгө : #444 ; текст хувиргах : том үсэг ; үсгийн хэмжээ : 14px ; үсэг хоорондын зай : 1px ; )

их бие (текстийг зэрэгцүүлэх: төв; padding-дээд: 10%; фонт-гэр бүл: sans-serif; background-image: url("bg.jpg"); дэвсгэрийн хэмжээ: бүрхэвч; өндөр: 100vh; өнгө: #fff ; ) .table-wrap (текстийг зэрэгцүүлэх: төвд; дэлгэц: шугаман блок; дэвсгэр өнгө: #fff; дэвсгэр: 2rem 2rem; өнгө: #000; ) хүснэгт (хүрээ: 1px хатуу #cc; өргөн: 100% ; margin:0; padding:0; border-collapse: collapse; border-spacing: 0; ) table tr ( хил: 1px хатуу #ddd; padding: 5px; ) хүснэгт th, хүснэгт td ( padding: 10px; текстийг зэрэгцүүлэх : төв; баруун хүрээ: 1px хатуу #ddd; ) хүснэгт th (өнгө: #fff; дэвсгэр өнгө: #444; текст хувиргах: том үсэг; үсгийн хэмжээ: 14px; үсэг хоорондын зай: 1px; )

Энэ нь ердийн хүснэгт шиг харагдаж байна, мэдээжийн хэрэг, сайтыг 320-420 пикселээр шилжүүлснээр бид сайтыг бүхэлд нь хэвтээ гүйлгэж харах болно. Гол нь биш.

Үүнийг яаж засах вэ? хэв маяг нэмэх:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

@media дэлгэц ба (хамгийн их өргөн: 600px) (хүснэгт ( хүрээ : 0 ; ) хүснэгтийн самбар (дэлгэц: байхгүй; ) хүснэгт tr (зээвээс-доод: 10px; дэлгэц: блок; хүрээ-доод: 2px хатуу #ddd;) хүснэгт td (дэлгэц: блок; текстийг зэрэгцүүлэх: баруун талд) ; үсгийн хэмжээ: 13px ; хүрээ-доод : 1px цэгтэй #ccc ; хүрээ-баруун : 1px хатуу тунгалаг ; ) хүснэгт td: сүүлчийн хүүхэд ( хүрээ-доод : 0 ; ) хүснэгт td: өмнөх ( агуулга : attr(өгөгдөл- шошго); хөвөх: зүүн; текст хувиргах: том үсэг; үсгийн жин: тод; ))

@media дэлгэц ба (хамгийн их өргөн: 600px) ( хүснэгт (хүрээ: 0; ) хүснэгтийн нүүр ( дэлгэц: байхгүй; ) хүснэгт tr ( захын доод хэсэг: 10 пиксел; дэлгэц: блок; хилийн доод хэсэг: 2px хатуу #ddd; ) хүснэгт td (дэлгэц: блок; текстийг зэрэгцүүлэх: баруун; үсгийн хэмжээ: 13px; хүрээ-доод: 1px цэгтэй #ccc; хүрээ-баруун: 1px хатуу тунгалаг; ) хүснэгт td: last-child ( хилийн-доод: 0; ) хүснэгт td:өмнө ( агуулга: attr(өгөгдлийн шошго); хөвөх: зүүн; текст-хувиргах: том үсэг; үсгийн жин: тод; ) )

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

Энд бас нэг үзэг байна:

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

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

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

Хариуцлагатай хүснэгтийн демо .

HTML тэмдэглэгээ

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

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

CSS загварууд

Зөвхөн нэг өмчийг тохируулснаар, хүснэгт дасан зохицдог, контент шошгон дотор байх үед хэвтээ гүйлгэх мөр автоматаар гарч ирнэ дивтэнхлэгийн дагуу одоогийн дэлгэцийн өргөнд багтахаа болино X.

Див (
халих-x: автомат;
)

Хүснэгтийн бусад хаягуудыг загварчилцгаая:

Хүснэгт (
хилийн нуралт: нуралт; /* Зөвхөн ганц мөрийг харуулах */
хил хоорондын зай: 0; /* Нүд хоорондын зай */
өргөн: 100%;
хил: 1px хатуу #afb42b;
өнгө: #212121;
}

Th, td (
текстийг зэрэгцүүлэх: зүүн;
дүүргэх: 8px;
}

Шошгоны загвар tr(мөр) нь тусдаа тайлбар хийх ёстой. Ширээний эгнээ судалтай (тахө) байх нь аль хэдийн норм болсон. Үүний тулд псевдо анги ашигладаг :н-р хүүхэдутга бүхий хаалтанд бүр. Утга бүр, бүх тэгш элементүүдэд шинж чанаруудыг оноодог бөгөөд бидний тохиолдолд энэ нь дэвсгэр өнгө юм. Тиймээс ширээ нь судалтай болно.

Windows: Internet Explorer 10.0+, Firefox 1.5+, Google Chrome, Opera 9.5+, Safari 3.1+, SeaMonkey 1.0+ [1].

Линукс: Firefox 1.5+, Google Chrome / Chromium, Opera 9.5+, SeaMonkey 1.0+ [2].

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

1	2	3	4	5	6	7	8	9	10
Хүснэгт_өгөгдөл 1	Хүснэгт_өгөгдөл_2	Хүснэгт_өгөгдөл_3	Хүснэгт_өгөгдөл 4	Хүснэгт_өгөгдөл 5	Хүснэгт_өгөгдөл 6	Хүснэгт_өгөгдөл_7	Хүснэгт_өгөгдөл_8	Хүснэгт_өгөгдөл_9	Хүснэгт_өгөгдөл 10

HTML/XHTML. Код:

<ширээ>

<tr>

<th>1</th>

<th>2</th>

<th>3</th>

<th>4</th>

<th>5</th>

<th>6</th>

<th>7</th>

<th>8</th>

<th>9</th>

<th>10</th>

</tr>

<tr>

<td>Хүснэгт_өгөгдөл_1</td>

<td>Хүснэгт_өгөгдөл_2</td>

<td>Хүснэгт_өгөгдөл_3</td>

<td>Хүснэгт_өгөгдөл_4</td>

<td>Хүснэгт_өгөгдөл_5</td>

<td>Хүснэгт_өгөгдөл_6</td>

<td>Хүснэгт_өгөгдөл_7</td>

<td>Хүснэгт_өгөгдөл_8</td>

<td>Хүснэгт_өгөгдөл_9</td>

<td>Хүснэгт_өгөгдөл_10</td>

</tr>

</ ширээ>

ширээ(дэлгэц: блок; халих-x: автомат;)

/* Нэмэлт CSS, жишээнд харагдах байдлыг өгөхийн тулд: */

ширээ(хилийн нуралт: нуралт;)

хүснэгт td,th(дүргэх: 10px; хүрээ: 1px #000 хатуу;)

Анхаарна уу: CSS өмч дэлгэц: блокЭнэ нь хүснэгтийг харааны гажуудалгүйгээр өгөгдлийг байрлуулахад шаардлагатай хэмжээний өргөнийг авахаар болгодог. Хуудас дээрх боломжтой зайг бүхэлд нь өргөнөөр сунгахгүйгээр цаашид хийх шаардлагагүй. CSS код нэмсэн ч гэсэн өргөн: 100%. Жишээ:

1	2	3
Хүснэгт_өгөгдөл 1	Хүснэгт_өгөгдөл_2	Хүснэгт_өгөгдөл_3

Дэд хувилбарууд ба сэдэв

Sitemap.xml үүсгэх олон онлайн үйлчилгээ байдаг. Гэсэн хэдий ч, та Lynx хөтөч болон хэд хэдэн Linux командын шугамын хэрэгслүүдийг ашиглан компьютер дээрээ өөрөө хийж болно. Дараах нь тэдгээрийг ашигладаг "sitemap.sh" нэртэй bash скриптийн жишээ юм. Sitemap.xml файл үүсгэдэг Bash скрипт: #!/bin/bash cd /home/me/sitemap/www/ lynx -crawl -traversal -accept_all_cookies -connect_timeout=30 http://www.compmiscellanea.com/ > / dev /null cd /home/me/sitemap/www2/ lynx -crawl -traversal -accept_all_cookies -connect_timeout=30 http://compmiscellanea.com/ > /dev/null cat /home/me/sitemap/www2/traverse.dat > > /home/me/sitemap/www/traverse.dat cat /home/me/sitemap/www/traverse.dat | sed -e "s/\ \.//g" | ангилах | uniq > /home/me/sitemap/sitemap/sitemap.xml sed -i "s/\&/\&\;/g" /home/me/sitemap/sitemap/sitemap. xml sed -i "s/"/\&apos\;/g" /home/me/sitemap/sitemap/sitemap.xml sed -i "s/"/\"\;/g" /home/me/sitemap/ sitemap/sitemap.xml sed -i "s/>/\>\;/g" /home/me/sitemap/sitemap/sitemap.xml sed -i "s//" /home/me/sitemap/sitemap/sitemap.xml sed -i -e "s/$/<\/loc><\/url>/" /home/me/sitemap/sitemap/sitemap.xml sed -i -e "1 i\r\r \r\r\r\r" /home/me/sitemap/sitemap/sitemap.xml sed -i -e "$ a \\r" /home/me/sitemap/sitemap/sitemap.xml sed -i "/static/d" /home/me/sitemap/sitemap/sitemap.xml echo "...Дууссан" Bash скрипт файл бэлэн болсны дараа: "chmod +x sitemap.sh"-г ажиллуулж болно. Sitemap.sh-ийг sitemap.sh.tar.gz архиваас татаж авна уу (Архивыг татан авч задалсны дараа .com/ файлын http://www.compmiscellanea-г сайтын хүссэн домэйн нэрийг "www" гэж бичээд http://compmiscellanea.com/-г "www"-гүй сайтын хүссэн домэйн нэрээр солино. Файлын сүүлийн мөрөнд "статик" гэсэн мөрийг оруулаарай. холбоосууд нь жагсаалтаас хасагдсан байх ёстой. Дараа нь "chmod +x sitemap.sh". Дараа нь sitemap.sh-г ажиллуулна уу) Сэтгэгдэл Sitemap2.sh-г мөр мөрөөр тайлбартай нь татаж авна уу. tar.gz архив. Bash скриптийг ажиллуулахын өмнө та гурван хавтас үүсгэх хэрэгтэй. Зарим тохиолдолд lynx хөтөч нь сайтын домэйн нэрийг "www" гэж заасан эсвэл оруулаагүй тохиолдолд зарим холбоосыг алдаж магадгүй тул bash скрипт нь lynx-ийг хоёр удаа ажиллуулдаг. сайтыг "www" домэйн нэрээр боловсруулж, "www" байхгүй домэйн нэр ашиглан сайтыг боловсруулах. Үүссэн хоёр файлыг хоёр өөр хавтсанд байрлуулсан бөгөөд энд "/home/me/sitemap/www/" болон "/home/me/sitemap/www2/" байна. Мөн "/home/me/sitemap/sitemap/" лавлах нь үүсгэсэн sitemap.xml-д зориулагдсан болно. 1. Bash руу очих зам #!/bin/bash 2. Хавтас руу очно уу - lynx хөтөч нь "www" cd /home/me/sitemap/www/ 3-аар сайтыг домайн нэрээр боловсруулахад хүлээн авсан файлуудыг тэнд байрлуулна.

CSS-д "float: bottom" шинж чанар байхгүй боловч үр нөлөөг өөр хэд хэдэн аргаар хийж болно. Жишээ нь: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Энэ нь хамгийн багадаа, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Үл хамаарах зүйл нь албан тушаалын culpa qui officia deserunt mollit anim id est laborum-д байрладаг. Холбоос 1 Холбоос 2 Холбоос 3 Хөвөгч доод HTML / XHTML. Код:

CSS. Код: .box1 (байрлал: харьцангуй; дээд: 0px; зүүн: 0px; хөвөх: зүүн; өндөр: автомат; өргөн: 100%;) .content1 (байршил: харьцангуй; дээд: 0px; зүүн: 0px; хөвөх: зүүн; өндөр: автомат; өргөн: 100%;) .left1 (байрлал: харьцангуй; дээд: 0px; зүүн: 0px; хөвөх: зүүн; өндөр: автомат; өргөн: 64%;) .menu1 (байршил: харьцангуй; дээд: 0px; зүүн: 0px; хөвөх: зүүн; өндөр: автомат; өргөн: 36%;) .bottom1 (байрлал: үнэмлэхүй; доод: 0px; баруун: 0px;) /* Нэмэлт CSS, жишээнд ямар нэгэн дүр төрх өгөхийн тулд */ . box1 (өнгө: #ddd; текстийг зэрэгцүүлэх: төвд;).content1 (арын дэвсгэр: #bbb;).left1 (мин-өндөр: 100px; дэвсгэр: 2%; текстийг зэрэгцүүлэх: зөвтгөх; дэвсгэр: #006; -moz - box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;).Menu1 (pading: 2%; float: баруун ; дэвсгэр: #060; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;) . menu1 p (байрлал: харьцангуй; дээд: 0px; зүүн: 0px; хөвөх: зүүн; өндөр: автомат; өргөн: 100%; дүүргэх: 0px; захын зай: 0px;).цэс1 a (өнгө: #dddd; текст-чимэглэл: байхгүй;).цэс1 a: хулганаар (текстийн чимэглэл: доогуур зураас;).доод1 (дотоод: 2%; өнгө: #eee; дэвсгэр: # 600;) Вэб хуудасны бүх контент нь box1 саванд агуулагддаг. Дотор нь div гэсэн хоёр сав байдаг: 1. контент1 зүүн талд бодит агуулга, баруун талд цэс. 2. контент1-ын дараа доод1.

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

Вэбсайт бүтээгчид үүнийг хийх нэгээс олон арга бодож олжээ. CSS болон JavaScript ашиглан та жижиг дэлгэц дээрх нүднүүдийг нэг баганад байрлуулж, тийм ч чухал биш өгөгдөл бүхий баганыг нууж, хүснэгтийг дугуй диаграм болгон хувиргаж болно. Эдгээр бүх аргуудыг англи, орос хэл дээр нэгээс олон удаа тайлбарласан бөгөөд та Интернетээс тэдгээрийн талаар хялбархан уншиж болно. Миний нийтлэлд би эдгээр шийдлүүдээс танд хэрэгтэй, ялангуяа танай сайтад тохирох шийдлүүдийг хэрхэн сонгох талаар ярихыг хүсч байна.

Зөв аргыг сонгохын өмнө хүснэгтийн агуулгын талаар өөрөөсөө хэд хэдэн асуулт асуух хэрэгтэй.

Хүмүүс багана эсвэл мөр дэх өгөгдлийг харьцуулах уу?

Жишээ 1: Хүмүүс өгөгдлийг харьцуулахгүй.

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

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

JQuery Mobile вэбсайтыг бүтээгчид яг ийм зүйл хийсэн.

Жишээ 2: Хүмүүс мөр эсвэл баганын өгөгдлийг харьцуулах болно

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

Цагаан будаа. 3. Харьцуулах өгөгдөл бүхий хүснэгт

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

Цагаан будаа. 4. Гар утасны дэлгэц дээрх өгөгдөл бүхий хүснэгт

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

Цагаан будаа. 5. Сайтын бүрэн хувилбар дахь өгөгдөл бүхий хүснэгт

Цагаан будаа. 6 ба 7. Гар утасны хувилбарт ижил хүснэгт. Зөвхөн хамгийн чухал баганууд үлдсэн боловч шаардлагатай бол бусад бүх багануудыг оруулж болно.

Ямар мэдээлэл чухал вэ?

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

• Хүмүүст ямар мэдээлэл хамгийн их хэрэгтэй вэ?
• Хүснэгтэд өгсөн мэдээллийг ойлгоход аль баганууд хамгийн чухал вэ?
• Хүмүүст ямар чанга яригч хэрэгтэй вэ?

Хэрэглэгчид хүснэгтийн нэг хэсгийг нөгөөгөөс нь ялгаж чадах уу?

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

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

Бүх зүйл нэг дор дэлгэцэн дээр байх ёстой юу эсвэл шаардлагатай бол нэмэлт элементүүдийг нэмж болох уу?

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

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

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

Тэгэхээр, мэдрэмжтэй дизайнтай хүснэгтүүдийн хувьд энэ нь ямар чухал вэ?

• Хүснэгтийн харагдах байдал өөрчлөгдсөн ч хэрэглэгчид утгыг ойлгох болов уу?
• Тэд ямар нэгэн байдлаар хүснэгтэд байгаа бүх мэдээллийг авах боломжтой юу?
• Та төхөөрөмжөөс үл хамааран бүх URL-д хандах боломжтой гэдэгт итгэлтэй байна уу?

Хэрэв та гурван асуултанд "тийм" гэж хариулж чадвал таны сайт дээрх хүснэгтэд ямар ч асуудал гарахгүй.

Таны контент таны хүснэгтэд юу хамгийн сайн хийхийг танд хэлэх болно.

Хүснэгтийг мэдрэмжтэй дизайнаар зохион байгуулах олон янзын арга байдаг. Цаг хугацаа өнгөрөхөд тэд улам олон болно. Гэхдээ зөв аргыг хэрхэн сонгох вэ? Зөвхөн нэг хариулт байж болно.

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