เข้าใจ Developer, ใจเขา.. ใจเรา
ในฐานะที่ผู้เขียนเป็นคนที่ทำงานในแวดวงเว็บไซต์มาสักพักใหญ่ๆ ซึ่งงานหลักของผมเองก็เป็น front-end developer ซึ่งจะขลุกอยู่กับ HTML, CSS และ Javascript อยู่เป็นประจำอยู่แล้ว จึงขอรวบรวมในฐานะที่เป็น developer คนนึง มาอธิบาย มาปรับความเข้าใจเกี่ยวกับเทรนด์เว็บไซต์ที่กำลังมาแรงซึ่งเป็นที่ต้องการของตลาดอย่างมากขึ้นเรื่อยๆอย่าง Responsive website กันสักหน่อยครับ
ลืมความคุ้นเคยที่มี แล้วคิดถึงความเป็นจริง
ผมเข้าใจครับ ไม่ว่าจะเป็น designer, project manager หรือแม้แต่ end-user เองก็พอจะเห็น พอจะจับใจความสำคัญของการทำเว็บไซต์แบบ Responsive ได้จากสิ่งที่เราคุ้นเคยมันอยู่ทุกๆวันจาก device ที่คุณใช้เข้าสู่อินเตอร์เน็ต แต่ความเป็นจริงแล้วมันต่างจากสิ่งที่คนส่วนมากเข้าใจอยู่ไกลพอสมควร เราจะเปิดรับสิ่งต่างๆที่เป็นทฤษฎีเดิมอยู่แล้วได้ยังไงในเมื่อเรายังยึดสิ่งที่เราคุ้นเคยอยู่ทุกวันว่ามันถูกต้อง Responsive website ไม่ใช่เรื่องตายตัว มันสามารถนำความเข้าใจหลายๆ ความเข้าใจเข้ามาหักลบกันเองได้เพื่อจุดประสงค์เดียวคือการแสดงผลได้อย่างราบรื่น และ ดีเยี่ยมสำหรับทุก device ไม่ใช่เฉพาะ iphone, ipad, หรือเฉพาะ desktop ขนาดที่มีคนใช้งานมากที่สุดในทุกวันนี้อย่าง 1366×768
แน่นอนมันย่อมใช้เวลา
หากคุณจะบอกว่า Responsive website นั้นก็ใช้เวลาพอๆกับ Fixed Website อย่างทั่วๆไปแล้ว มันก็คงจะไม่ใช่เรื่องที่ถูกต้องนัก แน่นอนว่าการเขียนเว็บไซต์ที่เป็น Responsive เพื่อการแสดงผลสำหรับหน้าจอหลายๆขนาดนั้นต้องใช้เวลาในการทดสอบกับอุปกรณ์อื่นๆ ที่มีขนาดที่เหมาะสมด้วย ผมอยากให้คุณลองคิดถึงกรณีๆ หนึ่ง หากคุณเขียนเว็บไซต์ขึ้นมาเพื่องานใดงานหนึ่งแล้วเจาะจงลงไปเลยว่า breakpoint ต่างๆนั้นควรอยู่ที่เท่านี้ๆ (เช่น 320, 768, 1024) แบบนั้นก็ทำได้ครับ แต่ลองคิดดูหากอีกสัก 2-3 ปีข้างหน้า Iphone, ipad เกิดเปลี่ยนขนาดความละเอียดของจอแสดงผลใหม่เป็น 400, 900, 1200 ตามลำดับแบบนี้ เราก็ต้องมานั่งเขียนเว็บไซต์หา breakpoint กันใหม่อีกอยู่ดี เพราะฉะนั้นให้เน้นความสำคัญไปที่ขนาดของเนื้อหาในเว็บไซต์จะเป็นการดีกว่ายึดตามจุด pixel และ ทั้งนี้ทั้งนั้นเอง Responsive website จำเป็นต้องใช้เวลาสำหรับการเก็บรายละเอียดมากกว่าเว็บไซต์ทั่วไป ตรงนี้อยากให้ผู้ที่เป็นคนกำหนด timeline หรือ คุณลูกค้าช่วยเข้าใจ developer นิดนึง
Responsive ไม่ใช่เพียงแค่การย่อขนาด web browser
ใครหลายๆคนชอบตรวจทานงานในแบบเฉพาะการย่อขนาด web browser เข้ามาดูว่าสิ่งที่ developer นั้นเขียนจะแสดงผลได้ถูกต้องหรือไม่ แต่จริงๆ แล้วไม่ควรทำแบบนั้นครับ เราต้องเข้าใจก่อนว่าเทคโนโลยีที่ใช้ใน web browser นั้นมีข้อจำกัดที่น้อยกว่า web browser บนอุปกรณ์พกพาอย่าง smartphone และ tablet การทดสอบควรจะถูกทดสอบจริงจากเครื่องอุปกรณ์หลายๆขนาดเพื่อให้เรามั่นใจได้ว่า การแสดงผลนั้นจะต้องถูกต้อง และ เป็นผลดีที่สุดในการส่งผ่านข้อมูลถึงผู้ใช้ ทั้งนี้เองคุณจะพอเข้าใจได้แล้วว่าทำไม Responsive website จึงต้องใช้เวลาพัฒนามากกว่าเว็บไซต์ทั่วไป ก็เพราะมันต้องทำให้ developer ต้องไปหาอุปกรณ์มาทดสอบด้วยนั่นเอง
เจ็บปวดกับการออกแบบ
มี developer ที่ทำหน้าที่ตัดไฟล์ photoshop ลงเว็บไซต์เป็น html,css ไม่น้อยที่ต้องเจ็บปวดกับการออกแบบของ designer ที่ไม่เข้าใจหลักการที่แท้จริงของการทำ Responsive website บางงานพอเปิดไฟล์ photoshop ขึ้นมาแล้วก็ร้อง “โอ้โห กูจะตัดทุกอย่างให้เข้าที่เข้าทางลงมือถือได้ยังไงวะเนี่ย” ในเมื่อรายละเอียดก็เยอะแยะ จัดนี่ไว้โน่น โยกย้ายตำแหน่งอย่างไม่มีความสัมพันธ์กันเมื่อต้องแสดงผลในพื้นที่ขนาดที่เล็กลง ยกตัวอย่าง คุณ Designer สร้างบล็อก A,B,C,D,E เรียงกันอย่างสวยงามในขนาดหน้าจอ desktop ปรกติ แต่เมื่อต้องออกแบบให้แสดงผลในรูปแบบของมือถือ คุณพี่ท่านดันย้ายเป็น B,C,A,E,D แบบนี้ ก็ต้องเหนื่อยคนเขียนโค้ดหน้าบ้านอย่างเรากันมากขึ้น ดูเหมือนทางออกที่ดีสำหรับทั้งสองฝ่ายน่าจะเป็นการให้ Designer รู้จักการใช้งาน Grid เข้ามาเป็นส่วนหนึ่งของงานออกแบบ และ ต้องเข้าใจพื้นฐานของการเรียกแสดงผลมากขึ้นก็จะดีไม่น้อย (โค้ดมันไม่ใช่ลากวางเหมือนใน photoshop นะโว้ย)
อย่าเพิ่งรีบร้อนนำบางส่วนไป programming
ผมเข้าใจ เข้าใจดีว่าบางครั้งต้องทำเวลา อยากจะได้ไฟล์หน้าที่เราจัดวางรูปแบบเสร็จแล้วไปส่งต่อให้ programmer เขียนโค้ด back-end แต่นั่นดูเหมือนไม่ใช่ทางออกที่ดีนักสำหรับ Responsive website บางครั้งเราก็อาจจะต้องกลับมาแก้ไขไฟล์ html หน้าแรก หรือ stylesheet บ้างเพื่อให้เข้ากับหน้าอื่นๆที่เรากำลังเขียนอยู่ แต่เมื่อไฟล์ดังกล่าวถูกส่งต่อไปให้คนอื่นทำแล้ว มันแทนที่จะเร็วขึ้นก็กลับช้าลงด้วยเหตุผลที่ว่าต่างคนก็ต้องต่างมาแก้ไขส่วนของกันและกัน เพราะฉะนั้นถ้าเป็นไปได้ ช่วยรอให้ไฟล์หน้าอื่นๆพร้อมหรือนิ่งก่อนจะดีกว่า
Responsive ไม่ใช่การตัดทอน-ตัดออก
บางครั้ง Responsive website อาจจะมี DOM(Document Outline Model) ที่มากกว่าเว็บไซต์ที่มีขนาดเจาะจงทั่วไปด้วยซ้ำ หลายๆคนชอบคิดว่าเมื่อเราต้องการให้เว็บไซต์แสดงผล
ได้กับอุปกรณ์ที่มีความละเอียดหน้าจอที่เล็กลง จะต้องตัดทอนบางส่วนออกไป หรือ เปลี่ยนแปลงข้อมูลให้น้อยลง-มากขึ้นด้วย ซึ่งนั่นไม่ใช่ความคิดที่ถูกต้อง เราอยากให้คุณมองภาพรวมของส่วนหลักๆเอาไว้เหมือนเดิม เนื้อหาต่างๆจะต้องเหมือนเดิมไม่มากขึ้นหรือน้อยลงต่อให้ถูกแสดงผลในหน้าจอขนาดไหนก็ตาม คุณลองนึกภาพตามดูหากคุณเข้าเว็บไซต์นึงในคอมพิวเตอร์ของคุณ คุณเจอข้อความแสดงโปรโมชั่นที่แถบด้านข้างของเว็บไซต์นั้น แต่เวลาคุณอยู่กับเพื่อนข้างนอก คุณเปิดเว็บไซต์เดียวกันขึ้นมาปรากฏว่าเว็บไซต์ดังกล่าวตัดทอนส่วนแถบด้านข้างออกไปเมื่อถูกเรียกผ่านมือถือ มันก็คงจะดูแปลกๆ และ อาจจะทำให้ user เกิดความสับสนได้
ทิ้งท้ายไว้ด้วยการสรุปแบบสั้นๆตามความรู้สึกของผู้เขียนเอง ผมคิดว่าเราควรให้เวลา และ ทำความเข้าใจกับ Responsive website มากขึ้น เพราะแน่นอนเราอาจจะต้องเก็บรายละเอียดที่มากขึ้น ทดสอบกับอุปกรณ์ที่หลากหลาย อีกทั้งบางทีเราก็ต้องไปบอกใครต่อใครว่ามันควรเป็นแบบนี้ ในความเป็นจริงรูปแบบมันเป็นแบบนี้ไม่ได้ เราควรให้ความสำคัญกับเนื้อหามากกว่าอุปกรณ์ที่เราต้องการจะแสดงผล นั่นเป็นทางออกที่ดีที่สุดสำหรับ end-user และ developer อย่างเราๆ ด้วยเช่นกัน