เนื้อหา
- การออกแบบสำหรับสิ่งที่ไม่รู้จัก
- แนวทางปฏิบัติในการออกแบบ
- กลายเป็นเค้าโครงที่ไม่เชื่อเรื่องพระเจ้า
- การเข้ารหัสอย่างต่อเนื่อง
- ดำดิ่งสู่การมาร์กอัป
ดูเหมือนว่าทุกคนจะพูดถึงการออกแบบเว็บที่ตอบสนองในปัจจุบันและด้วยเหตุผลที่ดี เนื่องจากจำนวนอุปกรณ์ที่เปิดใช้งานเว็บเติบโตขึ้นอย่างต่อเนื่องซึ่งแต่ละอุปกรณ์มีความสามารถและคุณสมบัติที่แตกต่างกันจึงไม่สมเหตุสมผลที่จะสร้างเว็บไซต์ที่มีความกว้างคงที่อีกต่อไป
ความจริงก็คือมันไม่เคยเป็น จนถึงขณะนี้ถือเป็นแนวทางปฏิบัติที่ดีที่สุดในการออกแบบประสบการณ์ที่สร้างสมมติฐานหลายประการไม่ว่าจะเกี่ยวกับความละเอียดหน้าจอแบนด์วิดท์หรือวิธีการป้อนข้อมูล หากคุณเคยออกแบบเว็บไซต์ขนาดกว้าง 960px เพื่อดูบนเน็ตบุ๊กหน้าจอขนาดเล็กของเพื่อนเท่านั้น (และใช่ฉันเขียนจากประสบการณ์ที่เจ็บปวดที่นี่) คุณจะเข้าใจว่าเหตุใดจึงไม่ใช่วิธีการที่ชาญฉลาดโดยเฉพาะ ตอนนี้ด้วยสมาร์ทโฟนและแท็บเล็ตที่ผสมผสานกันเป็นที่ชัดเจนว่าวิธีการดั้งเดิมของเราไม่เหมาะกับวัตถุประสงค์อีกต่อไป
โชคดีที่การปรากฏตัวของข้อความค้นหาสื่อ CSS และการยอมรับที่เพิ่มมากขึ้นว่าเว็บเป็นสื่อที่เหมาะสมของมันเองหมายความว่าเราเริ่มยอมรับลักษณะที่แท้จริงของแพลตฟอร์มโดยยอมรับว่าความเป็นสากลเป็นจุดแข็งไม่ใช่จุดอ่อน
ในอีกห้าวันข้างหน้าฉันจะแนะนำคุณเกี่ยวกับเทคนิคที่ตระหนักถึงข้อเท็จจริงนี้: การออกแบบเว็บที่ตอบสนอง. พัฒนาโดย Ethan Marcotte ซึ่งรวมเค้าโครงที่ลื่นไหลรูปภาพที่ยืดหยุ่นและการสืบค้นสื่อเพื่อช่วยให้เราสร้างไซต์ที่ปรับให้เข้ากับสภาพแวดล้อมที่พวกเขาพบได้อย่างสง่างาม
ฉันจะสาธิตวิธีการนี้โดยแสดงวิธีสร้างแกลเลอรีสื่อง่ายๆ ในตัวอย่างของฉันฉันจะสร้างเว็บไซต์เล็ก ๆ เพื่อบันทึกการเดินทางครั้งล่าสุดที่ฉันไปทั่วสหรัฐอเมริกา แต่อย่าลังเลที่จะปรับแต่งโค้ดและการออกแบบให้เหมาะกับความต้องการของคุณเอง
การออกแบบสำหรับสิ่งที่ไม่รู้จัก
บทช่วยสอนนี้ส่วนใหญ่จะเน้นไปที่แง่มุมการพัฒนาของการออกแบบที่ตอบสนอง แต่ก่อนที่เราจะเจาะลึกโค้ดใด ๆ ลองใช้เวลาสักครู่เพื่อคิดว่าเราจะออกแบบเว็บไซต์ที่มีเค้าโครงไม่สิ้นสุดได้อย่างไร
ตอนนี้ฉันโชคดีที่สามารถออกแบบอินเทอร์เฟซได้ และ พัฒนาโค้ดส่วนหน้าที่ทำให้เป็นจริง นี่ไม่ใช่ทักษะเฉพาะ - ถ้าคุณทำงานเพื่อตัวเองคุณก็คงเหมือนกัน แต่การทำความเข้าใจว่าเนื้อหาสามารถปรับตัวและจัดเรียงใหม่ได้อย่างไรเมื่อสร้างการออกแบบที่ลื่นไหลเป็นประโยชน์อย่างยิ่ง
ฉันยังทำงานเป็นส่วนหนึ่งของทีมขนาดใหญ่ซึ่งบทบาทของฉันมีความเชี่ยวชาญมากขึ้น ในสภาพแวดล้อมเช่นนี้นักออกแบบภาพสามารถมุ่งเน้นไปที่การแปล Wireframes ให้เป็นคอมพ์ที่น่าสนใจและมีส่วนร่วม (ลงนามแล้ว, พิกเซลที่สมบูรณ์แบบ) และไม่ใช่เรื่องแปลกที่นักพัฒนาจะอยู่แยกกันโดยแปลรูปแบบเหล่านี้ให้เป็นมาร์กอัปและ CSS แบบเรียบง่ายและมีประสิทธิภาพ
อย่างไรก็ตามเวิร์กโฟลว์เชิงเส้นและแบบแยกส่วนดังกล่าวจะพังทลายลงอย่างรวดเร็วเมื่อเราเริ่มประเมินว่าการออกแบบจะปรับให้เข้ากับสภาพแวดล้อมที่แตกต่างกันอย่างไร เช่นเดียวกับเครื่องมือหรือเทคโนโลยีใหม่ ๆ เราควรพิจารณาวิธีการทำงานที่ทำงานร่วมกันและคล่องตัวมากขึ้นด้วย ปัญหาที่ยุ่งยากที่สุดมากมายที่พบเมื่อออกแบบเว็บไซต์ที่ตอบสนองสามารถแก้ไขได้ง่ายๆผ่านการสนทนาการทดลองและการทำซ้ำ
แนวทางปฏิบัติในการออกแบบ
ไม่ได้หมายความว่านักออกแบบไม่มีขอบเขตที่จะคิดว่างานออกแบบจะทำงานนอกขอบเขตของอุปกรณ์ใด ๆ ได้อย่างไร
ที่ Clearleft เราเริ่มต้นการออกแบบภาพจากมุมมองของเดสก์ท็อป เราเริ่มต้นด้วยการกำหนดภาษาการออกแบบที่ครอบคลุมและความสวยงามของภาพโดยมักจะอาศัยการสำรวจเบื้องต้นเกี่ยวกับเนื้อหาหลัก ตัวอย่างเช่นหากเรากำลังออกแบบเว็บไซต์อาหารเราจะเริ่มต้นด้วยหน้าสูตรอาหาร สำหรับไซต์ข่าวหน้าเรื่องราว
นี่ไม่เพียง แต่เป็นหน้าสำคัญบนไซต์ แต่ยังอาจมีเนื้อหาที่มีโครงสร้างเพียงพอสำหรับเราในการสร้างจานสีแบบตัวอักษร เราจะคิดด้วยว่าเค้าโครงจะปรับตัวได้อย่างไรแม้ว่าในขั้นตอนนี้จะอยู่ในความคิดของเราก็ตาม
วิธีหนึ่งที่มีประโยชน์ในการทดสอบการออกแบบคือการใช้หน้าดังกล่าวและปรับให้เหมาะกับหน้าจอที่แคบลง (กว้าง ~ 320px) คุณน่าจะค้นพบว่าบางแง่มุมของการออกแบบจะต้องได้รับการคิดใหม่เพื่อให้สามารถทำงานได้ในความกว้างนี้ นี่คือตัวอย่างบางส่วน:
- วิชาการพิมพ์: ส่วนหัวขนาดใหญ่สามารถทำงานได้ดีกับเค้าโครงที่กว้างขึ้น แต่ในหน้าจอขนาดเล็กอาจใช้พื้นที่แนวตั้งมากดังนั้นจึงต้องมีการเลื่อนเพิ่มเติม เมื่อความยาวของเส้นเปลี่ยนแปลงคุณควรพิจารณาความสูงของเส้นและวิธีการพิมพ์อื่น ๆ ด้วย
- ลิงค์: การออกแบบของคุณจะทำงานอย่างไรบนอุปกรณ์หน้าจอสัมผัส แม้ว่าเราจะยังไม่มีวิธีง่ายๆในการตรวจจับสิ่งเหล่านี้ (หมายความว่าเราควรคำนึงถึงการออกแบบทุกด้าน) การออกแบบสำหรับหน้าจอที่แคบลงสามารถทำให้เรามีโอกาสคิดเกี่ยวกับพื้นที่เป้าหมายสำหรับลิงก์และองค์ประกอบเชิงโต้ตอบอื่น ๆ . หลักเกณฑ์ของ iOS แนะนำให้มีอย่างน้อย 44 พิกเซล / จุดสี่เหลี่ยมซึ่งเป็นตัวเลขที่ดีที่ควรตั้งเป้าหมายไว้
- การนำทาง: นี่อาจเป็นองค์ประกอบที่น่าอึดอัดที่สุดของการออกแบบที่ตอบสนองโดยเฉพาะอย่างยิ่งหากไซต์ของคุณมีหลายส่วนและลำดับชั้นที่ลึก Brad Frost ได้เขียนสรุปแนวทางต่างๆในการนำทางที่กำลังพิจารณาอยู่
- เนื้อหาที่ไม่จำเป็น: เนื้อหาบางส่วนไม่จำเป็น? เนื้อหาอื่น ๆ จำเป็นต้องแสดงในบางสถานการณ์เท่านั้นหรือไม่? ฉันไม่สนับสนุนการซ่อนเนื้อหาตามอุปกรณ์ที่ผู้ใช้ใช้อยู่ แต่เทคนิคต่างๆเช่นการโหลดแบบมีเงื่อนไข (ซึ่งเราจะตรวจสอบในปลายสัปดาห์นี้) สามารถช่วยให้เราแสดงหน้าเว็บที่มีขนาดเล็กลงซึ่งจะโหลดเฉพาะเนื้อหาเสริมเมื่อจำเป็นเท่านั้น
การออกแบบเลย์เอาต์ที่ตัดกันสองแบบช่วยตอกย้ำแนวคิดที่ว่าการออกแบบจะปรับตัวได้ในขณะเดียวกันก็ทำให้สิ่งที่อาจเกิดขึ้นในช่วงต้น แม้ว่าสิ่งนี้จะดูเหมือนงานเพิ่มขึ้นเป็นสองเท่า แต่โปรดจำไว้ว่าเราไม่ได้ออกแบบทุกหน้าให้มีความแม่นยำสมบูรณ์แบบพิกเซล แต่เรามุ่งเน้นไปที่การสร้างภาษาการออกแบบที่ปรับขนาดได้ซึ่งจะพัฒนาไปเมื่อเราเริ่มนำไปใช้ในโค้ดและอีกภาษาหนึ่งที่ขึ้นอยู่กับโมดูลและส่วนประกอบแต่ละตัว
กลายเป็นเค้าโครงที่ไม่เชื่อเรื่องพระเจ้า
ไม่น่าแปลกใจสำหรับอุตสาหกรรมที่ปฏิบัติต่อเว็บในอดีตเช่นการพิมพ์การจัดวางแบบความกว้างคงที่ได้แทรกซึมเข้าไปในงานส่งมอบจำนวนมากที่เราผลิต ในขณะที่เราเริ่มออกแบบสื่อที่ปรับเปลี่ยนได้จะมีการพิจารณาแนวทางใหม่ ๆ ที่ช่วยให้เราสามารถแก้ปัญหาและสื่อสารความคิดในขณะที่รับรู้ถึงลักษณะที่ลื่นไหลของสื่อได้ นี่คือรายการโปรดบางส่วนของฉัน:
- แผนภาพคำอธิบายหน้า: แม้ว่าโครงร่างโครงร่างมักจะบ่งบอกถึงเค้าโครง (และถือว่าเป็นอุปกรณ์บางประเภท) ไดอะแกรมคำอธิบายหน้าจะลบสมมติฐานนี้และอธิบายส่วนประกอบแต่ละส่วนแทนโดยจัดเรียงในเอกสารในแง่ของลำดับความสำคัญ
- กระเบื้องสไตล์: เมื่อสื่อสารแนวคิดการออกแบบกับลูกค้าเราพบว่าตัวเองกำลังนำเสนอ "ภาพวาดของเว็บไซต์" หากเราไม่ระมัดระวังลูกค้าจะขอดูแนวคิดที่แสดงให้เห็นว่าการออกแบบจะมีลักษณะอย่างไรบนอุปกรณ์อื่น ๆ ด้วย สิ่งนี้สามารถบังคับให้เราตกอยู่ในสถานการณ์ที่ไม่ยั่งยืนในการสร้างเพจหลายเพจสำหรับอุปกรณ์หลายเครื่อง Samantha Warren ได้คิดถึงปัญหานี้และคิดหากระเบื้องสไตล์ สิ่งเหล่านี้นั่งอยู่ระหว่างกระดานอารมณ์ (แต่คลุมเครือน้อยกว่า) และคอมพ์ที่รับรู้ได้อย่างสมบูรณ์ (แต่แม่นยำน้อยกว่า) และช่วยให้เราสื่อสารตัวอักษรลักษณะปุ่มและการรักษาด้านบน นอกจากนี้ยังสนับสนุนให้มีการพูดคุยกับลูกค้าในระดับที่เป็นผู้ใหญ่มากขึ้น
- เกมออกแบบ Mobilify: แบบฝึกหัดนี้สามารถทำงานได้ดีในระหว่างการประชุมเชิงปฏิบัติการการออกแบบร่วมกัน ในแบบฝึกหัดนี้ทุกคนจะเขียนลงใน Post-it เพื่อบันทึกองค์ประกอบที่อาจปรากฏในหน้าใดหน้าหนึ่ง จากนั้นสิ่งเหล่านี้จะติดอยู่กับผนังตามลำดับความสำคัญราวกับว่ามันปรากฏเป็นเส้นตรงบนโทรศัพท์มือถือ การอภิปรายที่เกิดขึ้นอาจทำให้เกิดข้อสรุปที่น่าประหลาดใจ ตัวอย่างเช่นคุณอาจทราบว่าการนำทางไม่ใช่องค์ประกอบที่สำคัญที่สุดในหน้า สิ่งนี้สามารถตามไปจนถึงการออกแบบโดยที่ลิงก์ข้ามที่ด้านบนของหน้าจะเชื่อมโยงไปยังการนำทางในส่วนท้าย
ยังมีที่ว่างสำหรับเครื่องมือที่เราใช้อยู่แล้ว แต่เมื่อออกแบบเว็บไซต์ในรูปแบบกว้าง ๆ เราต้องจำไว้ว่าเค้าโครงไม่เป็นที่รู้จักอีกต่อไป
การเข้ารหัสอย่างต่อเนื่อง
โชคดีที่เราไม่จำเป็นต้องกังวลเกี่ยวกับการออกแบบภาพในตัวอย่างที่เรากำลังดำเนินการเนื่องจากงานหนักได้ทำเพื่อเราแล้ว! แต่เราสามารถมุ่งเน้นไปที่การเขียนโค้ดการออกแบบของเราลงในเว็บไซต์ที่ตอบสนองได้อย่างสมบูรณ์
อีกอย่างหนึ่งก่อนที่เราจะเริ่มต้น สิ่งสำคัญคือต้องจำหลักการก่อตั้งของสื่อที่เรากำลังดำเนินการด้วยนั่นคือความเป็นสากล นั่นหมายความว่าไม่เพียง แต่สร้างขึ้นสำหรับอุปกรณ์ที่เปิดใช้งานเว็บในปัจจุบันเท่านั้น แต่ยังรับประกันความเข้ากันได้กับอุปกรณ์ของเมื่อวานและวันพรุ่งนี้ด้วย John Allsopp อธิบายว่าเหตุใดหลักการนี้จึงมีความสำคัญในโพสต์ของเขา The Next 6 Billion:
"หกพันล้านคนต่อไปนี้คือเด็ก ๆ ในชนบทของอินเดียแอฟริกาจีนที่การเข้าถึงอำนาจและเครือข่ายอาจไม่ต่อเนื่องเป็นคนในเกาะสุมาตราที่กล่องวินเทลอายุ 1 ปีเป็นคนที่พูดภาษาต่างๆได้หลายร้อยภาษาและมีหลายสิบภาษาที่แตกต่างกัน ระบบการเขียนเป็นคนกลุ่มแรกในครอบครัวที่อ่านออกเขียนได้และเป็น 20 เปอร์เซ็นต์ของคนทั่วโลกที่อ่านหรือเขียนไม่ได้’
เราสามารถติดตามความเข้าใจของเราเกี่ยวกับเว็บได้โดยดูจากแฟชั่นที่แตกต่างกัน (เพื่อต้องการคำที่ดีกว่า) ที่ยึดถือในสายอาชีพของเรา: มาตรฐานเว็บการเข้าถึง JavaScript ที่ไม่สร้างความรำคาญ ... ทั้งหมดเป็นตัวแปรในธีมเดียวกัน: การเพิ่มประสิทธิภาพแบบก้าวหน้า เช่นเดียวกับการออกแบบเว็บที่ตอบสนอง เพื่อสร้างไฟล์ อย่างแท้จริง เว็บไซต์ที่ตอบสนองคือการสร้างไซต์ที่ไม่เพียง แต่เข้ากันได้แบบย้อนหลังเท่านั้น แต่ยังเป็นมิตรกับอนาคตอีกด้วย
ดำดิ่งสู่การมาร์กอัป
เอาล่ะพอคำนำได้แล้วก็ได้เวลาเปิดโปรแกรมแก้ไขข้อความนักออกแบบของเราได้จัดเตรียมการออกแบบที่เน้นเดสก์ท็อปให้กับเราและใจดีพอที่จะให้ตัวอย่างว่าสิ่งนี้อาจปรากฏในวิวพอร์ตที่แคบลงด้วยเช่นกัน
อาจเป็นเรื่องยากที่จะเขียนโค้ดเหล่านี้แยกกัน แต่ฉันจะแนะนำแนวทางที่แตกต่างออกไป ด้วยการวางส่วนประกอบหรือรูปแบบที่แยกจากกันซึ่งประกอบกันเป็นหน้าเดียวเราสามารถสร้างพอร์ตโฟลิโอรูปแบบได้ สิ่งนี้ช่วยให้เราสามารถพัฒนาส่วนประกอบนอกขอบเขตของเค้าโครงหน้าใด ๆ และจะทำให้เรามีบางสิ่งที่จะอ้างถึงในภายหลังสำหรับการทดสอบการถดถอยใด ๆ เรามาดูมาร์กอัปเริ่มต้นในอุปกรณ์ต่างๆดังนี้
ดูผลงานรูปแบบมาร์กอัปของเรา
ฉันจะโดนด่า - เรามีเว็บไซต์ที่ตอบสนองแล้ว! เนื้อหาของเรากำลังปรับให้เข้ากับขอบเขตของอุปกรณ์แต่ละเครื่องไม่ว่าจะเป็น iPad เครื่องใหม่หรือฟีเจอร์โฟนที่ถูกทิ้ง มันยังทำงานในเบราว์เซอร์แบบข้อความเท่านั้นเช่น Lynx
ด้วยหลักการพื้นฐานของความเป็นสากลเว็บจึงเป็น ตอบสนองตามค่าเริ่มต้น. นั่นยอดเยี่ยมมาก แต่ก็หมายความว่าสิ่งที่เราทำกับโค้ดนับจากนี้ไปอาจส่งผลต่อความสามารถในการปรับตัวดั้งเดิมนี้
พรุ่งนี้: เราจะเหยียบอย่างระมัดระวังและเริ่มใช้ลักษณะแรกของการออกแบบที่ตอบสนองได้ดีนั่นคือการพิมพ์และกริดของไหล
