50 เครื่องมือออกแบบเว็บไซต์ตอบสนองที่มีประโยชน์สำหรับนักออกแบบ

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

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

เพื่อให้ง่ายต่อการลงรายการเครื่องมือทั้งหมดเราได้จัดหมวดหมู่เครื่องมือเหล่านี้ไว้ในส่วนต่อไปนี้:

• กริดและกรอบ
• แผ่นร่างและโครงลวด
• ปลั๊กอิน JavaScript & jQuery
• การทดสอบ & ตัวอย่าง
• sliders
• คนอื่น ๆ

กริดและกรอบ

[กลับไปด้านบน]

Columnal

Columnal เป็นโครงการ Pulp + Pixels ซึ่งยืมมาจาก cssgrid.net ในขณะที่บางส่วนได้รับแรงบันดาลใจจาก 960.gs คอลัมน์ช่วยคุณได้มากในการออกแบบเว็บที่ตอบสนองโดยทำให้กริดของคุณมีความยืดหยุ่นในการเปลี่ยนแบบไดนามิกเมื่อปรับขนาดหน้าต่างเบราว์เซอร์.

โครงกระดูก

Skeleton เป็นเฟรมเวิร์ก CSS ที่เรียบง่ายและทรงพลังซึ่งเป็นที่ชื่นชอบของนักพัฒนาและนักออกแบบเนื่องจากความเรียบง่ายและมีประสิทธิภาพ ไม่มีการยก Javascript อย่างหนักที่นี่เพียง CSS ที่ดีและบริสุทธิ์พร้อมเอกสารที่ชัดเจน.

LessFramework 4

Less Framework เป็นเฟรมเวิร์กมากกว่าหรือน้อยกว่าในนามของผู้สร้าง มันเป็นระบบกริด CSS ที่ปรับเปลี่ยนได้โดยใช้การสืบค้นสื่ออินไลน์ CSS ซึ่งทำให้การพัฒนาเว็บไซต์ตอบสนองง่ายขึ้นมาก.

ระบบกริดความหมาย

Semantic Grid System ใช้ในการออกแบบเค้าโครงกริดที่ตอบสนองได้ ใช้ส่วนขยาย CSS ที่ผ่านการประมวลผลล่วงหน้าเช่น LESS, SCSS หรือ Stylus เพื่อมอบประสิทธิภาพสูงสุด คุณสามารถเลือกคอลัมน์และความกว้างของรางเลือกจำนวนคอลัมน์และสลับระหว่างพิกเซลและเปอร์เซ็นต์.

ระบบกริดทองคำ

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

320 และสูงกว่า

320 และขึ้นเป็นแผ่นฐานข้อมูลแบบสอบถามสื่อ CSS ซึ่งทำหน้าที่เป็นแม่แบบเริ่มต้นสำหรับการออกแบบที่ตอบสนองของคุณ มันเป็นไปตามวิธีการย้อนกลับอย่างสมบูรณ์กว่าอีกหลายต้นแบบที่มีอยู่.

Inuit.css

Inuit.css เป็นเฟรมเวิร์ก CSS ซึ่งใช้งานง่ายมากแม้เป็นผู้เริ่มหัด มันมีแนวทางแบบมินิมัลลิสต์ดังนั้นคุณต้องจัดการกับสิ่งที่จำเป็นเท่านั้น แต่ถ้าจำเป็นก็สามารถขยายได้ด้วยปลั๊กอินที่หยิบใช้ได้.

Gridless

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

1140 CSS Grid

1140 CSS Grid เป็นระบบ CSS grid ที่ยอดเยี่ยมที่ออกแบบโดย Andy Taylor นักออกแบบเมลเบิร์นซึ่งช่วยให้การออกแบบของคุณพอดีที่ 1140px สำหรับจอภาพขนาดใหญ่และเลย์เอาต์ของเหลวของคุณจะปรับเข้ากับความละเอียดขนาดเล็กอื่น ๆ.

1KBCSSGrid

1KB CSS Grid ออกแบบโดย Tyler Tate เป็นเครื่องกำเนิดไฟฟ้า CSS Grid ที่เรียบง่ายและมีน้ำหนักเบา มันจะช่วยให้คุณกำหนดจำนวนคอลัมน์ความกว้างของคอลัมน์และความกว้างของรางน้ำและคุณสามารถรับ CSS ที่สามารถดาวน์โหลดได้สำหรับตารางเว็บไซต์ของคุณ.

เงินทุน

