การเลือกแนวทางเป็นเพียงการเริ่มต้น คู่มือนี้จะมีโครงสร้างเป็นสี่ส่วนเพื่อสะท้อนขั้นตอนการสร้างเว็บไซต์และเพื่อให้การพิจารณาสำหรับแต่ละขั้นตอน: การออกแบบการพัฒนาและการตรวจสอบเว็บไซต์ที่มีการออนไลน์แล้วร่วมกันแนวทางเหล่านี้จะช่วยให้คุณสามารถออกแบบสร้างและเพิ่มประสิทธิภาพเว็บไซต์ของคุณให้ดูเป็นเวอร์ชั่นที่ดีที่สุดที่เป็นไปได้สำหรับผู้ใช้และผลต่ออันดับ SEOเหมือนกัน

 

ตัวเลือกพื้นฐาน: ใช้ CMS ที่เหมาะกับคุณ

หากคุณมีงบประมาณหรือทรัพยากรที่จำกัด คุณอาจต้องการการใช้ระบบการจัดการเนื้อหาที่ใช้งานง่าย (CMS) เช่น WordPressการออกแบบที่ธีมที่ตอบสนองการใช้งานบนมือถือน่าจะเป็นตัวเลือกที่ดีที่สุดของคุณเนื่องจากเว็บไซต์แบบ Responsive มีจำนวนมากที่ออกแบบไว้ล่วงหน้าออกและตอบสนองCMS และใช้เวลาน้อยที่สุดของการสร้างเนื้อหา

นี่คือบางส่วนของคำแนะนำของเราสำหรับธีมเวิร์ดเพรสการตอบสนองที่ดีและบริการ CMS อื่นๆ มีมากมายจากตัวเลือกอื่นๆ ที่มีอยู่

ธีมส์

 

Elegant Themesมีเว็บไซต์แบบ Responsive หลายราคาเริ่มต้นที่ 69 เหรียญ/ ปี ให้การปรับปรุงรุ่นและการสนับสนุนอย่างดีเยี่ยม คุณสามารถต่ออายุการใช้งานได้เป็นประจำทุกปี

 

PressCoders:เราขอแนะนำธีมDesignfolioซึ่งคุณสามารถดาวน์โหลดได้ฟรี (มีข้อจำกัดบางอย่าง) หรือซื้อสิทธิการใช้งานเต็มรูปแบบในราคา 79 เหรียญ รวมถึงการสนับสนุนอย่างดีเยี่ยม

 

WooThemes:เป็นธีมพรีเมียมที่ดีเยี่ยม บางส่วนใช้งานได้ฟรี ส่วนใหญ่มีราคาประมาณ 80 เหรียญ ถึง140เหรียญทุกธีมรองรับการใช้งานบนมือถือพร้อมและปรับแต่งได้มาก

 

ธีมแบบ Responsive จาก CyberChimpsเป็นตัวเลือกที่ดีโดยเฉพาะอย่างยิ่งสำหรับเว็บไซต์พื้นฐานเช่นเว็บไซต์ส่วนตัวหรือบล็อก และใช้งานได้ฟรี

 

สำหรับผู้ใช้งานอื่นที่ไม่ได้ใช้เวิร์ดเพรส

• Squarespaceอาจจะเป็นหนึ่งในที่ดีที่สุด WYSIWYG (สิ่งที่คุณเห็นคือสิ่งที่คุณได้รับ) โซลูชั่นการออกแบบมือถือในขณะนี้และราคาเริ่มต้นเดือนละ 8 เหรียญ (สำหรับการบริการขั้นพื้นฐานที่สุด)

 

Wixเป็นบริการแบบ WYSIWYG อีกแบบหนึ่งและราคาก็สมเหตุสมผลมากอยู่ที่ประมาณ 17 เหรียญต่อเดือนแต่ถ้าคุณพร้อมและสามารถที่จะทำได้ด้วยตัวเอง ก็เริ่มต้นได้เลย!

 

2. การออกแบบเว็บไซต์ที่รองรับการใช้งานบนมือถือ

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

 

การจัดระเบียบเนื้อหา

• แนะนำ: Mobile first

