50 ເຄື່ອງມືທີ່ດີ ສຳ ລັບການອອກແບບເວັບຕອບສະ ໜອງ

ກະວີ: Monica Porter
ວັນທີຂອງການສ້າງ: 17 ດົນໆ 2021
ວັນທີປັບປຸງ: 17 ເດືອນພຶດສະພາ 2024
Anonim
50 ເຄື່ອງມືທີ່ດີ ສຳ ລັບການອອກແບບເວັບຕອບສະ ໜອງ - Creative
50 ເຄື່ອງມືທີ່ດີ ສຳ ລັບການອອກແບບເວັບຕອບສະ ໜອງ - Creative

ເນື້ອຫາ

ຕາມທີ່ແນະ ນຳ / ອອກແບບໂດຍ Ethan Marcotte ໃນທັງສອງບົດຂຽນຂອງລາວ "Design Web ທີ່ຮັບຜິດຊອບ" ພ້ອມທັງປື້ມທີ່ຂາຍດີທີ່ສຸດຂອງລາວ, ສິ່ງ ໜຶ່ງ ຕ້ອງການສາມອົງປະກອບເພື່ອເຮັດໃຫ້ເວບໄຊທ໌ຕອບສະ ໜອງ ໄດ້:

  1. ຕາຂ່າຍໄຟຟ້າທີ່ມີຄວາມຍືດຫຍຸ່ນ / ແຫຼວ
  2. ຮູບພາບທີ່ຮັບຜິດຊອບ
  3. ການສອບຖາມສື່

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

ເຄື່ອງມື ສຳ ລັບເລີ່ມຕົ້ນ

ກ່ອນທີ່ທ່ານຈະເລີ່ມຕົ້ນສ້າງເວັບໄຊທ໌້ຂອງທ່ານ, ມັນດີທີ່ສຸດທີ່ຈະວາດພາບວ່າອົງປະກອບຕ່າງໆໃນ ໜ້າ ເວັບຈະປັບຕົວແນວໃດໃຫ້ ເໝາະ ສົມກັບຂະ ໜາດ ຂອງເບົາເຊີທີ່ແຕກຕ່າງກັນຂອງອຸປະກອນຕ່າງໆທີ່ພວກມັນຈະຖືກເບິ່ງ, ແລະຫລີກລ້ຽງການເຊື່ອມຕໍ່ທີ່ມັກມາຈາກການຄິດຕົ້ນຕໍກ່ຽວກັບ ການອອກແບບຄອມພີວເຕີ້ແລະສ່ວນທີ່ເຫຼືອຂອງການຕອບສະ ໜອງ ເປັນວິທີແກ້ໄຂ (ເບິ່ງໂດຍສະເພາະ ຄຳ ເຫັນຂອງ Stephanie (Sullivan) Rewis).

01. ແຜ່ນສະແດງແຜນທີ່ອອກແບບທີ່ມີຄວາມຮັບຜິດຊອບ

Jeremy P Alford, ຊຸດແຜນຜັງທີ່ຕອບສະ ໜອງ ໄດ້ນີ້ແມ່ນຈຸດເລີ່ມຕົ້ນທີ່ດີທີ່ຈະເລີ່ມຕົ້ນສ້າງແຜນທີ່ວ່າ ໜ້າ ຕ່າງໆຂອງ ໜ້າ ເວັບຈະປ່ຽນໄປໃນມະຕິທີ່ແຕກຕ່າງກັນແນວໃດ.


02. Sketchbook ການອອກແບບທີ່ມີຄວາມຮັບຜິດຊອບ

ຖ້າທ່ານມັກທີ່ຈະຮັກສາຮູບແຕ້ມທັງ ໝົດ ຂອງທ່ານໄວ້ໃນບ່ອນດຽວ, ຫຼັງຈາກນັ້ນທ່ານອາດຈະຕ້ອງການພິຈາລະນາປື້ມບັນຍາຍເສັ້ນ 50 ແຜ່ນທີ່ຕອບສະ ໜອງ ໂດຍບໍລິສັດ App Sketchbook.

03. ລວດລາຍຮັບຜິດຊອບ

ໜຶ່ງ ໃນຄວາມຫຍຸ້ງຍາກໃນການສ້າງເວບໄຊທ໌ທີ່ຕອບສະ ໜອງ ແມ່ນການໃຊ້ wireframes ເພື່ອສະແດງວິທີການອອກແບບທີ່ຕອບສະ ໜອງ. James Mellers ຂອງ Adobe ໄດ້ວາງເຄື່ອງມືທົດລອງນີ້ເພື່ອສະແດງວິທີການຕອບສະ ໜອງ ຂອງການຈັດວາງສະລັບສັບຊ້ອນທີ່ສາມາດຕອບສະ ໜອງ ໄດ້.


04. ຮູບແບບການວາງແບບຫຼາຍອຸປະກອນ

ໃນເວລາທີ່ວາງແຜນການອອກແບບທີ່ຕອບສະ ໜອງ ມັນເປັນປະໂຫຍດທີ່ຈະເຫັນວ່າຄົນອື່ນໄດ້ເຂົ້າຫາມັນກ່ອນທ່ານ, ດັ່ງນັ້ນຮູບແບບການວາງແບບອຸປະກອນຫຼາຍຮູບແບບຂອງ Luke Wroblewski, ເຊິ່ງລາຍຊື່ຮູບແບບທີ່ໄດ້ຮັບຄວາມນິຍົມພ້ອມກັບການເຊື່ອມຕໍ່ກັບຕົວຢ່າງ, ແມ່ນບ່ອນທີ່ດີທີ່ຈະເລີ່ມຕົ້ນ.

05. ກະເບື້ອງຮູບຊົງ

ກະເບື້ອງຮູບຊົງຂອງ Samanatha Warren ສະ ເໜີ ເຕັກນິກ ໃໝ່ ສຳ ລັບການອອກແບບໃນຍຸກທີ່ຕອບສະ ໜອງ; ແທນທີ່ຈະເບິ່ງການອອກແບບຄວາມກວ້າງທີ່ບໍ່ມີຄວາມ ໝາຍ, ມັນຄ້າຍຄືກັບກະດານຫລືຊຸດກະດານລົມທີ່ສະແດງວິທີການອອກແບບທົ່ວໄປໂດຍບໍ່ຕ້ອງເຂົ້າໄປໃນລາຍລະອຽດແບບຫຍໍ້ໆ.