Bootstrap สร้างและดูแลรักษาโดย Mark Otto และ Jacob Thornton ที่ Twitter เป็นชุดองค์ประกอบส่วนติดต่อผู้ใช้เลย์เอาต์และเครื่องมือจาวาสคริปต์ที่ยอดเยี่ยมมีให้คุณดาวน์โหลดและใช้ในโครงการออกแบบเว็บไซต์ของคุณ.

เครื่องคำนวณกริดของไหล

เครื่องมือง่ายๆนี้จะช่วยให้คุณคว้า CSS ของการออกแบบเว็บไซต์กริดของคุณได้อย่างรวดเร็ว.

กริดของไหล

Fluid Grid เป็นกรอบกริดของไหลที่เรียบง่าย แต่มีประโยชน์ซึ่งสร้างเค้าโครงที่ตอบสนองได้ตามคอลัมน์ 6, 7, 8, 9, 10, 12 หรือ 16 คอลัมน์.

Flurid

Flurid เป็นกรอบกริด CSS แบบข้ามเบราว์เซอร์ที่เรียบง่ายและมีประโยชน์มากที่มีมากถึง 16 คอลัมน์ และยิ่งไปกว่านั้นมันไม่ได้ซ่อนพิกเซลไว้ในระยะขอบ.

Gridset

Gridset เป็นเครื่องมือสำหรับสร้างกริดทุกประเภทเช่นคอลัมน์, อสมมาตร, คงที่, อัตราส่วน, สารประกอบ, การตอบสนองและอื่น ๆ เครื่องมือนี้โดย Mark Boulton ยังอยู่ในช่วงเบต้า แต่พิสูจน์ได้ว่ามีแนวโน้ม และฉันพูดถึงการใช้มันง่ายพอ ๆ กับการฝังลิงก์.

Gridpak

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

SimpleGrid

SimpleGrid พัฒนาโดย Michael Kuhn เป็นเฟรมเวิร์ก CSS ที่ง่ายและตรงไปตรงมาสำหรับการสร้างเลย์เอาต์แบบกริด ตามค่าเริ่มต้น SimpleGrid จะถูกจัดเตรียมสำหรับขนาดหน้าจอที่แตกต่างกัน 4 ช่วง.

Susy

Susy โดย Oddbird มีความคล้ายคลึงกับระบบกริดแบบ Semantic มันไม่ใช้มาร์กอัปพิเศษหรือคลาสพิเศษอื่น ๆ แต่มีวัตถุประสงค์เพียงเพื่อผู้ใช้ของ Saas และ Compass Extension.

กริดของไหลจิ๋ว

Tiny Fluid Grid เป็นแอปพลิเคชั่นเว็บที่ยอดเยี่ยมที่สามารถช่วยคุณกำหนดระบบกริดของเว็บไซต์ของคุณในรูปแบบโต้ตอบ คุณสามารถกำหนดจำนวนคอลัมน์ร้อยละ gutter ความกว้างต่ำสุดและสูงสุดของเค้าโครงเว็บไซต์ของคุณและสามารถดาวน์โหลด CSS สำหรับมันได้.

ระบบกริดแบบแปรผัน

ระบบกริดผันแปรได้รับการออกแบบและพัฒนาโดย SprySoft และเป็นพื้นฐานของระบบกริด 960 อนุญาตให้นักพัฒนาและนักออกแบบสร้างกริดที่กำหนดเองแล้วดาวน์โหลดไฟล์ CSS ที่มาพร้อมกับกริดนั้น.

แผ่นร่างและโครงลวด

[กลับไปด้านบน]

เอกสารร่างการออกแบบเว็บไซต์ที่ตอบสนอง

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

Wireframes ตอบสนอง

Wireframes ที่ตอบสนองเป็นเครื่องมือทดลองที่สร้างขึ้นโดย James Mellers ของ Adobe มันถูกสร้างขึ้นด้วย HTML และ CSS เท่านั้น (ไม่ใช้รูปภาพหรือ JS) ซึ่งคุณสามารถใช้เพื่อให้เห็นภาพว่าการออกแบบที่ตอบสนองของคุณจะมีลักษณะอย่างไรบนเบราว์เซอร์จริงของเดสก์ท็อปและอุปกรณ์มือถือต่างๆ.

StyleTiles

Style Tile ช่วยให้คุณพัฒนาความคิดเกี่ยวกับลักษณะของเว็บไซต์ที่เป็นอิสระจากสไตล์ที่ซับซ้อนที่เข้ามาเล่น มันเปิดโอกาสให้คุณออกแบบเวิร์กโฟลว์ตอบสนองที่สมบูรณ์แบบและความสามารถในการรวมการตอบกลับของลูกค้า.