mobile firstคือ การพัฒนารูปแบบใหม่ในโลกการออกแบบ แนวคิดพื้นฐานคือว่าเว็บไซต์มือถือควรได้รับการออกแบบมาก่อนแล้วขยายลงในหน้าสำหรับแท็บเล็ตและเดสก์ท็อป มีอะไรที่คุณสามารถวางไว้บนหน้ามือถือที่ไม่สามารถโหลดได้ในรุ่นเดสก์ทอป (เป็นสิ่งที่นอกเหนือจากคุณสมบัติเฉพาะสำหรับมือถือ แต่นี่คือส่วนน้อยของการแก้ไขปัญหา) แนวทางนี้จะเป็นประโยชน์อย่างยิ่งสำหรับเว็บไซต์แบบ rESPONSIVE และเว็บไซต์ที่แสดงแบบไดนามิก ขณะที่เนื้อหาส่วนสำหรับรองรับการใช้งานบนมือถือ หน้าต่างๆ ควรมีเนื้อหาคล้ายคลึงกับเนื้อหาบนเด็กส์ท็อป

 

• การออกแบบ Mobile Site Second

หากการออกแบบ MOBILE FIRST ไม่ได้เป็นตัวเลือกในการทำเว็บไซต์ของคุณจะเป็นเรื่องยากมากขึ้น แต่ไม่มีอะไรที่เป็นไปไม่ได้
เริ่มต้นด้วยการหาองค์ประกอบของหน้าเดสก์ท็อปที่จำเป็นต้องมีในหน้ามือถือ


O คุณสามารถรวบรวมข้อมูลของผู้ใช้ผ่านเครื่องมือการวัดผลการเยี่ยมชมเว็บไซต์มาตรฐาน เช่น CRAZYEGG และ UX TESTING ถามคำถามต่อไปนี้
1. เนื้อหาใดเป็นสิ่งสำคัญที่ผู้เข้าชม?
2. สิ่งที่มองข้ามไป?
3. เส้นทางโดยทั่วไปที่ผู้เข้าชมใช้คืออะไร?


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


เรียกใช้การทดสอบความเร็วเพื่อระบุองค์ประกอบซึ่งใช้เวลาพอสมควรในการดาวน์โหลด พบว่า
1. มีความสำคัญกับเนื้อหาของหน้าเว็บไซต์หรือไม่
2. สามารถจะตัดทอนลงได้หรือไม่
ใช้ข้อมูลเชิงลึกจากการวิจัยนี้เพื่อระบุสิ่งที่คุณจะทำหรือไม่ทำในเวอร์ชั่นมือถือของเว็บไซต์คุณ บางส่วนของงานวิจัยนี้อาจช่วยให้คุณทำรื้อทำความสะอาดเว็ปไซต์เดสก์ทอปมากจนเกินไป: หากคุณพบว่าเนื้อหาที่ผู้เข้าชมจะไม่สนใจแล้วทำไมต้องมาอยู่บนเว็บไซต์เดสก์ท็อปทั้งหมดด้วยหรือ?

 

ถัดไป ทำแผนที่เส้นทางที่พาผู้เข้าชมเว็บไซต์มายังหน้าเว็บไซต์สิ่งนี้จะทำได้ง่ายสำหรับหน้าบทความโดยทั่วไป แต่อาจจะซับซ้อนสำหรับหน้าหมวดหมู่และหน้าผลิตภัณฑ์ บางตัวอย่างที่ดีคือ:

 

Facebook:แน่นอนว่าเฟซบุ๊คคือ เจ้าพ่อของโลกมือถือ รุ่นเดสก์ทอปของเว็บไซต์ที่มีสามคอลัมน์: การนำทาง, รายการหลักของเนื้อหาและรายการที่สองของแนวโน้มและการโฆษณา รุ่นมือถือย้ายการนำทางทั้งหมดไปยังด้านบนของหน้าและเพียงแค่แสดงให้เห็นคอลัมน์หลัก

