ຕະຫຼາດເນື້ອໃນກາລະຕະຫຼາດແລະວິດີໂອການຂາຍInfographics ການຕະຫຼາດການຕະຫຼາດໂທລະສັບມືຖືແລະແທັບເລັດ

ການອອກແບບທີ່ມີຄວາມຮັບຜິດຊອບແມ່ນຫຍັງ? (ວິດີໂອແລະ 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 ສະແດງໃຫ້ເຫັນເຖິງຜົນປະໂຫຍດທີ່ເປັນໄປໄດ້ຂອງການສ້າງການອອກແບບຕອບສະຫນອງຫນຶ່ງສໍາລັບອຸປະກອນຫຼາຍ:

Infographic Design Web ທີ່ຮັບຜິດຊອບ

ເວັບໄຊຂອງເຈົ້າຕອບສະໜອງບໍ?

ວິທີງ່າຍໆອັນໜຶ່ງເພື່ອເບິ່ງວ່າເວັບໄຊຂອງເຈົ້າຕອບສະໜອງແມ່ນພຽງແຕ່ການຂະຫຍາຍຕົວ ຫຼືຫຍໍ້ໜ້າຕ່າງບຼາວເຊີຂອງເຈົ້າເພື່ອເບິ່ງວ່າອົງປະກອບເຄື່ອນຍ້າຍໂດຍອີງໃສ່ຄວາມກວ້າງຂອງຕົວທ່ອງເວັບ.

ສໍາລັບຄວາມແມ່ນຍໍາຫຼາຍ, ຊີ້ຂອງທ່ານ ກູໂກ Chrome browser ໄປຫາເວັບໄຊຂອງທ່ານ. ເລືອກ ເບິ່ງ> ນັກພັດທະນາ> ເຄື່ອງມືພັດທະນາ ຈາກເມນູ. ນີ້ຈະເປັນການໂຫຼດເຄື່ອງມືຫຼາຍອັນຢູ່ໃນແຜງ ຫຼືໜ້າຈໍໃໝ່. ຄລິກທີ່ໄອຄອນນ້ອຍໆຢູ່ທາງຊ້າຍຂອງແຖບເມນູ Developer Tools ທີ່ຄ້າຍຄືກັບໄອຄອນມືຖື ແລະແທັບເລັດ. ທ່ານ​ສາ​ມາດ​ເລືອກ​ເອົາ​ອຸ​ປະ​ກອນ​ມາດ​ຕະ​ຖານ​ຈໍາ​ນວນ​ຫນຶ່ງ​ແລະ​ເຖິງ​ແມ່ນ​ວ່າ​ການ​ປ່ຽນ​ແປງ​ວ່າ​ທ່ານ​ຕ້ອງ​ການ​ທີ່​ຈະ​ເບິ່ງ​ຫນ້າ​ແນວ​ນອນ​ຫຼື​ຕັ້ງ​.

  • chrome developer tools ແທັບເລັດຕອບສະຫນອງ
  • chrome developer tools ຕອບສະໜອງຕາມແນວນອນຂອງມືຖື
  • chrome developer tools ຕອບສະຫນອງມືຖື
  • chrome developer tools ຕອບສະຫນອງ desktop

ທ່ານສາມາດໃຊ້ຕົວເລືອກການ ນຳ ທາງເທິງເພື່ອປ່ຽນມຸມມອງຈາກພູມສັນຖານໄປເປັນຮູບຄົນ, ຫຼືແມ້ກະທັ້ງເລືອກຂະ ໜາດ ຂອງຊ່ອງເບິ່ງ ໜ້າ preprogrammed. ທ່ານອາດຈະຕ້ອງໂຫຼດ ໜ້າ ເວບ ໃໝ່, ແຕ່ມັນເປັນເຄື່ອງມືທີ່ເຢັນທີ່ສຸດໃນໂລກ ສຳ ລັບການກວດສອບການຕັ້ງຄ່າຕອບສະ ໜອງ ຂອງທ່ານແລະຮັບປະກັນວ່າເວັບໄຊທ໌ຂອງທ່ານເບິ່ງດີເລີດໃນທຸກອຸປະກອນ!

Douglas Karr

Douglas Karr ແມ່ນ CMO ຂອງ OpenINSIGHTS ແລະຜູ້ກໍ່ຕັ້ງຂອງ Martech Zone. Douglas ໄດ້ຊ່ວຍເຫຼືອຜູ້ເລີ່ມຕົ້ນ MarTech ຫຼາຍໆຄົນທີ່ປະສົບຜົນສໍາເລັດ, ໄດ້ຊ່ວຍເຫຼືອໃນຄວາມພາກພຽນອັນເນື່ອງມາຈາກຫຼາຍກວ່າ $ 5 ຕື້ໃນການຊື້ແລະການລົງທຶນ Martech, ແລະສືບຕໍ່ຊ່ວຍເຫຼືອບໍລິສັດໃນການປະຕິບັດແລະອັດຕະໂນມັດຍຸດທະສາດການຂາຍແລະການຕະຫຼາດຂອງພວກເຂົາ. Douglas ແມ່ນການຫັນເປັນດິຈິຕອນທີ່ໄດ້ຮັບການຍອມຮັບໃນລະດັບສາກົນແລະຜູ້ຊ່ຽວຊານ MarTech ແລະລໍາໂພງ. Douglas ຍັງເປັນຜູ້ຂຽນທີ່ພິມເຜີຍແຜ່ຂອງຄູ່ມືຂອງ Dummie ແລະຫນັງສືຜູ້ນໍາທາງທຸລະກິດ.

ບົດຄວາມທີ່ກ່ຽວຂ້ອງ

ກັບໄປດ້ານເທິງສຸດ
ປິດ

ກວດພົບ Adblock

Martech Zone ສາມາດສະໜອງເນື້ອຫານີ້ໃຫ້ກັບເຈົ້າໄດ້ໂດຍບໍ່ເສຍຄ່າໃຊ້ຈ່າຍໃດໆ ເພາະວ່າພວກເຮົາສ້າງລາຍໄດ້ຈາກເວັບໄຊຂອງພວກເຮົາຜ່ານລາຍໄດ້ໂຄສະນາ, ລິ້ງເຊື່ອມໂຍງ ແລະສະປອນເຊີ. ພວກ​ເຮົາ​ຈະ​ຮູ້​ສຶກ​ດີ​ຖ້າ​ຫາກ​ວ່າ​ທ່ານ​ຈະ​ເອົາ​ຕົວ​ບລັອກ​ການ​ໂຄ​ສະ​ນາ​ຂອງ​ທ່ານ​ທີ່​ທ່ານ​ເບິ່ງ​ເວັບ​ໄຊ​ຂອງ​ພວກ​ເຮົາ.