ข้ามไปที่เนื้อหาหลัก

บทความ

เรื่องที่แนะนำ

ผู้ใช้งานมือถือเพิ่มขึ้นอย่างรวดเร็ว ทำให้มีบริการรับทำเว็บไซต์ Responsive เกิดขึ้นมากมาย



ในขณะนี้ Mobile Internet Users ได้มีจำนวนเพิ่มขึ้นอย่างรวดเร็ว แล้วก็มีลักษณะท่าทางที่จะแซง Desktop Internet Users ในปี 2013 อีกด้วย ซึ่ง Mobile Devices นั้นมีความมากมายหลากหลายมาก ไม่ว่าจะเป็น ขนาดและความละเอียดของจอแสดงผล (screen size and resolution) แนวของการแสดงผล (orientation) หรือแม้กระทั้งระบบปฏิบัติการ (OS) ถ้าหากเป็นสมัยเก่า พวกเราจะต้องเขียนเว็บไซต์ออกมาหลายๆversion ยกตัวอย่างเช่น Desktop version กับ Mobile version เพื่อเว็บไซต์ของพวกเรา สามารถแสดงผลลัพธ์ได้อย่างเหมาะสมกับ Device นั้น ๆ ซึ่งแนวทางนี้จะทำให้ต้นทุนเพิ่มขึ้น ในด้านเวลาและก็ค่าแรงในการพัฒนา และมีหลายคนเห็นโอกาสนี้จึงเกิดเป็นบริการรับทำเว็บไซต์ Responsive ขึ้นมา

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

Responsive Web Design ทำอย่างไร?

การจะทำ Responsive Web Design มักใช้แนวทางหลายๆอย่าง ด้วยกัน ไม่ว่าจะเป็น Fluid Grid, Flexible Images รวมทั้ง CSS3 Media Queries เริ่มแรกคือกระบวนการทำ Fluid Grid ซึ่งหมายถึงการออกแบบ Grid ให้เป็นแบบ Relative ซึ่งก็คือการที่มิได้กำหนดขนาดของ Grid แบบตายตัว แม้กระนั้นจะกำหนดให้สมาคมกับสิ่งอื่นๆดังเช่น กำหนดความกว้างแบบเป็น % หรือการใช้ font-size หน่วยเป็น em ฯลฯ ถัดมาเป็นแนวทางการทำ Flexible Images หรือการกำหนดขนาดของ Images ต่างๆให้มีความข้องเกี่ยวกับขนาดของหน้าจอแสดงผล หากรูปต้นฉบับมีขนาดใหญ่มากมาย เวลาแสดงในโทรศัพท์เคลื่อนที่ที่มีจอขนาดเล็ก ก็ควรลดขนาดลงมา เพื่อให้แสดงผลได้อย่างงดงาม ฯลฯ ท้ายที่สุดคือการใช้ CSS3 Media Queries ซึ่งจะช่วยทำให้พวกเราสามารถกำหนด style sheets สำหรับ Devices ต่างๆได้ โดยส่วนใหญ่ พวกเราจะเขียน style sheets เบื้องต้นเอาไว้ ซึ่งกลุ่มนี้ จะไม่ขึ้นกับ Devices ใดๆก็ตามต่อจากนั้นให้เราเขียน style sheets สำหรับ Devices ที่มีขนาดจอที่เล็กสุด มากขึ้นไปเรื่อยๆจนถึงขนาดใหญ่สุดซึ่งการเขียนแบบงี้ จะช่วยลดความซ้ำไปซ้ำมาของโค้ด รวมทั้งยังส่งผลให้การแก้รหัสในวันหลังทำเป็นง่ายอีกด้วย

ข้อผิดพลาดของ Responsive Web Design

เนื่องจากว่าการเขียนรหัสเดียว ให้รองรับหลายๆ Devices จึงอาจจะส่งผลให้กำเนิดปัญหา ตัวอย่างเช่น โทรศัพท์เคลื่อนที่ที่มีหน้าจอขนาดเล็ก ถึงแม้เราจะซ่อนเนื้อหานิดหน่อยที่ไม่จำเป็นเอาไว้ เช่น โปรโมท แต่ว่าในบางเว็บบราวเซอร์ ข้อมูลเหล่านี้ยังจะถูกโหลดเข้ามาอยู่ รวมถึงเรื่องของ Image Resizing ที่พวกเราไม่ได้ไปลด File Size ของตัว Image จริงๆทำให้โทรศัพท์มือถือจะต้องโหลดรูปเดียวกับรูปที่ใช้แสดงบน Desktop ทำให้ล่าช้าโดยไม่จำเป็น

โพสต์ล่าสุด

การออกแบบเว็บไซต์ ต้องคำถึงถึงปัจจัยอะไรบ้าง ไปดูกัน



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

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

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

ระบบ (System) สำหรับในการสร้างเว็บไซต์หรือบล๊อก ควรที่จะทำการเลือกใช้ระบบที่สามารถสนับสนุนในเรื่องของ การจัดการหมวดของรายละเอียดได้ สามารถจัดเก็บข้อมูลได้อย่างมีระบบมีฐานข้อมูลสือบค้นข้อมูลย้อนหลังได้ สามารถจัดเก็บสถิติการเข้าอ่านบทความเพื่อที่คุณจะได้รู้ถึงความนิยมหรือความสนใจของผู้อ่านว่านิยมอ่านบทความชนิดใด ระบบสามารถรองรับเทคโนโลยีใหม่ที่จะเกิดขึ้นได้ดังเช่นว่า ในปัจจุบันเรื่องของ SEO, Responsive Web Design แล้วก็ Social Media กำลังเป็นยอดนิยมฉะนั้นระบบที่ใช้จัดทำเว็บไซต์ควรจะรองรับสิ่งพวกนี้ ต่อมาเป็นเว็บควรจะมี Site Map หรือสารบาญของเว็บไซต์

สามารถอ่านบทความอื่น ๆ เกี่ยวกับการรับออกแบบเว็บไซต์ได้ที่ www.howdiv.com