50 เครื่องมือที่ยอดเยี่ยมสำหรับการออกแบบเว็บที่ตอบสนอง

ผู้เขียน: Monica Porter
วันที่สร้าง: 17 มีนาคม 2021
วันที่อัปเดต: 17 พฤษภาคม 2024
Anonim
How To Fix 100% Disk Usage in Windows 10
วิดีโอ: How To Fix 100% Disk Usage in Windows 10

เนื้อหา

ตามที่ Ethan Marcotte แนะนำ / ประกาศเกียรติคุณทั้งในบทความ "Responsive Web Design" และหนังสือขายดีของเขาสิ่งหนึ่งต้องการองค์ประกอบสามประการเพื่อให้ไซต์ตอบสนอง:

  1. ตารางยืดหยุ่น / ของไหล
  2. ภาพที่ตอบสนอง
  3. แบบสอบถามสื่อ

มีบทความดีๆอื่น ๆ อีกมากมายที่ครอบคลุมถึงแรงจูงใจแนวคิดและเทคนิคเกี่ยวกับการออกแบบเว็บที่ตอบสนองต่ออุปกรณ์ดังนั้นเราจะให้ความสำคัญของบทความนี้เกี่ยวกับเครื่องมือชั้นนำบางอย่างที่จะช่วยให้คุณตอบสนองได้อย่างมีความรับผิดชอบ

เครื่องมือสำหรับการเริ่มต้น

ก่อนที่คุณจะเริ่มสร้างไซต์ของคุณคุณควรร่างภาพว่าองค์ประกอบในหน้าจะปรับให้เข้ากับขนาดเบราว์เซอร์ที่แตกต่างกันของอุปกรณ์ต่างๆที่พวกเขาจะดูได้อย่างไรและเพื่อหลีกเลี่ยงการตัดการเชื่อมต่อซึ่งมักมาจากการคิดถึงเป็นหลัก การออกแบบเดสก์ท็อปและส่วนที่เหลือของการทำซ้ำที่ตอบสนองตามความคิด (ดูโดยเฉพาะความคิดเห็นของ Stephanie (Sullivan) Rewis)

01. Sketch Sheets ออกแบบเว็บไซต์ที่ตอบสนอง

แผ่นร่างแบบตอบสนองชุดนี้โดย Jeremy P Alford เป็นจุดเริ่มต้นที่ดีในการเริ่มต้นการทำแผนที่ว่าส่วนต่างๆของหน้าจะเปลี่ยนไปในความละเอียดที่แตกต่างกันอย่างไร


02. สมุดร่างการออกแบบที่ตอบสนอง

หากคุณต้องการเก็บภาพร่างทั้งหมดไว้ในที่เดียวคุณอาจต้องการพิจารณาหนังสือแบบต่อสายที่มีแผ่นร่างตอบสนอง 50 แผ่นโดย บริษัท App Sketchbook

03. ไวร์เฟรมที่ตอบสนอง

ความยากอย่างหนึ่งในการสร้างเว็บไซต์ที่ตอบสนองคือการใช้ Wireframes เพื่อแสดงให้เห็นว่าการออกแบบที่ตอบสนองจะทำงานอย่างไร James Mellers จาก Adobe ได้รวบรวมเครื่องมือทดลองนี้เพื่อแสดงให้เห็นว่าการจัดวางโครงร่างที่ซับซ้อนสามารถตอบสนองได้อย่างไร


04. รูปแบบเค้าโครงหลายอุปกรณ์

เมื่อวางแผนการออกแบบที่ตอบสนองคุณควรดูว่าคนอื่นเข้ามาหาคุณอย่างไรก่อนหน้าคุณดังนั้นรูปแบบเค้าโครงหลายอุปกรณ์ของ Luke Wroblewski ซึ่งแสดงรูปแบบยอดนิยมพร้อมลิงก์ไปยังตัวอย่างจึงเป็นจุดเริ่มต้นที่ดี

05. กระเบื้องสไตล์

