การออกแบบเว็บไซต์ที่ตอบสนองเป็นสิ่งสำคัญหากคุณกำลังสร้างเว็บไซต์ใหม่คุณต้องทำให้ไซต์ของคุณตอบสนอง การรับส่งข้อมูล 50% มาจากอุปกรณ์พกพาและแท็บเล็ตและไม่เพียง แต่จะเติบโตขึ้นเท่านั้น แต่จะเป็นรูปแบบการใช้อินเทอร์เน็ตที่โดดเด่นอย่างชัดเจน
สำหรับธุรกิจขนาดเล็กที่กำหนดเป้าหมายไปยังพื้นที่ทางภูมิศาสตร์ขนาดเล็กมันสำคัญยิ่งกว่า - SEO จะเป็นเรื่องยากมากสำหรับธุรกิจขนาดเล็กใหม่ แต่ถ้าผลิตภัณฑ์ของคุณดีคุณสามารถเพิ่มจำนวนผู้ที่แบ่งปันสิ่งที่คุณทำ
เมื่อพูดถึงการอ่านโซเชียลมีเดียคนส่วนใหญ่ใช้อุปกรณ์มือถือตอนนี้โดยทั่วไปแล้วจะอยู่บนเตียงในตอนเช้าและในตอนกลางคืน
หากไซต์ของคุณใช้งานไม่ได้บนอุปกรณ์มือถือการแชร์ใด ๆ ที่เข้าถึงกลุ่มผู้ชมที่เกี่ยวข้องของคุณจะเป็นการสิ้นเปลือง คุณไม่ต้องการสิ่งนี้เป็นสิ่งสำคัญที่จะต้องหลีกเลี่ยงไม่ให้เกิดขึ้น
เกี่ยวกับโค้ดที่ตอบสนองหรือแยกกัน: ข้อเสียเปรียบหลักในการออกแบบที่ตอบสนองคือมันไม่เร็วเท่าฐานรหัสแยกต่างหาก การสูญเสียความเร็วนี้จะน้อยมากอย่างแน่นอนในกรณีของธุรกิจในท้องถิ่นขนาดเล็กเมื่อปัจจัยอื่น ๆ สามารถปรากฏขึ้นในใจผู้ใช้ว่าทำไมเว็บไซต์จึงช้ากว่าคนอื่นถึง 0.2 วินาที
ข้อได้เปรียบที่ยิ่งใหญ่ของการออกแบบที่ตอบสนองได้คือคุณรักษา codebase ที่เหมือนกัน สิ่งนี้จะช่วยลดค่าใช้จ่ายในการบำรุงรักษาการทดสอบและต้นทุนการพัฒนา
สิ่งสำคัญใน SEO ทุกวันนี้คือ 'คุณภาพไซต์' - คุณภาพของไซต์นั้นยากที่จะวัดได้ แต่โดยทั่วไปแล้วการใช้ google จะใช้อัตราตีกลับและเวลาบนไซต์เพื่อวัดสิ่งนี้ หากไซต์ของคุณใช้งานบนมือถือปริมาณการเข้าชม 50% ของคุณจะมีอัตราตีกลับสูงและมีผู้เข้าชมจำนวนมากที่มีความผูกพันต่ำ (น้อยกว่า 10 วินาทีในหน้าเว็บ)
สิ่งนี้ทำให้คุณมีความเสี่ยงต่อการถูกลงโทษของ Google - ดูที่ Google Panda และโดเมนตรงทั้งหมดใหม่ (สัปดาห์ที่แล้ว)ซึ่งทั้งสองอย่างนี้เป็นการลงโทษไซต์ที่มีคุณภาพต่ำ
ปัญหาหลักที่คุณอาจพบเมื่อปรับเว็บไซต์ให้เหมาะกับธุรกิจที่ใช้วิธีนี้คือมันเป็น buzzword ใหม่ที่ทุกคนต้องการดังนั้นจึงมีคาวบอยออกมีการคิดราคาสูงมากสำหรับสิ่งที่ง่ายต่อการทำอย่างเหลือเชื่อ
ตัวอย่างเช่นเมื่อเร็ว ๆ นี้ฉันได้สร้างเว็บไซต์ที่มีร้านค้าฟอรัมส่วนคำถาม & คำตอบรวมถึงหน้าอื่น ๆ อีกมากมายบล็อกและอื่น ๆ ตอบสนองอย่างเต็มที่สำหรับอุปกรณ์ทั้งหมดในเวลาประมาณหนึ่งวัน
นี่คือพื้นฐานของสิ่งที่คุณต้องทำ:
- ปรับช่องว่างภายในและระยะห่างของร่างกาย
- เลื่อนเมนูด้านซ้ายหรือขวาไปที่เมนูแบบเลื่อนลงแทนอาจซ่อนไว้ใต้ปุ่มตัวเลือกที่ด้านบน
- ปรับขนาดคอนเทนเนอร์ใช้ความกว้าง 100%
- เปลี่ยนภาพทั้งหมดของคุณให้กว้าง 100%
- ตัดสินใจว่าสิ่งใดที่ไม่จำเป็นในโทรศัพท์ (โฆษณา?) และลบออก (แสดงผล: ไม่มี)
นี่คือตัวอย่างรหัสบางส่วน:
@media screen and (max-width:480px) {
body {
margin:5px;
padding:0px;
}
.advertbox {
display:none;
}
}
สิ่งที่ทำคือลบสิ่งใดก็ตามที่มีระดับ 'โฆษณา' จากสมาร์ทโฟน (ที่มีความกว้างสูงสุด 480px) และลดระยะขอบของร่างกาย
หากคุณกำลังสร้างไซต์ใหม่สิ่งนี้จะง่ายกว่าในการสร้างขึ้นเนื่องจากคุณสามารถสร้างการออกแบบที่สะอาดด้วยคลาสที่สะอาดตาและสไตล์ที่ดีเพื่อให้เหมาะกับอุปกรณ์ทั้งหมด
ฉันหวังว่านี่จะช่วยได้!