ปลั๊กอิน JavaScript & jQuery

[กลับไปด้านบน]

Adapt.Js

Adapt.js เป็นโซลูชัน Javascript และเป็นทางเลือกที่ยอดเยี่ยมสำหรับการสืบค้นสื่อ CSS การใช้วิธีการ @media เป็นแนวปฏิบัติที่ดี แต่วิธีนี้ไม่สามารถใช้ได้กับเบราว์เซอร์ทั้งหมด Nathan Smith ผู้สร้าง 960 Grid System เปิดตัว Adapt.js ไลบรารีจาวาสคริปต์ที่มีน้ำหนักเบามากเพื่อเอาชนะปัญหานี้.

ไอโซโทป

Isotope เป็นปลั๊กอิน jQuery ที่ยอดเยี่ยมซึ่งพิสูจน์แล้วว่ามีประโยชน์มากในขณะที่ออกแบบการออกแบบที่ตอบสนองได้ ไม่เพียงช่วยในการจัดเรียงองค์ประกอบของหน้าเว็บเมื่อมีการปรับขนาดหน้าต่างเบราว์เซอร์หรือขนาดหน้าจอเล็กลง แต่ยังช่วยกรององค์ประกอบเหล่านั้น.

การก่ออิฐ

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

Respond.js

Respond.js เป็นสคริปต์ที่รวดเร็วและมีน้ำหนักเบา (3 Kb minified และ 1 Kb gzipped) ซึ่งมีจุดประสงค์หลักคือการเปิดใช้งานการออกแบบเว็บที่ตอบสนองต่อสิ่งที่ไม่รองรับ CSS3 Media Queries เช่นเบราว์เซอร์ IE.

TinyNav.js

TinyNav.js เป็นปลั๊กอิน jQuery ขนาดเล็กและน้ำหนักเบาเพียง 362 ไบต์ที่แปลงรายการการนำทางขนาดใหญ่เป็นเมนูแบบเลื่อนลงขนาดเล็กสำหรับหน้าจอขนาดเล็ก.

Wookmark ปลั๊กอิน jQuery

Wookmark เป็นปลั๊กอิน jQuery ที่ตรวจจับขนาดหน้าต่างเบราว์เซอร์และจัดเรียงองค์ประกอบของหน้าเว็บเป็นคอลัมน์โดยอัตโนมัติ คุณยังสามารถดูตัวอย่างสดที่ด้านล่างของหน้าตัวเอง.

การทดสอบ & ตัวอย่าง

[กลับไปด้านบน]

ProtoFluid

ProtoFluid เป็นเครื่องมือสร้างต้นแบบทางเว็บที่ให้คุณทดสอบต้นแบบเว็บไซต์ของคุณด้วยขนาดหน้าจอและความละเอียดที่หลากหลาย เพียงพิมพ์ URL เลือกอุปกรณ์ (หรือส่วนข้อมูลที่กำหนดเอง) แล้วกดเริ่ม เนื่องจากเป็นเครื่องมือบนเว็บจึงช่วยให้คุณใช้ส่วนขยายอื่น ๆ เช่น FireBug ได้.

Responsive.Is

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

Responsivepx.Com

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

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

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

ReView.Js

ReView เป็นระบบวิวพอร์ตแบบไดนามิกที่พัฒนาด้วย JavaScript ที่บริสุทธิ์ซึ่งให้ประสบการณ์การรับชมที่ยอดเยี่ยมสำหรับการออกแบบเว็บที่ตอบสนองต่อคุณ.

Screenfly

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

Screenqueri.es

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

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

ทดสอบไซต์ของคุณในอุปกรณ์ต่าง ๆ จาก iPhone และ iPad ไปยัง Kindle และบน Android บน Responsinator นอกจากนี้ยังแสดงเว็บไซต์ของคุณทั้งในโหมดแนวตั้งและแนวนอน ฉันชอบเครื่องมือนี้มากขึ้นเนื่องจากโครงร่างของอุปกรณ์ที่แสดงบนหน้าซึ่งนำความหมายมาสู่กระบวนการทั้งหมด.

sliders

[กลับไปด้านบน]

บลูเบอร์รี่

บลูเบอรี่เป็นตัวเลื่อนภาพโอเพ่นซอร์ส jQuery ที่ยอดเยี่ยมซึ่งเขียนขึ้นเพื่อการทำงานเฉพาะกับเลย์เอาต์ที่ตอบสนองได้ดี.

Elastislide