Amazon:น่าจะเป็นตัวอย่างที่ดีที่สุดของเว็บไซต์ที่รองรับการใช้งานบนมือถือ หน้าผลิตภัณฑ์โทรศัพท์มือถือแสดงตัวอย่างของข้อมูลทั้งหมดที่รุ่นเดสก์ทอปมี และมีการจำกัดเนื้อหาที่ต้องดาวน์โหลดสำหรับรุ่นมือถือ แต่ยังคงให้ผู้เข้าชมสามารถเข้าถึงข้อมูลทั้งหมด เนื้อหาที่มีการจัดลำดับความสำคัญที่จะได้รับให้คุณสามารถซื้อได้อย่างรวดเร็วโดยการใส่ปุ่มซื้อที่ด้านบนแล้วข้อมูลผลิตภัณฑ์ แล้วปุ่มให้รีวิว

 

[เว็บไซต์ Amazon บนมือถือ]​

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

 

สิ่งที่น่ากังวลเกี่ยวกับการออกแบบมือถือในแบบสากล

 

• การนำทางบนหน้าจอขนาดเล็ก

 

หน้าจอโทรศัพท์มือถือที่มีขนาดเล็กเกินไปที่จะดูเมนูนำทางขนาดใหญ่ที่นอกเหนือไปจากเนื้อหาหลัก แทนที่จะแสดงการใช้งานเว็บไซต์บนหน้าจอเดสก์ท็อปของตัวเลือกการนำโทรศัพท์มือถือควรจะตัดทอนลง เว็บไซต์ส่วนใหญ่ทำเช่นนี้ด้วยวิธีการ 3 บรรทัดและใช้แว่นขยาย;

• ความแตกต่างของขนาดภาพในสมาร์ทโฟน

สมาร์ทโฟนส่วนใหญ่มีขนาดหน้าจอแสดงผลที่ 320 พิกเซลถึง 400พิกเซล (พิกเซลของ CSS เป็นสิ่งที่สำคัญสำหรับการออกแบบ) แม้ว่า iPhones รุ่นเก่าจะมีการแสดงผลเพียง 240 พิกเซลเท่านั้น หากพลิกด้านข้างจะขยายไปถึง640 พิกเซล แท็บเล็ตมีขนาดเริ่มต้นที่480 พิกเซลถึง 800พิกเหมือนหนังสือ แต่กำลังมีแนวโน้มที่จะเหมือนขนาดการแสดงผลของโทรทัศน์ ทำให้พิกเซลเขยิบไปถึง 1280 พิกเซล

ช่วยให้ความแตกต่างของขนาดภาพมีความกว้างสวยในการออกแบบอยู่ที่  320 พิกเซล ถึง 1280พิกเซล แทนที่จะจับเอาขนาดที่เหมาะกับบริการ จงเน้นไปที่ขนาดหน้าจอที่คุณพบว่าผู้คนมักจะชอบใช้ในเว็บไซต์  ถ้าคุณใช้ซอฟต์แวร์การวิเคราะห์ เช่น Google Analytics คุณสามารถหาข้อมูลนี้ได้อย่างง่ายดาย (มันอยู่ใน GA ของรายงานการวิเคราะห์ผู้ใช้งานมือถือ) นี่คือภาพสกรีนช็อตจากมือถือ>อุปกรณ์ที่มี "ความละเอียดหน้าจอ" แต่เป็นมิติข้อมูลรอง:​

ตรวจสอบให้แน่ใจว่าการทดสอบเว็บไซต์ของคุณบนอุปกรณ์ด้านบนที่สูงถึง 90% ของผู้เข้าชมของคุณใช้

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

 

การออกแบบสำหรับการสัมผัส

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

 

1.ให้พื้นที่มากพอสำหรับนิ้วมือ นิ้วมืออาจไม่แม่นยำ นิ้วมือปิดบังสิ่งที่พวกเขากำลังแตะ คุณไม่สามารถให้ข้อบ่งชี้ว่าเขากำลังแตะเหนือตัวเลือกที่เหมาะสมก่อนที่พวกเขาแตะและที่เขาแตะเป็นส่วนหนึ่งที่มีขนาดใหญ่ของหน้าจอกว่าเมาส์ ตรวจสอบให้แน่ใจว่าคุณมีพื้นที่ไม่น้อยกว่า 28 x 28พิกเซลสำหรับการเชื่อมโยงในเว็บไซต์ของคุณ

 

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

 

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

 