ເຄື່ອງມື ສຳ ລັບຕາຂ່າຍໄຟຟ້າທີ່ມີຄວາມຍືດຫຍຸ່ນ / ແຫຼວ

ດັ່ງທີ່ໄດ້ກ່າວກ່ອນ ໜ້າ ນີ້, ສ່ວນປະກອບ ທຳ ອິດທີ່ ຈຳ ເປັນ ສຳ ລັບການອອກແບບທີ່ຕອບສະ ໜອງ ແມ່ນຕາຂ່າຍໄຟຟ້າທີ່ມີຄວາມຍືດຍຸ່ນ / ນ້ ຳ.ສິ່ງຕໍ່ໄປນີ້ແມ່ນໄດ້ຖືກສ້າງຂຶ້ນມາກ່ອນແລ້ວ: ທ່ານພຽງແຕ່ຕ້ອງການດາວໂຫລດມັນແລະທ່ານຈະໄປສູ່ເວັບໄຊທ໌ທີ່ຕອບສະ ໜອງ ໄດ້ໄວກວ່ານີ້.


06. ລະບົບຕາຂ່າຍໄຟຟ້າ ຄຳ

Joni Korpi, ຜູ້ທີ່ຍັງພັດທະນາ Less Framework, ໄດ້ປ່ອຍອອກມາເມື່ອບໍ່ດົນມານີ້ລະບົບຕາຂ່າຍໄຟຟ້າທີ່ເຊື່ອຖືໄດ້ສໍາລັບການອອກແບບທີ່ຕອບສະຫນອງ. ຖືວ່າ "ພັບ" ຍ້ອນວ່າມັນສາມາດປັບຕົວໄດ້ຈາກ 16, ແປດ, ເຖິງສີ່ຖັນ, ລະບົບຕາຂ່າຍໄຟຟ້າ Golden ຍັງມີໂປແກຼມທີ່ຊ້ອນແຝງຕົວທ່ອງເວັບນ້ອຍໆທີ່ເຜີຍແຜ່ຕາຂ່າຍໄຟຟ້າໃນ ໜ້າ ເວັບຂອງທ່ານເພື່ອທົດສອບ.

07. Foldy960

ບັນດາພອນສະຫວັນທີ່ບໍລິສັດ Paravel, Inc ໄດ້ປ່ອຍຕາຂ່າຍໄຟຟ້າທີ່ມີການປ່ຽນແປງ 960.gs ທີ່ພວກເຂົາໃຊ້ເປັນພື້ນຖານ ສຳ ລັບໂຄງການທີ່ຕອບສະ ໜອງ.

08. SimpleGrid

SimpleGrid, ໂດຍ Conor Muirhead, ຖືກສ້າງຂຶ້ນດ້ວຍຄວາມຮັບຜິດຊອບທີ່ໄດ້ຮັບການອົບ, ດັ່ງນັ້ນມັນງ່າຍທີ່ຈະລຸກຂຶ້ນແລະແລ່ນກັບໂຄງການເວັບໄຊທ໌ທີ່ຕອບສະ ໜອງ ຂອງທ່ານ.

09. ແຜນທີ່ 1140px CSS Grid

ລະບົບຕາຂ່າຍໄຟຟ້າທີ່ຕອບສະ ໜອງ ໄດ້ດີອີກອັນ ໜຶ່ງ ແມ່ນ 1140px CSS Grid ໂດຍນັກອອກແບບ Melbourne Andy Taylor, ເຊິ່ງມາຈາກຄວາມລະອຽດຂອງ ໜ້າ ຈໍກວ້າງຈົນເຖິງມືຖື.

10. ລະບົບຕາຂ່າຍໄຟຟ້າ CSS Columnal

ລະບົບຕາຂ່າຍໄຟຟ້າ Columnal, ສ້າງໂດຍ Pulp + Pixels aka ຜູ້ສ້າງສັນ Nick Gorsline, ແມ່ນອີງໃສ່ລະບົບຕາຂ່າຍໄຟຟ້າ 1140 ພິກເຊລ, ແຕ່ມີບາງສິ່ງດີໆເພີ່ມເຕີມເຊັ່ນ: ຊຸດອອກແບບທີ່ມີຮູບແຕ້ມແລະແບບແມ່ແບບສາຍ, ພ້ອມທັງຮູບແບບການແກ້ໄຂ CSS.

11. ລະບົບຕາຂ່າຍໄຟຟ້າແບບ Semantic

ລະບົບຕາຂ່າຍໄຟຟ້າ CSS ທີ່ຖືກ ນຳ ໃຊ້ມາກ່ອນເຊັ່ນ Sass ແລະ LESS ກຳ ລັງໄດ້ຮັບຄວາມນິຍົມແລະເປັນທີ່ນິຍົມແລະລະບົບຕາຂ່າຍໄຟຟ້າຂອງ Tyler Tate ໃຊ້ພວກມັນໃຫ້ມີປະສິດຕິພາບສູງສຸດໃນລະບົບຕາຂ່າຍໄຟຟ້ານີ້ເຊິ່ງອ້າງວ່າບໍ່ໃຊ້ຫ້ອງຮຽນຫລືອົງປະກອບທີ່ບໍ່ ຈຳ ເປັນ. ອ່ານເພີ່ມເຕີມໄດ້ທີ່ coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow/.

12. ຊູດ

ເຊັ່ນດຽວກັນກັບລະບົບຕາຂ່າຍໄຟຟ້າ Semantic Oddbird's SUSY ໄດ້ສ້າງລະບົບຕາຂ່າຍໄຟຟ້າທີ່ບໍ່ໃຊ້ເຄື່ອງ ໝາຍ ຫລືຫ້ອງຮຽນພິເສດ, ແຕ່ SUSY ແມ່ນແນໃສ່ຜູ້ໃຊ້ Sass ເທົ່ານັ້ນ (ແລະການຂະຫຍາຍຂອງມັນ, Compass).

