เมื่อออกแบบเว็บไซต์ของคุณ สิ่งสำคัญคือต้องตรวจสอบให้แน่ใจว่าเว็บไซต์ดูดีบนอุปกรณ์ใดๆ ไม่ว่าขนาดและรูปร่างของหน้าจอจะเป็นอย่างไร เว็บไซต์ที่ปรับเปลี่ยนตามอุปกรณ์ได้รับการออกแบบมาให้ดูดีบนอุปกรณ์สมัยใหม่ทุกประเภท เช่น คอมพิวเตอร์ โทรศัพท์ แท็บเล็ต ทีวี อุปกรณ์สวมใส่ และแม้แต่หน้าจอในรถยนต์ ในการทำให้เว็บไซต์ตอบสนองได้ คุณจะต้องแก้ไขโค้ด CSS และ HTML เพื่อปรับขนาดองค์ประกอบโดยอัตโนมัติตามเงื่อนไขเฉพาะ วิกิฮาวนี้จะแนะนำวิธีการวางแผนและนำการออกแบบเว็บพื้นฐานที่ตอบสนองตามอุปกรณ์มาใช้
ขั้นตอน
วิธีที่ 1 จาก 3: การออกแบบที่ตอบสนองต่อการวางแผน
ขั้นตอนที่ 1 ค้นหาว่าผู้ชมของคุณใช้เว็บไซต์ของคุณอย่างไร
ทุกวันนี้ คนส่วนใหญ่ที่ท่องเว็บทำจากโทรศัพท์มือถือและแท็บเล็ต เพื่อให้ไซต์ตอบสนองได้ คุณต้องตรวจสอบให้แน่ใจว่าไซต์แสดงอย่างถูกต้องไม่ว่าจะดูจากที่ใด หากเวลาและเงินเป็นสิ่งสำคัญ ให้เน้นที่ประเภทของอุปกรณ์ที่ผู้ใช้ของคุณนิยมมากที่สุด (หากมีข้อมูลนี้) และวิธีที่พวกเขาใช้ไซต์ของคุณ ใช้ซอฟต์แวร์วิเคราะห์ของคุณหรือรูปแบบการวิจัยอื่น ๆ ค้นหา:
- อุปกรณ์ประเภทใดที่พวกเขาใช้บ่อยที่สุดในการดูเว็บไซต์ โดยให้ความสนใจเป็นพิเศษกับแบรนด์โทรศัพท์มือถือ/แท็บเล็ต/คอมพิวเตอร์ และขนาดหน้าจอ/ความละเอียด
- เบราว์เซอร์ใดที่ได้รับความนิยมสูงสุดสำหรับผู้ใช้ของคุณ เท่าที่เกี่ยวข้องกับสถิติทั่วโลก Google Chrome เป็นเว็บเบราว์เซอร์ที่ได้รับความนิยมสูงสุดทั่วโลก แต่ Safari นั้นใกล้เคียงกัน
- วิธีที่ผู้เยี่ยมชมใช้เว็บไซต์ของคุณ เช่น เวลาที่พวกเขาใช้ในการดู ที่ที่พวกเขาดู และเนื้อหาใดที่ได้รับความนิยมมากที่สุด วิธีนี้จะช่วยให้คุณระบุได้ว่าควรรวมเนื้อหาประเภทใดและควรละเว้นประเภทใด
ขั้นตอนที่ 2 ออกแบบเลย์เอาต์ต่างๆ สำหรับอุปกรณ์ต่างๆ
คุณสามารถใช้ CSS และ JavaScript ร่วมกันเพื่อตรวจหาอุปกรณ์ของผู้ใช้ รวมทั้งความสามารถของอุปกรณ์ (ไม่ว่าจะสนับสนุน Java, Flash ฯลฯ) และแสดงเวอร์ชันเฉพาะของไซต์ของคุณตามลำดับ CSS Media Queries มีประโยชน์อย่างยิ่งสำหรับการกำหนดขนาด/ความละเอียดของอุปกรณ์
ขั้นตอนที่ 3 บัญชีสำหรับการโต้ตอบประเภทต่างๆ
ผู้เยี่ยมชมของคุณอาจโต้ตอบกับเว็บไซต์ของคุณโดยใช้เมาส์ แป้นพิมพ์ หน้าจอสัมผัส หรือแม้แต่โปรแกรมอ่านหน้าจอสำหรับผู้พิการทางสายตา เมื่อพิจารณาถึงสิ่งนี้ เว็บไซต์ของคุณควรตอบสนองต่อการคลิกเมาส์ แป้นคีย์บอร์ด (Tab, Enter, Return ฯลฯ) และการสัมผัสหน้าจอ
เอฟเฟกต์การวางเมาส์เหนือไม่ทำงานกับสิ่งใดนอกจากเมาส์ แทนที่จะใช้เอฟเฟกต์เหล่านี้ คุณสามารถใช้ต้องการให้ผู้เยี่ยมชมคลิกปุ่มหรือไอคอนเพื่อแสดงสิ่งที่เคยแสดงไว้ก่อนหน้านี้เมื่อวางเมาส์ไว้
ขั้นตอนที่ 4 พิจารณาใช้ระบบจัดการเนื้อหา (CMS)
วิธีง่ายๆ ในการตรวจสอบให้แน่ใจว่าการออกแบบไซต์ของคุณตอบสนองได้คือการใช้ CMS ที่มีธีมตอบสนองที่สร้างไว้ล่วงหน้า การใช้ CMS เช่น Joomla, Drupal หรือ Wordpress ช่วยให้คุณมั่นใจได้ว่าเว็บไซต์ของคุณจะดูดีในทุกอุปกรณ์โดยไม่ต้องเขียนโค้ดองค์ประกอบที่ตอบสนองด้วยตัวเอง ตรวจสอบกับผู้ให้บริการเว็บโฮสติ้งเพื่อดูว่ามีเครื่องมือ CMS ใดบ้างที่ใช้ได้กับบริการของคุณ
ขั้นตอนที่ 5. ใช้เครื่องมือออนไลน์เพื่อทดสอบเว็บไซต์ของคุณ
ขณะนี้การออกแบบเว็บที่ตอบสนองตามอุปกรณ์ได้รับความนิยมเพิ่มขึ้น มีเครื่องมือฟรีมากมายที่คุณสามารถใช้ทดสอบเว็บไซต์ของคุณได้ หากคุณได้เข้ารหัสเว็บไซต์ของคุณแล้ว ให้ใช้เครื่องมือเหล่านี้เพื่อทดสอบว่าเว็บไซต์มีลักษณะอย่างไรในสภาวะต่างๆ เพื่อให้คุณรู้ว่าต้องปรับปรุงการตอบสนองที่ใด:
- การทดสอบความเหมาะกับอุปกรณ์เคลื่อนที่โดย Google: ช่วยให้คุณทราบว่าไซต์ของคุณทำงานได้ดีบนอุปกรณ์เคลื่อนที่เหมือนกับที่แสดงบนหน้าจอคอมพิวเตอร์หรือไม่
- resizeMyBrowser: ให้คุณดูไซต์ของคุณในความละเอียดที่แตกต่างกัน
- ผู้รับผิดชอบ: แสดงไซต์ของคุณบนหน้าจออุปกรณ์ต่างๆ ในรูปแบบต่างๆ (ด้านข้างหรือด้านขวา)
วิธีที่ 2 จาก 3: การทำให้เค้าโครงหน้าตอบสนอง
ขั้นตอนที่ 1 พิจารณาเฟรมเวิร์กสไตล์ชีตที่ตอบสนองฟรี
เฟรมเวิร์กคือชุด HTML, CSS และ/หรือ JavaScript ที่เขียนไว้ล่วงหน้าซึ่งคุณสามารถใช้เป็นโครงร่างสำหรับไซต์ของคุณได้ กรอบงานทั้งหมดได้รับการทดสอบและปรับให้เหมาะกับทุกเบราว์เซอร์ ดังนั้นสิ่งที่คุณต้องทำคือแทรกเนื้อหา เพิ่มการตั้งค่าสื่อและสี และเผยแพร่เว็บไซต์ของคุณ กรอบงานยอดนิยมบางส่วน ได้แก่:
- Bootstrap
- โครงกระดูก
- พื้นฐาน
ขั้นตอนที่ 2 ตั้งค่าวิวพอร์ตด้วยเมตาแท็ก
หากคุณไม่ได้ใช้เฟรมเวิร์ก คุณจะต้องเริ่มต้นด้วยส่วนที่สำคัญที่สุดของการเขียนโค้ดเว็บไซต์แบบตอบสนอง นั่นคือ Viewport วิวพอร์ตเป็นส่วนหนึ่งของเว็บไซต์ที่ผู้ใช้มองเห็นได้ กุญแจสำคัญในการทำให้ไซต์ของคุณแสดงผลอย่างถูกต้องโดยไม่คำนึงถึงขนาดหน้าจอคือการปรับขนาดขนาดวิวพอร์ตในแท็ก META ในการดำเนินการดังกล่าว ให้ใส่แท็กนี้ที่ด้านบนสุดของแต่ละหน้าในไซต์:
ขั้นตอนที่ 3 ระบุขนาดข้อความที่สัมพันธ์กับวิวพอร์ต
เมื่อตั้งค่าวิวพอร์ตแล้ว ข้อความบนหน้าเว็บจะปรับขนาดให้พอดีกับหน้าจอ อย่างไรก็ตาม ฟอนต์อาจแสดงขนาดใหญ่เกินไปหรือเล็กเกินไป หากไม่มีการระบุขนาดให้สัมพันธ์กับวิวพอร์ต คุณสามารถทำได้โดยกำหนดขนาดฟอนต์เป็นเปอร์เซ็นต์เฉพาะของวิวพอร์ตด้วยหน่วย vw ตัวอย่างนี้บอกให้ส่วนหัว H1 แสดงที่ 10% ของความกว้างของวิวพอร์ต ไม่ว่าจะมีขนาดเท่าใดก็ตาม:
วิกิฮาว
ขั้นตอนที่ 4 ใช้การสืบค้นสื่อเพื่อแสดงรูปแบบที่แตกต่างกันสำหรับขนาดหน้าจอที่ต่างกัน
คิวรี่สื่อช่วยให้คุณเลือกได้ว่าจะแสดงองค์ประกอบ CSS บางอย่างหรือไม่ ขึ้นอยู่กับขนาดหน้าจอ คุณระบุข้อมูลเฉพาะของคิวรีสื่อในไฟล์ CSS ได้ ในตัวอย่างนี้ สีพื้นหลังของร่างกายจะเปลี่ยนเป็นสีแดงหากขนาดหน้าจอของผู้ใช้คือ 480px หรือใหญ่กว่า:
วิกิฮาว
หน้าจอ @media และ (ความกว้างต่ำสุด: 480px) { เนื้อหา { สีพื้นหลัง: aqua; } }
วิธีที่ 3 จาก 3: การสร้างภาพที่ตอบสนอง
ขั้นตอนที่ 1 ใช้คุณสมบัติความกว้าง CSS เพื่อปรับขนาดรูปภาพ
แทนที่จะกำหนดความกว้างของรูปภาพเป็นจำนวนพิกเซลที่กำหนด (เช่น 500px) ให้ใช้เปอร์เซ็นต์ (เช่น 100%) เพื่อให้รูปภาพดูที่ความกว้างของพาเรนต์และปรับตามนั้น การตั้งค่าความกว้างของรูปภาพเป็น 100% บังคับให้รูปภาพขยายขนาดขึ้นและลง ขึ้นอยู่กับขนาดของหน้าจอของผู้ดู ในการทำสิ่งนี้ในบรรทัด:
ขั้นตอนที่ 2 ใช้คุณสมบัติความกว้างสูงสุดเพื่อจำกัดการปรับขนาดจริงของรูปภาพ
หากคุณใช้คุณสมบัติ width ในขั้นตอนก่อนหน้าเพื่อปรับขนาดรูปภาพเป็น 100% รูปภาพจะขยายหรือย่อขนาดให้พอดีกับคอนเทนเนอร์ 100% ไม่ว่าขนาดจะเป็นเท่าใด ซึ่งหมายความว่าหากภาพอยู่ด้านที่เล็กกว่า ภาพนั้นจะขยายขนาดใหญ่กว่าขนาดดั้งเดิมและมีลักษณะที่มีคุณภาพน้อยกว่า เพื่อป้องกันไม่ให้สิ่งนี้เกิดขึ้น ให้ใช้ความกว้างสูงสุดเพื่อตั้งค่าขนาดการปรับขนาดสูงสุดของรูปภาพเป็น 100% (ขนาดจริง) นี่คือวิธี:
ขั้นตอนที่ 3 ใช้องค์ประกอบรูปภาพ HTML เพื่อแสดงรูปภาพต่างๆ บนหน้าจอขนาดต่างๆ
หากคุณต้องการสร้างรูปภาพขนาดกำหนดเองเพื่อแสดงบนหน้าจอขนาดต่างๆ คุณสามารถระบุได้ว่าจะแสดงรูปภาพใดในโค้ด HTML ของคุณ สร้างรูปภาพขนาดต่างๆ แล้วใช้โค้ดนี้เป็นตัวอย่างในการระบุว่าจะใช้รูปภาพใดบนหน้าจอความกว้าง 600px และ 1500px: