Designing for a Responsive Web (การออกแบบเว็บไซต์แบบ Responsive คืออะไร)

Designing for a Responsive Web (การออกแบบเว็บไซต์ให้เป็นแบบ Responsive)

 

การออกแบบเว็บไซต์แบบ Responsive คืออะไร?

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

  1. A fluid grid
  2. Fluid images
  3. Media queries

 

บทบาทของนักออกแบบ

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

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

 

การออกแบบด้วย Grid System

Grid system.png

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

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

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

  1. พยายามงดการใช้เส้นขอบพื้นผิวของคอเลิมเหมือนในรูปข้างล่างนี้ textured_borders

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

 

  1. ไม่ควรจะไล่ระดับให้อยู่ในแนวนอน horizontal_gradient

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

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

 

Thinking with Proportions (การคิดแบบมีสัดส่วน)

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

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

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

วิธีที่ผิดในการใส่ขนาดของตัวอักษรคือ : x จะต้องมีขนาดที่ใหญ่กว่า y 20pt ความคิดนี้ไม่เพียงแต่เป็นความยุ่งยากสำหรับนักพัฒนาระบบเพราะคุณกำลังจะทำค่าคงที่ที่จะไม่เปลียนหรือปรับขนาดแม้จอแสดงผลจะเล็หรือกว้างแค่ไหนก็ตาม

วิธีที่ถูกต้องในการใส่ขนาดของตัวอักษรคือ : x จะต้องมีขนาดที่ใหญ่เกือบเท่า y 1.5 เท่า เพราะวิธีนี้จะยอมรับเฉพาะการออกแบบที่แท้จริงว่าขนาดของตัวอักษรมีขนาดเล็กหรือใหญ่แค่ไหนเมื่อเทียบกับข้อความอื่นๆบนหน้าเว็บไซต์, (ค่าคงที่เช่น 24pt หรือ 64pt จะหมดความหมาย)

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

 

Make it Modular (สร้างให้เป็นไปตามมารตฐาน)

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

สิ่งที่พิเศษในการใช้ Media Queries คือ คุณสามารถปรับขนาดหรือออกแบบโครงสร้างของเว็บไซต์ใหม่เพื่อให้ปรับขนาดเข้ากับบราวเซอร์ได้

เพื่อให้การออกแบบออกมาดีที่สุดคุณควรจะเริ่มคิดถึงส่วนต่างๆของแบบ เช่น เนื้อหาหลัก (main content), ส่วนด้านข้าง (sidebar), หัวข้อเรื่อง (header) และระบบนำทาง (navigation)

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

ยกตัวอย่างเช่น คุณกำลังออกแบบเว็บไซต์ด้วยโครงสร้างเหมือนในภาพด้านล่างนี้

modules_original

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

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

modules_resized.png

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

 

Conclusion (สรุป)

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

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

 

Cr. http://webdesign.tutsplus.com/articles/designing-for-a-responsive-web–webdesign-3850

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s