ต้องการม้าหมุนที่จะปรับเป็นขนาดหน้าจอโดยอัตโนมัติเมื่อปรับขนาดหน้าต่างเบราว์เซอร์หรือเมื่อคุณอยู่ในหน้าจอที่เล็กลง? Elastislide เป็นปลั๊กอิน jQuery ที่เหมาะสมที่สุดสำหรับความต้องการของคุณ.

CSS3 Slider ที่ตอบสนองได้

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

ResponsiveSlides.Js

ResponsiveSlides.Js เป็นปลั๊กอิน jQuery ที่เรียบง่ายและน้ำหนักเบามาก (เพียง 1Kb) ที่สร้างแถบเลื่อนการตอบสนองโดยใช้รายการที่ไม่เรียงลำดับซึ่งทำงานบนเบราว์เซอร์ที่หลากหลายเช่นใน IE6 ขึ้นไป.

คนอื่น ๆ

[กลับไปด้านบน]

ปรับภาพ

Adaptive Images เป็นเครื่องมือออนไลน์สำหรับการออกแบบเว็บที่ตอบสนองซึ่งตรวจจับขนาดหน้าจอของผู้เข้าชมและสร้างแคชและส่งภาพที่ได้รับการปรับขนาดตามขนาดหน้าจอและความละเอียด.

FitText.Js

FitText.js เป็นเครื่องมือจาวาสคริปต์ขนาดเล็กซึ่งช่วยให้การปรับขนาดอัตโนมัติของข้อความและหัวข้อเมื่อปรับขนาดหน้าต่างเบราว์เซอร์ ไม่ต้องกังวลกับขนาดข้อความที่ไม่ตรงกันด้วยเครื่องมือนี้บนเครื่อง.

FitVid.Js

ต้องการขายวิดีโอที่ฝังใหม่เมื่อปรับขนาดหน้าต่างเบราว์เซอร์หรืออุปกรณ์มีความละเอียดน้อยลงหรือไม่ FitVid.Js สามารถช่วยให้คุณประสบความสำเร็จในสิ่งนี้ มันเป็นปลั๊กอิน jQuery ที่มีน้ำหนักเบาและใช้งานง่ายที่ใช้เพื่อให้ได้วิดีโอที่ฝังความกว้างของของไหล.

ภาพเรตินา

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

กริดภาพถ่ายที่ตอบสนองอย่างราบรื่น

Seamless Photo Grid ตอบสนองแสดงภาพที่ขอบบนเบราว์เซอร์โดยไม่มีช่องว่างระหว่างภาพ รูปภาพจะเรียงต่อกันและไหลจากซ้ายไปขวาตลอดทั้งหน้าในคอลัมน์ จำนวนคอลัมน์ปรับตามที่หน้าต่างเบราว์เซอร์มีการปรับขนาด.

SlabText

SlabText เป็นปลั๊กอินหรือเครื่องมือ jQuery โดย Brian McAllister ตามอัลกอริทึม slabText ซึ่งจะแยกส่วนหัวเป็นแถวก่อนที่จะปรับขนาดแต่ละแถวเพื่อเติมเต็มพื้นที่ว่าง มันค่อนข้างคล้ายกับปลั๊กอิน FitText.Js ที่ใช้งานอยู่.

Zurb - ResponsiveTables

คุณเคยสงสัยว่าจะจัดการกับตารางข้อมูลขนาดใหญ่ในการออกแบบที่ตอบสนองได้อย่างไร? Zurb, คำสั่งผสม CSS / JS ให้คำตอบ; ใช้ตารางข้อมูลและแก้ไขเพื่อไม่ให้เลย์เอาต์ตอบสนองบนอุปกรณ์หน้าจอขนาดเล็ก.

Categorizr

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

Bookmarklet แบบสอบถามสื่อ

Media Query Bookmarklet แสดงขนาดที่วิวพอร์ตปัจจุบันมีและขนาดของคิวรีสื่อที่ใช้สำหรับการค้นหา.

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

Responsive Calculator เป็นเครื่องมือออนไลน์ที่ง่ายมากที่สามารถช่วยให้คุณเปลี่ยนพิกเซลเป็นเปอร์เซ็นต์ในขณะที่ออกแบบเว็บไซต์ตอบสนองของคุณ.

ขึ้นสัปดาห์หน้า

ในสัปดาห์ที่สองของซีรีส์นี้เราจะทำให้คุณเข้าใจบทเรียนที่จะนำคุณเข้าสู่ Responsive Web Design (RWD).

อย่าพลาด.