Jir4yu.me

ความรู้สึก.. ที่ตอนไหนๆก็(ไม่)เหมือนกัน

ปรับความเข้าใจ.. Responsive website

เข้าใจ Developer, ใจเขา.. ใจเรา

ในฐานะที่ผู้เขียนเป็นคนที่ทำงานในแวดวงเว็บไซต์มาสักพักใหญ่ๆ ซึ่งงานหลักของผมเองก็เป็น front-end developer ซึ่งจะขลุกอยู่กับ HTML, CSS และ Javascript อยู่เป็นประจำอยู่แล้ว จึงขอรวบรวมในฐานะที่เป็น developer คนนึง มาอธิบาย มาปรับความเข้าใจเกี่ยวกับเทรนด์เว็บไซต์ที่กำลังมาแรงซึ่งเป็นที่ต้องการของตลาดอย่างมากขึ้นเรื่อยๆอย่าง Responsive website กันสักหน่อยครับ

ลืมความคุ้นเคยที่มี แล้วคิดถึงความเป็นจริง

envoy 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

responsive websiteใครหลายๆคนชอบตรวจทานงานในแบบเฉพาะการย่อขนาด 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) ที่มากกว่าเว็บไซต์ที่มีขนาดเจาะจงทั่วไปด้วยซ้ำ หลายๆคนชอบคิดว่าเมื่อเราต้องการให้เว็บไซต์แสดงผลFlat-App-Flat-Website-Template-PSD-Download-cssauthor.com_ได้กับอุปกรณ์ที่มีความละเอียดหน้าจอที่เล็กลง จะต้องตัดทอนบางส่วนออกไป หรือ เปลี่ยนแปลงข้อมูลให้น้อยลง-มากขึ้นด้วย ซึ่งนั่นไม่ใช่ความคิดที่ถูกต้อง เราอยากให้คุณมองภาพรวมของส่วนหลักๆเอาไว้เหมือนเดิม เนื้อหาต่างๆจะต้องเหมือนเดิมไม่มากขึ้นหรือน้อยลงต่อให้ถูกแสดงผลในหน้าจอขนาดไหนก็ตาม คุณลองนึกภาพตามดูหากคุณเข้าเว็บไซต์นึงในคอมพิวเตอร์ของคุณ คุณเจอข้อความแสดงโปรโมชั่นที่แถบด้านข้างของเว็บไซต์นั้น แต่เวลาคุณอยู่กับเพื่อนข้างนอก คุณเปิดเว็บไซต์เดียวกันขึ้นมาปรากฏว่าเว็บไซต์ดังกล่าวตัดทอนส่วนแถบด้านข้างออกไปเมื่อถูกเรียกผ่านมือถือ มันก็คงจะดูแปลกๆ และ อาจจะทำให้ user เกิดความสับสนได้

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

Jirayu Limjinda

ถ้าไม่รู้จักกัน บางทีคุณอาจจะไม่เข้าใจกับสิ่งที่ผมทำ.. กลับกัน ถ้าคุณรู้จักผมดี คุณจะไม่ต้องเอ่ยปากถามเลยว่าทำไม

แสดงความคิดเห็นของคุณที่นี่

loading, please wait..

loading, please wait..