4.การออกแบบเมนูแบบเลื่อนลง: ยังคงดีสำหรับการทำงานในมือถือและอาจจะเป็นวิธีที่ดีในการซ่อนข้อมูลจนกว่าจะมีการร้องขอ แต่มักจะเปิดเฉพาะเมื่อคุณเลื่อนเคอร์เซอร์ของเมาส์เหนือมัน  มือถือแบบที่มีการออกแบบแบบเลื่อนลงควรจะเปิดใช้งานด้วยการแตะลาก และเมนูควรจะแยกชัดเจนระหว่างตัวเลือก เว็บไซต์ที่ชื่อ BridgestoneTire.com เป็นตัวอย่างที่ดีสำหรับเรื่องนี้:

1. ลดการป้อนข้อความที่พิมพ์การพิมพ์จะช้าลงบนโทรศัพท์มือถือและจำเป็นที่จะมีแป้นพิมพ์บนหน้าจอซึ่งจะทำให้ครึ่งหน้าจอที่สามารถดูใหญ่ ตัดออกจากการป้อนข้อมูลที่ไม่ได้เป็นสิ่งจำเป็นอย่างยิ่ง ทำฟอร์มไปใส่ในหลายหน้าแทนที่จะใช้พื้นที่ไม่เกินครึ่งหนึ่งของหน้าจอ ที่มีความชัดเจนด้วยปุ่ม "ถัดไป" เพื่อให้ผู้เข้าชมไม่ต้องเลื่อนลง

 

2. ใช้ฟีเจอร์เฉพาะมือถือ:ความแตกต่างที่สำคัญระหว่างเว็บไซต์และเว็บไซต์สำหรับรองรับบนมือถือเพิ่มโอกาสอื่น  ตัวอย่างเช่นคุณสามารถทำให้ทุกหมายเลขโทรศัพท์ของคุณคลิกเพื่อโทรและให้ที่อยู่เชื่อมโยงสำหรับการนำทาง

 

หนังสืออ่านเพิ่มเติม
• Designing for SEO
• 'Mobile First' Design
• Five Good and Five Bad Examples of Click-To-Call Mobile CTAs
• Principles of Mobile Site Design
• Really Responsive Design - Design and Frameless Grids (for a slightly different approach)

 

การออกแบบสำหรับเว็บไซต์ Responsive

สำหรับคุณที่ไม่คุ้นเคยกับการออกแบบเว็บไซต์แบบ Responsive เป็นความคิดที่ว่า

สามารถเปลี่ยนโครงสร้างและขนาดได้ตามแต่ละอุปกรณ์มือถือด้วย  Code โดย HTML Code เหมือนเดิมไม่ว่าจะเป็นขนาดหน้าจอใด)

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

ในขณะที่คุณเริ่มต้นการออกแบบเว็บไซต์แบบ Responsive ก็จะดึงดูดให้เขียนโค้ดCSS สำหรับเว็บไซต์โทรศัพท์มือถือ, ชุดอื่นของ CSS สำหรับแท็บเล็ตหรือคอมพิวเตอร์ขนาดเล็กและชุดสุดท้ายของ CSS สำหรับจอคอมพิวเตอร์ขนาดใหญ่ แต่จุดของการออกแบบที่ตอบสนองคือการทำให้มันพอดีกับขนาดหน้าจอทั้งหมด – ไม่เฉพาะแต่ที่คนส่วนใหญ่คิด

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

 

ตัวอย่างของการปรับขนาดเว็บไซต์

หากคุณกำลังสร้างเว็บไซต์ตั้งแต่เริ่มต้น นักออกแบบส่วนใหญ่แนะนำให้เริ่มต้นกับออกแบบเว็บไซต์บนมือถือแล้วเว้นระยะห่างขององค์ประกอบที่ออกมาเป็นหน้าจอใหญ่ แต่คนส่วนใหญ่พิจารณาการออกแบบเว็บไซต์โทรศัพท์มือถือในขณะนี้มีรุ่นเดสก์ท็อปของเว็บไซต์แล้ว ดังนั้นเราได้ให้คำแนะนำเกี่ยวกับวิธีการใช้เว็บไซต์ปัจจุบันของคุณและการย่อลง

