อินเทอร์เฟซที่ปรับเปลี่ยนได้และใช้งานง่ายคือทั้งหมด อินเทอร์เฟซแบบปรับเปลี่ยนได้สำหรับผู้ปฏิบัติงานระบบที่ซับซ้อน การทำงานของแผงควบคุมภายในกรอบของแนวคิด 1C-Bitrix: Hermitage

“พิพิธภัณฑ์เฮอร์มิเทจ”- นี่ไม่ได้เป็นเพียงอินเทอร์เฟซที่ทันสมัยสำหรับการจัดการเว็บไซต์ แต่เป็นแนวคิดที่รวมโซลูชันอินเทอร์เฟซและ "แพ็คเกจ" ของคำแนะนำสำหรับนักพัฒนาเว็บ “Hermitage” คือชุดกฎที่คุณจะสร้างโครงการเว็บที่รวดเร็ว ปลอดภัย สะดวกและจัดการได้ง่าย

JavaScript ถูกปิดใช้งานในเบราว์เซอร์ของคุณ

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

และไม่ว่าเราจะหวังมากแค่ไหน ลูกค้าแต่ละรายก็ต้องการการออกแบบและโครงสร้างของเว็บไซต์เป็นของตัวเอง และแน่นอนว่าทุกคนต้องการให้เว็บไซต์เปิดได้อย่างรวดเร็วและสามารถรองรับปริมาณการเข้าชมที่สูงได้ การแก้ปัญหาเหล่านี้ทีละขั้นตอน เราได้พัฒนาแนวคิดที่ผสมผสานเทคโนโลยีและโซลูชันอินเทอร์เฟซเข้าด้วยกัน และเรียกมันว่า "1C-Bitrix: Hermitage"

"อาศรม" คือ:

การออกแบบ “เครื่องดูดควัน” ใหม่ - Re:Hermitage

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

การออกแบบส่วนการบริหาร

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

ควบคุม

แนวคิดการจัดการเวบไซต์

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

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

แผงควบคุมไซต์ อินเทอร์เฟซ "อาศรม»

การจัดการไซต์แบ่งออกเป็น สองโหมดหลัก:

โหมดการทำงาน “เหนือไซต์”

"อาศรม" ในแง่ของการจัดการรวมถึงหน้าที่ดังต่อไปนี้:

ฟังก์ชั่นแผงควบคุม ภายใต้กรอบแนวคิด "1C-Bitrix: Hermitage

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

โหมดการแก้ไข

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

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

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

คุณสามารถ "ย้อนกลับ" การดำเนินการล่าสุดได้

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

โหมดย่อเล็กสุด

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

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

การบริหาร

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

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

การทับศัพท์

คุณอาจจะคิดไม่ออกว่าเรื่องอะไร ชื่อไฟล์มอบหมายให้บางหน้า! และคุณไม่จำเป็นต้องมีโปรแกรมแปลเพื่อแปลชื่อเป็นภาษาอังกฤษ เพียงสร้างเพจและตั้งชื่อ - คุณจะได้รับชื่อไฟล์โดยอัตโนมัติ

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

การเข้าถึงเพจ

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

อยากโชว์เพจให้ใคร?

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

อินเตอร์เฟซ

จัดการเว็บไซต์ของคุณอย่างง่ายดายและเป็นมืออาชีพ!

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

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

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

ผู้อำนวยการทั่วไป 1C-Bitrix, Sergey Ryzhikov

พลังงานทั้งหมดของคุณอยู่ที่ความคิดสร้างสรรค์ ไม่ใช่การค้นหาปุ่ม!

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

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

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

วาดิม ดัมบราวานู, Project Manager ที่ Bitrix

อินเทอร์เฟซแบบปรับได้คือ:

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

อินเทอร์เฟซแบบปรับได้ได้รับการออกแบบมาเพื่อ:

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