กระเบื้องสไตล์ของ Samanatha Warren เสนอเทคนิคใหม่สำหรับการออกแบบในยุคที่ตอบสนอง แทนที่จะเป็นแบบจำลองการออกแบบที่มีความกว้างคงที่สิ่งเหล่านี้เป็นเหมือนตัวอย่างหรือมู้ดบอร์ดที่แสดงแนวทางการออกแบบทั่วไปโดยไม่ต้องลงรายละเอียดอย่างละเอียด

เครื่องมือสำหรับกริดแบบยืดหยุ่น / ของไหล

ตามที่ระบุไว้ก่อนหน้านี้ส่วนประกอบแรกที่จำเป็นสำหรับการออกแบบที่ตอบสนองคือกริดที่ยืดหยุ่น / ลื่นไหลสิ่งต่อไปนี้สร้างไว้ล่วงหน้าแล้ว: คุณเพียงแค่ต้องดาวน์โหลดและคุณก็จะเข้าสู่เว็บไซต์ที่ตอบสนองมากขึ้นได้อย่างรวดเร็ว


06. ระบบโกลเด้นกริด

Joni Korpi ผู้พัฒนา Less Framework เพิ่งเปิดตัวระบบกริดที่เชื่อถือได้เวอร์ชันใหม่นี้สำหรับการออกแบบที่ตอบสนอง ถือว่าเป็น "การพับ" เนื่องจากสามารถปรับจาก 16, แปด, เป็นสี่คอลัมน์ได้อย่างง่ายดายนอกจากนี้ Golden Grid System ยังมีการซ้อนทับเบราว์เซอร์ขนาดเล็กที่แสดงตารางบนหน้าเว็บของคุณสำหรับการทดสอบ

07. Foldy960

สุภาพบุรุษผู้มีความสามารถที่ Paravel, Inc. ได้เปิดตัวกริด 960.gs ที่ปรับเปลี่ยนแล้วซึ่งพวกเขาใช้เป็นพื้นฐานสำหรับโครงการที่ตอบสนองของพวกเขา

08. ซิมเปิลกริด

SimpleGrid โดย Conor Muirhead สร้างขึ้นโดยมีการตอบสนองในตัวดังนั้นจึงง่ายต่อการเริ่มต้นและดำเนินการกับโครงการเว็บไซต์ที่ตอบสนองของคุณ

09. ตาราง CSS 1140px

ระบบกริดที่ตอบสนองที่ยอดเยี่ยมอีกระบบหนึ่งคือ CSS Grid 1140px โดยนักออกแบบชาวเมลเบิร์น Andy Taylor ซึ่งเปลี่ยนจากความละเอียดเดสก์ท็อปที่กว้างลงไปสู่มือถือ

10. ระบบกริดคอลัมน์ CSS

ระบบ Columnal grid ที่สร้างโดย Nick Gorsline ซึ่งเป็นผู้อำนวยการฝ่ายสร้างสรรค์ของ Pulp + Pixels นั้นใช้ระบบกริดขนาด 1140px แต่มีสินค้าพิเศษบางอย่างเช่นชุดออกแบบที่มีสเก็ตช์ชีตและเทมเพลต Wireframing ตลอดจนสไตล์การดีบัก CSS

11. ระบบตารางความหมาย

ส่วนขยาย CSS ที่ประมวลผลล่วงหน้าเช่น Sass และ LESS กำลังได้รับความนิยมมากขึ้นเรื่อย ๆ และระบบตารางความหมายของ Tyler Tate ใช้ส่วนขยายเหล่านี้เพื่อให้เกิดผลสูงสุดในระบบกริดนี้ซึ่งอ้างว่าไม่ใช้คลาสหรือองค์ประกอบที่ไม่จำเป็น อ่านเพิ่มเติมได้ที่ coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow/

12. สบาย

