วิธีสร้างเว็บไซต์อย่างมีประสิทธิภาพมากขึ้น

หัวหน้านักพัฒนาของเราแบ่งปันเคล็ดลับในการเตรียมตัวสร้างเว็บไซต์อย่างมีประสิทธิภาพและหลีกเลี่ยงโครงการที่ล้นหลาม

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

เริ่มต้นการพัฒนา

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

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

พิมพ์การออกแบบ

ประเภทนี้ไปควบคู่ไปกับการพัฒนาเริ่มต้น แต่ขั้นตอนนี้ควรเกี่ยวข้องกับทีมพัฒนาส่วนหน้าเท่านั้น

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

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

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

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

ระบุองค์ประกอบทั่วไป

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

ฉันไม่ได้บอกว่าเทมเพลตของหน้าไม่ควรมีองค์ประกอบที่กำหนดเอง แต่ควรเป็นกรณีนี้เมื่อจำเป็นเท่านั้น ตัวอย่างเช่น เว็บไซต์ที่มีหน้าการฝึกอบรมการสัมภาษณ์ทางวิทยุและหน้าการฝึกอบรมการสัมภาษณ์ทางโทรทัศน์ไม่จำเป็นต้องมีเทมเพลตสองแบบเมื่อทั้งสองเป็นหน้า "เทมเพลตการฝึกอบรม" โดยพื้นฐานแล้ว

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

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

สร้างก่อนหรือสร้างสไตล์และสร้างร่วมกัน?

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

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

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

อ่างครัวพื้นฐาน

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

วางกรอบไซต์

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

บทสรุป

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

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

หากคุณต้องการความช่วยเหลือเกี่ยวกับการพัฒนาเว็บ อย่าลังเลที่จะติดต่อเรา