บ่อยครั้งที่เราจะพบว่าเวลาที่เราเปิดเว็บต่างๆ บนเครื่องคอมพิวเตอร์เว็บดังกล่าวจะมีความสวยงามมากๆ แต่ในทางกลับกันเมื่อเราไปเปิดผ่านมือถือหรืออื่นๆ ภาพที่เห็นจะเป็นตัวหนังสือมั่วๆ วางกันอยู่เต็มไปหมดซึ่งนั่นเป็นปัญหาอย่างหนึ่งที่คนทำเว็บสมัยก่อนต้องพบเจอ ทว่าในปัจจุบันเราสามารถที่จะแก้ไขปัญหาเหล่านี้ได้ด้วยการทำเว็บแบบ Responsive โดยมีจุดประสงค์หลักๆ ก็เพื่อต้องการให้ผู้ใช้งานใช้ได้ง่ายที่สุด เป็นการนำเทคนิคของการทำเว็บหลายๆ แห่งมารวมกันซึ่งการทำเว็บไซต์แบบ Responsive ก็ไม่ได้เป็นเรื่องยากอะไรเลย
การทำเว็บไซต์ในแบบ Responsive
- ออกแบบให้มีความเรียบง่าย – สิ่งแรกที่เป็นเรื่องสำคัญและควรต้องคำนึงถึงมากที่สุดก็คือการออกแบบเว็บไซต์ให้เรียบง่ายอะไรที่ไม่จำเป็นก็อย่าใส่เข้าไป รวมถึงควรจะเขียน html ให้ง่ายที่สุด โดยให้พยายามคิดเนื้อหาทั้งหมดที่มีความเรียบง่ายโดยยังไม่จำเป็นต้องสนใจว่าจะต้องเป็นเนื้อหาที่แสดงบนมือถือได้ง่าย ให้คิดเนื้อหาตามปกติที่เราอยากทำมากกว่าว่าต้องการให้เว็บมีอะไรบ้าง
- เริ่มจากหน้าจอเล็กสุดก่อนเสมอ – ถือว่าเป็นจุดสำคัญในการออกแบบความยากคือคนทั่วไปจะยังคงติดภาพการออกแบบของ PC วิธีง่ายๆ ก็คือให้ลืมแบบนั้นไปได้เลยแล้วหันมาสนใจกับจอเล็กแทน ให้คิดไว้เลยว่าหากหน้าจอเล็กๆ เราจะออกแบบกันอย่างไร อะไรที่ไม่จำเป็นอย่างใส่เพราะมันจะเกะกะ แล้วใส่ html ให้เรียบร้อย
- กำหนดขนาดของ Relative – เมื่อใส่ html เรียบร้อยแล้วก็ให้ดูภาพที่ร่างเอาไว้แล้วก็เขียน Style Sheets จนพรีวิวแล้วเหมือนกับหน้าตาที่ได้ร่างเอาไว้ ประเด็นสำคัญคือเราต้องกำหนดในแบบ Relative ก็คือการกำหนดขนาดให้สัมพันธ์กับสิ่งที่อยู่ใกล้เคียง อันดับแรกคอ layout ตามด้วย image และอย่าลืมเรื่องของ font ด้วย
- หา Breakpoints และทำการเขียน Media Queries – หากลองพรีวิวด้วยความกว้าง 300px ภาพที่อยากเห็นคือทำให้ผู้ใช้เห็นง่ายสุดจากนั้นก็ทำการขยายใหญ่เพิ่มไปเรื่อยๆ องค์ประกอบต่างๆ ก็ยังคงแสดงผลอยู่ในระดับหนึ่ง เราก็ปรับให้ใช้งานสะดวกขึ้นที่เรียกว่า Breakpoint ก็ให้ใช้ Media Queries สำหรับใส่ style sheets สำหรับ Breakpoint นั้น
- กำหนด Viewpoint Meta Tag – เข้าใจง่ายๆ ก็คือการปรับให้หน้าเว็บของเราพอดีกับตัวหน้าจอซึ่งจำเป็นจะต้องมีการกำหนดขนาดเพื่อให้เวลาผู้ใช้งานเปิดจากมือถือหน้าเว็บที่ได้ก็จะมีความพอดีกับมือถือของพวกเขาเอง
- ตรวจสอบกับมือถือจริง – นี่ก็คือขั้นตอนสุดท้ายเมื่อเราทำทุกอย่างเรียบร้อยก็ให้ลองตรวจสอบดูจากมือถือที่ใช้งานจริงว่าเป็นไปอย่างที่ใจต้องการหรือไม่หากมีข้อผิดพลาดอะไรก็ให้แก้ไขไปตามสิ่งที่ควรจะเป็น