การทำงานในส่วนติดต่อผู้ดูแลระบบของผลิตภัณฑ์ยังคงดำเนินต่อไป ผู้ใช้ 1C-Bitrix: การจัดการไซต์สามารถดาวน์โหลดการอัปเดตอินเทอร์เฟซทั้งหมดโดยใช้เทคโนโลยี SiteUpdate คุณจะได้เรียนรู้เกี่ยวกับโอกาสใหม่ๆ บนเว็บไซต์ตลอดจนในจดหมายข่าวของเรา

โปรแกรมแก้ไขภาพในตัว

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

โปรแกรมแก้ไขภาพมีอยู่แล้วในเว็บไซต์ของคุณ!

การจัดการโครงสร้าง ความเป็นไปได้ทั้งหมด

ส่วนต่อประสานที่ใช้งานง่าย

สวย เบา ทันสมัย!

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

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

WYSIWYG(ออกเสียงว่า “wee-zee-wig” จากภาษาอังกฤษ What You See Is What You Get - “what you see is what you get”) - วิธีการแก้ไขซึ่งเนื้อหาที่ได้รับการแก้ไขในระหว่างขั้นตอนการแก้ไขจะมีลักษณะเหมือนกันทุกประการ มันเป็นผลลัพธ์สุดท้าย

การแก้ไขแบบเรียลไทม์

ตัวแก้ไขมีเครื่องมือทั้งหมดที่ผู้จัดการเนื้อหาต้องการ

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

โปรแกรมแก้ไขภาพ: การแก้ไขพารามิเตอร์ส่วนประกอบ

เครื่องมือแก้ไขมีเครื่องมือแก้ไขหน้ามากมาย

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

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

การเน้นโค้ดและการกำหนดหมายเลขบรรทัด

การแก้ไขหน้าต่างๆ เช่น PHP สะดวกมาก เนื่องจากตัวแก้ไขที่สร้างไว้ในระบบจะเน้นโค้ดและหมายเลขบรรทัด และหน้าเว็บเองก็ได้รับการบันทึก "สไตล์อาแจ็กซ์" "ต่อหน้าต่อตาเรา" - โดยไม่ต้องโหลดหน้าซ้ำและไม่เสียสมาธิ!

โครงร่างตัวแก้ไขสีเข้ม

• ไวยากรณ์ที่เน้น HTML + PHP + Javascript + SQL;
• แสงไฟสามารถเปลี่ยนได้และคุณสามารถปิดได้โดยไม่ต้องโหลดหน้าซ้ำ
• 2 ธีมสี - สว่างและมืด
• ข้ามไปที่บรรทัดอย่างรวดเร็วตามหมายเลข
• Tab/Shift+Tab เพื่อแทรกและเลิกทำแท็บ

การจัดการข้อมูลเป็นงานประจำวัน เราทำทุกอย่างเพื่อให้งานนี้สนุก!

โหมด "แยก"

แนวตั้งและแนวนอน

ตอนนี้เครื่องมือแก้ไขของคุณมีโหมด "แยก" เต็มรูปแบบ 2 โหมด - แนวตั้งและแนวนอน สะดวกมากในการทำงานในโหมดรวม

คุณสามารถดูโค้ดเพจและการแสดงผลได้พร้อมกัน คุณสามารถแก้ไขในส่วนใดก็ได้ของหน้าต่าง - แก้ไขหน้าด้วยสายตาหรือแก้ไขโค้ด

แยก - แบ่งหน้าต่างออกเป็นสองส่วน - การแก้ไขภาพและการแก้ไขโค้ด

ค้นหา/แทนที่ได้สะดวก

ค้นหาส่วนประกอบในไม่กี่วินาที!

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

ผลลัพธ์เดียวกันในทุกเบราว์เซอร์

ใช้เบราว์เซอร์ใดก็ได้!

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

“กำลังล้าง” รหัสเมื่อใส่

รหัสสะอาด!

