ฉันอ่านจากหลายแหล่งที่กล่าวว่าการออกแบบมือถือเป็นสิ่งสำคัญเกือบจะไม่สามารถปฏิเสธได้ว่ามันมีประโยชน์ชัดเจนเช่นเวลาโหลดเร็วขึ้นสำหรับโทรศัพท์มือถือซึ่งโดยทั่วไปจะมีความเร็วในการดาวน์โหลดช้าลงผ่าน 3G และ 4G

แต่ถ้าคุณกำลังสร้างเว็บไซต์ขนาดเล็กที่มีภาพน้อยมาก

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

จากมุมมองการออกแบบอย่างหมดจดเริ่มต้นด้วยรุ่นมือถือก่อนจะทำให้รู้สึก

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

เมื่อคุณออกแบบรุ่น 'เบา' แล้วคุณสามารถเพิ่มสิ่งพิเศษเช่นองค์ประกอบการออกแบบและขยายสิ่งต่าง ๆ เมื่อคุณได้รับอสังหาริมทรัพย์ ตามที่ระบุโดย @Django คุณไม่ควรละสายตาจากการออกแบบ

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

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

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

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

ลองดูที่ทั้งคู่

มือถือเป็นคนแรกในการออกแบบ

มือถือครั้งแรกการออกแบบเป็นเรื่องเกี่ยวกับการช่วยให้คุณตัดลงคุณสมบัติและการใช้งานของคุณเพื่อสิ่งที่คุณต้องการ ความคิดที่อยู่เบื้องหลังมันเป็นเช่นนี้: แทนที่จะออกแบบเดสก์ท็อปก่อนแล้วจึงพยายามใส่คุณสมบัติทั้งหมดที่คุณคิดขึ้นมาในจอกว้าง 320px และรักษา UX ที่ดีเริ่มด้วยมือถือก่อน ...

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

ทฤษฎีคือสิ่งนี้จะช่วยให้คุณตัดทอนคุณสมบัติของคุณตามที่คุณต้องการอย่างแท้จริงและจากนั้นคุณสามารถปรับขนาดให้เป็นประสบการณ์เดสก์ท็อปที่สวยงาม

มือถือครั้งแรกในการพัฒนา

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

.test2 {
    background-image:url('images/verylargeimage.png');
}

// If on a smaller screen...
@media all and (max-width: 600px) {
    .test2 { 
      background-image:url('images/smallimage.png');
    }
}

ซึ่งหมายความว่าผู้ใช้มือถือดาวน์โหลดจริงlarge.jpgก่อนที่ CSS จะหมด มันแย่มาก

มือถือมีลักษณะเช่นนี้ก่อน:

.test2 {
     background-image:url('images/smallimage.png');
}

// If on a larger screen
@media all and (min-width: 600px) {
    .test2 { 
        background-image:url('images/verylargeimage.png');
    }
}

large.jpgผู้ใช้มือถือไม่เคยดาวน์โหลด

ฉันหวังว่าจะช่วยทำให้สิ่งต่าง ๆ ชัดเจนขึ้นถ้าคุณไม่เข้าใจพวกเขามาก่อน!

ต้นกำเนิดของ "มือถือคนแรก"

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

การขาดการสนับสนุนสำหรับเคียวรีสื่อเป็นจริงเคียวรีสื่อบันทึกแรก

- Bryan Rieger

อุปกรณ์พกพายังมีความเกี่ยวข้องหรือไม่?

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

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

เปรียบเทียบวิธี "เดสก์ท็อปแรก":

.column {
    float: left;
    width: 50%;
}

@media all and (max-width: 50em) {
    .column {
        float: none;
        width: auto;
    }
}

หากต้องการแนวทาง "อุปกรณ์เคลื่อนที่อันดับแรก":

@media all and (min-width: 50em) {
    .column {
        float: left;
        width: 50%;
    }
}

ผลลัพธ์เหมือนกัน แต่ในภายหลังมีขนาดกะทัดรัดกว่า รูปแบบตัวอย่างคัดลอกลงคอจากแบรดฟรอสต์ 7 นิสัยของสื่อที่มีประสิทธิภาพสูงแบบสอบถาม

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

อย่าเลิกสไตล์ชีทของคุณ

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

<!-- this is bad, don't do this -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

ดังนั้นรหัสควรเป็นมือถือก่อน แต่สิ่งที่เกี่ยวกับวิธีการออกแบบ?

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

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

ฉันทดสอบเว็บไซต์ของคุณwww.cosmosdesign.co.nzกับขนาดหน้าจอที่แตกต่างกันและมันทำงานได้ดีบนทุกหน้าจอ เกี่ยวกับคำถามของคุณสำหรับการออกแบบมือถือครั้งแรกฉันอยากจะบอกว่าวิธีการออกแบบของคุณจะต้องพิจารณากลุ่มเป้าหมายของคุณพร้อมกับปัจจัยอื่น ๆ เช่นรูปภาพเนื้อหา ฯลฯ หากกลุ่มเป้าหมายของคุณจะใช้เว็บไซต์นี้เป็นส่วนใหญ่บนเดสก์ทอป / แล็ปท็อป แน่นอนว่าจะดำเนินการตามแนวทางของคุณ แต่หากเป็นเว็บไซต์ที่จะรับชมได้ทางโทรศัพท์และแท็บเป็นส่วนใหญ่คุณต้องให้ความคิดที่สองกับกลยุทธ์ของคุณ

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

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

ที่กล่าวว่าฉันคิดว่าเดสก์ท็อปครั้งแรกนั้นใช้ได้ตราบใดที่คุณไม่ได้อ่านเนื้อหาบนมือถือเหมือนกับที่ บริษัท ส่วนใหญ่ทำ

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