เกิดอะไรขึ้นกับการออกแบบเว็บไซต์แบบหน้าเดียว

ฉันเคยเห็นเว็บไซต์จำนวนมากที่ใส่เนื้อหาทั้งหมดไว้ในหน้าเดียวนั่นคือเว็บไซต์นี้ แม้แต่เว็บไซต์ในบางรายการที่ฉันเห็นใน Smashing Magazine ก็ทำเช่นนี้ ( เช่นนี้กับสิ่งที่ดูเหมือนว่าเป็นร้อยเว็บไซต์ซึ่งส่วนใหญ่ใช้)

ในฐานะโปรแกรมเมอร์สไตล์นี้ทำให้ฉันรำคาญ (ด้วยเหตุผลหลายประการซึ่งส่วนใหญ่เป็นเรื่องทางเทคนิคไม่ใช่อย่างน้อยซึ่งรวมถึงการบำรุงรักษา SEO เวลาในการโหลด ฯลฯ ) แต่ที่สำคัญกว่านั้นฉันอยากรู้ว่าทำไมมันถึงได้รับความนิยม นักออกแบบที่จะเริ่มต้นด้วย?

มีแนวโน้มแยกกันสองประการ

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

แนวโน้มอื่น ๆ คือนักพัฒนา Flash ในที่สุดก็ค้นพบ HTML, jQuery และ AJAX และยังคงคิดถึงรูปแบบ Flash แบบเก่าของ 'one file = one site' สิ่งนี้แตกต่างจากแนวโน้มแรกซึ่งเป็นไซต์ขนาดใหญ่ที่มีเนื้อหาจำนวนมากถูกบีบอัดไว้ในหน้าเดียวของข้อมูล / การโต้ตอบ ตามที่คุณระบุวิธีการนี้มีข้อบกพร่องทุกประเภทแม้ว่าจะสามารถเอาชนะได้ด้วยรหัสที่ถูกต้อง (เพื่อให้แน่ใจว่า URL นั้นสามารถเปลี่ยนแปลงได้ / สามารถคั่นหน้าเว็บได้ Google สามารถนำทางเนื้อหาเวลาในการโหลดจะถูกจัดการผ่าน AJAX เป็นต้น

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

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

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

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

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

มีส่วนต่างจากนี้ (มีเพียงหนึ่งที่ฉันนึกได้!) ซึ่งก็คือถ้าคุณต้องการค้นหาโดยใช้Ctrl+ Fเนื้อหาทั้งหมดอยู่ในหน้าเดียวดังนั้นคุณสามารถค้นหาทั้งเว็บไซต์ได้ในครั้งเดียว (สมมติว่าเนื้อหานั้นสามารถค้นหาได้) .

ฉันคิดว่าส่วนหนึ่งเกิดจากแนวคิดของ "อย่าทำให้ผู้ใช้ขอเนื้อหาเพิ่มเติม - เพียงให้แก่พวกเขา" เช่นเดียวกับ Google, Twitter และอื่น ๆ ที่ให้ผลลัพธ์เพิ่มเติมโดยอัตโนมัติเมื่อคุณเลื่อนลง

มันคุ้มค่าดูอาซาราสกินพูดคุย GoogleTech จากปี 2008 "อย่าทำให้ฉันคลิก"

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

ฉันสงสัยว่านี่เป็นบรรพบุรุษของสิ่งที่คุณเห็นอยู่หรือไม่

สองคำ: ประสบการณ์ผู้ใช้

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

หรือโดยเฉพาะอย่างยิ่งการเรียกร้องให้ดำเนินการเป็นเอกพจน์ เมื่อเป้าหมายของไซต์คือ: "จ้างฉัน" ไซต์สามารถต่อต้านได้เมื่อแผนผังไซต์ซับซ้อนโดยไม่จำเป็น

แก้ไข: ตัวอย่างด้านล่าง ...

http://joelglovier.com/

http://pixelightcreative.com/

http://www.tinybigstudio.com/

http://www.charleselena.com.au/

http://joshhemsley.com/

http://www.digitallabs.tv/

จากมุมมองของ SEO การออกแบบเว็บไซต์แบบหน้าเดียวเป็นแฟชั่น

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

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

คุณสามารถอ่านเพิ่มเติมเกี่ยวกับ Search Engine Land คนเหล่านี้รู้จัก SEO เป็นอย่างดี;) https://searchengineland.com/single-page-websites-seo-182506

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

ฉันไม่คิดว่ามันเป็นอะไรที่มากกว่าใครบางคนที่ใช้เคล็ดลับที่สะดุดตาล่าสุดเพื่อให้ผู้คนได้อ่านเว็บไซต์

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

ฉันยังคงคาดเดาว่าจะมีการสอนแบบ HTML5 / CSS ในเว็บไซต์ Smashing Magazine ที่แสดงวิธีการทำสิ่งนี้ซึ่งกลับกลายเป็นเว็บไซต์ที่แสดง

ฉันคิดว่ารายการแรก (แถบดริฟท์) ที่คุณเชื่อมโยงมีปัจจัยเยี่ยม: มันดูดีในการเคลื่อนไหว

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

ฉันคิดว่าการเลื่อนในหน้านั้นอาจเป็นความผิดพลาดหรือคุณลักษณะที่ไม่สามารถกำจัดได้

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

ฉันคิดว่าคุณค่อนข้างตอบคำถามของคุณในชื่อ - นั่นคือมันเป็นแฟชั่น

เช่นเดียวกับที่ Javascript (แล้ว AJAX) ปรากฏตัวเมื่อหลายปีก่อนและผู้คนกำลังทำสิ่งต่าง ๆ ด้วยการสนับสนุน Jquery และ CSS 2/3 ที่ดีขึ้นและความเร็วในการแสดงผลที่ดีขึ้นในเบราว์เซอร์ทำให้เกิดการทดลองรอบใหม่ การจัดวางไซต์ที่อาจไม่ได้ใช้งานได้จริงในอดีตเนื่องจากเบราว์เซอร์รุ่นเก่าบางรุ่น

แต่เช่นเดียวกับ CSS, Javascript และ AJAX, แฟชั่นจะเติบโตและกลมกล่อมและกลายเป็น honed, รื่นรมย์และมีประโยชน์ในช่วงเวลา ตัวอย่างแรกของคุณคืออาการปวดหัวที่เกิดจากการเลื่อนแบบไม่ต่อเนื่อง (ถ้าคุณพูดในตอนแรกและกด "แกลลอรี่") ในความเห็นที่ต่ำต้อยของฉันมันไปไกลเกินไปและมันก็ไม่ได้เป็นประสบการณ์ที่ราบรื่นพอที่จะพิสูจน์ให้เห็นถึงการแยกทางกับคนปกติ นี่ไม่ได้หมายความว่าเว็บไซต์ทั้งหมดที่ใช้เทคนิคที่คล้ายคลึงกันจะไม่ดี

สิ่งสำคัญคือนักออกแบบต้องทดลองวิธีการใหม่ ๆ ในการทำสิ่งต่างๆด้วยเทคโนโลยีใหม่ ฉันจะไม่แนะนำสักครู่ว่าไม่ควรทำเช่นนี้ แต่มันคืออะไร - การทดลอง