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).
อย่าพลาด.