เคล็ดลับบางประการในการทำให้เว็บไซต์ของคุณเหมาะกับอุปกรณ์เคลื่อนที่ได้อย่างง่ายดาย

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

จะตรวจสอบการตอบสนองทางมือถือของคุณได้อย่างไร?

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

ฉันเคยดูเว็บไซต์บางแห่งที่ฉันรู้ว่าไม่ตอบสนอง มันจะให้ความคิดเห็นที่น่าสนใจแก่คุณเช่น:

  • องค์ประกอบที่คลิกได้อยู่ใกล้กันเกินไป
  • ข้อความเล็กเกินกว่าจะอ่านได้

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

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

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

  • คุณสามารถย้ายหน้าจอทั้งหมดพร้อมกันได้
  • คุณสามารถจับภาพหน้าจอทั้งหมดได้ด้วยคลิกเดียว

ลองเลย ซอฟต์แวร์พูดเพื่อตัวมันเอง

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

คุณจะปรับปรุงการตอบสนองบนมือถือของคุณได้อย่างไร?

ไปจากทั่วไปไปสู่รายละเอียด

เพื่อให้เว็บไซต์ของคุณตอบสนอง คุณจะต้องใช้คำสั่งสื่อและอาศัยเบรกพอยต์

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

มีหลายวิธีในการใช้เบรกพอยท์และคุณสามารถสร้างเบรกพอยท์ได้มากมาย มันไม่สมบูรณ์แบบ แต่นี่คือตารางคิวรีสื่อของฉัน:

จากนั้นคุณเพียงแค่ต้องนำเข้า 'อุปกรณ์' ลงในไฟล์ใดก็ได้ และคุณสามารถใช้กฎศุลกากรได้

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

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

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

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

ส่วนที่ยุ่งยากสำหรับฉันคือ iPhone 5 และ SE เสมอ มีขนาดเล็กกว่าโทรศัพท์อื่นๆ ทั้งหมด (320*568pts) ทั้งสองคนยังคงมีส่วนแบ่งตลาด iPhone อยู่มาก ดังนั้นฉันจึงต้องกำหนด CSS สำหรับขนาดนั้นเองเสมอ

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

แล้วการออกแบบที่ปรับเปลี่ยนได้เล็กน้อยล่ะ?

ตอนนี้เว็บไซต์ของคุณน่าจะดูดีบนมือถือหรือแท็บเล็ต แต่นั่นหมายความว่ามันเหมาะกับมือถือใช่ไหม? ไม่มาก. ฉันเดาว่าสิ่งหนึ่งที่ต้องเข้าใจคือแต่ละเวอร์ชันควรมีข้อมูลมากแค่ไหน? การศึกษาของ Nielsen Norman Group แสดงให้เห็นว่า "การทำความเข้าใจข้อมูล" นั้นยากกว่ามากเมื่ออ่านจากหน้าจอมือถือ ใช่แล้ว ถูกต้อง ข้อมูลทั้งหมดที่อยู่ในเวอร์ชันคอมพิวเตอร์ของคุณไม่ควรเป็นในเวอร์ชันมือถือของคุณ

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