Please enable JavaScript.
Coggle requires JavaScript to display documents.
Responsive Web Design course (LESSON 1 Why Responsive?…
Responsive Web
Design course
LESSON 3
Building Up
การสร้าง
กำหนด html --> เขียน style sheets --> ให้กับ html
:fire: สิ่งที่ต้องคำนึงถึง คือ การกำหนดขนาดของสิ่งต่างๆ ต้องกำหนดให้เป็นแบบ relative คือการกำหนดขนาดให้สัมพันธ์กับสิ่งที่อยู่ใกล้เคียง
:red_flag: การกำหนด relative คือ layout หรือ Fluid Layouts ก็คือการกำหนด layout ต่างๆ ให้ความกว้างหน่วยเป็น % ไม่ได้กำหนดตายตัวเป็น pixel
:pen: กำหนดขนาดของ image ให้เป็นแบบ relative โดยกำหนดความกว้างเป็น % ให้อิงตาม container ของ image นั้นๆ จากนั้นให้เรากำหนด max-width ให้เป็นความกว้างที่แท้จริงของ image ด้วย ภาพที่ได้จะได้ไม่แตก เวลา container มีขนาดใหญ่มากๆ
:pen: กำหนดขนาดของ font ให้เป็นแบบ relative เริ่มต้นด้วยการกำหนดขนาดของ font ที่ body ให้เป็น 100% ซึ่งจะทำให้ขนาดของ font ใน element ต่างๆ ที่อยู่ใน body มีขนาด 100% ทั้งหมด
(หากเราต้องการกำหนดขนาดของ font ใน element ไหนเป็นพิเศษ ให้เราใช้หน่วย em)
--> ซึ่งหน่วย em นี้หมายถึงจำนวนเท่าของขนาดที่ inherit มา ซึ่งในทีนี้ เราได้กำหนดเป็น 100% จะได้ว่า ถ้าเรากำหนดขนาดเป็น 2 em ก็จะได้ font ขนาด 200%
LESSON 4
Common Responsive Patterns
รูปแบบการตอบสนองทั่วไป
:smiley:
Breakpoints
คือ การที่ Responsive Web เปลี่ยนรูปแบบการแสดงผล
หา Breakpoints แล้วเขียน Media Queries
การเพิ่มขนาดขึ้นไปเรื่อยๆ แล้วพบว่าที่ความกว้างขนาดนี้
เราสามารถปรับองค์ประกอบต่างๆ เพื่อทำให้ใช้งานได้สะดวกขึ้นได้(เกิดความสมดุล) หรือเพื่อความเหมาะสม เราจะเรียกจุดนั้นว่า Break point ให้เราใช้ Media Queries ในการใส่ style sheets สำหรับ Break point นั้นๆ เพื่อที่จะปรับการแสดงผลให้เหมาะสมตรงตามที่เราต้องการ
--> หลังจากนั้น ให้เราเพิ่มขนาดของ view port อีก แล้วหา Break point ต่อไป ทำแบบนี้ไปเรื่อยๆ จนกว่าจะถึงขนาดที่เราพอใจ
:!:เริ่มออกแบบจากหน้าจอที่เล็กที่สุดก่อน แล้วหา breakpoints โดยการค่อยๆ เพิ่มขนาดของ viewport ทีละน้อย :!:
--> กำหนดขนาดของทุกอย่างให้เป็นแบบ relative ทำให้ขนาดขององค์ประกอบต่างๆ จะปรับตามขนาดของ viewport โดยอัตโนมัติ
LESSON 1
Why Responsive?
แนวทางพื้นฐานที่ทำให้เว็บไซต์สามารถดูได้ในอุปกรณ์ต่างๆ ที่มีการใช้งานกันในปัจจุบัน
Google News มีกลยุทธ์แตกต่างกัน 2 แบบ
ตอบสนองในส่วนของโทรศัพท์และแท็บเล็ตอย่างสมบูรณ์แบบ
การตอบสนองของเดสก์ท็อป จะใช้เค้าโครงแบบตอบสนองที่เริ่มต้นที่ขนาดต่ำที่สุด เพิ่มความซับซ้อนและมีความทันสมัย
:black_flag: RWD is an art not a science การออกแบบที่ตอบสนองเป็นศิลปะ ไม่ใช่วิทยาศาสตร์
:<3: นักพัฒนาเว็บ จะต้องสร้างฟังก์ชั่นต่างๆที่รองรับสำหรับอุปกรณ์มือถือหรืออุปกร์ต่างๆ เพื่อตอบสนองการใช้งานให้หลากหลายรูปแบบ ไม่ว่าจะเป็นการซูมเนื้อหา เลื่อนดูเนื้อหาแบบโดยรวม หรือฟังก์ชั่นอื่นๆ
การจะทำ Responsive Web Design มักใช้เทคนิคหลายๆ อย่าง ร่วมกัน
(Fluid Grid, Flexible Images และ CSS3 Media Queries)
:check:
Fluid Grid
ซึ่งก็คือการออกแบบ Grid ให้เป็นแบบ Relative ซึ่งก็คือการที่ไม่ได้กำหนดขนาดของ Grid แบบตายตัว แต่จะกำหนดให้สัมพันธ์กับสิ่งอื่นๆ เช่น กำหนดความกว้างแบบเป็น % หรือการใช้ font-size หน่วยเป็น em เป็นต้น
:check:
Flexible Images
หรือการกำหนดขนาดของ Images ต่างๆ ให้มีความสัมพันธ์กับขนาดของหน้าจอแสดงผล หากรูปต้นฉบับมีขนาดใหญ่มาก เวลาแสดงในมือถือที่มีจอขนาดเล็ก ก็ควรลดขนาดลงมา เพื่อให้แสดงผลได้อย่างสวยงาม เป็นต้น
:check:
CSS3 Media Queries
ซึ่งจะช่วยให้เราสามารถกำหนด style sheets สำหรับ Devices ต่างๆ ได้ โดยส่วนใหญ่ เราจะเขียน style sheets พื้นฐานเอาไว้ ซึ่งกลุ่มนี้ จะไม่ขึ้นอยู่กับ Devices ใดๆ หลังจากนั้นให้เราเขียน style sheets สำหรับ Devices ที่มีขนาดหน้าจอที่เล็กสุด เพิ่มขึ้นไปเรื่อยๆ จนถึงขนาดใหญ่สุด ซึ่งการเขียนแบบนี้ จะช่วยลดความซ้ำซ้อนของโค้ด และยังทำให้การแก้โค้ดในภายหลังทำได้ง่ายอีกด้วย
LESSON 2
Starting Small
เริ่มต้นจากสิ่งเล็กๆ
เริ่มที่หน้าจอเล็กสุดก่อนเสมอ
เริ่มออกแบบสำหรับหน้าจอที่เล็กที่สุดก่อน (Mobile-First)
*
ถือว่าเป็นขั้นตอนที่สำคัญมาก เพราะถือเป็นรากฐานของเว็บไซต์
:!: การออกแบบสำหรับ PC ก่อนจะทำให้เขียนโค้ดได้ลำบากกว่า และมีโอกาสที่จะเกิดการซ้ำซ้อนของโค้ดมากกว่าด้วย:!:
:warning:
เทคนิค
คือ วาดกรอบสี่เหลี่ยมผืนผ้าขึ้นมาอันนึง ลงบนกระดาษ ให้มีความกว้างประมาณ (5×7.5 cm) จากนั้นนำกระดาษโพสต์-อิท ที่ได้เขียนเนื้อหาเตรียมไว้ มาลองจัดวางลงบนกรอบ แล้วลองสมมติตัวเราเองเป็นผู้ใช้งานที่ไม่เคยเข้าเว็บไซต์นี้มาก่อน
การวางตำแหน่งของเนื้อหาแบบนี้ เราจะเข้าใจมั้ย ใช้งานได้ง่ายมั้ย ให้เราปรับจนกว่าจะพอใจครับ รายละเอียดในขั้นตอนนี้
Responsive Web Design
คือ การออกแบบเว็บไซต์ด้วยแนวคิดใหม่ ที่จะทำให้เว็บไซต์ สามารถแสดงผลได้อย่างเหมาะสม บนอุปกรณ์ที่แตกต่างกัน โดยใช้ โค้ดร่วมกัน URL เดียวกัน :
LESSON 5
Optimizations
Fonts
การที่ในหนึ่งบรรทัดมีเพียงไม่กี่คำก็ทำให้ น่าอ่าน หรือเป็นกลุ่ม
Media queries
Images should be properly optimized
ควรปรับภาพให้เหมาะสม
--> ภาพเป็นตัวการสำคัญที่ทำให้เวลาในการโหลดช้าลง และก็ส่งผลต่อการตอบสนองของเว็บไซต์
--> วิธีการที่เร็วและง่ายที่สุดคือใช้
Adaptive Images
จะช่วยในการตรวจจับขนาดหน้าจอ สร้างแคชและส่งภาพที่ย่อขนาดโดยอัตโนมัติโดยไม่ต้องเปลี่ยนมาร์กอัป <scr> หรือ <img>
--> Solution PHP ควรใช้ร่วมกับเทคนิค Fluid Image เพราะ สามารถช่วยลดเวลาได้
:explode: นอกจากนี้ยังสามารถปรับแต่งซอฟต์แวร์และตั้งค่าคุณภาพของภาพและการแคชเบราว์เซอร์
:no_entry:
Adaptive images
จุดประสงค์ก็คือ การทำให้ผู้ใช้งานโหลดเฉพาะรูปที่เหมาะสมกับสภาพแวดล้อมของผู้ใช้งานในขณะนั้นๆ แทนที่จะบังคับให้ผู้ใช้งานโหลดรูปขนาดใหญ่สุดไป แต่วิธีนี้นั้นค่อนข้างจะซับซ้อนและทำได้ยาก