นักพัฒนามักมีนิสัยเสียคือชอบสร้าง "มีดพับอเนกประสงค์" ทั้งที่จริงๆ แล้วพวกเขาต้องการแค่ "ใบมีดที่คมกริบ" เท่านั้น เรามักจะหยิบ frontend frameworks หนักๆ มาใช้ก่อนที่จะเขียน HTML บรรทัดแรกเสียอีก เราติดตั้งทั้ง animation libraries, เครื่องมือจัดการ state และ build pipelines ที่ทรงพลังพอจะรันบริษัทเล็กๆ ได้เลย แล้วเราก็สงสัยว่าทำไมเว็บไซต์พอร์ตโฟลิโอของเราถึงใช้เวลาถึงสามวินาทีกว่าจะแสดงผล (paint) ทำไมการนำทาง (navigation) ถึงพังบนมือถือ และทำไมผู้จัดการฝ่ายสรรหาถึงกดปิดไปก่อนที่จะได้เห็นโปรเจกต์ที่เราใช้เวลาสร้างมานานหลายเดือน
ผมเลือกเส้นทางที่ต่างออกไปสำหรับพอร์ตโฟลิโอชิ้นล่าสุด ผมถอยห่างจากระบบนิเวศของ dependencies ที่ไม่มีวันสิ้นสุด และสร้างเว็บไซต์ทั้งหมดด้วย semantic HTML และ CSS ที่สะอาดตา ไม่ใช้ JavaScript frameworks ไม่ต้องมี build steps ไม่ต้องมี animation engines จากบุคคลที่สาม ใช้เพียงแค่ตัว platform เอง จัดการ layout ด้วย CSS Grid และ Flexbox และใช้ปรัชญาการออกแบบที่มองว่าความเร็วและความชัดเจนคือ "ฟีเจอร์" ไม่ใช่สิ่งที่มาคิดทีหลัง
ผลลัพธ์ที่ได้คือความเบา รวดเร็ว และดูเป็นมืออาชีพ และนี่คือวิธีการที่ผมใช้ครับ
เริ่มต้นจากรากฐาน
การทำ over-engineering ส่วนใหญ่เริ่มมาจากรากฐาน พอร์ตโฟลิโอไม่จำเป็นต้องเป็น single-page application มันแค่ต้องแสดงผลงานของคุณ บอกวิธีติดต่อคุณ และไม่มาเกะกะการใช้งาน ผมใช้ semantic HTML เพราะเบราว์เซอร์รู้อยู่แล้วว่าจะต้องเรนเดอร์ nav, article และ footer อย่างไร เมื่อคุณใช้ element ที่ถูกต้องสำหรับงานที่เหมาะสม คุณจะได้ทั้ง accessibility, การมองเห็นบน search engine และการตอบสนองแบบ responsive มาแบบฟรีๆ แถมคุณยังเขียนโค้ดน้อยลงด้วย การใช้ div พร้อมกับใส่ ARIA attributes ห้าตัวนั้นเป็นเพียงการเลียนแบบ button ที่เยิ่นเย้อเกินไป ผมจึงหลีกเลี่ยงสิ่งนั้นโดยสิ้นเชิง
สำหรับการจัดเลย์เอาต์ CSS Grid และ Flexbox นั้นเพียงพอแล้ว Grid จะจัดการโครงสร้างระดับ macro เช่น ส่วนต่างๆ ของหน้าเว็บ, แกลเลอรีโปรเจกต์ และการจัดวางบล็อกหลักๆ ส่วน Flexbox จะจัดการการโต้ตอบระดับ micro เช่น ลิงก์นำทางภายในแคปซูล, การจัดข้อความให้อยู่กึ่งกลางในคาร์ด หรือการดัน footer ไปไว้ที่ด้านล่างสุดของหน้าจอ ทั้งสองอย่างนี้มาแทนที่เหตุผลทุกอย่างที่คุณอาจเคยต้องนำเข้า twelve-column grid framework ในปี 2018 โค้ดจะยังคงอ่านง่าย และไฟล์ CSS ก็จะมีขนาดเล็ก
สี, ตัวอักษร และความพอดี
ผมต้องการให้พอร์ตโฟลิโอให้ความรู้สึกสงบตั้งแต่ตอนโหลด พื้นหลังใช้สีพื้นอ่อนๆ พร้อมด้วย radial gradients ที่ดูนุ่มนวล ไม่ฉูดฉาด ตัว gradient มีค่า opacity ต่ำ สร้างมิติที่นุ่มนวลทำให้หน้าเว็บไม่ดูแบนจนเกินไปโดยไม่เรียกร้องความสนใจจนเกินเหตุ มันโหลดขึ้นมาทันทีเพราะเป็น pure CSS ไม่ต้องมี hero images ให้ต้องบีบอัด ไม่ต้องจัดการ WebP fallbacks และไม่ต้องตั้งค่า JavaScript lazy-loading libraries
Typography คือสิ่งที่บ่งบอกบุคลิก ผมจับคู่ Outfit กับ Ovo โดย Outfit ซึ่งเป็น geometric sans-serif จะจัดการข้อความ UI ทั้งหมด เช่น ป้ายชื่อใน navigation, ข้อความบนปุ่ม, เนื้อหาหลัก และรายละเอียด meta ต่างๆ มันดูคมชัดบนหน้าจอและยังอ่านง่ายแม้ในขนาดเล็ก ส่วน Ovo ซึ่งเป็น serif ที่มี contrast ระดับปานกลาง จะใช้สำหรับหัวข้อและพาดหัวหลัก การจับคู่นี้ทำให้หน้าเว็บให้ความรู้สึกเหมือนงานบรรณาธิการที่เรียบหรู ดูเหมือนผ่านการออกแบบมาอย่างดี ไม่ใช่แค่การเลือกใช้ theme และที่สำคัญที่สุดคือ ทั้งสองฟอนต์โหลดจากการเรียกใช้ font service เพียงครั้งเดียวหรือใช้ไฟล์ที่ self-hosted ทำให้ไม่มีปัญหา layout shift, ไม่มีอาการ flash of unstyled text หรือการที่สคริปต์มาเปลี่ยนน้ำหนักฟอนต์หลังจากเรนเดอร์ครั้งแรก
เมนูแคปซูลแบบลอย
การนำทาง (Navigation) คือจุดที่พอร์ตโฟลิโอมักจะพังเพราะความซับซ้อนของตัวเอง ไม่ว่าจะเป็นเมนู overlay แบบเต็มหน้าจอ, สคริปต์ animation แบบไล่ระดับ หรือไอคอน hamburger ที่ต้องใช้ JavaScript ถึงสี่สิบบรรทัดเพื่อสลับ class ผมไม่ต้องการสิ่งเหล่านั้นเลย
ผมสร้างเมนูแคปซูลแบบ glassmorphic ที่ลอยอยู่ มันเป็นคอนเทนเนอร์แนวนอนเพียงอันเดียว ขอบมน และวางตำแหน่งแบบ fixed ไว้ใกล้ส่วนบนของหน้าจอ ความเป็น glassmorphism มาจากสีพื้นหลังแบบกึ่งโปร่งใสและคุณสมบัติ backdrop-filter: blur() มันลอยอยู่เหนือเนื้อหาโดยไม่บดบัง ช่วยให้เข้าถึงทุกส่วนได้ทันที และยุบตัวลงอย่างสวยงามบนหน้าจอขนาดเล็กโดยไม่ต้องออกแบบใหม่ทั้งหมด เอฟเฟกต์นี้ดูทันสมัยเพราะเบราว์เซอร์เป็นตัวจัดการการ compositing ไม่ใช่ library ของ canvas