Technology

arnondora.in.th 2.0 Design ใหม่รองรับ Mobile แล้วนะ

By Arnon Puitrakul - 26 มิถุนายน 2015

arnondora.in.th 2.0 Design ใหม่รองรับ Mobile แล้วนะ

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

New Design -> Material Design

เรื่องนี้เป็นเรื่องที่ยากมากสำหรับ Programmer คิดยากมากเวลาจะ Design อะไรสักอย่าง ขนาด Design โปรแกรมยังยากเลย แล้วอะไรจะมากับ Design หน้าเว็บล่ะ แต่พอทีที่ผมเขียนทางฝั่ง Android อยู่ เลยเอาล่ะ ใช้ Material Design เป็น Design Concept เลยล่ะกัน เพราะเราก็ใช้มันบ่อย ๆ อยู่แล้ว เลยค่อนข้างถนัด

Material Design คืออะไร ?

Material Design คือ Design Concept ที่ทาง Google เป็นคนตั้งขึ้น มันสามารถนำไปใช้ได้กับทุกขนาดหน้าจอจริง ๆ รวม ๆ มันจะคล้าย ๆ กับ Flat Design แต่เพิ่มเรื่องของ แสงเงา เข้ามาเหมือนกับ หน้าจอเราเป็น โต๊ะ ๆ นึง แล้ววัตถุก็คือเศษกระดาษอันนึง เราก็เอาเศษกระดาษมาวางไว้ ใต้กระดาษก็จะมีเงาขึ้นมา เราใช้หลักการนี้ล่ะ ในการออกแบบ ตาม Material Design

รองรับ Mobile Devices แล้วด้วยนะบอกเลย !!

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

web2-0-phone

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

Introducing Tags & Categories

web2-0-tag

เมื่อสัก 1-2 บทความที่ผ่านมา ผมได้มีการเริ่มใช้ระบบ Tag เพื่อแสดงหมวดหมู่ หรือจัดกลุ่มบทความบ้างแล้ว ใน Design ใหม่ เราก็ได้เพิ่มการแสดง Tag เข้ามาร่วมกับ Categories ไว้ด้านล่างของบทความแล้ว เพื่อให้ผู้อ่านสามารถเข้าถึงบทความที่เกี่ยวข้องได้เร็วขึ้น (ตัว Categories จะเป็นสีขาว ส่วน Tag จะเป็นสีม่วง เพื่อให้แยกออกว่าอันไหนเป็นอะไรกันแน่)

Focus with reading

web2-0-focus

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

New Comment System

web2-0-comment

จากเมื่อก่อน เราใช้ระบบ Comment ของตัว Wordpress เอง แต่ใน Version 2.0 เราได้ย้ายไปใช้ Comment System ของ Disqus แทน จะได้แชร์ไปยัง Social Network ได้ง่ายขึ้น

Born to be light and fast

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

It's just the beginning

เว็บตอนนี้ที่กำลังใช้อยู่ตอนนี้ยังไม่ใช่ ตัว Release หรือแต่ประการใด เราคงจะได้เห็นพัฒนาการออกมาเรื่อย ๆ หากใครที่เข้ามาอ่าน แล้วอยากได้ฟีเจอร์อะไรเพิ่ม เจอบัค หรืออยากแนะนำ Design ตรงจุดไหน Comment มาบอกได้เลยครับ ตอนนี้เหมือนกำลังพูดคนเดียวอยู่
สุดท้ายนี้ก็ขอขอบคุณทุก ๆ คนนะครับที่คอยสนับสนุนจนมาได้ถึงจุด ๆ นี้ อ่อเกือบลืม Theme ตัวนี้ผมปล่อยไปใน Github แล้วถ้าใครอยากจะเอาไปพัฒนาต่อ หรือจะเอาไปใช้ก็ได้เลยนะครับ ตอนนี้มันก็ใช้ได้เท่าที่เห็นในเว็บตอนนี้เลย แต่ก็กำลังอัพเดทเรื่อย ๆ ยิ่งช่วงนี้ยิ่งอัพเดทหนักเลย Commit กันทั้งวันเลย

Read Next...

Stream Apple Music อย่างไรให้ได้คุณภาพสูงสุด

Stream Apple Music อย่างไรให้ได้คุณภาพสูงสุด

เรื่องของเรื่องคือ เราทดลองเล่นเพลงผ่าน AirPlay 2 เข้ากับลำโพงแล้วเสียงมันแปลก ๆเลยไปหาข้อมูลมา เลยทำให้โป๊ะว่า อ้าว.... ชิบหาย Hi-Res ทิพย์นี่หว่า ทำไม เราไปดูเหตุผลในบทความนี้กัน...

ซิงค์ลม vs ชุดน้ำ แบบไหนเหมาะกับใคร

ซิงค์ลม vs ชุดน้ำ แบบไหนเหมาะกับใคร

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

Calibrate หน้าจอไปทำไมและทำอย่างไร

Calibrate หน้าจอไปทำไมและทำอย่างไร

เรื่องของเรื่องคือ เราซื้อจอ Dell Ultrasharp 32 นิ้วมาใหม่ และมักนำมาใช้ทำงานพวก Colour Grading และ แต่งรูป ด้วย เรื่องสีเป็นเรื่องสำคัญมาก ๆ ไปนั่งคุยกับเพื่อนก็คือ เพื่อนมาทำเลยให้ค่าาา วันนี้เราจะมาเล่าให้อ่านกันว่า ทำไม เราจำเป็นต้องทำ Display Calibration และ หลักการเบื้องหลังคืออะไร...

เลือกซื้อ Music Steaming เจ้าไหนดีในปี 2024

เลือกซื้อ Music Steaming เจ้าไหนดีในปี 2024

มาถึง Content ที่คนถามเข้ามาเยอะมากว่า ในปี 2024 ในไทยเรามี Music Streaming เข้ามาเปิดหลายเจ้ามาก ๆ ตั้งแต่ Spotify, Apple Music, Youtube Music และ Tidal เราควรจะเลือกเจ้าไหนดี วันนี้เราจะมาวัดจาก Indication 5 อย่างด้วยกัน แล้วลองมาสรุปคะแนนดูว่า เราน่าจะเหมาะกับเรื่องแบบไหนกันดีกว่า...