เช่นเดียวกับระบบตารางความหมาย SUSY ของ Oddbird ได้สร้างระบบกริดที่ไม่ใช้มาร์กอัปพิเศษหรือคลาสพิเศษ แต่ SUSY มุ่งเป้าไปที่ผู้ใช้ Sass เท่านั้น (และส่วนขยายของมันคือเข็มทิศ)

13. กริดภัค

Gridpak โดย Erskine Design เป็นหนึ่งในเครื่องกำเนิดกริดที่ตอบสนองใหม่ล่าสุด ช่วยให้คุณสามารถตั้งค่าคอลัมน์และรางของคุณที่จุดพักจำนวนหนึ่งจากนั้นส่งออกไฟล์ CSS, JavaScript และ PNG เพื่อให้ทั้งทีมของคุณทำงานจากจุดเริ่มต้นเดียวกัน

14. กริด

ยังคงมีความลึกลับเล็กน้อยเหนือ Gridset ในขณะที่ฉันเขียนสิ่งนี้มันยังไม่ได้เปิดตัวจริง แต่เครื่องมือโดย Mark Boulton Design ให้คำมั่นสัญญาเกี่ยวกับระบบกริดแบบไม่ระบุตัวตนระบบกริดและวิธีการบันทึกและจัดการกริดของคุณทางออนไลน์

15. ตาราง Photoshop ที่ดีกว่าสำหรับ RWD

Elliot Jay Stocks เสนอให้ละทิ้งมาตรฐานกริดแบบพฤตินัย 960px แบบเก่าและทำงานจากฐาน 1000px แทนทำให้การคำนวณเปอร์เซ็นต์ทั้งหมดทำงานได้ง่ายขึ้น หากคุณเห็นด้วยเขาจะสร้าง PSD เพื่อให้คุณเริ่มทำงานด้วย

16. กริดของไหล

หากการออกแบบของคุณมีความเชี่ยวชาญสูงและคุณต้องสร้างเส้นตารางแบบกำหนดเองคุณสามารถทำได้ด้วยเครื่องคำนวณตารางของเหลวที่ได้รับการเสนอชื่อเข้าชิงรางวัล. net ของ Harry Roberts

17. เครื่องคิดเลขตอบสนอง

เครื่องคิดเลขพิกเซลเป็นเปอร์เซ็นต์อื่น แต่สิ่งนี้โดย Stu Robson ก้าวไปไกลกว่าคนอื่น ๆ ด้วยการสร้างกฎ CSS ทั้งหมดสำหรับคุณซึ่งหมายความว่าคุณสามารถคัดลอกและวางลงในสไตล์ชีตของคุณได้

เครื่องมือสำหรับรูปภาพที่ตอบสนอง (และข้อความ)

องค์ประกอบที่สำคัญอีกอย่างของการออกแบบเว็บที่ตอบสนองคือรูปภาพที่ลื่นไหล แม้ว่าเทคนิคในการได้ภาพที่ลื่นไหลจะตรงไปตรงมา แต่การเพิ่มประสิทธิภาพและการโหลดหน้าเว็บสำหรับอุปกรณ์ต่างๆดูเหมือนจะเป็นความท้าทายที่ยิ่งใหญ่ที่สุดอย่างหนึ่งในการออกแบบเว็บที่ตอบสนอง นี่คือแหล่งข้อมูลบางส่วนสำหรับการแก้ไขปัญหา

18. รูปภาพที่ตอบสนอง

Filament Group ได้คิดค้นวิธีการส่งภาพที่มีขนาดเหมาะสมตามความละเอียดของหน้าจอ การทดลองนี้กับภาพแรกบนอุปกรณ์เคลื่อนที่ที่ปรับขนาดอย่างมีความรับผิดชอบและเรียกร้องให้มีภาพสองภาพที่มีขนาดต่างกันเพื่ออ้างอิง

19. รูปภาพที่ปรับเปลี่ยนได้

