Эхний зүйл нь дизайнерууд өөрсдийн вэбсайтаа бүтээхдээ юуг шийддэг вэ гэсэн асуудал юм. Энэ нь үнэндээ юу вэ гэхээр таны дизайн хэр өргөн байх ёстойг шийдэх явдал юм. Вэб сайтын стандартын өргөн сонголт гэж байхгүй.
Шийдвэрийг авч үзэх хэрэгтэй
1995 онд стандарт 640x480 нарийвчлалтай мониторууд нь хамгийн том, шилдэг мониторууд байсан. Энэ нь веб дизайнерууд вэбсайт хөтлөгчид сайн дурын хуудсуудыг 12 инчийн хэмжээтэйгээр 14 инчийн дэлгэц дээр хамгийн дээд хэмжээнд байлгахад анхаарлаа хандуулсан гэсэн үг юм.
Өнөөдөр 640x480 шийдэл нь вэбсайтын ихэнх ачааллын 1-ээс бага хувийг бүрдүүлдэг. Хүмүүс 1366x768, 1600x900, 5120x2880 зэрэг илүү өндөр нарийвчлал бүхий компьютер ашигладаг. Ихэнх тохиолдолд 1366x768 нарийвчлалтай дэлгэцийн зураг төсөл боловсруулах ажил хийгддэг.
Бид вэбсайтын дизайны түүхэнд байгаа бөгөөд шийдвэр гаргах талаар санаа зовох шаардлагагүй юм. Ихэнх хүмүүс том, өргөн дэлгэцтэй байдаг бөгөөд тэдгээр нь браузерын цонхыг ихэсгэдэггүй. Тэгэхээр та 1366 пикселээс хэтрэхгүй хуудас бүтээхээр шийдсэн бол таны хуудас илүү өндөр нарийвчлалтай том мониторууд дээр ихэнх вэб хөтөч дээр харагдаж байж магадгүй юм.
Хөтчийн өргөн
Чи явахаасаа өмнө "Би зүгээр л 1366 пиксел өргөнтэй хуудсаа хийж өгье" гэж хэлэх болно. Вэб хуудасны өргөнийг шийдэхдээ асуудал гарахаас өмнө таны хэрэглэгчид хэр их хэмжээгээр браузер хөтлөхийг шийддэг. Ялангуяа, тэд дэлгэцийнхээ хэмжээгээр хөтлөгчийнхөө хэмжээг ихэсгэх үү, эсвэл бүрэн дэлгэцээс илүү бага байлгах уу?
Хамтран ажиллаж буй хамтран ажиллагчдын нэг албан бус судалгаанд компаний стандарт 1024x768 нарийвчлалтай лаптопыг ашигладаг байсан бол хоёр нь бүх өргөдлөө хадгалж үлдээжээ. Бусад нь янз бүрийн шалтгааны улмаас янз бүрийн хэмжээтэй цонх нээгдэв. Энэ нь компаний дотоод сүлжээг 1024 пикселээр бүтээсэн бол хэрэглэгчдийн 85 хувь нь хуудсыг харахын тулд хэвтээ чиглэлд гүйлгэх хэрэгтэй болно.
Хамгийн дээд зэргээр үйлчлүүлдэг хэрэглэгчдийн бүртгэлийг хөтлөсний дараа хөтчийн хил хязгаарыг бодож үзээрэй. Вэб браузер бүр гүйлгэх зурвастай бөгөөд талбарууд нь 800-аас 600 хүртэл ойролцоогоор 740 пиксел буюу 800х600-аас бага зайг багасгаж, хамгийн ихдээ 1024x768 нарийвчлалтай цонхонд хамгийн ихдээ 980 пикселээр хязгаарладаг. Энэ нь "хром" хөтөч гэж нэрлэгддэг бөгөөд энэ нь таны хуудсын дизайны хувьд ашиглагдах зайгаас зайлсхийх боломжтой юм.
Тогтмол буюу шингэний өргөн хуудсууд
Бодит тоон өргөн нь таны вэбсайтын өргөнийг төлөвлөх үед таны бодох ёстой цорын ганц зүйл биш юм. Тогтмол өргөн эсвэл шингэний өргөн байх эсэхийг шийдэх хэрэгтэй. Өөрөөр хэлбэл, та тодорхой тооны (тогтмол) эсвэл хувь (шингэн) хүртэл өргөнийг тохируулах уу?
Тогтмол өргөн
Тогтмол өргөнтэй хуудсууд яг адилхан сонсогдож байна. Өргөн нь тодорхой тоон дээр тогтсон бөгөөд хөтөч хэр их, бага хэмжээтэй байсан ч хамаагүй өөрчлөгддөггүй. Уншигчдынхаа хөтөч хэр өргөн, нарийн хэмжээтэй байсан ч дизайныг яг адилхан харуулах хэрэгтэй бол энэ нь сайн байж болох ч энэ арга нь таны уншигчдын анхаарлыг хандуулдаггүй. Хөтөчтэй хүмүүс таны дизайныг бодвол илүү нарийвчлалтайгаар хэвтээ байдлаар гүйлгэх хэрэгтэй бөгөөд өргөн хөтөчтэй хүмүүс дэлгэцэн дээр их хэмжээний хоосон зайтай байх болно.
Тогтмол өргөн хуудсуудыг үүсгэхийн тулд хуудасны хэсгийн өргөний хувьд тусгай пикселийн тоог зүгээр л ашиглаарай.
Шингэн өргөн
Вэбсайтын цонхны өргөн цар хүрээтэй байдлаас хамааран сул талууд (заримдаа уян хатан өргөн хуудсууд гэж нэрлэдэг) өргөнөөс хамаарна. Энэ нь танд үйлчлүүлэгчдэд илүү төвлөрөх хуудсыг дизайн хийх боломж олгоно. Цаасан хуудсан дээрх асуудал нь уншихад хэцүү байж болох юм. Текстийн мөрийн урт нь 10-аас 12 үгээс их, эсвэл 4-5 үгээс богино бол уншихад хэцүү болно. Энэ нь том эсвэл жижиг вэб хөтөчтэй уншигчдад асуудалтай байдаг гэсэн үг юм.
Уян хатан өргөн хуудсуудыг үүсгэхийн тулд хуудасны хуваагдалуудын өргөний хувьд хувиуд эсвэл БОҮ- г ашиглана уу. Та CSS-ийн дээд талбайн өмчтэй танилцах хэрэгтэй. Энэ үл хөдлөх хөрөнгийг өргөн хүрээнд хуваахыг зөвшөөрдөг боловч хүмүүс үүнийг уншиж чаддаггүй тийм их хэмжээгээр хязгаарлахын тулд үүнийг хязгаарлаарай.
Мөн Ялагч нь: CSS Media Queries
Өнөөдөр хамгийн сайн шийдэл бол CSS медиа хайлт, хариу үйлдэл хийх загварыг ашиглан хөтчийн өргөнийг тохируулах хуудас үүсгэх явдал юм. Дуудлагатай вэбсайт нь 5120 пиксел өргөн эсвэл 320 пиксел өргөн өнцгөөр харах боломжтой ажилладаг вэб хуудсыг үүсгэхтэй адил агуулгыг ашигладаг. Өөр өөр хэмжээтэй хуудсууд өөр өөр байдаг боловч тэдгээр нь ижил агуулгатай байна. CSS3 дахь мэдээллийн хайлтаар, хүлээн авагч төхөөрөмж бүр асуултынхаа хариуг түүний хэмжээгээр хариулдаг бөгөөд загварын хуудас тухайн хэмжээтэй тохируулагддаг.