วิธีเช็คว่า เว็บไซต์ของคุณ รองรับการดูบน SmartPhone หรือไม่ (ภายใน 1 วิ)

1
how-to-check-responsive-website

ปัจจุบันคนเปิดดูเว็บจาก Smart Phone, Tablet กันมากขึ้น นอกเหนือไปจาก PC หรือ Notebook ดังนั้น นักออกแบบเว็บไซต์จึงต้องพัฒนาออกแบบรูปแบบ Template / Theme เพื่อมารองรับในส่วนนี้ ซึ่งการออกแบบเว็บไซต์ที่รองรับการดูบนมือถือนี้จะเรียกกันว่า Responsive Web Design

เราเองในฐานะผู้ใช้งาน คงไม่จำเป็นต้องไปสนใจว่า วิธีการออกแบบนั้นเป็นอย่างไร (ปล่อยให้เป็นเรื่องของพวก Web Designer) ซึ่งผมเองก็เป็นคนหนึ่งที่ไม่ได้รู้เรื่องการออกแบบเว็บไซต์เลยแม้แต่น้อย แต่ที่รับทำเว็บไซต์ได้และออกมาดูสวย เนื่องมาจาก อาศัยการใช้รูปแบบ Template / Theme ที่คัดกรองมาจากนักออกแบบมืออาชีพ แล้วเลือกตัวที่คิดว่าเหมาะสม นำมาปรับใช้กับงานของตัวเอง

แม้เราจะไม่ใช่นักออกแบบเว็บ แต่ในฐานะคนทำเว็บไซต์ (เว็บไซต์คุณภาพ) ก็ไม่ควรที่จะละเลยในจุดนี้ ดังนั้นในการเลือกใช้ Template / Theme (สำหรับ Blogger / WordPress) ก็ควรจะเลือกตัวที่รองรับการดูบนมือถือ หรือ Responsive Design มาใช้ (ใครที่ใช้ตัวเก่าๆอยู่ ก็อาจจะถึงเวลาแล้วที่ต้องปรับเปลี่ยน)

ในช่วงแรกๆ ผมจึงใช้วิธีการไปเปิดดูบนมือถือเลย เพื่อความแน่นอน (ชาวบ้านสุดๆ ฮาฮา) ก็ต้องไปนั่งขอยืมมือถือแม่ (Windows Phone) มือถือน้อง (iOS) มือถือหลาน (Android) มาเช็คดูทีละเครื่อง เพราะว่า ผมไม่มีมือถือเป็นของตัวเอง (หา!! JoJho ไม่ได้ใช้โทรศัพท์มือถือ)… ปกติผมติดต่องานกับลูกค้า จะใช้ Email หรือไม่ก็ Facebook … มีลูกค้าผมรายนึง ถามว่า แล้วน้องใช้ชีวิตได้ยังไงนิ ไม่มีมือถือ =.=” …. อ่า (เฮ้ย!! เป็นผู้ชายไร้มือถือ มัน … ขนาดนั้นเลยหรอ)

please-need-iphoneclick here to help JoJho

วันนี้ผมเลยจะมาขอเสนอวิธีการเช็ค Template หรือ Theme (หรือ แม้กระทั่ง Website ทั่วไป) ว่าตัวไหนที่เป็น Responsive Design บ้าง โดยไม่ต้องไปดูบนมือถือ … ดูในคอมนี่แหละ ง่ายดี!! (ก็คนทำเว็บมันต้องใช้คอม) ซึ่งเป็นวิธีที่ผมใช้อยู่ และเจอวิธีการนี้โดยบังเอิญ แบบไม่ได้ตั้งใจ (แต่หลายคนอาจจะรู้แล้ว)

ทริกง่ายๆ สำหรับเช็คเว็บไซต์รองรับการดูบนมือถือหรือไม่

วิธีการง่ายๆเลย คือ
1. เอาเมาส์ไปคลิกปุ่ม “Restore Down” (Minimize) ที่มุมขวาบนของ Browser (Chrome/Firefox/IE)
2. เลื่อนกรอบของ Broswer เพื่อย่อขนาดไปทางซ้ายให้แคบสุด
3. ไปกดปุ่ม Restore มุมขวาบนของ Broswer เหมือนเดิมเพื่อทำการ ขยายหน้าต่างให้ใหญ่สุดเหมือนเดิม (Maximise)
4. กลับไปกดตามข้อ 1

responsive-check-01responsive-check-02

โดยหากเว็บไหนที่เป็น Responsive Design มันจะปรับขนาดให้อัตโนมัติทั้งรูปภาพและ Layout จาก WEB VERSION กลายเป็น MOBILE VERSION ทันที ทีนี่ เวลาคุณจะเช็คเว็บไซต์ที่เปิดอยู่ ว่ารองรับการดูบนมือถือหรือไม่ ก็ทำได้ง่ายๆสบายแล้ว สามารถทำได้ใน 1 วินาที (One-Click , One-Sec) อยากจะเช็ค Template ไหน Theme ไหน ก็เปิดดู Demo แล้วใช้วิธีนี้เช็คได้ทันที โดยไม่ต้องไปนั่งดูบนมือถือ ^_^

ลองทำดูสิ … ตอนนี้เลย ทดสอบ!!

แต่ถ้าคุณคิดว่า วิธีการนี้มัน รวดเร็วสะดวกง่ายดาย มากเกินไปสำหรับคุณ …
คุณสามารถเช็คผ่านทางเว็บไซต์ที่บริการเช็ค Responsive โดยเฉพาะ อาทิเช่น

1. http://responsivetest.net สำหรับเช็ค Responsive โดยเฉพาะ เข้าไปพิมพ์ URL เว็บไซต์ที่ต้องการได้เลย (แจ่ม)
2. http://responsivedesignchecker.com/ ถ้าคุณไม่ชอบ Background สีขาวของเว็บบน ก็ใช้เว็บนี้แทน เป็นสีดำ
3. http://ami.responsivedesign.is/ เว็บนี้ก็ใช้ได้ดีทีเดียว

จริงๆมีอีกหลายเว็บ แต่ผมว่า ใช้แบบ 1 วิ เหอะ … นะ
… หรือคุณว่าไง ?

JoJho
คนทำเว็บนอกคอก


Noted:

☺ วิธีการเช็คแบบนี้สามารถใช้ได้กับทั้ง WordPress , Blogger รวมถึง Website ทั่วไป

 

About author

WebBastard.Net

WebBastard.Net

เว็บบล็อกที่จะมา เม้าท์มอย + สอน + แชร์เทคนิค การทำ SEO , Social Media Marketing , Content Marketing , การทำเว็บไซต์ด้วย Blogger และ WordPress รวมถึงการทำ Amazon Affiliate ในลักษณะ "การเล่าสู่กันฟัง" จากประสบการณ์ในการทําเว็บแบบมันส์ๆ ของ JoJho - คนทําเว็บนอกคอก

  • พันธรัตน์ ศิริสกุล

    วันนี้มาอ่านบทความนี้เพ่ิมครับ

อยากอ่านต่อ ? ... ขอแนะนำ

seo-case-study-nurseshoes

Case Study การทำ SEO : 4 Keys ใน 1 โพส

Case Study การทำ SEO : 1 โพส + 12 วัน + 4 Keywords กับ prawpunshoes ซึ่งเป็นเว็บบล็อกที่ผมพึ่งรับทำให้ลูกค้ารายล่าสุด มีโพสทั้งหมด 7 โพส แต่มีข้อมูลจริงๆ 4 โพส โดยลงบทความไปตั้งแต่วันที่ 13 Dec ...