เปรียบเทียบกันจะๆ การแสดงผลบนคอมพิวเตอร์สู่มือถือบนระบบ MakeWebEasy

ขอกราบสวัสดีทั้งสมาชิกชาว MakeWebEasy ที่ใช้งานอยู่ละผู้ที่มีความสนใจอยากลองเปิดเว็บไซท์กับทางเรานะครับ เนื่องจากทางเราได้ทราบมาว่า มีผู้ใช้งานบางท่าน อาจสับสนกับคำว่า "Responsive Design" อยู่ ว่าตกลงแล้วหน้าตาของเว็บไซท์ จะออกมาเป็นอย่างไรกันแน่ วันนี้ทาง MakeWebEasy จึงนำตัวอย่างมาให้ดูเปรียบเทียบกันแบบจะๆไปเลย ว่าแล้วเราไปดูกันเลยดีกว่าครับ

หน้า Home

เริ่มจากหน้า Home หรือหน้าแรกของเว็บไซต์ของเรา ความแตกต่างที่เห็นได้ชัดนั่นก็คือ พวกข้อความและรูปภาพจะถูกย่อลงมา ให้พอดีกับหน้าจอ

1-homeหน้า Home บนคอมพิวเตอร์

1
หน้า Home บนมือถือ

จะสังเกตุเห็นว่า พวกแถบเมนูต่างๆด้านบน (Top Menu) ที่แสดงบนคอมพิวเตอร์ เมื่อมาอยู่บน Mobile จะถูกตัดออก แล้วนำมาใส่ในปุ่ม "Hamburger Button" แทน ในส่วนของตระกร้าสินค้าก็เช่นกัน จะถูกตัดคำออกและเหลือแต่รูปรถเข็นเพียงอย่างเดียวตามภาพ

hamberger

รูป Hamburger Button

1-2

เมื่อทำการกดปุ่ม Hamburger Button จะปรากฏ Menu ต่างๆขึ้นมา

อีกจุดนึงที่ทางเราทำขึ้น เพื่อความสะดวกสบายแก่ผู้ใช้งานบนมือถือคือ เมื่อเราทำการเลื่อนหน้า(scroll)ของเว็บไซต์ลงมา แถบเมนูด้านบน(sticky top bar) จะเลื่อนตามลงมาด้วย ทำให้ผู้ใช้งานสามารถกดเรียกเมนูได้ตลอดเวลา ถึงแม้ว่าเราจะไม่ได้อยู่ตำแหน่งบนสุดของเว็บไซต์ก็ตามที

1-1-edit

แถบเมนูด้านบน(sticky top bar)เลื่อนลงมาตามเรา ถึงแม้ว่าจะไม่ได้อยู่ด้านบนสุดของเว็บก็ตาม

หน้าสินค้า(Product)

ในส่วนของ หน้าสินค้า (Product) หากเปิดบนคอมพิวเตอร์จะแสดง รูปสินค้า 8 ชิ้น พร้อมกัน(อ้างอิงจาก Resolution 1920X1080)แต่หากเปิดบนมือถือจะแสดงผลเพียง 4 ชิ้น พร้อมกันแทน

2-productหน้า Product บนคอมพิวเตอร์

2
หน้า Product บนมือถือ

หน้ารายละเอียดของสินค้า (Product)

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

3-product-camera
หน้ารายละเอียดสินค้า (Product) บนคอมพิวเตอร์

3

หน้ารายละเอียดสินค้า (Product) บนมือถือก่อนเลื่อนลงมา

3-1

หน้ารายละเอียดสินค้า (Product) บนมือถือ เมื่อเลื่อนลงมาดูรายละเอียดด้านล่าง

หน้าแจ้งชำระเงิน

ในหน้าแจ้งชำระเงินเมื่ออยู่บนมือถือ ตัวหนังสือจะถูกจัดใหม่ให้อยู่ตรงกลางทั้งหมดแทน

4-paymentหน้าแจ้งชำระเงินบนคอมพิวเตอร์

4หน้าแจ้งชำระเงินบนมือถือ

หน้าบทความ(content)

ในส่วนของหน้าบทความถูกปรับเปลี่ยนจากที่ปกติบนคอมพิวเตอร์จะวางแนวนอน แต่เมื่อมาอยู่บนมือถือ จะเป็นแนวตั้งแทน ตามภาพ

5-content
หน้าบทความบนคอมพิวเตอร์

5
หน้าบทความบนมือถือ

หน้าอัลบั้มรูปภาพ(Gallery)

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

8-food-img
หน้าอัลบั้มรูปภาพบนคอมพิวเตอร์

8
หน้าอัลบั้มรูปภาพบนมือถือ

ติดต่อเรา Contact us

ที่หน้าติดต่อเรา เมื่ออยู่บนคอมพิวเตอร์ จะเห็นแผนที่ในความกว้างที่ใหญ่เท่าขนาดจอ(อ้างอิงจาก Layout แรก) ในขณะที่แบบมือถือ ตัวแผนที่จะถูกย่อลงให้พอดีจอ ดังภาพ

9-contactus
หน้าติดต่อเรา บนคอมพิวเตอร์

9
หน้าติดต่อเรา บนมือถือ

หวังว่าบทความนี้จะทำให้ผู้ที่ใช้งาน MakeWebEasy อยู่แล้ว หรือกำลังตัดสินใจใช้กับทาง MakeWebEasy ช่วยคลายข้อสงสัย เกี่ยวกับการแสดงผลของหน้าจอนะครับ หากมีข้อสงสัยหรืออยากเสนอแนะเพิ่มเติม สามารถคอมเม้นท์ลงมาใต้ Blog นี้ได้เลยนะครับ

ข้อมูลบริการเพิ่มเติม
website : https://www.makewebeasy.com
โทร : 02 217 7999
Line : @makewebeasy
Facebook : facebook.com/makewebeasy
Twitter : twitter.com/makewebeasy
Instagram : instagram.com/makewebeasy

Related Post

Comments

comments