ການອອກແບບທີ່ມີຄວາມຮັບຜິດຊອບແມ່ນຫຍັງ? (ວິດີໂອແລະ Infographic ອະທິບາຍ)
ມັນໄດ້ໃຊ້ເວລາທົດສະວັດສໍາລັບ ການອອກແບບເວັບຕອບສະ ໜອງ (RWD) ທີ່ຈະໄປເປັນຕົ້ນມານັບຕັ້ງແຕ່ Cameron Adams ໄດ້ ນຳ ສະ ເໜີ ເປັນຄັ້ງ ທຳ ອິດ ແນວຄວາມຄິດໃນປີ 2010. ແນວຄວາມຄິດແມ່ນ ingenious – ເປັນຫຍັງພວກເຮົາບໍ່ສາມາດອອກແບບສະຖານທີ່ທີ່ປັບເຂົ້າກັບ viewport ຂອງອຸປະກອນທີ່ມັນກໍາລັງເບິ່ງ?
ການອອກແບບທີ່ມີຄວາມຮັບຜິດຊອບແມ່ນຫຍັງ?
ການອອກແບບເວັບທີ່ຕອບສະຫນອງແມ່ນວິທີການອອກແບບທີ່ຮັບປະກັນວ່າເວັບໄຊທ໌ສະຫນອງປະສົບການການເບິ່ງທີ່ດີທີ່ສຸດໃນອຸປະກອນໃດກໍ່ຕາມ, ບໍ່ວ່າຈະເປັນຂະຫນາດຫນ້າຈໍຫຼືຄວາມລະອຽດ. ມັນກ່ຽວຂ້ອງກັບການໃຊ້ຮູບແບບທີ່ຍືດຫຍຸ່ນ, ການຈັດວາງທີ່ອີງໃສ່ຕາຂ່າຍໄຟຟ້າ, ແລະການສອບຖາມສື່ເພື່ອສ້າງເວັບໄຊທ໌ທີ່ປັບຂະຫນາດຂອງຫນ້າຈໍທີ່ມັນກໍາລັງເບິ່ງຢູ່. ນີ້ຫມາຍຄວາມວ່າເວັບໄຊທ໌ທີ່ຖືກອອກແບບດ້ວຍການອອກແບບເວັບທີ່ຕອບສະຫນອງຈະເບິ່ງແລະເຮັດວຽກໄດ້ດີໃນຄອມພິວເຕີ desktop, ແທັບເລັດຫຼືໂທລະສັບສະຫຼາດ.
ໃນຄໍາສັບຕ່າງໆອື່ນໆ, ອົງປະກອບເຊັ່ນຮູບພາບສາມາດປັບໄດ້ເຊັ່ນດຽວກັນກັບຮູບແບບຂອງອົງປະກອບເຫຼົ່ານັ້ນ. ນີ້ແມ່ນວິດີໂອທີ່ອະທິບາຍວ່າການອອກແບບທີ່ຕອບສະໜອງແມ່ນຫຍັງ ແລະເປັນຫຍັງບໍລິສັດຂອງທ່ານຄວນປະຕິບັດມັນ. ຖ້າທ່ານໄດ້ຮັບການອອກແບບເວັບໄຊທ໌ໃຫມ່ຫຼືຄໍາຮ້ອງສະຫມັກເວັບທີ່ຖືກພັດທະນາ, ການອອກແບບເວັບທີ່ຕອບສະຫນອງແມ່ນຈໍາເປັນ, ບໍ່ແມ່ນທາງເລືອກ, ເພາະວ່າຫຼາຍກວ່າເຄິ່ງຫນຶ່ງຂອງການເຂົ້າຊົມເວັບແມ່ນມາຈາກອຸປະກອນມືຖືທີ່ມີຄວາມກວ້າງແລະຄວາມສູງທີ່ແຕກຕ່າງກັນ.
ການອອກແບບທີ່ຕອບສະຫນອງແມ່ນຍັງເຫມາະສົມສໍາລັບຜູ້ອອກແບບເວັບ, ຜູ້ທີ່ບໍ່ຈໍາເປັນຕ້ອງສ້າງປະສົບການເອກະລາດທີ່ເປັນເອກະລັກໂດຍອີງໃສ່ອຸປະກອນຫຼື viewport. ການອອກແບບເວັບທີ່ຕອບສະຫນອງສາມາດສໍາເລັດໄດ້ໂດຍໃຊ້ CSS.
ການອອກແບບທີ່ຕອບສະໜອງ CSS Viewport Queries
ນີ້ແມ່ນຕົວຢ່າງຂອງ stylesheet ທີ່ກໍາລັງປັບຂະຫນາດຕົວອັກສອນໂດຍອີງໃສ່ viewport ໂດຍໃຊ້ media query:
/* Default styles for all devices */
body {
font-size: 16px;
line-height: 1.5;
}
/* Style changes for devices with a viewport width between 600px and 900px */
@media (min-width: 600px) and (max-width: 900px) {
body {
font-size: 18px;
}
}
/* Style changes for devices with a viewport width between 900px and 1200px */
@media (min-width: 900px) and (max-width: 1200px) {
body {
font-size: 20px;
}
}
/* Style changes for devices with a viewport width greater than 1200px */
@media (min-width: 1200px) {
body {
font-size: 22px;
}
}
ຕົວທ່ອງເວັບແມ່ນຕົນເອງຮູ້ຂະຫນາດຂອງເຂົາເຈົ້າແລະເຂົາເຈົ້າໂຫຼດ stylesheet ຈາກເທິງລົງລຸ່ມ. ໂດຍການສອບຖາມຮູບແບບທີ່ໃຊ້ໄດ້ສໍາລັບຂະຫນາດຂອງຫນ້າຈໍ, ທ່ານສາມາດກໍານົດອົງປະກອບຄໍເຕົ້າໄຂ່ທີ່ສະເພາະສໍາລັບແຕ່ລະຄວາມກວ້າງຂອງອຸປະກອນຕໍາ່ສຸດແລະສູງສຸດ. ນີ້ບໍ່ໄດ້ຫມາຍຄວາມວ່າທ່ານຕ້ອງອອກແບບສະຖານທີ່ທີ່ແຕກຕ່າງກັນສໍາລັບຫນ້າຈໍທຸກຂະຫນາດ, ທ່ານພຽງແຕ່ຕ້ອງການປ່ຽນອົງປະກອບທີ່ຈໍາເປັນໂດຍໃຊ້ການສອບຖາມສື່.
ການປະຕິບັດງານກັບຈິດໃຈທາງຈິດໃຈຂອງມືຖືແມ່ນມາດຕະຖານພື້ນຖານໃນປະຈຸບັນ. ຍີ່ຫໍ້ທີ່ເກັ່ງທີ່ສຸດແມ່ນ ກຳ ລັງຄິດບໍ່ວ່າເວບໄຊທ໌ຂອງພວກມັນມີຄວາມເປັນມິດກັບມືຖືແຕ່ກ່ຽວກັບປະສົບການຂອງລູກຄ້າຢ່າງເຕັມທີ່.
Lucinda Duncalfe, CEO ຂອງ Monetate
ນີ້ແມ່ນ infographic ຈາກ Monetate ສະແດງໃຫ້ເຫັນເຖິງຜົນປະໂຫຍດທີ່ເປັນໄປໄດ້ຂອງການສ້າງການອອກແບບຕອບສະຫນອງຫນຶ່ງສໍາລັບອຸປະກອນຫຼາຍ:
ເວັບໄຊຂອງເຈົ້າຕອບສະໜອງບໍ?
ວິທີງ່າຍໆອັນໜຶ່ງເພື່ອເບິ່ງວ່າເວັບໄຊຂອງເຈົ້າຕອບສະໜອງແມ່ນພຽງແຕ່ການຂະຫຍາຍຕົວ ຫຼືຫຍໍ້ໜ້າຕ່າງບຼາວເຊີຂອງເຈົ້າເພື່ອເບິ່ງວ່າອົງປະກອບເຄື່ອນຍ້າຍໂດຍອີງໃສ່ຄວາມກວ້າງຂອງຕົວທ່ອງເວັບ.
ສໍາລັບຄວາມແມ່ນຍໍາຫຼາຍ, ຊີ້ຂອງທ່ານ ກູໂກ Chrome browser ໄປຫາເວັບໄຊຂອງທ່ານ. ເລືອກ ເບິ່ງ> ນັກພັດທະນາ> ເຄື່ອງມືພັດທະນາ ຈາກເມນູ. ນີ້ຈະເປັນການໂຫຼດເຄື່ອງມືຫຼາຍອັນຢູ່ໃນແຜງ ຫຼືໜ້າຈໍໃໝ່. ຄລິກທີ່ໄອຄອນນ້ອຍໆຢູ່ທາງຊ້າຍຂອງແຖບເມນູ Developer Tools ທີ່ຄ້າຍຄືກັບໄອຄອນມືຖື ແລະແທັບເລັດ. ທ່ານສາມາດເລືອກເອົາອຸປະກອນມາດຕະຖານຈໍານວນຫນຶ່ງແລະເຖິງແມ່ນວ່າການປ່ຽນແປງວ່າທ່ານຕ້ອງການທີ່ຈະເບິ່ງຫນ້າແນວນອນຫຼືຕັ້ງ.
ທ່ານສາມາດໃຊ້ຕົວເລືອກການ ນຳ ທາງເທິງເພື່ອປ່ຽນມຸມມອງຈາກພູມສັນຖານໄປເປັນຮູບຄົນ, ຫຼືແມ້ກະທັ້ງເລືອກຂະ ໜາດ ຂອງຊ່ອງເບິ່ງ ໜ້າ preprogrammed. ທ່ານອາດຈະຕ້ອງໂຫຼດ ໜ້າ ເວບ ໃໝ່, ແຕ່ມັນເປັນເຄື່ອງມືທີ່ເຢັນທີ່ສຸດໃນໂລກ ສຳ ລັບການກວດສອບການຕັ້ງຄ່າຕອບສະ ໜອງ ຂອງທ່ານແລະຮັບປະກັນວ່າເວັບໄຊທ໌ຂອງທ່ານເບິ່ງດີເລີດໃນທຸກອຸປະກອນ!