ตัวแก้ไขจัดการการแทรกข้อความจากแหล่งต่าง ๆ พร้อมการล้างเนื้อหาอัตโนมัติ เมื่อคัดลอกข้อความจาก Word โค้ดจะถูกแปลงเป็น HTML5 แท็กที่ไม่จำเป็นทั้งหมด - แท็กที่ไม่มีนัยสำคัญ - จะถูกลบออกจากโค้ด

สำหรับนักพัฒนา

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

HTML5 ที่ถูกต้องและถูกต้อง

ด้วยการตรวจสอบความถูกต้อง - ทุกอย่างโอเค!

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

ไม่จำเป็นต้องเขียนโค้ดที่ถูกต้องด้วยตนเอง

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

ทำไมคุณถึงต้องการ HTML5 ที่ถูกต้อง
ข้อดีของการเปลี่ยนไปใช้ HTML5 ที่ถูกต้องนั้นไม่อาจปฏิเสธได้ เนื่องจากนักพัฒนาเว็บพูดคุยกันมานานแล้ว (เช่น

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

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

สำหรับนักพัฒนา

“อาศรม” สำหรับนักพัฒนาเว็บ

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

คำแนะนำสำหรับนักพัฒนาเว็บ:

• ออกแบบ.ดำเนินการตาม. โดยเฉพาะอย่างยิ่งในช่วงเวลาที่เกี่ยวข้องกับการสร้างเทมเพลตการออกแบบของคุณเองและการใช้งาน เราพยายามพัฒนาอินเทอร์เฟซการควบคุมในลักษณะที่ไม่จำกัดนักพัฒนาเว็บในตัวเลือกเค้าโครงและการออกแบบ
• ขอแนะนำให้ใช้แบบมาตรฐานในเทมเพลตเว็บไซต์ ส่วนประกอบเมนูพร้อมแคช. ()
• แนะนำให้สร้างเว็บไซต์โดยใช้ . ใช้ส่วนประกอบมาตรฐานหรือเพื่อวัตถุประสงค์ของโครงการ สร้างส่วนประกอบแบบกำหนดเองตามความต้องการเฉพาะ
• เราขอแนะนำเมื่อปรับแต่งรูปลักษณ์ สิ่งนี้จะช่วยให้มั่นใจในความปลอดภัยเมื่อทำการอัพเดตผลิตภัณฑ์ คุณสามารถคัดลอกเทมเพลตได้โดยตรงจากอินเทอร์เฟซสาธารณะในโหมดแก้ไข ส่วนประกอบสามารถมีเทมเพลตได้ไม่จำกัดจำนวน
• เราขอแนะนำว่าหากคุณกำลังแก้ไขส่วนประกอบ 1C-Bitrix หรือสร้างส่วนประกอบของคุณเอง ให้สร้างส่วนประกอบนั้นขึ้นมา
• เมื่อพัฒนาส่วนประกอบ คุณสามารถคำนึงถึง .
• แนะนำให้ใช้ในกรณีของการสร้างฟังก์ชันการทำงานที่ซับซ้อนหรือการดูหลายหน้า เมื่อการเชื่อมโยงส่วนประกอบเดียวจะเป็นเรื่องยากสำหรับผู้ใช้
• เพื่อเร่งความเร็วไซต์และปรับขนาดโปรเจ็กต์ เราขอแนะนำให้สนับสนุนเทคโนโลยี Autocaching และใช้เทคโนโลยี Managed Caching
• เมื่อกำหนดค่าส่วนประกอบ ขอแนะนำให้ตั้งค่าในพารามิเตอร์ส่วนประกอบ อัตโนมัติ+จัดการด้วยเวลาแคชที่ยาวนาน (1-12 เดือนหากคุณทำงานโดยใช้เทคโนโลยี Cache Dependencies ทั้งหมด)
• เป็นที่พึงประสงค์ว่าในโหมด Autocaching ส่วนประกอบจะไม่ดำเนินการสืบค้นไปยังฐานข้อมูลหรือดำเนินการเฉพาะการสืบค้นที่แคชไม่มีเหตุผล
• หากเป็นไปได้ การสนับสนุนเพื่อการเพิ่มประสิทธิภาพกลไกค้นหาเป็นสิ่งที่พึงปรารถนา
• เราขอแนะนำการสนับสนุนสำหรับการจัดการรายการผ่าน API ผลิตภัณฑ์ ซึ่งจะช่วยให้ผู้ใช้แก้ไขและลบองค์ประกอบได้โดยตรงบนหน้าเว็บไซต์
• ขอแนะนำให้ออกแบบการพัฒนาขนาดใหญ่ในโมดูลของคุณเองด้วย API และการรวมส่วนประกอบของคุณเองไว้ในนั้น ด้วยตำแหน่งต่อมาใน มาร์เก็ตเพลสและความสามารถในการอัปเดตโดยใช้เทคโนโลยี SiteUpdate ()
• ขอแนะนำให้ใช้แพลตฟอร์ม API เพื่อทำงานกับออบเจ็กต์ระบบ การสืบค้นโดยตรงไปยังฐานข้อมูลที่ไม่พึงประสงค์อย่างมาก นี่อาจทำให้การอัปเดตผลิตภัณฑ์ไม่เข้ากันกับการใช้งานของพันธมิตร
• รักษาความสมบูรณ์ของแกนผลิตภัณฑ์และใช้คำแนะนำของเราเมื่อดำเนินโครงการเพื่อให้แน่ใจว่าผลิตภัณฑ์สามารถอัปเดตได้โดยใช้เทคโนโลยีอัปเดต อัปเดตไซต์. ใช้ระบบเหตุการณ์ภายในเพื่อเปลี่ยนตรรกะของผลิตภัณฑ์หรือขอการปรากฏตัวของเหตุการณ์ใหม่ (

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

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

การออกแบบที่ตอบสนอง (RWD)- การออกแบบที่ตอบสนอง - การออกแบบไซต์ที่มีค่าคุณสมบัติบางอย่าง เช่น ตารางเลย์เอาต์ที่ยืดหยุ่น ซึ่งช่วยให้เลย์เอาต์หนึ่งทำงานบนอุปกรณ์ที่แตกต่างกัน

การออกแบบที่ปรับเปลี่ยนได้ (AWD)— การออกแบบที่ปรับเปลี่ยนได้หรือการแสดงผลแบบไดนามิก — การออกแบบไซต์ที่มีเงื่อนไขที่เปลี่ยนแปลงขึ้นอยู่กับอุปกรณ์ โดยอิงตามเค้าโครงที่มีความกว้างคงที่หลายแบบ

1. เทคนิคการออกแบบที่ตอบสนอง

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

การออกแบบที่ตอบสนอง(ภาษาอังกฤษ) การออกแบบเว็บไซต์ที่ตอบสนอง) รวมสามวิธีเข้าด้วยกัน - รูปแบบที่ยืดหยุ่นตาข่ายตาม ภาพที่มีความยืดหยุ่นและ แบบสอบถามสื่อ.

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

ความยืดหยุ่นของเนื้อหาข้อความทำได้โดยการคำนวณขนาดตัวอักษรโดยสัมพันธ์กับขนาดตัวอักษรเริ่มต้นของเบราว์เซอร์ที่ 16px เช่น สำหรับขนาดตัวอักษรที่มีขนาดคงที่: 42px ขนาดสัมพัทธ์คือ 42px / 16px = 2.625em

ปัญหา ภาพที่มีความยืดหยุ่นแก้ไขโดยใช้กฎ img (ความกว้าง: 100%; ความกว้างสูงสุด: 100%;) สำหรับรูปภาพทั้งหมดบนไซต์ กฎนี้ช่วยให้แน่ใจว่ารูปภาพจะไม่กว้างกว่าคอนเทนเนอร์และจะไม่เกินขนาดที่แท้จริงบนหน้าจอที่ใหญ่ขึ้น

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

ข้าว. 1. การออกแบบที่ตอบสนอง

เทคนิคการออกแบบที่ตอบสนองเพิ่มเติม

กราฟิกแบบเวกเตอร์ที่ปรับขนาดได้- ใช้รูปภาพ svg ที่ปรับขนาดได้ทุกขนาดโดยไม่สูญเสียคุณภาพและดูดีบนจอแสดงผล Retina

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

ข้าว. 2. Pinterest รูปแบบตามการ์ด

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

ข้าว. 3. Hotellook ความเรียบง่ายในการออกแบบเว็บไซต์

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

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

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

2. การปรับแต่งวิวพอร์ตโดยใช้เมตาแท็กวิวพอร์ต

เพื่อป้องกันไม่ให้เบราว์เซอร์มือถือสำหรับระบบปฏิบัติการ Android และ iOS ปรับขนาดหน้าไซต์โดยอัตโนมัติ จึงมีการใช้แท็กพิเศษ ด้วยแอตทริบิวต์ name="viewport" แท็กนี้อนุญาตให้คุณตั้งค่าเฉพาะสำหรับพารามิเตอร์ความกว้างและมาตราส่วนเริ่มต้น:

— Initial-scale=1 หมายความว่าขนาดหน้าในเบราว์เซอร์จะเท่ากับ 100% ของขนาดวิวพอร์ต นั่นคืออัตราส่วนระหว่างฟิสิคัลพิกเซลและพิกเซล CSS จะเป็น 1:1

— width=device-width หมายความว่าความกว้างของหน้าจะเท่ากับ 100% ของความกว้างของหน้าต่างของเบราว์เซอร์ใด ๆ นั่นคือความกว้างของหน้าเว็บไซต์สอดคล้องกับความกว้างของอุปกรณ์ ดังนั้นจึงไม่จำเป็นต้องปรับขนาด

ในตัวอย่างนี้ เนื้อหาในหน้าต่างเบราว์เซอร์จะมีขนาดใหญ่กว่า 2 เท่าเมื่อเทียบกับขนาดจริง

แท็กด้วยนะ สามารถใช้เพื่อควบคุมจำนวนผู้ใช้ที่สามารถเพิ่มหรือลดความกว้างของหน้าได้:

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

คุณสามารถปฏิเสธไม่ให้ผู้ใช้ปรับขนาดได้โดยใช้แอตทริบิวต์ที่ผู้ใช้ปรับขนาดได้:

3. เทมเพลตสากล

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

3.1. ส่วนใหญ่เป็นของไหล

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

3.2. วางคอลัมน์

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

3.3. ตัวจำแลงเค้าโครง

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

3.4. การปรับแต่งเล็กๆ น้อยๆ

เทมเพลตจะทำการเปลี่ยนแปลงเค้าโครงเล็กน้อย เช่น การปรับขนาดตัวอักษร การปรับขนาดรูปภาพ หรือการย้ายเนื้อหา ทำงานได้ดีกับเค้าโครงแบบคอลัมน์เดียว เช่น ไซต์หน้าเดียวและบทความที่มีข้อความจำนวนมาก

3.5. ปิดผ้าใบ

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

4. การออกแบบที่ตอบสนอง

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

โดยทั่วไป เค้าโครงแบบตอบสนองจะมีตัวเลือกเค้าโครงหกตัวเลือก ขึ้นอยู่กับความกว้างของหน้าจอ:
320
480
760
960
1200
1600.

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

เทคนิคการออกแบบเชิงตอบสนองขั้นพื้นฐาน

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

ใช้ตาราง— โครงสร้างแบบ 12 คอลัมน์จะดีกว่าในการควบคุมความกว้างของคอลัมน์และช่องว่างภายในระหว่างคอลัมน์เหล่านั้น

5. อะไรคือความแตกต่างระหว่างการออกแบบเว็บแบบตอบสนองและแบบปรับเปลี่ยนได้

ข้าว. 4. การออกแบบที่ตอบสนองและปรับเปลี่ยนได้บนอุปกรณ์ต่างๆ

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

ดังนั้นความแตกต่างที่สำคัญระหว่างเทคนิคเหล่านี้คือการออกแบบที่ตอบสนอง - เค้าโครงเดียวสำหรับอุปกรณ์ทั้งหมด การออกแบบที่ปรับเปลี่ยนได้ - เค้าโครงเดียวสำหรับอุปกรณ์แต่ละประเภท

6. บริการและเครื่องมือที่เป็นประโยชน์

โปรแกรมจำลอง Android สำหรับ Windows, Linux และ Mac OS X โปรแกรมจำลอง iOS ใช้งานได้สำหรับผู้ใช้ Mac OS X เท่านั้นและเป็นส่วนหนึ่งของแพ็คเกจ Xcode (สามารถดาวน์โหลดได้ฟรีจาก Mac App Store)

สคริปต์ PHP ที่ทำงานบนเว็บไซต์ใดๆ จะตรวจจับขนาดหน้าจอและปรับขนาดภาพให้พอดี ส่งผลให้ภาพมีขนาดเล็กบนหน้าจอขนาดเล็ก

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

คอลเลกชันของเว็บไซต์ที่ใช้คำสั่งสื่อและการออกแบบเว็บแบบตอบสนอง

กรอบงาน CSS ขึ้นอยู่กับเค้าโครง 12 คอลัมน์ สูงสุด 960px รองรับ Chrome, Safari, Firefox, IE 7 และสูงกว่า เบราว์เซอร์เวอร์ชันมือถือ

ชุดเครื่องมือสำหรับการพัฒนาเว็บแอปพลิเคชัน ภาษาน้อย, รูปแบบที่ปรับเปลี่ยนได้ 12 คอลัมน์, รองรับอุปกรณ์มือถือ, แท็บเล็ตและจอภาพ, ส่วนประกอบมากมาย, ปุ่ม, เมนูแบบเลื่อนลง, รูปแบบฟิลด์อินพุตที่กำหนดเอง, รายการ, ส่วนหัว, ป้ายกำกับ, ไอคอน, การแจ้งเตือน, แท็บ, แถบความคืบหน้า, คำแนะนำเครื่องมือ , “หีบเพลง”, “ม้าหมุน” และอื่นๆ ปลั๊กอิน Javascript ต่างๆ การรองรับ Scaffolding รวมถึงการใช้สไตล์ Bootstrap กับ HTML ที่สร้างไว้แล้ว

ในขณะนี้ ประมาณ 11-12% ของไซต์ที่มีผู้เยี่ยมชมมากที่สุด 100,000 แห่งมีการตอบกลับ และไม่ต้องสงสัยเลยว่าจำนวนนี้จะเพิ่มขึ้นในอีกไม่กี่ปีข้างหน้า

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

ความทันสมัยแบบปรับตัวได้

การออกแบบใหม่แบบตอบสนองคือกระบวนการนำเว็บไซต์ที่ใช้เฉพาะเดสก์ท็อปที่มีอยู่มาใช้ และโดยพื้นฐานแล้วคือ "การปรับปรุงแบบตอบสนอง"

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

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

ข้อดี

• ค่อนข้างเร็ว.
  มีหลายวิธีในการปรับปรุงการตอบสนองให้ทันสมัย ​​กลยุทธ์นี้อาจเป็นการเพิ่มไฟล์ small-screens.css ลงในไซต์ แม้จะมีตัวอย่างที่ค่อนข้างหยาบ แต่การปรับปรุงให้ทันสมัยแบบปรับเปลี่ยนได้ก็เป็นตัวเลือกที่น่าสนใจสำหรับองค์กรจำนวนมาก เนื่องจากไม่จำเป็นต้องสร้างทุกอย่างใหม่ทั้งหมดตั้งแต่เริ่มต้น
• คุ้นเคย.
  ไม่ทำให้ผู้ใช้สับสน ผู้คนใช้เวลาหลายปีในการทำความคุ้นเคยกับอินเทอร์เฟซ และด้วยการปรับปรุงอินเทอร์เฟซที่มีอยู่ให้ทันสมัย ​​องค์กรต่างๆ จึงสามารถรักษาแนวทางที่คุ้นเคย ในขณะเดียวกันก็ปรับปรุงชีวิตของผู้คนด้วยอุปกรณ์เคลื่อนที่
• องค์กรได้เร็วขึ้น
  ในทางการเมือง การปรับปรุงอินเทอร์เฟซให้ทันสมัยนั้นปลอดภัยกว่าการเริ่มต้นใหม่ทั้งหมด จะมีการถกเถียงกันน้อยลงเกี่ยวกับเฉดสีเขียวที่ให้เลือก รูปภาพสต็อกเล็กๆ น้อยๆ ที่จะใช้ และฝ่ายบริหารจะไม่ต้องบิดแขน ช่วยให้ทีมเปิดไซต์ที่ตอบสนองได้เร็วขึ้น

ข้อบกพร่อง

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

ไซต์มือถือที่ตอบสนอง

ไซต์บนมือถือที่ตอบสนองหรือที่ฉันเรียกว่า "เมล็ดพันธุ์สำหรับอนาคตที่ตอบสนอง" ถือเป็นแนวทางปฏิบัติ การสร้างเว็บไซต์แยกต่างหากในรูปแบบ “m.yourdomain.ru” โดยใช้เทคนิคการออกแบบที่ตอบสนอง. เว็บไซต์อย่าง The BBC, The Guardian และ Entertainment Weekly (ที่ฉันทำงานอยู่) ใช้กลยุทธ์นี้

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

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

ข้อดี

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

ข้อบกพร่อง

• มันยังคงเป็นไซต์บนมือถือ
  ไม่ว่าจะตอบสนองหรือไม่ก็ตาม วิธีการนี้ยังคงมีข้อเสียจำนวนมากของไซต์บนมือถือ: ปัญหาเกี่ยวกับการเปลี่ยนเส้นทาง URL การจัดการเนื้อหา เนื้อหาที่สอดคล้องกัน ความสอดคล้อง การเพิ่มประสิทธิภาพ SEO และอื่นๆ
• การแก้ไขชั่วคราว
  ไซต์บนมือถือหลายแห่งถูกสร้างขึ้นเป็น Band-Aid เพื่อหยุดเลือด ไซต์ดังกล่าวสร้างขึ้นโดยมีจุดประสงค์เพื่อระบายปริมาณการรับส่งข้อมูลที่เพิ่มขึ้นจากอุปกรณ์มือถือ โซลูชันเหล่านี้อาจยังคงตอบสนองความต้องการที่มีอยู่ แต่เมื่อพิจารณาถึงแนวโน้มในอนาคต โซลูชันเหล่านี้ไม่น่าจะช่วยคุณได้ในระยะยาว
• โอกาสที่จะเหี่ยวเฉาไปบนเถาวัลย์
  บางองค์กรอาจเริ่มโครงการดังกล่าว ผ่านไปได้ครึ่งทางแล้วจึงละทิ้งทั้งหมดจนกว่าจะหมดงบประมาณปีหน้า
• ออกแบบสำหรับหน้าจอขนาดเล็ก
  เนื่องจากจุดเริ่มต้นมุ่งเน้นไปที่หน้าจอขนาดเล็ก การย้ายอินเทอร์เฟซไปยังจอแสดงผลขนาดใหญ่ในภายหลังโดยไม่สูญเสียคุณภาพอาจเป็นเรื่องท้าทาย

การออกแบบที่ตอบสนองต่ออุปกรณ์มือถือโดยกำเนิด