นี่คือตัวอย่างของแม่แบบหน้าเว็บบนเดสก์ท็อปกับบันทึกการออกแบบ:

 

ย่อเนื้อหาลง (ทุกองค์ประกอบ)

ขณะที่ความกว้างของมีขนาดเล็กลงทุกองค์ประกอบยกเว้นข้อความที่จะต้องมีขนาดเล็กลงเช่นกัน เพื่อให้เกิดการพัฒนาอย่างค่อยเป็นค่อยไปมากกว่าการกระโดดของขนาดไปมา  ทำให้มีขนาดความกว้างของวัตถุที่สำคัญที่สุดเป็นร้อยละของขนาดส่วนใหญ่ของขนาดหน้าจอ

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

ข้อความควรจะมีขนาดเป็น100% ของขนาดหน้าจอที่น้อยกว่าความกว้างของด้านซ้ายและลูกศรขวา (ถ้ามันยังอยู่) ข้อความจะปรับตัวเองเพื่อให้พอดีกับกล่องที่คุณออกแบบ ดังนั้นจึงเป็นงานที่ทำได้ค่อนข้างง่าย

 

จัดระเบียบเนื้อหา (ข้อความที่แบนเนอร์)

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

จัดระเบียบเนื้อหา (การนำทางทางด้านซ้าย)

บ่อยครั้งที่คุณจะต้องการตัวเลือกในการนำทางด้านซ้ายมองเห็นได้ชัดเจนกับผู้เข้าชมมือถือเช่นกัน เลื่อนลูกศรไปที่ด้านล่างของเนื้อหา เมื่อผู้เข้าชมได้อ่านหน้านั้น ตัวเลือกต่างๆ ก็จะเห็นได้ชัด

ลบเนื้อหา (การนำทางทางขวา)

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

ถ้าคำตอบคือไม่ มีคุณสามารถตั้งค่าให้การแสดงผลหน้าจอเป็น  none เมื่อความกว้างของหน้าจอมีขนาดเล็กเกินกว่าจะปรับเข้าหาจอได้พอดี

หมายเหตุ: เมื่อคุณตัดบางอย่างออกจากเว็บไซต์ที่รองรับการใช้งานบนมือถือ คุณควรถามตัวเองว่าคุณจำเป็นต้องมีในเว็บไซต์บนหน้าจอเดสก์ท็อป? นี่อาจจะเป็นโอกาสที่ดีสำหรับคุณที่จะทำการรื้อเว็บไซต์หลักของคุณให้สะอาดตาขึ้นได้เป็นอย่างดี

เมื่อคุณได้ทำทั้งหมดของการปรับเปลี่ยนเหล่านี้เว็บไซต์ควรจะสามารถที่จะย่อลงและมีลักษณะเหมือน:

ย้ายเนื้อหาลงในรูปแบบคอลัมน์เดียว

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

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

2. ซ่อนเนื้อหารายการในการโหลด: พิจารณารูปแบบที่ติดต่อกับผู้ใช้งาน ที่ซ่อนบางส่วนของเนื้อหาในการโหลดภายใต้หัวข้อให้เหมือนเป็นปุ่ม ยกตัวอย่างเช่นนี่เป็นวิธีที่เราจะแสดงตารางการประชุมของเราผ่านทางโทรศัพท์มือถือ ผู้เข้าชมสามารถแตะเพื่อขยายส่วนดูรายละเอียดเพิ่มเติมได้ที่:

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

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

 

ออกแบบสำหรับเว็บไซต์โทรศัพท์มือถือที่แยกต่างหากหรือเว็บไซต์แบบไดนามิก

เว็บไซต์โทรศัพท์มือถือที่แยกต่างหากมีโค้ดHTML ของตัวเองจึงเป็นสิ่งที่ไม่เชื่อมโยงกับมองเห็น เช่นเว็บไซต์หลักหรือแม้กระทั่งมีเนื้อหาเดียวกันหรือหน้า

รวมเนื้อหาจากเว็บไซต์หลัก

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

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

