โดย Ryan Pierson
เว็บไซต์ในทุกวันนี้ถูกรับชมผ่านทางหน้าจอหลากหลายประเภท ตั้งแต่สมาร์ทโฟนขนาดเล็กไปจนถึงโทรทัศน์จอยักษ์ ดังนั้น การออกแบบให้เว็บไซต์ของคุณทำงานได้ดีอย่างสม่ำเสมอกับขนาดหน้าจอที่หลากหลาย จะทำให้ผู้เข้าชมเว็บไซต์สะดวกเพลิดเพลินยิ่งขึ้น ไม่ว่าจะเข้าชมผ่านทางอุปกรณ์ใดก็ตาม
ในบทความนี้ เราจะลองมาดู 5 วิธีการที่จะทำให้เว็บไซต์ของคุณเป็นมิตรกับอุปกรณ์เคลื่อนที่มากขึ้น
Responsive Design
การออกแบบเว็บไซต์สมัยนี้จะรวมองค์ประกอบที่ responsive เข้าไปด้วย ซึ่งจะปรับให้เข้ากับความกว้างของเบราเซอร์โดยอัตโนมัติ เมื่อหน้าจอหดเล็กลง การออกแบบก็จะปรับเปลี่ยนไปด้วยเพื่อให้การชมเว็บไซต์สะดวกสบายยิ่งขึ้น
เมื่อรูปภาพหดเล็กลง คอลัมน์ก็อาจจะวางตัวเรียงกันในแนวดิ่ง ส่วนเมนูก็อาจจะเปลี่ยนรูปแบบให้ใช้ได้ง่ายขึ้นจากอุปกรณ์เคลื่อนที่ เพียงแค่คลิกที่ไอคอนเดียว
ตัวเลือกที่นอกเหนือไปจาก responsive design คือสิ่งที่เรียกว่า adaptive design ซึ่งจะตรวจหาประเภทของอุปกรณ์ที่ใช้เข้าชมเว็บไซต์ และหลังจากนั้นจะช่วยให้เข้าชมในรูปแบบที่เหมาะสมเฉพาะเจาะจงกับอุปกรณ์ขนาดเล็ก ซึ่งกรณีหลังนี้ ต้องใช้การพัฒนามากกว่าเดิมเพื่อสร้างรูปแบบที่แตกต่างกันสองรูปแบบในการเข้าชมเว็บไซต์
ในกรณีของ RocketTheme ซึ่งเป็นแบบ responsive คุณสามารถใช้ class ที่ซ่อนหรือแสดงองค์ประกอบของเพจที่ขึ้นอยู่กับประเภทของอุปกรณ์ที่ใช้ได้ เช่น การใช้ class hidden-phone บนมอดูลหรือ widget จะช่วยซ่อนองค์ประกอบดังกล่าวเมื่อผู้ใช้ใช้อุปกรณ์ที่มีความกว้างเบราเซอร์ 480px หรือน้อยกว่านั้น
นี่จะช่วยให้คุณซ่อนมอดูลหรือ widget ที่อาจจะทำงานได้ไม่ดีบนอุปกรณ์เคลื่อนที่ แต่ในขณะเดียวกันก็คงเก็บส่วนอื่นที่ทำงานได้ดีเอาไว้ คุณคงต้องการให้เลย์เอาท์มีประสิทธิภาพแต่เรียบง่ายในขณะเดียวกัน โดยไม่สูญเสียประสบการณ์รูปแบบเดสก์ท็อปไป ต่อไปนี้เป็นรายละเอียดคร่าวๆเกี่ยวกับการจัดการองค์ประกอบที่ responsive โดยใช้ Gantry
| ประเภท | คำอธิบาย | ความกว้างเลย์เอาท์ | ความกว้างคอลัมน์ |
|---|---|---|---|
| สมาร์ทโฟน | สมาร์ทโฟนมาตรฐาน | 480px และน้อยกว่า | 100% fluid |
| สมาร์ทโฟน-แท็บเล็ต | สมาร์ทโฟนขนาดใหญ่ ไปจนถึงแท็บเล็ตขนาดเล็ก | 767px และน้อยกว่า | 100% fluid |
| แท็บเล็ต | แท็บเล็ตขนาดใหญ่ | 768px และสูงกว่า | 64px |
| เดสก์ท็อป | เดสก์ท็อปมาตรฐาน และแล็ปท็อป | 960px และสูงกว่า | 80px |
| หน้าจอขนาดใหญ่ | เดสก์ท็อปขนาดใหญ่และแล็ปท็อปความละเอียดสูง | 1200px และสูงกว่า | 100px |
Image Optimization
การ optimize รูปภาพเพื่อลดปริมาณ data transfer ในการแสดงผลรูปภาพนั้นๆให้มากที่สุด ถือว่าเป็นขั้นตอนสำคัญในการปรับปรุงประสบการณ์การใช้อุปกรณ์เคลื่อนที่ แม้แต่ในเครือข่ายที่ทันสมัยและรวดเร็วเพียงใดก็ตาม การโหลดหน้าเพจที่มีไฟล์รุปภาพขนาดใหญ่ ก็ทำให้รู้สึกว่าเทอะทะได้เมื่อใช้งาน นอกจากเวลาที่มากขึ้นในการโหลดหน้าเพจแล้ว การ scroll และเข้าชมเว็บไซต์ต่างๆก็สามารถทำให้ผู้ใช้หงุดหงิดได้หากไม่มีการ optimize รูปภาพ
ลองสละเวลาสักนิดในการทดสอบรูปภาพบนเว็บไซต์ผ่านทางโปรแกรม optimize รูปภาพ สำหรับผู้สนใจ เราได้ทำรายการตัวเลือกเด่นๆสำหรับโปรแกรมดังกล่าวไว้ ที่นี่
พยายามลดจำนวนรูปภาพในแต่ละหน้าเพจลง ถ้าสามารถเลี่ยงได้โดยใช้ CSS element หรือ font-based icon แทนการใช้ตัวรูปภาพจริงๆ ก็จะช่วยลดปริมาณข้อมูลที่บีบอัดไว้ในแต่ละหน้าได้มากเลยทีเดียว
การตั้งค่าความกว้างของรูปให้เป็น 100% ก็ช่วยเพิ่มความน่าใช้กับอุปกรณ์เคลื่อนที่ได้อย่างอัศจรรย์ เป็นการช่วยให้แต่ละรูปมีเนื้อที่แสดงมากขึ้น และเป็นการเลี่ยงการตัดตอนข้อความที่ไม่เหมาะเจาะในยามที่ความกว้างรูปหดเล็กลง
CSS element ก็เป็นอีกตัวเลือกในการโหลดรูปใดๆที่ต้องการ และขึ้นอยู่กับขนาดของเบราเซอร์ เป็นส่วนหนึ่งของการใช้งานแบบ responsive ในกรณีทั่วไป ซึ่งช่วยให้คุณสัมผัสประสบการณ์หลากหลายรูปแบบที่เฉพาะเจาะจงกับอุปกรณ์เคลื่อนที่แต่ละประเภท แต่ด้านลบก็คือ วิธีการนี้ขึ้นอยู่กับการรองรับของเบราเซอร์มากเกินไป และไม่สามารถใช้ได้เสมอไป ณ ขณะนี้ มีเฉพาะ Chrome 38+ เท่านั้นที่รองรับวิธีนี้
Caching and Code Optimization
การแคชเป็นส่วนหลักของการ optimize เว็บไซต์ Joomla หรือ WordPress ใดๆเลยก็ว่าได้ การวางแผนแคชที่ดีจะช่วยปรับปรุงเวลาการโหลดหน้าเพจและประสิทธิภาพของเว็บไซต์คุณ
การแคชจะเก็บข้อมูลที่ถูกร้องขอบ่อยๆ โดยเฉพาะอย่างยิ่งข้อมูลที่ไม่ค่อยเปลี่ยนแปลง แล้วป้อนให้ผู้เข้าชมเว็บดูในภายหลัง
รูปภาพ ข้อความ และองค์ประกอบอื่นๆในหน้าเพจ สามารถแคชและเรียกใช้ได้ง่าย กว่าการที่เซิร์ฟเวอร์จะต้องค้นหาและดึงข้อมูลเหล่านี้ออกมาในยามโหลดหน้าเพจแต่ละครั้ง
CMS เช่น Joomla WordPress หรือ Grav ต่างมีระบบสำหรับแคชในตัวทั้งสิ้น รวมทั้งความสามารถในการแคชผ่านทางเลือกอื่นๆ เช่น plugin หรือ extension
นอกเหนือจากการแคชแล้ว การบีบอัดองค์ประกอบ CSS หรือ JavaScript ก็เป็นอีกขั้นตอนที่เป็นประโยชน์ในการ optimize เว็บไซต์และปรับปรุงเวลาในการโหลดหน้าเพจ
RokBooster ที่ RocketTheme สร้างขึ้นสำหรับ Joomla โดยมันจะช่วยบีบอัด CSS และ JavaScript เปลี่ยน application file เช่น inline หรือรูปภาพพื้นหลังให้เป็นข้อมูล inline เป็นวิธีการที่ยอดเยี่ยมสำหรับการเรียก HTTP รวมทั้งลดปริมาณข้อมูลในการโหลดของแต่ละหน้าเพจด้วย
Form Input Attributes
ฟีลด์ที่ให้กรอกข้อมูลเฉพาะ เช่น ชื่อบุคคล อีเมลแอดเดรส หรือรหัสผ่าน สามารถเป็นปัญหาได้สำหรับผู้ใช้อุปกรณ์เคลื่อนที่ หากว่าองค์ประกอบเช่น autocorrect หรือ autocapitalize ไม่ได้ถูกตั้งค่าไว้
<input type=text size=18 autocapitalize=words>
หากต้องการทำให้ประสบการณ์เข้าชมเว็บไซต์ดีขึ้น ก็จงใช้ประโยชน์จาก input attribute เหล่านี้ เช่น การตั้งค่า autocapitalize=words จะทำให้อักษรตัวแรกของแต่ละคำเป็นตัวพิมพ์ใหญ่ ส่วนในฟีลด์ที่ต้องการชื่อและนามสกุลจริงของผู้ใช้ นี่จะช่วยทำให้อักษรตัวแรกของชื่อเป็นตัวพิมพ์ใหญ่โดยอัตโนมัติ ทำให้ผู้ใช้ใช้งานเว็บไซต์ได้สะดวกขึ้น
การปิด autocorrect ไปเสียก็เป็นวิธีการที่ดีเมื่อต้องการทราบข้อมูลเช่นชื่อหรืออีเมลแอดเดรส ซึ่งแน่นอนว่าไม่ได้มีคำที่อยู่ในพจนานุกรมอยู่ในนั้นด้วยเสมอไป นี่จะช่วยเลี่ยงการสะกดคำผิดที่เกิดจากการแก้ไขคำอัตโนมัติ ซึ่งมักจะทำให้ผู้ใช้ต่างงุนงงกันถ้วนหน้าในทุกวันนี้
ส่วน type ของข้อมูลที่กรอกก็สำคัญ อุปกรณ์เคลื่อนที่มักจะมีแป้นพิมพ์บนหน้าจอที่แตกต่างกัน ขึ้นอยู่กับประเภทของฟีลด์ที่กรอกข้อมูล หากใช้ type=email จะช่วยสร้างแป้นพิมพ์ที่มีอักขระ @ ที่หาเจอได้ง่าย ส่วนการใช้ type=url ก็จะสร้างแป้นพิมพ์ที่มีปุ่ม .com มาให้ล่วงหน้า
ใช้ช่องว่างให้เหมาะสม
เมื่อใช้เว็บไซต์ที่ไม่ได้ optimize อย่างเหมาะสมสำหรับอุปกรณ์ที่มีหน้าจอขนาดเล็ก ปัญหาที่น่าปวดหัวที่มักจะเจอคือ มีหลายปุ่มหรือองค์ประกอบที่สามารถคลิกได้วางเรียงติดกันเป็นพรืด
ลองพิจารณาดูให้ดีว่าควรมีช่องว่างระหว่างปุ่มเหล่านี้แค่ไหน หากเว้นไม่พอ ลองคิดดูว่ามีโอกาสกดปุ่มพลาดแค่ไหน ถ้าจะให้สมบูรณ์แบบจริงๆ ปุ่มและบรรดาองค์ประกอบอื่นๆที่คลิกได้เหล่านี้จะต้องมีขนาดใหญ่ คลิกได้ง่าย โดยไม่เกี่ยงว่าหน้าจอจะมีขนาดเพียงใด
ในขณะที่คุณอาจจะไม่ต้องการให้มีช่องว่างบนหน้าเพจๆหนึ่งมากนัก การพยายามทำให้การออกแบบเรียบง่าย ปุ่มต่างๆเว้นห่างจากกันสวยงาม ล้วนเป็นวิธีที่มุ่งทำให้เว็บไซต์ของคุณเป็นมิตรกับอุปกรณ์เคลื่อนที่
