Reponsive Web Design: มันดาวน์โหลดข้อมูลจำนวนเท่ากันในทุกอุปกรณ์หรือไม่?

ฉันต้องการออกแบบบล็อกและเว็บไซต์ของฉันบน WordPress เพื่อรองรับผู้ใช้มือถือและแท็บเล็ตที่เพิ่มมากขึ้น

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

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

ตามที่กำหนดโดย Ethan Marcotte ในALA 306คำว่า "responsive design" หมายถึงเทคนิคการใช้กฎสไตล์ที่แตกต่างกับ HTML ของคุณขึ้นอยู่กับขนาดหน้าจอผู้ใช้ สำหรับคำอธิบายเพิ่มเติมของการออกแบบที่ตอบสนองต่อที่นี่เป็นดาดฟ้าที่ดีโดยไมค์ Bollinger

ในรุ่นนี้คุณส่ง HTML เดียวกันไปยังไคลเอนต์ไม่ว่าหน้าจอจะเล็กหรือใหญ่ อย่างไรก็ตามหากทรัพยากร (อิมเมจหลัก) อ้างอิงใน CSS จะไม่แสดงสำหรับความละเอียดหน้าจอบางอย่างอาจไม่สามารถดาวน์โหลดได้ ตัวอย่างเช่นสำหรับหน้าจอขนาดใหญ่คุณสามารถใช้high-res.pngใน CSS และสำหรับหน้าจอขนาดเล็กlow-res.png- เว็บไคลเอ็นต์อาจเลือกที่จะดาวน์โหลดภาพในสไตล์ที่ใช้งานอยู่เท่านั้น (ดูความคิดเห็นของ @ DBUK สำหรับลูกค้ารายสำคัญอย่างน้อยหนึ่งรายที่ดาวน์โหลดทั้งคู่ในปัจจุบัน! หวังว่าลูกค้าจะทำให้ฉลาดขึ้น!)

เทคนิคนี้อาจสมเหตุสมผลในกรณีของคุณหรืออาจเหมาะสมกว่าที่จะสร้างไซต์มือถือแยกต่างหาก

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

อุปกรณ์มือถือมักจะมีโปรเซสเซอร์ที่ช้ากว่าหน่วยความจำน้อยลงและอัตราการเชื่อมต่อที่ช้าลง (ทั้งหมด "ความจริง" เหล่านี้กลายเป็นจริงน้อยลงทุกปี btw) - คุณอาจต้องการส่งไซต์มือถือแยกต่างหากออกมาอย่างเคร่งครัด

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

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

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

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

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

ดังที่ได้กล่าวมาแล้วผู้โพสต์คุณควรใช้ภาพ lo-res สำหรับโทรศัพท์มือถือ / อุปกรณ์ความละเอียดต่ำ ข้อความค้นหาสื่อจะช่วยให้คุณกำหนดเป้าหมายความละเอียดที่ต่ำกว่าทั้งหมด อย่างไรก็ตามฉันได้ยินมาว่า Safari mobile จะไม่สนใจจอแสดงผล: ไม่มีกฎและดาวน์โหลดรูปภาพเวอร์ชันเดสก์ท็อปด้วย นอกจากนี้หากคุณไปตามเส้นทางของภาพที่ตอบสนองมันจะสร้างแรงกดดันอย่างมากต่อตัวประมวลผลมือถือ - 3bytes ต่อ 1pixel ... ฉันคิดว่า มีวิธีแก้ไขปัญหามากมายสำหรับการดาวน์โหลดเนื้อหาเพิ่มเติม - บางแฮ็คค่อนข้าง - https://docs.google.com/spreadsheet/ccc?key=0AisdYBkuKzZ9dHpzSmd6ZTdhbDdoN21YZ29WRVdlckE&hl=en_US#gid=0

สำหรับข้อมูลบางอย่างเกี่ยวกับข้อเสียของการออกแบบเว็บตอบสนองตรวจสอบhttp://www.webdesignshock.com/responsive-design-problems/ อย่าปล่อยให้โพสต์บล็อกที่ทำให้คุณ หนังสือนอกจากเขียนหนังสือที่ยอดเยี่ยมในเรื่อง - http://www.abookapart.com/products/responsive-web-design แน่นอนว่ามันคุ้มค่าที่จะคว้ารุ่น e-book