มองไปที่การวิเคราะห์คีย์เวิร์ดของคุณเพื่อดูคำค้นหาของผู้เข้าชมมือถือให้มากที่สุด (ถ้าคุณใช้ Google Analytics ที่เป็นรายงานการเพิ่มประสิทธิภาพเครื่องมือค้นหา) ตรวจสอบคำหลักจากปริมาณการค้นหาTraffic ที่ได้รับมาจากบรรดา Search Enginesรวมทั้งจากการค้นหาภายในเว็บไซต์จะเห็นสิ่งที่ผู้เข้าชมมองหาเมื่อถูกพามาในเว็บไซต์ของคุณ ตรวจสอบให้แน่ใจที่อย่างน้อยที่สุดหัวข้อที่นิยมมากที่สุดปรากฏในเว็บไซต์ที่รองรับการใช้งานบนมือถือของคุณ

 

คุณมีทรัพยากรที่รวบรวมข้อมูลการออกแบบในการทำเว็บไซต์ที่รองรับการใช้งานบนมือถือหรือไม่​

สิ่งที่คุณต้องการทำสำหรับผู้เข้าชมเว็บไซต์บนมือถือของคุณมีอะไรบ้าง?

คุณเริ่มต้นสร้างเว็บไซต์ตั้งแต่ศูนย์/สร้างเว็บไซต์ใหม่ทั้งหมดใช่หรือไม่?​

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

สิ่งที่คุณต้องการให้ผู้เข้าชมเว็บไซต์บนมือถือทำมีอะไรบ้าง?​

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

แยกหน้าเว็บไซต์บนมือถือให้มีหลายหน้า​

มองไปที่คำค้นหาที่ผู้เข้าชมมือถือใช้เพื่อค้นหามายังเว็บไซต์ของคุณ​

หาระบบจัดการเนื้อหาเว็บไซต์ (CMS) ให้รองรับมือถือ ซึ่งอาจเป็นเว็บไซต์แบบ Responsive (ดีกว่าหากคุณมีข้อมูลที่ต้องการอัพเดทไม่มากนัก)

เขาใช้คีย์เวิร์ดเหมือนกันในการค้นหาเนื้อหา​

เมื่อเขาใช้คำค้นหาที่แตกต่างกัน คุณต้องใช้ข้อความแตกต่างกันในเว็บไซต์บนมือถือเพื่อปรับการแสดงผลรองรับการทำ SEO​

เมื่อเขาใช้คำค้นหาที่แตกต่างกัน คุณต้องใช้ข้อความแตกต่างกันในเว็บไซต์บนมือถือเพื่อปรับการแสดงผลรองรับการทำ SEO​

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

การออกแบบเว็บไซต์แบบ Responsive​

การเขียนเว็บไซต์แยกมาเป็นอันใหม่อีกเวอร์ชั่น​

การเขียนเว็บไซต์แยกมาเป็นอันใหม่อีกเวอร์ชั่น​

ออกแบบเว็บไซต์ให้มีความเป็นมิตรกับมือถือ​

เว็บสวยขึ้นตำแหน่งกูเกิ้ล​

มีผู้ใช้งานบนอุปกรณ์มือถือเป็นสัดส่วนที่ไม่ต่ำกว่าร้อยละ 50 (และบางภาคเศรษฐกิจได้เห็นสัดส่วนที่สูงขึ้นของผู้ใช้งานเว็บไซต์บนอุปกรณ์มือถือ) การทำให้เว็บไซต์ของคุณมีความเป็นมิตรกับมือถือจึงเป็นความพยายามที่คุ้มค่าและสามารถผลักดันให้คุณเหนือกว่าคู่แข่ง ปัญหาเดียวก็คือ: จะมีวิธีการอย่างไร? คุณจะเริ่มต้นอย่างไร?อะไรคือสิ่งที่ทำให้เว็บไซต์มีการออกแบบที่ดีสำหรับอุปกรณ์มือถือ?

 

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

 

1. เลือกแนวทางที่เหมาะสม

2. การออกแบบเว็บไซต์ให้รองรับการใช้งานบนอุปกรณ์มือถือ

3. ต้องคำนึงถึงการพัฒนาโปรแกรม

4. เทคนิคการทำ SEO(Search Engine Optimization)

5. การตั้งค่าและการใช้งานการวิเคราะห์ผู้ใช้งานบนมือถือ(Analytics)