13. Gridpak

Gridpak, ໂດຍ Erskine Design, ແມ່ນ ໜຶ່ງ ໃນບັນດາຜູ້ຜະລິດຕາຂ່າຍໄຟຟ້າທີ່ຕອບສະ ໜອງ ໃໝ່ ທີ່ສຸດ. ມັນຊ່ວຍໃຫ້ທ່ານສາມາດ ກຳ ນົດຖັນແລະ gutters ຂອງທ່ານຢູ່ຈຸດພັກຜ່ອນຫຼາຍໆຈຸດ, ຫຼັງຈາກນັ້ນຈະອອກຜົນງານເອກະສານ CSS, JavaScript ແລະ PNG ເພື່ອໃຫ້ທີມງານທັງ ໝົດ ຂອງທ່ານເຮັດວຽກຕັ້ງແຕ່ຈຸດເລີ່ມຕົ້ນດຽວກັນ.

14. Gridset

ມັນຍັງມີອາກາດເລັກນ້ອຍຂອງຄວາມລຶກລັບໃນໄລຍະ Gridset, ໃນເວລາທີ່ຂ້ອຍຂຽນເລື່ອງນີ້, ມັນບໍ່ໄດ້ຖືກປ່ອຍຕົວອອກມາເທື່ອ. ແຕ່ເຄື່ອງມືທີ່ອອກແບບໂດຍ Mark Boulton Design ສັນຍາວ່າຈະໃຊ້ລະບົບຕາຂ່າຍໄຟຟ້າທີ່ບໍ່ແມ່ນການອະທິບາຍ, ລະບົບຕາຂ່າຍໄຟຟ້າແລະວິທີການປະຢັດແລະຈັດການຕາຂ່າຍໄຟຟ້າຂອງທ່ານ online.

15. ຕາຂ່າຍໄຟຟ້າ Photoshop ທີ່ດີກວ່າ ສຳ ລັບ RWD

Elliot Jay Stocks ສະ ເໜີ ການປະຖິ້ມມາດຕະຖານຕາຂ່າຍໄຟຟ້າເກົ່າທີ່ມີຂະ ໜາດ 960px de facto ແລະເຮັດວຽກຈາກພື້ນຖານ 1000px ແທນ, ເຮັດໃຫ້ການຄິດໄລ່ເປີເຊັນທັງ ໝົດ ງ່າຍຕໍ່ການເຮັດວຽກກັບ. ຖ້າທ່ານຕົກລົງເຫັນດີ, ລາວໄດ້ເຮັດ PSD ເພື່ອໃຫ້ທ່ານເລີ່ມເຮັດວຽກກັບ.

16. ຕາຂ່າຍໄຟຟ້າ

ຖ້າການອອກແບບຂອງທ່ານມີຄວາມ ຊຳ ນານສູງແລະທ່ານ ຈຳ ເປັນຕ້ອງສ້າງຕາຂ່າຍໄຟຟ້າທີ່ ກຳ ຫນົດເອງ, ທ່ານສາມາດເຮັດໄດ້ດ້ວຍ .net Awards ເຄື່ອງຄິດໄລ່ຕາຂ່າຍໄຟຟ້າ ສຳ ລັບຜູ້ມາໃຫມ່ຂອງລາງວັນ .net ລາງວັນ.

17. ເຄື່ອງຄິດໄລ່ຕອບຮັບ

ພິກະເຊນອີກຢ່າງ ໜຶ່ງ ຕໍ່ເປີເຊັນຂອງເຄື່ອງຄິດໄລ່ອັດຕາສ່ວນ, ແຕ່ອັນນີ້ໂດຍ Stu Robson ກ້າວຕໍ່ໄປອີກບາດກ້າວ ໜຶ່ງ ກ່ວາອັນອື່ນໂດຍການສ້າງກົດລະບຽບ CSS ທັງ ໝົດ ສຳ ລັບທ່ານ, ໝາຍ ຄວາມວ່າທ່ານພຽງແຕ່ສາມາດຄັດລອກແລະວາງມັນເຂົ້າໃນບັນຊີຂອງທ່ານ.

ເຄື່ອງມື ສຳ ລັບຮູບພາບທີ່ຕອບສະ ໜອງ (ແລະຂໍ້ຄວາມ)

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

18. ຮູບພາບທີ່ມີຄວາມຮັບຜິດຊອບ

ກຸ່ມ Filament ໄດ້ສ້າງວິທີການສົ່ງຮູບພາບທີ່ມີຂະ ໜາດ ທີ່ ເໝາະ ສົມໂດຍອີງໃສ່ຄວາມລະອຽດຂອງ ໜ້າ ຈໍ. ການທົດລອງນີ້ກັບພາບ ທຳ ອິດໃນມືຖືທີ່ມີຂະ ໜາດ ຕອບສະ ໜອງ ແລະມີຄວາມຮັບຜິດຊອບຮຽກຮ້ອງໃຫ້ມີສອງຮູບພາບຂອງຂະ ໜາດ ທີ່ແຕກຕ່າງກັນເພື່ອອ້າງອີງ.

19. ຮູບພາບທີ່ສາມາດປັບຕົວໄດ້

Matt Wilcox ໄດ້ເອົາແຮງບັນດານໃຈຈາກເຄື່ອງມືທີ່ຕອບສະ ໜອງ ຄວາມຮັບຜິດຊອບເພື່ອສ້າງຮູບພາບທີ່ສາມາດປັບແຕ່ງ, ເຊິ່ງໃຊ້ PHP ແລະ JavaScript ເລັກ ໜ້ອຍ ເພື່ອຮັບໃຊ້ຮູບພາບທີ່ ເໝາະ ສົມກັບອຸປະກອນຂອງຜູ້ໃຊ້ໂດຍບໍ່ຕ້ອງໃຊ້ເຄື່ອງ ໝາຍ ເພີ່ມເຕີມ.

