เลย์เอาต์เว็บตอบสนองสำหรับหน้าจอมือถือแนะนำเคล็ดลับและตัวอย่าง

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

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

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

วิธีการออกแบบที่ตอบสนองต่อการทำงาน

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

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

ทำไมต้องออกแบบสำหรับมือถือ?

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

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

(ที่มาของภาพ: bradfrostweb)

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

คุณอาจจะไม่ทำให้เว็บไซต์ของคุณทำงานได้ 100% ในทุก ๆ อุปกรณ์ที่ใช้งานทุกเบราว์เซอร์ แต่คุณสามารถกำหนดเป้าหมายส่วนใหญ่ตามความกว้างเฉลี่ยของหน้าจอ iPhone รุ่นเก่าใช้ความละเอียดการแสดงผล 320 × 480 ซึ่งไม่น่าเชื่อ ฉันจะถ่ายให้มีความกว้างขั้นต่ำ 240px หรือเล็กกว่านั้นถ้าคุณใส่ได้.

การลบการซูมเริ่มต้น

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

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

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

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

การปรับขนาดภาพแบบไดนามิก

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

img ความกว้างสูงสุด: 100%;

กฎมาตรฐานสำหรับ CSS คือการใช้คุณสมบัติความกว้างสูงสุดกับรูปภาพทั้งหมด เนื่องจากจะตั้งค่าไว้ที่ 100% เสมอคุณจะไม่สังเกตเห็นการบิดเบือน เมื่อผู้ใช้ปรับขนาดหน้าต่างเบราว์เซอร์ของตนใหม่ให้เล็กลงกว่าภาพของคุณสามารถจัดการได้โดยอัตโนมัติผู้ใช้จะปรับขนาดความกว้าง 100% โดยอัตโนมัติ ปัญหาคือ Internet Explorer ไม่สามารถเข้าใจคุณสมบัตินี้ได้ดังนั้นคุณจะต้องรวบรวมสไตล์ชีทเฉพาะ IE ที่ใช้ ความกว้าง: 100%;.

ภาพที่ยืดหยุ่นอาจเป็นไปได้หากคุณใช้ JavaScript หรือปลั๊กอิน jQuery มีนักพัฒนาที่ชาญฉลาดบางคนที่ใช้เวลาสร้างเนื้อหาภาพที่ตอบสนองอย่างไม่น่าเชื่อ เธรดนี้เป็นเพียงหนึ่งในหลาย ๆ ส่วนใน Stack Overflow ซึ่งมีวิธีการนอกเขตที่สะดวกในการแก้ไขข้อบกพร่อง IE6 / 7.

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

การออกแบบระบบสัมผัส

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

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

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

เลย์เอาต์ CSS ที่กำหนดเอง

โดยทั่วไปจะเป็นการดีที่สุดที่จะปรับเค้าโครงของคุณและอนุญาตให้เนื้อหาของคุณเสื่อมโทรมอย่างเป็นธรรมชาติ หากคุณมีแถบด้านข้างและพื้นที่เนื้อหาที่คุณควรตั้งไว้ในความกว้างของร้อยละหรือ EMS สิ่งที่จะปรับขนาดด้วยหน้าต่างเบราว์เซอร์ หากคุณสมัคร นาทีความกว้าง สิ่งนี้จะแยกส่วนของเลย์เอาต์ออก; ดังนั้นตอนนี้เนื้อหาแถบด้านข้างของคุณจะปรากฏเหนือเนื้อหาของหน้า.

(ที่มาของภาพ: Pepperson)

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

สลับเปิด / ปิดเนื้อหาเพิ่มเติม

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

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

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

การใช้ Media Queries

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

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

มีตัวเลือกเพิ่มเติมอีกสองสามอย่างที่คุณสามารถใช้สำหรับตรวจจับการวางแนวอุปกรณ์ คำแนะนำที่ยอดเยี่ยมเกี่ยวกับสื่อ CSS สามารถให้แนวคิดบางประการแก่คุณ นอกจากนี้โครงการมือถือใหม่ 320 ขึ้นไปยังนำเสนอสำเร็จรูปสำหรับมือถือ CSS @ สื่อ รูปแบบ สิ่งเหล่านี้สามารถรวมโดยตรงในไฟล์ mobile.css เดียวกันและใช้กฎสำหรับอุปกรณ์ต่าง ๆ มากมาย.

 / * สมาร์ทโฟน (แนวตั้งและแนวนอน) ----------- * / @media เท่านั้นหน้าจอและ (ความกว้างต่ำสุดของอุปกรณ์: 320px) และ (สูงสุดความกว้างของอุปกรณ์: 480px) / * สไตล์ * / / * สมาร์ทโฟน (แนวนอน) ----------- * / @media เท่านั้นหน้าจอและ (ความกว้างต่ำสุด: 321px) / * ลักษณะ * / / * สมาร์ทโฟน (แนวตั้ง) ---- ------- * / @media เฉพาะหน้าจอและ (ความกว้างสูงสุด: 320px) / * Styles * / / * iPads (แนวตั้งและแนวนอน) ----------- * / @ หน้าจอเฉพาะสื่อบันทึกและ (ความกว้างของอุปกรณ์ขั้นต่ำ: 768px) และ (ความกว้างของอุปกรณ์สูงสุด: 1024px) / * Styles * /

(ที่มา: การสืบค้นสื่อ CSS3 แบบ Hardboiled)

เครื่องมือที่เป็นประโยชน์

Skeleton - หม้อไอน้ำสวยงามสำหรับการออกแบบอุปกรณ์พกพาที่ตอบสนองได้ดี
เริ่มจากการปรับตัวเพื่อตอบสนองอย่างเต็มที่

ตู้โชว์: การออกแบบที่ตอบสนองที่สวยงาม

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

ห้อยดวงจันทร์