ชำแหละหน้าแรกเว็บไซต์ผมเองครับ : แนะนำเกร็ดความรู้

[fox4]

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

1.ส่วนหัวเว็บไซต์

2.ภาพรวมบริการ

3.บริการ

4.จุดเด่น

5.ผลงาน

6.ติดต่อเรา





ภาพรวมของหน้าแรก / ออกแบบเน้น การสื่อสารและ seo มากกว่าเน้นสไตล์

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

ภาพรวมการออกแบบ

-ทำเลย์เอาท์แบบ box เพราะแบบนี้จะทำให้โหลดเพจสปีดได้ดีกว่าแบบ full width

-พยายามลดการใช่ลูกเล่นหรือ effect และบีบน้ำหนักภาพให้เบาลงทุกภาพ

-เน้นไปที่เนื้อหาเป็นหลักและลดการทำลิงค์ออกไปหน้าเว็บเพจอื่น (ลิงค์ไปเว็บเพจอื่นจะมีรายละเอียดด้าน seo ว่างๆจะนำเสนอข้อมูลอีกทีครับ)






1.ส่วนหัวเว็บไซต์

เป้าหมายการสื่อสารคือ เน้นสร้างความประทับใจแรกที่เห็นหรือเน้นดึงดูด เพื่อให้ลูกค้าอยากดูเนื้ออื่นต่อไป ตรงนี้ยังไงต้องทำให้สวยที่สุด วันนี้ไม่สวย วันหน้าก็ทำเปลี่ยนใหม่

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





2.ภาพรวมบริการ

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

ด้าน seo : ส่วนนี้จะเป็นส่วนของ  taxt ล้วนๆและเป็นส่วนแรกของเนื้อหา ต้องเน้นที่สุดในเรื่อง keyword ที่เป็น <H1>,<H2>,<B> รวมถึงคำ suffix ที่เกี่ยวข้อง เพื่อให้ระบบ google นำปัจจัยเหล่านี้ไปประเมินเพื่อจัดอันดับการค้นหา *** google ดูคำทั้งเว็บและมองเป็นคำๆเลยนะครับ แต่ตรงนี้ผมคิดว่าต้องเน้นที่สุด





3.บริการ

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

ด้าน seo : ก็พยายามหาทางแทรก keyword เข้าไปครับแต่ไม่ควรเน้นเยอะเกินจนเหมือน spam ครับ และผมก็ดรอปสีภาพให้จางลง + กับบีบขนาดภาพ เพื่อให้เบาขึ้น




4.จุดเด่น

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

ด้าน seo : ตรงนี้ก้เหมือนเดิมครับหาทางแทรก keyword พอประมาณไม่ให้ดูสแปมจนเกินไป





5.ผลงาน

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

ด้าน seo : เนื่องจากส่วนนี้เป็นภาพและลูกเล่นสไลด์ ทำให้หนักทั้งขนาดภาพและโค้ด ผมก็เลยใส่ภาพไม่เยอะและที่สำคัญก็คือการบีบขนาดไฟล์เช่นเดิมครับ





6.ติดต่อเรา

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

ด้าน seo : ส่วนนี้ก็ไม่มีอะไรมากครับ ก็เพียงเเทรก keyword และไม่่ใส่ลิงค์ปลีกย่อยเพราะจะทำให้ลดคะแนนด้าน seo ไป

[icokezaa]

ถือเป็นแนวทางสำหรับคนทำเว็บมือใหม่อย่างผม

ขอบคุณครับผม

[kondam]

ขอบคุณครับ 

[fox4]

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

[jmake]

ขอบคุณครับ 

[aomaaaaa]

ขอบคุณครับ

[Gangzaa!]

สุดยอดเลยครับ

[Pornlaa]

เข้าท่าเลยนะ ขอบคุณมากค่า 

[romance69]

ขอบคุณมากครับ 

[palang]

..เยี่ยมเลยครับ

[sys2528]

ดีครับ สวยดีด้วยครับ 

[jjmaster]

ขอบคุณครับ

[cloudsphere]

ขอบคุณสำหรับข้อมูลครับ

[mosmf]

ขอบคุณครับ มีประโยชน์มาก 

[ptest]

   ขอบคุณครับ

[m2w]

ตัวอย่างดีมาก

[EDWARDit]

แนะนำได้ดีมากเลยครับ +1 ให้ครับ

[ummon2006]

เป็นแนวทางที่ดีมากๆ ขอบคุณมากครับ 

[seo-1th]

ขอบคุณมากๆ คับ เป็นแนวทางที่ดีมากคับ

[verture]

แต๊งค์กิ้วครับ