Matt Wilcox ได้รับแรงบันดาลใจจากเครื่องมือ Responsive Images เพื่อสร้าง Adaptive Images ซึ่งใช้ PHP และ JavaScript เพียงเล็กน้อยเพื่อแสดงภาพที่เหมาะสมไปยังอุปกรณ์ของผู้ใช้โดยไม่ต้องใช้มาร์กอัปเพิ่มเติม

20. Sencha.io Src (เดิมชื่อ Tinysrc)

Sencha ให้บริการระบบคลาวด์ที่ส่งภาพที่โฮสต์ในเวอร์ชันที่เหมาะสมที่สุดสำหรับขนาดของอุปกรณ์ที่ร้องขอ ดูวิธีการใช้งานได้ที่ docs.sencha.com/io/src/

21. FitText

อีกหนึ่งอัญมณีจาก Paravel, Inc คือ FitText.js ซึ่งเป็นปลั๊กอิน jQuery ที่ทำให้ประเภทเว็บพาดหัวตอบสนองต่อการออกแบบและอุปกรณ์ ดูรายละเอียดได้ที่ trentwalton.com/2011/05/10/fit-to-scale/

22. slabText

แรงบันดาลใจจาก FitText และอัลกอริธึม SlabType ทำให้ slabText ของ Brian McAllister เป็นปลั๊กอิน jQuery ที่สร้างบล็อกข้อความที่เป็นตัวหนาซึ่งปรับขนาดได้อย่างตอบสนองในขณะที่รักษาความกว้างที่กำหนดไว้

เครื่องมือสำหรับการสืบค้นสื่อ

ตอนนี้คุณมีความคิดแล้วว่าเค้าโครงของคุณจะเปลี่ยนไปอย่างไรสำหรับอุปกรณ์ต่างๆตารางของไหลและภาพแบบไหลคุณต้องมีคำค้นหาสื่อเพื่อเปลี่ยนองค์ประกอบของหน้าให้อยู่ในสภาพที่ตอบสนองได้ดี

23. ตอบกลับ js

ปัญหาอย่างหนึ่งของการออกแบบที่ตอบสนองคือเบราว์เซอร์ที่ไม่สามารถอ่านข้อความค้นหาสื่อจะถูกทิ้งไว้เบื้องหลัง นี่อาจไม่ใช่ปัญหากับกลุ่มเป้าหมายของคุณ แต่ก็ยังคงเป็นแนวทางปฏิบัติที่ดีในการรองรับผู้ใช้บนเบราว์เซอร์รุ่นเก่า Respond.js โดย Scott Jehl สนับสนุนคุณสมบัติความกว้างต่ำสุดและความกว้างสูงสุดเท่านั้น

สำหรับข้อมูลเพิ่มเติมโปรดดู 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 ซึ่งเป็นสคริปต์ที่ตรวจจับขนาดของเบราว์เซอร์และทำหน้าที่เฉพาะสไตล์ชีตที่จำเป็นเช่นคิวรีสื่อ แต่ไม่มีคิวรีสื่อซึ่งหมายความว่ามันทำงานได้ในเบราว์เซอร์รุ่นเก่า

26. ประเภท

นี่คือการตรวจจับอุปกรณ์ที่เข้าหาจากมุมตรงข้าม - สคริปต์ Categoryorizr ของ Brett Jankord สันนิษฐานว่าอุปกรณ์เป็นอุปกรณ์เคลื่อนที่เว้นแต่จะตรวจพบเป็นเดสก์ท็อปหรือแท็บเล็ตทำให้คุณสามารถให้บริการทรัพยากรไปยังเบราว์เซอร์ได้ด้วยวิธีที่เห็นอกเห็นใจ

การออกแบบที่ตอบสนอง (และอุปกรณ์เคลื่อนที่) หม้อไอน้ำ