20. Sencha.io Src (ເມື່ອກ່ອນ Tinysrc)

Sencha ໃຫ້ບໍລິການເມຄທີ່ສົ່ງຮູບພາບທີ່ເປັນເຈົ້າພາບທີ່ ເໝາະ ສົມ ສຳ ລັບຂະ ໜາດ ຂອງອຸປະກອນທີ່ຮ້ອງຂໍໃຫ້ພວກເຂົາ. ເພື່ອຊອກຮູ້ວິທີໃຊ້ມັນ, ເບິ່ງ docs.sencha.com/io/src/.

21. FitText

ແຕ່ແກ້ວປະເສີດອີກອັນ ໜຶ່ງ ຈາກ Paravel, Inc ແມ່ນ FitText.js, jQuery plug-in ເພື່ອເຮັດໃຫ້ປະເພດຫົວຂໍ້ເວັບຕອບສະ ໜອງ ຕໍ່ການອອກແບບແລະອຸປະກອນ. ສຳ ລັບລາຍລະອຽດເບິ່ງ trentwalton.com/2011/05/10/fit-to-scale/.

22. ແຜ່ນສະໄລ້

ການດົນໃຈໂດຍ FitText ແລະສູດການຄິດໄລ່ SlabType, Brian McAllister's slabText ແມ່ນໂປແກມ jQuery ທີ່ເຮັດໃຫ້ຕົວ ໜັງ ສືທີ່ກ້າຫານທີ່ປັບຂະ ໜາດ ຕອບສະ ໜອງ ໄດ້ໃນຂະນະທີ່ຮັກສາຄວາມກວ້າງ.

ເຄື່ອງມື ສຳ ລັບການສອບຖາມສື່

ຕອນນີ້ທ່ານມີຄວາມຄິດກ່ຽວກັບຮູບແບບຂອງທ່ານທີ່ຈະປ່ຽນແປງ ສຳ ລັບອຸປະກອນທີ່ແຕກຕ່າງກັນ, ຕາຂ່າຍໄຟຟ້າແລະຮູບພາບຂອງແຫຼວ, ທ່ານ ຈຳ ເປັນຕ້ອງມີການສອບຖາມສື່ຕ່າງໆເພື່ອປ່ຽນອົງປະກອບຂອງ ໜ້າ ເວັບເຂົ້າສູ່ສະພາບທີ່ມີຄວາມຮັບຜິດຊອບ.

23. Respond.js

ປະເດັນ ໜຶ່ງ ຂອງການອອກແບບທີ່ຕອບສະ ໜອງ ແມ່ນຕົວທ່ອງເວັບທີ່ບໍ່ສາມາດອ່ານ ຄຳ ຖາມກ່ຽວກັບສື່ໄດ້ຖືກປະຖິ້ມໄວ້. ນີ້ອາດຈະບໍ່ແມ່ນບັນຫາກັບຜູ້ຊົມເປົ້າ ໝາຍ ຂອງທ່ານ, ແຕ່ມັນຍັງເປັນການປະຕິບັດທີ່ດີທີ່ຈະຮອງຮັບຜູ້ໃຊ້ໃນໂປແກຼມທ່ອງເວັບເກົ່າ. Respond.js, ໂດຍ Scott Jehl, ພຽງແຕ່ສະ ໜັບ ສະ ໜູນ ຄຸນສົມບັດ min-width ແລະ max-width ເທົ່ານັ້ນ.

ສຳ ລັບເບິ່ງເພີ່ມເຕີມເບິ່ງ filamentgroup.com/lab/respondjs_fast_css3_media_queries_for_internet_explorer_6_8_and_more/.

24. CSS3-Mediaqueries.js

CSS3-Mediaqueries.js, ໂດຍ Wouter van der Graaf, ຊ່ວຍໃຫ້ IE ລຸ້ນເກົ່າແລະຕົວທ່ອງເວັບອື່ນໆສາມາດທົດສອບແລະ ນຳ ໃຊ້ ຄຳ ຖາມສື່ທຸກປະເພດໄດ້ຢ່າງມີປະສິດຕິຜົນ.

25. Adapt.js

Nathan Smith, ຜູ້ຂຽນຂອງລະບົບຕາຂ່າຍໄຟຟ້າ 960.gs ເດີມໄດ້ຂຽນ Adapt.js, ສະຄິບທີ່ກວດພົບຂະ ໜາດ ຂອງ browser ແລະໃຫ້ບໍລິການພຽງແຕ່ຮູບແບບທີ່ ຈຳ ເປັນເທົ່ານັ້ນ - ເຊັ່ນການສອບຖາມສື່ແຕ່ບໍ່ມີການສອບຖາມສື່, ໝາຍ ຄວາມວ່າມັນເຮັດວຽກຢູ່ໃນໂປຣແກຣມທ່ອງເວັບເກົ່າ.

26. Categorizr

ນີ້ແມ່ນການຊອກຄົ້ນຫາອຸປະກອນມາຈາກມຸມມອງທີ່ກົງກັນຂ້າມ - ຕົວອັກສອນ Brett Jankord's Categorizr ສັນນິຖານວ່າອຸປະກອນຕ່າງໆແມ່ນໃຊ້ມືຖືເວັ້ນເສຍແຕ່ວ່າຈະກວດພົບໃນທາງອື່ນເຊັ່ນວ່າແທັບເລັດຫຼືແທັບເລັດ, ຊ່ວຍໃຫ້ທ່ານສາມາດຮັບໃຊ້ຊັບພະຍາກອນໃຫ້ກັບຕົວທ່ອງເວັບດ້ວຍຄວາມເຫັນອົກເຫັນໃຈ.

ການອອກແບບທີ່ມີຄວາມຮັບຜິດຊອບ (ແລະມືຖື)

