ในโลกปัจจุบันผู้คนสามารถดูเนื้อหาได้จากทุกที่ แล็ปท็อป แท็บเล็ต และโทรศัพท์มือถือทุกรูปทรงและขนาดใช้สลับกันได้ นี่เป็นสิ่งที่ทรงพลังมาก แต่การคำนึงถึงรูปแบบต่างๆ เหล่านั้นทั้งหมดทำให้ชีวิตของนักพัฒนายากขึ้น
เมื่อเขียนโปรแกรมส่วนหน้า จำเป็นต้องคำนึงถึงลักษณะที่ปรากฏบนอุปกรณ์เหล่านี้และในเบราว์เซอร์หลายตัว โชคดีที่มีแหล่งข้อมูลมากมายที่สามารถช่วยบรรลุเป้าหมายนี้ได้เร็วและง่ายขึ้น
ด้านล่างนี้ฉันได้แนะนำห้ารายการโปรดของฉันแล้ว (เป็นโบนัสเพิ่มเติม ทั้งหมดนี้สามารถเข้าถึงได้ฟรีและไม่จำเป็นต้องดาวน์โหลด / ลงชื่อเข้าใช้!)
1. สกรีนฟลาย
เมื่อพัฒนาหน้าเว็บ เป็นเรื่องง่ายที่จะติดกับดักของการเพิ่มประสิทธิภาพให้เหมาะสมกับขนาดหน้าจอและเบราว์เซอร์ที่คุณใช้งานอยู่ และลืมอุปกรณ์อื่นๆ ทั้งหมดที่มีอยู่ไปชั่วคราว
Screenfly ใช้ URL ของเว็บไซต์และช่วยให้คุณดูว่าไซต์นั้นจะมีลักษณะอย่างไรบนอุปกรณ์ต่างๆ ฉันใช้สิ่งนี้บ่อยครั้งในระหว่างการพัฒนาเพจเพื่อให้แน่ใจว่าการสืบค้นสื่อทั้งหมดของฉันทำงานตามที่ตั้งใจไว้ ก่อนที่จะดำเนินการไปไกลเกินไปในกระบวนการนี้
2. พิกเซลถึงเอ็ม
เพื่อให้มีการออกแบบที่ตอบสนองได้อย่างเต็มที่ เป็นความคิดที่ดีที่จะตั้งค่าขนาดตัวอักษรให้เป็นหน่วยสัมพันธ์ (โดยส่วนตัวแล้วฉันใช้ rem ในโปรเจ็กต์ของฉัน แต่ em ก็เป็นตัวเลือกเช่นกัน) อย่างไรก็ตาม เป็นเรื่องง่ายที่จะสับสนว่าขนาดพิกเซลบางอย่างสามารถทำได้โดยใช้หน่วยสัมพัทธ์ซึ่งเป็นที่มาของ PX t oEM
PX to EM เป็นเครื่องคิดเลขที่มีประโยชน์มาก ซึ่งทำให้ง่ายต่อการเข้าใจการเชื่อมโยงระหว่างหน่วยประเภทต่างๆ และวิธีการกำหนดขนาดแบบอักษรให้เหมาะสม
3. คู่มือการสนับสนุนทางอีเมล CSS
ด้วยเทมเพลตอีเมล HTML มีความท้าทายเพิ่มขึ้นเนื่องจากฟีเจอร์จำนวนมากไม่รองรับไคลเอนต์บางตัวหรือภายในแอปมือถือไคลเอนต์
การตรวจสอบแคมเปญมีทรัพยากรที่อนุญาตให้ผู้ใช้เลือกคุณสมบัติ CSS เฉพาะและดูว่าไคลเอนต์อีเมลใดรองรับคุณสมบัตินั้น (และออกแบบใหม่หรือแก้ไขตามนั้น)
4. เคล็ดลับ CSS: คู่มือการสืบค้นสื่อ
CSS Tricks เป็นหนึ่งในเว็บไซต์ที่ฉันใช้งานเมื่อเรียนรู้สิ่งใหม่ๆ คู่มือการใช้คิวรีสื่อและการเว้นระยะห่างเนื้อหานี้เป็นการแนะนำหัวข้อทีละขั้นตอนที่ยอดเยี่ยม และช่วยให้คุณนึกถึงการออกแบบที่ตอบสนองในขณะที่สร้างเนื้อหาใหม่
5. ฉันสามารถใช้: ตารางสนับสนุนเบราว์เซอร์
นอกเหนือจากการรองรับขนาดหน้าจออุปกรณ์ที่แตกต่างกันแล้ว ยังจำเป็นต้องคำนึงถึงเบราว์เซอร์ที่ผู้ใช้จะมีด้วย เบราว์เซอร์ที่ต่างกันจัดการคุณสมบัติของ CSS แตกต่างกัน (และฟีเจอร์บางอย่างไม่ได้รับการจัดการเลย)
แนวทางปฏิบัติที่ดีในการตั้งค่าคุณสมบัติทางเลือกเพื่อให้แน่ใจว่าหน้าเว็บจะแสดงอย่างชัดเจนในทุกเบราว์เซอร์ วิธีง่ายๆ ในการตรวจสอบว่าจำเป็นต้องใช้คุณสมบัติสำรองหรือไม่คือการใช้ “ฉันสามารถใช้…”
“ฉันสามารถใช้…” มีอินเทอร์เฟซที่เรียบง่ายและให้การยืนยันด้วยภาพว่าเบราว์เซอร์ใดรองรับคุณสมบัติบางอย่าง ก่อนที่จะใช้ CSS ขั้นสูงใดๆ ควรเข้าไปเยี่ยมชมเว็บไซต์เพื่อยืนยันว่าทรัพย์สินดังกล่าวมีการใช้งานอย่างกว้างขวางเพียงใด
การออกแบบที่ตอบสนองมีความสำคัญมากขึ้นโดยที่ผู้ใช้เข้าถึงเนื้อหาจากอุปกรณ์ที่หลากหลายมากขึ้นกว่าที่เคย หวังว่าลิงก์เหล่านี้จะช่วยให้ชีวิตของคุณง่ายขึ้นอีกหน่อย
แจ้งให้เราทราบในความคิดเห็นหากคุณมีแหล่งข้อมูลอื่นที่ควรค่าแก่การตรวจสอบ!
หากคุณชอบโพสต์นี้และต้องการอ่านเพิ่มเติม โปรดตรวจดูโปรไฟล์ของฉันสำหรับโพสต์ที่คล้ายกัน ลองสมัครเป็นสมาชิกขนาดกลางเพื่อเข้าถึงแนวคิดและนักเขียนที่ดีที่สุดได้อย่างไม่จำกัด
ขอบคุณที่อ่าน!