ด้วยจิตวิญญาณของเวิร์กโฟลว์ที่ตอบสนองอย่างมีประสิทธิภาพหม้อไอน้ำจะช่วยอำนวยความสะดวกในกระบวนการย้ายการออกแบบไปยังเบราว์เซอร์เร็วกว่าในภายหลัง หม้อไอน้ำเหล่านี้ส่วนใหญ่รวมเครื่องมือที่ดีที่สุดที่กล่าวถึงข้างต้นไว้ในแพ็คเกจเดียว: กริดที่ยืดหยุ่นได้รับการปรับปรุงด้วยสคริปต์ในขณะที่นำปรัชญาเนื้อหาออกไปใช้กับอุปกรณ์เคลื่อนที่เป็นอันดับแรก

27. 320 ขึ้นไป

320 ขึ้นไปของ Andy Clarke เป็นเอกสารสำเร็จรูปสำหรับมือถือรุ่นแรกซึ่งทำงานร่วมกับเครื่องมือออกแบบเว็บสมัยใหม่อื่น ๆ เช่น LESS และ Bootstrap (ดู # 30) เป็นวิธีที่เบาและคล่องตัวในการทำให้ไซต์ทำงานได้อย่างรวดเร็ว ตรวจสอบบทสัมภาษณ์ของเรากับ Andy ซึ่งเขาจะบอกเราเพิ่มเติมเกี่ยวกับเวอร์ชันใหม่

28. ไร้กริด

Gridless เป็นเอกสารสำเร็จรูป HTML5 และ CSS3 ที่สามารถใช้เป็นพื้นฐานสำหรับการออกแบบที่ตอบสนองของคุณโดยมุ่งเน้นไปที่การพิมพ์และการใช้งานร่วมกันระหว่างเบราว์เซอร์

29. โครงกระดูก

ซึ่งแตกต่างจากหม้อไอน้ำสองตัวก่อนหน้านี้ซึ่งมีจุดเริ่มต้นคือด้วยความละเอียดที่เล็กที่สุดชุดพัฒนา Skeleton ที่สร้างโดย Dave Gamache ใช้ระบบกริด 960.gs และปรับขนาดลงเป็นอุปกรณ์เคลื่อนที่ Skeleton ยังมีกรอบรูปแบบที่ยอดเยี่ยมสำหรับนักพัฒนาในการสร้างสไตล์ที่ด้านบน

30. Bootstrap

Bootstrap สร้างขึ้นโดย Twitter และตอนนี้เป็นแบบโอเพนซอร์สเป็นเฟรมเวิร์กและชุดของส่วนประกอบสำหรับการทำให้ไซต์ออนไลน์ได้อย่างรวดเร็วและในเวอร์ชันสองส่วนหลักทั้งหมดจะทำงานได้อย่างตอบสนอง

ปลั๊กอิน shims และ polyfills

แม้ว่าเบราว์เซอร์และซอฟต์แวร์สมัยใหม่มักจะได้รับการออกแบบมาเพื่อตอบสนอง แต่บางครั้งเราก็ต้องใช้เครื่องมือพิเศษเพื่อมอบประสบการณ์ที่สอดคล้องกัน

31. ปลั๊กอินที่ตอบสนอง

Marios Lublinski ได้เขียนปลั๊กอิน WordPress ที่สัญญาว่าจะเปลี่ยนธีม WP ปัจจุบันให้เป็นธีมที่ตอบสนองได้ วิธีการทำงานนี้ฉันยังไม่รู้เนื่องจากยังไม่ได้เผยแพร่ในช่วงเวลาของการเขียนนี้ แต่ถ้ามันเป็นไปตามสัญญามันควรจะมีประโยชน์มาก

32. ล้มล้าง

การจัดการเนื้อหาล้นทำงานได้ดีบนเบราว์เซอร์เดสก์ท็อป แต่เบราว์เซอร์มือถือรุ่นเก่าจัดการได้ไม่สอดคล้องกัน Overthrow polyfill จากกลุ่ม Filament ที่ขยันขันแข็งช่วยเพิ่มการย่อยสลายที่งดงามอย่างสม่ำเสมอในอุปกรณ์ต่างๆเพื่อให้แน่ใจว่าผู้ใช้มือถือทุกคนจะได้รับประสบการณ์ที่ดีที่สุดเท่าที่จะเป็นไปได้

33. MediaTable

ปลั๊กอิน jQuery ของ Marco Pegoraro, MediaTable ทำงานร่วมกับ Respond.js เพื่อช่วยคุณแก้ปัญหาในการแสดงตารางข้อมูลขนาดใหญ่บนอุปกรณ์หน้าจอขนาดเล็กการสร้างคอลัมน์ที่ตอบสนองและเพิ่มการสลับการแสดง / ซ่อนตามความเหมาะสม

"การทดสอบการทดสอบ: 1-2-3 ... "

อีกแง่มุมหนึ่งของเวิร์กโฟลว์ที่ตอบสนองคือการรู้จักอุปกรณ์เป้าหมายและความละเอียดของคุณจากนั้นทดสอบในอุปกรณ์เหล่านั้น

34. resizeMyBrowser

resizeMyBrowser โดยนักพัฒนาส่วนหน้า Chen Luo มีมิติข้อมูลที่ตั้งไว้ล่วงหน้าหลายรายการสำหรับหน้าต่างเบราว์เซอร์ของคุณเพื่อทดสอบหน้าที่ออกแบบตามอุปกรณ์หรือสร้างค่าที่ตั้งล่วงหน้าใหม่หากคุณไม่พบมิติข้อมูลที่ตรงกับความต้องการของคุณ

35. responsivepx

เช่นเดียวกับ resizeMyBrowser, responsivepx ที่สร้างโดย Remy Sharp โหลดหน้าเว็บของคุณในหน้าต่างที่คุณสามารถทดสอบความกว้างและความสูงเพื่อพิจารณาว่าคิวรีสื่อของคุณทำงานได้ดีเพียงใดและจุดพักอยู่ที่ใดในการออกแบบ

36. การทดสอบการออกแบบที่ตอบสนอง

เครื่องมือที่มีประโยชน์อย่างเหลือเชื่อโดยนักออกแบบและนักพัฒนา Matt Kersley: เพียงแค่ป้อน URL ของไซต์ที่ตอบสนองของคุณในการทดสอบการออกแบบที่ตอบสนองเพื่อดูว่ามันแสดงผลอย่างไรในเบราว์เซอร์ขนาดต่างๆ

37. ผู้รับผิดชอบ

ป้อน URL และผู้รับผิดชอบจะแสดงให้คุณเห็นว่ามันแสดงผลอย่างไรในขนาดอุปกรณ์ทั่วไป - ด้วยประสิทธิภาพของหุ่นยนต์ที่ไร้ความปรานี Tama Pugsley และ Andy Hovey เป็นผู้รับผิดชอบเรื่องนี้

38. Responsive.is

ตัวจำลองอุปกรณ์ในหน้าอีกตัว Responsive.is ช่วยให้คุณพิมพ์ URL จากนั้นปรับขนาดได้อย่างรวดเร็วระหว่างค่าที่ตั้งไว้ล่วงหน้าต่างๆ สร้างโดยทีมงานเบื้องหลังแอป Typecast ที่กำลังจะมาถึง

39. Screenqueri.es

อีกหนึ่งเครื่องมือวัดขนาดเบราว์เซอร์ แต่ Screenqueri.es จาก Mandar Shirke สร้างความแตกต่างด้วยการมีชุดค่าที่ตั้งล่วงหน้าสำหรับมือถือและแท็บเล็ตมากมายรวมถึงเส้นตารางและไม้บรรทัดที่ทำให้การวัดละเอียดง่ายขึ้นมาก

40. Aptus

แอปอื่นสำหรับการทดสอบไซต์ในขนาดที่กำหนดไว้หลายขนาด แต่ Aptus เป็น Mac-native สามารถใช้งานได้ผ่าน Mac App Store และการใช้งานแบบเนทีฟนำมาซึ่งคุณสมบัติพิเศษเช่นภาพหน้าจอที่ใช้งานง่ายและการสนับสนุนแบบออฟไลน์

41. Bookmarklet การออกแบบที่ตอบสนอง

Victor Coulon สร้าง bookmarklet ที่เรียบง่าย แต่มีประสิทธิภาพ เมื่อคุณเปิดใช้งานบนหน้าเว็บใด ๆ ระบบจะเพิ่มแถบเครื่องมือซึ่งช่วยให้คุณสามารถสลับไปมาระหว่างขนาดหน้าจอทั่วไปสี่ขนาดเพื่อให้คุณสามารถดูว่าไซต์ของคุณแสดงผลในขนาดต่างๆกันอย่างไร

42. Bookmarklet แบบทดสอบการออกแบบที่ตอบสนอง

bookmarklet โดย Benjamin Keen ช่วยให้สามารถปรับแต่งได้มากขึ้นโดยให้คุณกำหนดขนาดอุปกรณ์ของคุณเองและมากหรือน้อยตามที่คุณต้องการ เมื่อเปิดใช้งานจะแสดงไซต์ตามขนาดที่เลือกทั้งหมดเคียงข้างกันเพื่อให้เปรียบเทียบได้ง่าย

43. Screenfly

Screenfly โดย QuirkTools ช่วยให้คุณทดสอบไซต์ด้วยความละเอียดที่แตกต่างกันบนเดสก์ท็อปแท็บเล็ตมือถือและโทรทัศน์ ขณะนี้การทดสอบเดสก์ท็อป จำกัด เฉพาะ Safari ในขณะที่แท็บเล็ตและอุปกรณ์เคลื่อนที่มีตัวเลือกเพิ่มเติมสำหรับอุปกรณ์และเบราว์เซอร์ โทรทัศน์ จำกัด เฉพาะ Opera

44. ตัวบ่งชี้แบบสอบถามสื่อ

Johan Brook เสนอวิธีการทดสอบ CSS อย่างแท้จริงเมื่อเบราว์เซอร์เรียกใช้การสืบค้นสื่อ Media Query Indicator เป็นอีกหนึ่งเครื่องมือที่ดีสำหรับการทดสอบและเล่นกับจุดแตกหักของการออกแบบ

45. ชิม

หนึ่งในเครื่องมือที่ใช้ในการออกแบบใหม่ของ Boston Globe ซึ่งเป็นเด็กโปสเตอร์ของขบวนการ RWD คือ Shim เป็นแอป Node.js ที่เรียกใช้หน้าเว็บในอุปกรณ์หลายเครื่องในเครือข่าย Wifi เดียวกันทำให้การทดสอบข้ามอุปกรณ์ง่ายขึ้นมาก .

46. ​​ไดรฟ์เข้า

หากคุณไม่มีเซิร์ฟเวอร์ Node.js เพื่อใช้งาน Shim Scott Jehl ได้สร้างเวอร์ชันที่ง่ายกว่าชื่อว่า Drive-In ซึ่งทำงานในลักษณะเดียวกันโดยพื้นฐาน แต่ใช้ PHP, Apache และไฟล์. htaccess

47. Adobe เงา

Adobe ยังคงผลักดันเทคโนโลยีเว็บด้วยเครื่องมือแก้ไขจุดบกพร่องระยะไกลนี้ ติดตั้ง Shadow และส่วนขยาย Chrome บน Mac หรือ Windows รวมถึงไคลเอนต์ Shadow บน Android หรือ iPhone และคุณสามารถแชร์หน้าเว็บระหว่างอุปกรณ์ต่างๆได้

48. Opera Mobile Emulator + Remote Debug

วิธีที่ง่ายกว่าในการดีบักเพจบนมือถือคือการติดตั้ง Opera และ Opera Mobile Emulator และเชื่อมต่อทั้งสองด้วยตัวเลือก Remote Debug ติดตั้งง่ายและรวดเร็วและมีประโยชน์เพิ่มเติมจากการทดสอบบน WebKit มากกว่า

แรงบันดาลใจเพิ่มเติม

ต้องการทราบแนวคิดเกี่ยวกับวิธีที่ผู้อื่นตอบสนองต่อการออกแบบของตนหรือไม่?

49. MediaQueri.es

หากคุณยังไม่เคยเห็นเว็บไซต์ Mediaqueri.es มีไซต์จำนวนมากขึ้นเรื่อย ๆ ที่ข้ามไปยังฝั่งที่ตอบสนอง

50. @RWD

Ethan Marcotte มีบัญชี Twitter ซึ่งนำเสนอข่าวสารเครื่องมือและการนำเสนอล่าสุดจากโลกของ RWD

Denise Jacobs ชื่นชอบการเป็นวิทยากรผู้เขียนผู้ฝึกสอนการออกแบบเว็บไซต์และผู้เผยแพร่ความคิดสร้างสรรค์ในขณะที่ Peter Gasston เป็นผู้เขียน The Book of CSS3 และเป็นนักพัฒนาเว็บที่มีประสบการณ์ซึ่งบล็อกที่ Broken Links

ชอบสิ่งนี้ไหม อ่านสิ่งเหล่านี้!

  • เคล็ดลับมือโปรในการสร้างเว็บไซต์บนมือถือ
  • เทคนิค CSS และ JavaScript ยอดนิยม
  • วิธีสร้างแอป
  • แบบอักษรบนเว็บฟรีที่ดีที่สุดสำหรับนักออกแบบ
  • ค้นพบสิ่งต่อไปสำหรับ Augmented Reality
  • ดาวน์โหลดพื้นผิวฟรี: ความละเอียดสูงและพร้อมใช้งานทันที
บทความก่อนหน้า

เบื้องหลังแคมเปญโปสเตอร์ใหม่ของ British Airways
บทความถัดไป

50 เครื่องมือที่ยอดเยี่ยมสำหรับการออกแบบเว็บที่ตอบสนอง
น่าสนใจ
แบบอักษรประจำวัน: Gill Sans Nova
ค้นพบ

แบบอักษรประจำวัน: Gill Sans Nova

พฤษภาคม 2024
เราเป็นแฟนตัวยงของการพิมพ์ตัวอักษรและมักจะมองหาแบบอักษรใหม่ ๆ ที่น่าตื่นเต้นไม่ว่าจะเป็นแบบอักษรฟรีหรือแบบอักษรที่ดีที่สุดที่ควรค่าแก่การจ่าย ดังนั้นหากคุณต้องการแบบอักษรสำหรับโครงการปัจจุบันของคุณหรื...
ขนาดเลโก้: ชัยชนะ UX หรือโศกนาฏกรรม?
ค้นพบ

ขนาดเลโก้: ชัยชนะ UX หรือโศกนาฏกรรม?

พฤษภาคม 2024
เมื่อฉันได้ยินประกาศครั้งแรกว่า LEGO กำลังเปิดตัววิดีโอเกมใหม่ในเดือนเมษายนฉันมีปฏิกิริยาแปลก ๆ เนื่องจากความตื่นเต้นในตอนแรกทำให้เกิดความรู้สึกลางสังหรณ์ แต่เราจะไปให้ถึง ...หากคุณเป็นแฟนตัวยงของ LEG...
10 วิธีในการปรับแต่งภาพเพื่อประสิทธิภาพที่ดีขึ้น
ค้นพบ

10 วิธีในการปรับแต่งภาพเพื่อประสิทธิภาพที่ดีขึ้น

พฤษภาคม 2024
ทุกวันนี้ความต้องการใช้ดิจิทัลแข็งแกร่งกว่าที่เคย มีอุปกรณ์เชื่อมต่อมากมายและด้วยอินเทอร์เน็ตที่พร้อมใช้งานทุกที่เห็นได้ชัดว่าไม่มีปัญหาการขาดแคลนผู้คนที่ต้องการใช้ผลิตภัณฑ์ของเรา อย่างไรก็ตามลูกค้าที...