ໃນແງ່ຂອງການເຮັດວຽກທີ່ມີປະສິດຕິພາບທີ່ມີປະສິດຕິພາບ, ເຕົາທີ່ມີຄວາມສະດວກສະບາຍໃນຂະບວນການເຄື່ອນຍ້າຍການອອກແບບໄປຫາ browser ທັນທີ. ເຄື່ອງປັ່ນປ່ວນສ່ວນໃຫຍ່ເຫຼົ່ານີ້ລວບລວມເຄື່ອງມືທີ່ດີທີ່ສຸດທີ່ກ່າວມາຂ້າງເທິງເຂົ້າໃນຊຸດທີ່ສົມບູນແບບ: ຕາຂ່າຍໄຟຟ້າທີ່ມີຄວາມຍືດຫຍຸ່ນໄດ້ຮັບການປັບປຸງດ້ວຍສະຄິບ, ໃນຂະນະທີ່ປະຕິບັດແນວຄິດ ທຳ ອິດຂອງມືຖື.

27. 320 ຂຶ້ນໄປ

320 ແລະ Up ຂອງ Andy Clarke ແມ່ນເຄື່ອງຈັກຜະລິດເຕົາປະຢັດແບບ ທຳ ອິດໃນມືຖືເຊິ່ງປະສົມປະສານກັບເຄື່ອງມືອອກແບບເວບໄຊທ໌ອື່ນໆທີ່ມີຄວາມທັນສະ ໄໝ ຫລາຍຢ່າງ, ເຊັ່ນ LESS ແລະ Bootstrap (ເບິ່ງ # 30). ມັນເປັນວິທີທີ່ເບົາແລະວ່ອງໄວທີ່ຈະເຮັດໃຫ້ເວບໄຊທ໌ຂື້ນແລະແລ່ນໄວ. ພ້ອມທັງກວດເບິ່ງການ ສຳ ພາດຂອງພວກເຮົາກັບ Andy, ເຊິ່ງລາວບອກພວກເຮົາຕື່ມກ່ຽວກັບລຸ້ນ ໃໝ່.

28. ຕາຂ່າຍໄຟຟ້າ

Gridless ແມ່ນເຕົາອົບທີ່ໃຊ້ HTML5 ແລະ CSS3 ເຊິ່ງສາມາດໃຊ້ເປັນພື້ນຖານ ສຳ ລັບການອອກແບບທີ່ຕອບສະ ໜອງ ຂອງທ່ານ, ໂດຍເນັ້ນໃສ່ການພິມແບບພິມແລະຄວາມເຂົ້າກັນໄດ້ຂອງ browser-baked.

29. ໂຄງກະດູກ

ບໍ່ຄືກັບສອງເຕົາປະເພດກ່ອນ ໜ້າ ນີ້, ເຊິ່ງຈຸດເລີ່ມຕົ້ນຂອງມັນແມ່ນຄວາມລະອຽດທີ່ນ້ອຍທີ່ສຸດ, ຊຸດພັດທະນາ Skeleton ທີ່ຖືກສ້າງຂື້ນໂດຍ Dave Gamache ແມ່ນອີງໃສ່ລະບົບຕາຂ່າຍໄຟຟ້າ 960.gs ແລະເກັດລົງໄປໃນມືຖື. Skeleton ຍັງມີໂຄງຮ່າງການທີ່ດີເລີດ ສຳ ລັບນັກພັດທະນາເພື່ອສ້າງຮູບແບບຕ່າງໆຢູ່ເທິງສຸດ.

30. ເກີບໃສ່ເກີບ

ສ້າງໂດຍ Twitter ແລະປະຈຸບັນເປີດ - ຊອກຫາ, Bootstrap ແມ່ນກອບແລະຊຸດຂອງສ່ວນປະກອບ ສຳ ລັບການໄດ້ຮັບເວບໄຊທ໌ທາງອິນເຕີເນັດຢ່າງໄວວາ, ແລະໃນສອງພາກສ່ວນທັງ ໝົດ ຂອງພາກສ່ວນຫຼັກຂອງມັນເຮັດວຽກຢ່າງມີຄວາມຮັບຜິດຊອບ.

Plugins, shims ແລະ polyfills

ເຖິງແມ່ນວ່າຕົວທ່ອງເວັບແລະຊອບແວທີ່ທັນສະ ໄໝ ມີແນວໂນ້ມທີ່ຈະຕອບສະ ໜອງ ໄດ້, ບາງຄັ້ງພວກເຮົາຕ້ອງໃຊ້ເຄື່ອງມືພິເສດເພື່ອໃຫ້ມີປະສົບການທີ່ສອດຄ່ອງ.

31. Plugin ຕອບສະ ໜອງ

Marios Lublinski ໄດ້ຂຽນໂປແກຼມ WordPress plug-in ເຊິ່ງສັນຍາວ່າຈະຫັນປ່ຽນຫົວຂໍ້ WP ໃດໆໃນປະຈຸບັນໃຫ້ກາຍເປັນຫົວຂໍ້ທີ່ຕອບສະ ໜອງ ໄດ້. ວິທີການເຮັດວຽກນີ້ຂ້າພະເຈົ້າຍັງບໍ່ທັນຮູ້ຍ້ອນວ່າມັນຍັງບໍ່ທັນໄດ້ຖືກປ່ອຍອອກມາເປັນເວລາຂອງການຂຽນນີ້, ແຕ່ຖ້າມັນປະຕິບັດຕາມ ຄຳ ສັນຍາຂອງມັນມັນຄວນຈະເປັນປະໂຫຍດຫຼາຍ.

32. ໂຄ່ນລົ້ມ

ການຈັດການເນື້ອຫາທີ່ລົ້ນລົ້ນເຮັດວຽກໄດ້ດີໃນຕົວທ່ອງເວັບຂອງ desktop, ແຕ່ວ່າໂປແກຼມທ່ອງເວັບມືຖືເກົ່າລ້ວນແຕ່ຈັດການກັບມັນບໍ່ສອດຄ່ອງ The Overthrow polyfill ຈາກກຸ່ມ Filament Group ເພີ່ມຄວາມເສື່ອມໂຊມທີ່ມີຄຸນຄ່າທີ່ສອດຄ່ອງກັນທົ່ວອຸປະກອນຕ່າງໆ, ເພື່ອໃຫ້ແນ່ໃຈວ່າຜູ້ໃຊ້ມືຖືທຸກຄົນໄດ້ຮັບປະສົບການທີ່ດີທີ່ສຸດ.

33. MediaTable

plugin jQuery ຂອງ Marco Pegoraro, MediaTable ເຮັດວຽກຮ່ວມກັບ Respond.js ເພື່ອຊ່ວຍໃຫ້ທ່ານສາມາດແກ້ໄຂບັນຫາກ່ຽວກັບວິທີການສະແດງຕາຕະລາງຂໍ້ມູນຂະ ໜາດ ໃຫຍ່ໃນອຸປະກອນ ໜ້າ ຈໍຂະ ໜາດ ນ້ອຍ, ເຮັດໃຫ້ຖັນທີ່ຕອບສະ ໜອງ ແລະເພີ່ມການສະແດງ / ປິດບັງບ່ອນທີ່ ເໝາະ ສົມ.

"ການທົດສອບ, ທົດສອບ: 1-2-3 ... "

ອີກດ້ານ ໜຶ່ງ ຂອງຂະບວນການເຮັດວຽກທີ່ຕອບສະ ໜອງ ຄືການຮູ້ອຸປະກອນເປົ້າ ໝາຍ ແລະຄວາມລະອຽດຂອງທ່ານແລະຈາກນັ້ນທົດສອບໃນນັ້ນ.

34. resizeMyBrowser

resizeMyBrowser, ໂດຍນັກພັດທະນາ frontend Chen Luo, ມີຫຼາຍຂະ ໜາດ ທີ່ຕັ້ງໄວ້ລ່ວງ ໜ້າ ສຳ ລັບ window browser ຂອງທ່ານເພື່ອທົດສອບ ໜ້າ ທີ່ອອກແບບທີ່ຕອບສະ ໜອງ ຫຼືສ້າງ preset ໃໝ່ ຖ້າທ່ານບໍ່ສາມາດຊອກຫາສິ່ງທີ່ ເໝາະ ສົມກັບຄວາມຕ້ອງການຂອງທ່ານ.

35. responsivepx

ຄ້າຍຄືກັບ resizeMyBrowser, responsivepx, ສ້າງໂດຍ Remy Sharp, ໂຫລດ ໜ້າ ເວັບຂອງທ່ານຢູ່ໃນປ່ອງຢ້ຽມບ່ອນທີ່ທ່ານສາມາດທົດສອບຄວາມກວ້າງແລະຄວາມສູງເພື່ອ ກຳ ນົດວ່າການສອບຖາມສື່ຂອງທ່ານ ກຳ ລັງຍິງແລະບ່ອນທີ່ຈຸດແບ່ງແຍກອອກແບບ.

36. ການທົດສອບການອອກແບບທີ່ຕອບສະ ໜອງ

ເຄື່ອງມືທີ່ມີປະໂຫຍດຢ່າງບໍ່ ໜ້າ ເຊື່ອໂດຍນັກອອກແບບແລະນັກພັດທະນາ Matt Kersley: ພຽງແຕ່ໃສ່ URL ຂອງເວັບໄຊທ໌ຕອບສະ ໜອງ ຂອງທ່ານໃນການທົດສອບການອອກແບບທີ່ມີຄວາມຮັບຜິດຊອບເພື່ອເບິ່ງວ່າມັນ ນຳ ໃຊ້ໃນຫລາຍຂະ ໜາດ ຂອງ browser ຫຼືບໍ່.

37. ຜູ້ຮັບຜິດຊອບ

ໃສ່ URL ແລະຜູ້ຮັບຜິດຊອບຈະສະແດງວິທີທີ່ມັນສະແດງໃນຫລາຍຂະ ໜາດ ຂອງອຸປະກອນທົ່ວໄປ - ດ້ວຍປະສິດທິພາບຫຸ່ນຍົນແບບບໍ່ມີສາຍ. Tama Pugsley ແລະ Andy Hovey ເປັນຜູ້ຮັບຜິດຊອບຕໍ່ວຽກງານນີ້.

38. ຜູ້ຮັບຜິດຊອບ

ເຄື່ອງປະດັບໃນອຸປະກອນໃນ ໜ້າ ເວັບອີກຢ່າງ ໜຶ່ງ, Responsive.is ຊ່ວຍໃຫ້ທ່ານພິມ URL ຫຼັງຈາກນັ້ນປັບຂະ ໜາດ ມັນລະຫວ່າງການຕັ້ງຄ່າຕ່າງໆ. ມັນຖືກສ້າງຂື້ນໂດຍທີມທີ່ຢູ່ເບື້ອງຫລັງແອັບ Type Typecast ທີ່ ກຳ ລັງຈະມາເຖິງ.

39. Screenqueri.es

ເຄື່ອງມືຂະ ໜາດ ຂອງຕົວທ່ອງເວັບອີກ ໜຶ່ງ ເຄື່ອງແຕ່ວ່າ Screenqueri.es ຈາກ Mandar Shirke ແຕກຕ່າງກັນເອງໂດຍມີຊຸດມືຖືແລະແທັບເລັດທີ່ ກຳ ນົດໄວ້ຢ່າງກວ້າງຂວາງພ້ອມທັງຕາຂ່າຍໄຟຟ້າແລະຜູ້ ນຳ ທີ່ເຮັດໃຫ້ການວັດແທກທີ່ດີຂື້ນງ່າຍກວ່າເກົ່າ.

40. Aptus

ແອັບ Another ອື່ນ ສຳ ລັບສະຖານທີ່ທົດສອບທີ່ມີຫລາຍຂະ ໜາດ, ແຕ່ Aptus ແມ່ນ Mac. ມັນສາມາດໃຊ້ໄດ້ຜ່ານ Mac App Store, ແລະການເປັນຄົນພື້ນເມືອງກໍ່ ນຳ ເອົາຄຸນລັກສະນະພິເສດຕ່າງໆເຊັ່ນ: ພາບ ໜ້າ ຈໍງ່າຍແລະການສະ ໜັບ ສະ ໜູນ ແບບ offline.

41. ປື້ມຄູ່ມືການອອກແບບທີ່ມີຄວາມຮັບຜິດຊອບ

Victor Coulon ໄດ້ເຮັດປື້ມຄູ່ມືທີ່ງ່າຍດາຍແຕ່ມີປະສິດຕິຜົນ; ເມື່ອທ່ານເປີດໃຊ້ມັນຢູ່ໃນ ໜ້າ ເວັບໃດກໍ່ຕາມມັນເພີ່ມແຖບເຄື່ອງມືເຊິ່ງຊ່ວຍໃຫ້ທ່ານປ່ຽນລະຫວ່າງສີ່ ໜ້າ ຈໍທົ່ວໄປເພື່ອໃຫ້ທ່ານສາມາດເບິ່ງວ່າເວັບໄຊທ໌ຂອງທ່ານມີຂະ ໜາດ ແຕກຕ່າງກັນແນວໃດ.

42. Bookmarklet ແບບທົດສອບການອອກແບບທີ່ຕອບສະ ໜອງ

Bookmarklet ນີ້ໂດຍ Benjamin Keen ອະນຸຍາດໃຫ້ມີການປັບແຕ່ງຫຼາຍຂື້ນໂດຍໃຫ້ທ່ານ ກຳ ນົດຂະ ໜາດ ຂອງອຸປະກອນຂອງທ່ານເອງ, ແລະມີຫລາຍຫລືຫລາຍເທົ່າທີ່ທ່ານຕ້ອງການ. ເມື່ອເປີດໃຊ້ງານມັນສະແດງສະຖານທີ່ໃນທຸກຂະ ໜາດ ທີ່ເລືອກ, ຂ້າງຄຽງເພື່ອການປຽບທຽບງ່າຍ.

43. Screenfly

Screenfly, ໂດຍ QuirkTools, ຊ່ວຍໃຫ້ທ່ານສາມາດທົດສອບເວັບໄຊທ໌້ກ່ຽວກັບມະຕິຕົກລົງທີ່ແຕກຕ່າງກັນໃນ ໜ້າ ຈໍ, ແທັບເລັດ, ໂທລະສັບມືຖືແລະໂທລະພາບ. ການທົດສອບຄອມພິວເຕີ້ໃນປັດຈຸບັນແມ່ນ ຈຳ ກັດຕໍ່ກັບ Safari, ໃນຂະນະທີ່ແທັບເລັດແລະມືຖືມີຫລາຍທາງເລືອກ ສຳ ລັບອຸປະກອນແລະ browser. ໂທລະພາບມີ ຈຳ ກັດຕໍ່ Opera.

44. ຕົວຊີ້ວັດການສອບຖາມສື່

Johan Brook ສະເຫນີວິທີການ CSS ທີ່ບໍລິສຸດໃນການທົດສອບເມື່ອການສອບຖາມກ່ຽວກັບສື່ໄດ້ຮັບຜົນກະທົບຈາກຕົວທ່ອງເວັບ. ຕົວຊີ້ວັດການສອບຖາມສື່ແມ່ນເຄື່ອງມືທີ່ດີອີກຢ່າງ ໜຶ່ງ ສຳ ລັບການທົດສອບແລະຫຼີ້ນກັບຈຸດແຕກຕ່າງຂອງການອອກແບບ.

45. ຊິມ

ໜຶ່ງ ໃນເຄື່ອງມືທີ່ໃຊ້ໃນການອອກແບບ ໃໝ່ ຂອງ Boston Globe, ລູກຊາຍຂອງການເຄື່ອນໄຫວຂອງ RWD, Shim ແມ່ນແອັບ N Node.js ເຊິ່ງໃຊ້ ໜ້າ ເວບໄຊທ໌ຜ່ານຫລາຍໆອຸປະກອນໃນເຄືອຂ່າຍ Wifi ດຽວກັນ, ເຮັດໃຫ້ການທົດສອບຂ້າມອຸປະກອນທີ່ງ່າຍກວ່າ .

46. ​​Drive-In

ຖ້າທ່ານບໍ່ມີ server Node.js ໃນການເຮັດວຽກ Shim, Scott Jehl ໄດ້ເຮັດແບບງ່າຍໆທີ່ເອີ້ນວ່າ Drive-In ເຊິ່ງໃຊ້ໄດ້ໃນທາງດຽວກັນໂດຍພື້ນຖານ, ແຕ່ໃຊ້ PHP, Apache ແລະເອກະສານ .htaccess.

47. Adobe Shadow

Adobe ສືບຕໍ່ການຊຸກຍູ້ຂອງພວກເຂົາເຂົ້າໃນເຕັກໂນໂລຢີເວັບດ້ວຍເຄື່ອງມືແກ້ໄຂບັນຫາຫ່າງໄກສອກຫຼີກນີ້. ຕິດຕັ້ງ Shadow ແລະສ່ວນຂະຫຍາຍຂອງ Chrome ໃນ Mac ຫລື Windows, ບວກກັບລູກຄ້າ Shadow ໃນ Android ຫລື iPhone, ແລະທ່ານສາມາດແບ່ງປັນ ໜ້າ ເວບຕ່າງໆລະຫວ່າງຫລາຍໆອຸປະກອນທີ່ແຕກຕ່າງກັນ.

48. Opera Mobile Emulator + Debug ຫ່າງໄກສອກຫຼີກ

ວິທີທີ່ງ່າຍກວ່າທີ່ຈະ ກຳ ຈັດ ໜ້າ ມືຖືແມ່ນການຕິດຕັ້ງ Opera ແລະ Opera Mobile Emulator ແລະເຊື່ອມຕໍ່ສອງຢ່າງດ້ວຍຕົວເລືອກຫ່າງໄກສອກຫຼີກຂອງພວກເຂົາ. ການຕັ້ງຄ່າງ່າຍດາຍແລະລວດໄວ, ແລະມີຜົນປະໂຫຍດເພີ່ມເຕີມຂອງການທົດສອບຫຼາຍກວ່າ WebKit.

ແຮງບັນດານໃຈເພີ່ມເຕີມ

ຕ້ອງການຢາກໃຫ້ມີຄວາມຄິດກ່ຽວກັບວິທີທີ່ຄົນອື່ນ ກຳ ລັງເຮັດການອອກແບບຂອງເຂົາເຈົ້າໃຫ້ມີຄວາມຮັບຜິດຊອບ?

49. MediaQueri.es

ຖ້າທ່ານບໍ່ໄດ້ເຫັນມັນແລ້ວ, ເວັບໄຊທ໌ Mediaqueri.es ມີ ຈຳ ນວນເວັບໄຊທ໌ທີ່ມີ ຈຳ ນວນເພີ່ມຂື້ນເລື້ອຍໆທີ່ໄດ້ຂ້າມໄປຫາຝ່າຍທີ່ຕອບສະ ໜອງ.

50. @RWD

Ethan Marcotte ໃຊ້ບັນຊີ Twitter ເຊິ່ງ ນຳ ເອົາຂ່າວ, ເຄື່ອງມືແລະການສະແດງ ໃໝ່ ຫຼ້າສຸດຈາກໂລກຂອງ RWD.

Denise Jacobs ຖືວ່າເປັນຜູ້ເວົ້າ, ຜູ້ຂຽນ, ຄູສອນອອກແບບເວບໄຊທ໌ແລະຜູ້ປະກາດຄວາມຄິດສ້າງສັນ, ໃນຂະນະທີ່ Peter Gasston ແມ່ນຜູ້ຂຽນ The Book of CSS3 ແລະເປັນນັກພັດທະນາເວບໄຊທ໌ນັກຮົບເກົ່າທີ່ຂຽນ blog ທີ່ Broken Links.

ມັກນີ້ບໍ? ອ່ານເຫຼົ່ານີ້!

  • ຄຳ ແນະ ນຳ ສຳ ລັບການສ້າງເວັບໄຊທ໌ເທິງມືຖື
  • ເທັກນິກ CSS ແລະ JavaScript ອັນດັບ ໜຶ່ງ
  • ວິທີການສ້າງແອັບ.
  • ຕົວອັກສອນເວັບຟຣີທີ່ດີທີ່ສຸດ ສຳ ລັບນັກອອກແບບ
  • ຄົ້ນພົບສິ່ງທີ່ເປັນຕໍ່ໄປ ສຳ ລັບ Augmented Reality
  • ດາວໂຫລດໂຄງສ້າງທີ່ບໍ່ເສຍຄ່າ: ຄວາມລະອຽດສູງແລະພ້ອມທີ່ຈະ ນຳ ໃຊ້ດຽວນີ້
ບົດຂຽນທີ່ຜ່ານມາ

ການອອກແບບຊຸດປົກ ໜ້າ ອັລບັ້ມ Storm Thorgerson 10 ແບບ
ມາດຕາຕໍ່ໄປ

10 ວິທີໃນການປັບປຸງຮ່າງກາຍ 3D ຂອງທ່ານ
ສິ່ງພິມຂອງພວກເຮົາ
ຮູບພາບຂອງມື້: ພໍ່ຄ້າ James Tea ໂດຍ Kollor
ຄົ້ນພົບ

ຮູບພາບຂອງມື້: ພໍ່ຄ້າ James Tea ໂດຍ Kollor

ເດືອນພຶດສະພາ 2024
ສິລະປະຄອມພິວເຕີ: ບອກພວກເຮົາກ່ຽວກັບໂຄງການ Jame Tea Merchant … Erik Tencer: ຮ້ານຂາຍຊາ Jame ແມ່ນຮ້ານຊາລວມແລະຮ້ານອາຫານ deli ທີ່ຕັ້ງຢູ່ໃນຕະຫຼາດຫໍທີ່ໄດ້ຮັບການຟື້ນຟູໃນ Lund. ເຈມສະ ເໜີ ຜະລິດຕະພັນຊາລວມທັງຜະລິດ...
ນັກອອກແບບອຸດສາຫະ ກຳ ທີ່ມີແຮງບັນດານໃຈ 12 ຄົນໃຫ້ຕິດຕາມ Behance
ຄົ້ນພົບ

ນັກອອກແບບອຸດສາຫະ ກຳ ທີ່ມີແຮງບັນດານໃຈ 12 ຄົນໃຫ້ຕິດຕາມ Behance

ເດືອນພຶດສະພາ 2024
Behance ແມ່ນສະຖານທີ່ທີ່ດີທີ່ຈະຊອກຫາວຽກ ໃໝ່ ແລະແຮງບັນດານໃຈທີ່ສ້າງສັນຈາກຜູ້ອອກແບບອຸດສາຫະ ກຳ ຊັ້ນ ນຳ. ແຕ່ວ່າມີຄົນ ຈຳ ນວນຫລວງຫລາຍໃນການຄົ້ນຫາ, ມັນອາດຈະເປັນເລື່ອງຍາກທີ່ຈະຮູ້ບ່ອນທີ່ຈະເລີ່ມຕົ້ນ.ສະນັ້ນເພື່ອເຮັ...
ວິທີການປົກປ້ອງເວັບໄຊທ໌້ຂອງທ່ານຈາກແຮກເກີ
ຄົ້ນພົບ

ວິທີການປົກປ້ອງເວັບໄຊທ໌້ຂອງທ່ານຈາກແຮກເກີ

ເດືອນພຶດສະພາ 2024
ຫຼັກຖານແມ່ນຢູ່ທົ່ວທຸກແຫ່ງທີ່ ຈຳ ນວນຄະດີອາຍາທາງອິນເຕີເນັດຍັງເປັນປະເດັນທີ່ຮ້າຍແຮງ, ແລະອິນເຕີເນັດ ‘ຜູ້ກະ ທຳ ທີ່ບໍ່ດີ’ ກຳ ລັງ ດຳ ລົງຊີວິດຢ່າງຫຼວງຫຼາຍຈາກກິດຈະ ກຳ ທີ່ຜິດກົດ ໝາຍ ຂອງພວກເຂົາ. ໃນຂະນະທີ່ມັນເປັນຄ...