การออกแบบเว็บแบบปรับเปลี่ยนได้และปรับเปลี่ยนได้ดีกว่าที่ใด

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

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

การออกแบบเว็บตอบสนอง

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

แนวทางการออกแบบเว็บที่ตอบสนองความต้องการทำให้ CSS3 ใช้ CSS แทน นอกจากนี้ยังใช้ภาพที่สามารถปรับขยายได้และเครือข่ายของเหลวซึ่งเป็นรหัสที่ยากต่อการออกแบบ

Adaptive Web Design

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

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

ตัวอย่างเช่นนักพัฒนาซอฟต์แวร์จะพิจารณา 1280 × 800 พิกเซลสำหรับพีซี 8 "สำหรับแท็บเล็ตและ 5" สำหรับโทรศัพท์มือถือ รหัสแรกของการออกแบบเว็บแบบปรับตัวประกอบด้วยการระบุหน้าจอ ถ้าเป็น PC ให้แสดงเวอร์ชันของ PC ของเว็บไซต์ ถ้าเป็นแท็บเล็ตขนาด 8 นิ้วให้ดูเวอร์ชันของแท็บเล็ตของเว็บไซต์และหากอุปกรณ์ดังกล่าวเป็นโทรศัพท์มือถือให้แสดงเว็บไซต์เวอร์ชันบนมือถือโดยใช้คำว่า "IF" ตามด้วยมิติข้อมูลที่ต่างกัน ตรงตามพิกเซลแทนการสร้างเป็นเปอร์เซ็นต์

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

เมื่อเทียบกับการออกแบบเว็บแบบโต้ตอบการออกแบบเว็บแบบปรับเปลี่ยนได้ง่ายขึ้นและรหัสนักพัฒนาส่วนใหญ่เลือกแบบหลังผ่านการออกแบบเว็บแบบตอบสนอง

ตอบสนองต่อการออกแบบเว็บแบบปรับเปลี่ยนได้

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

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

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

คุณอาจต้องการดูโพสต์นี้ใน MSDN ด้วยเช่นกัน ทำไมฉันถึงชอบการออกแบบเว็บแบบปรับตัวได้มากกว่าการตอบสนอง ออกแบบเว็บ