6. อนาคตของเว็บไซต์บนมือถือ

 

การเลือกแนวทางที่เหมาะสม

มีหลายวิธีในการสร้างเว็บไซต์ให้เป็นมิตรกับมือถือหรือ Mobile-Friendly มักแบ่งออกเป็นสาม 'แนวทาง' ซึ่งแต่ละแนวทางให้ประสบการณ์ที่แตกต่างกันสำหรับผู้ใช้งานบนมือถือ

 

Responsive คือเว็บไซต์ที่สามารถเปลี่ยนโครงสร้างและขนาดได้ตามแต่ละอุปกรณ์มือถือด้วย  Code (โดย URL, HTML Code, ภาพทุกอย่างเหมือนเดิม)

 

RESS/Adaptive/Dynamic Serving: คือเว็บไซต์แสดง Code แตกต่างกัน (HTML Code เปลี่ยน) ไปตามแต่ละ Device แต่อยู่บน URL หรือ Link ที่มีชื่อเดียวกันแต่เซอร์เวอร์ส่ง HTML,URL ตามแต่ละอุปกรณ์มือถือ

 

Separate Mobile Site: คือเว็บไซต์ที่มีเวอร์ชั่นของทั้ง PC และ Mobile Device แยกลิงค์กัน มักจะโฮสต์ในโดเมนย่อย

(เช่น egmdomain.com) หรือบางครั้งอาจทำเป็นลิงค์ย่อย (เช่น www.domain.com/mobile) แต่ยังสามารถใช้ URL ที่เดียวกับเว็บไซต์บนเด็สก์ท็อปและก็ทำหน้าที่ HTML ที่แตกต่างกัน (เรียกว่าการให้บริการแบบไดนามิก) กับผู้เข้าชมเดสก์ท็อปและโทรศัพท์มือถือขึ้นอยู่กับผู้ใช้

หากเว็บไซต์โทรศัพท์มือถือใช้ URL ที่แตกต่างกันเขามักจะใช้งานลักษณะเป็นคู่ขนานกับเดสก์ท็อป (เช่น www.domain.com/first-page และ m.domain.com/first-page) ซึ่งจะช่วยให้การเปลี่ยนเส้นทางเรียบง่ายขึ้นโดยขึ้นอยู่กับผู้ใช้ แต่เนื่องจากมันเป็นชุดที่แยกต่างหากจากหน้าตัวเลือกที่มีไม่จำกัด คุณสามารถเลือกที่จะมีโครงสร้างเว็บไซต์ที่แตกต่างกันอย่างสิ้นเชิงซึ่งในกรณีนี้ URL ที่มือถืออาจจะแตกต่างกันจำเป็นต้อง

พิจารณาแนวทางใดเป็นแนวทางที่ดีที่สุดสำหรับเว็บไซต์ของคุณ ดูแผนภาพแสดงลำดับขั้นตอนด้านล่างนี้เพื่อเป็นแนวทางการเลือก

ปรึกษาทีมงาน ฟรี​

กดส่งฟอร์มถึงทีมงาน​

Name/ชื่อ:​

This field is required.

Name/ชื่อ:​

This field is required.

Name/ชื่อ:​

This field is required.

Name/ชื่อ:​

This field is required.

ปรึกษาทีมงานฟรี

กดส่งฟอร์มถึงทีมงาน

ชื่อ - นามสกุล​

This field is required.

ขอบคุณค่ะ

แบบฟอร์มได้ส่งถึงทีมงาน GeniusGraphic เรียบร้อยแล้วค่ะ

 

 

เบอร์โทรศัพท์

This field is required.

อีเมล์ติดต่อกลับ

This field is required.

รายละเอียดธุรกิจของคุณ

This field is required.

Add Friends @Geniusweb​

ปรึกษาทีมงาน Genius ผ่าน Line@

รับทำเว็บไซต์ รับออกแบบเว็บไซต์ ออกแบบเว็บไซต์ รับจัดทำเว็บไซต์ รับทำเว็บ SEO

095 558 2632 ,​

เว็บสวยขึ้นตำแหน่งกูเกิ้ล

02 531 0682​