การทำหัวเว็บแบบ Responsive คงเหลือแต่โลโก้ และแบนเนอร์สินะ

[ptteppawong]

ตลอดเวลาที่ผ่านมาของการทำเว็บของผม  ผมมักจะออกแบบแบนเนอร์  ให้มีความกว้างตามขนาดของหน้าเว็บ    เช่น  1000 x 200 /   1000 x 300  /  1000 x 400   หรือขนาดอื่น ๆ  ก็ว่ากันไป  ซึ่งเป็นแบบที่ผมถนัดที่สุดในการออกแบบ    แต่แล้ววันหนึ่ง เมื่อมันได้เข้าสู่ยุคของ Responsive  web  ทำให้ผมไม่สามารถออกแบบหัวเว็บในลักษณะนี้ได้อีกต่อไปแล้ว   ซึ่งถ้าออกแบบในลักษณะเดิม เมื่อเปิดดูในมือ แน่นอน  ภาพมันถูกย่อส่วนลงมา ตัวหนังสือทั้งหมดเล็กลงทันที   

คงต้องปรับตัวทำหัวเว็บแบบ responsive ล่ะครับ   

แต่ผมเห็น  theme ส่วนใหญ่  ก็จะ  ออกแบบ  ให้โลโก้  อยู่ทางซ้ายมือ   และขวามือเป็นแบนเนอร์  หรือเมนู   

เช่น   http://themeforest.net/item/goodstart-multipurpose-magazine-theme/full_screen_preview/11170548

http://www.wp4life.com/?product=oriel_wp

แบบนี้มันคือการออกแบบหัวเว็บแบบมาตรฐานของยุค  Responsive Web  เหรอเปล่าครับ  เพราะ theme ไหน ๆ ก็จะออกแบบในลักษณะนี้คล้าย ๆ กันหมด

[aituanoe]

รู้สึกแบบนั้นเหมือนกันครับ เป็นเกือบทุกธีม

[sputtaro]

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

โดยเฉพาะอย่างยิ่งงานเว็บดีไซน์ตามตัวอย่างแรกที่ท่านเอ่ยถึง น่าจะได้รับความนิยมในช่วงนี้
เพราะเท่าผมเห็นเทมเพลทที่ออกใหม่จะใช้เมนูแนวนี้กันเยอะ

[fangbif]

Responsive  เน้นให้เห็นง่าย กดง่าย อ่านง่าย แค่นี้แหละ

[markesesr]

เอาง่ายๆ คุณลองไปดูแอพในโทรศัพท์ของคุณดูนะครับ ไม่ว่าจะเป็น App ของ Google หรือ Facebook ก็จะมีเมนูคล้ายๆกัน ทั้งนั้น

แล้วคุณลองมองกลับมาดูเว็บไซต์ Responsive นะครับ ปัจจุบัน designer ก็พยายามทำให้มันคล้ายๆกับ app ในโทรศัพท์นั่นแหละ เพราะว่ามันคือมาตรฐานไปละ

[epooba]

นั่นจิ หรือว่ามันจะเป็นมาตรฐานโลกอ่ะคะ

[1ZAA]

มาตรฐานโลกครับ

[ping1234]

ต้องปรับตัวกันแล้วค่ะ กระทบโดยตรง 

[banban]

ผมว่า เป็นเพราะ Programmer ส่วนใหญ่ "ขี้เกียจ" ครับ

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

ถ้าคิดมากกว่านี้ งานจะไม่เสร็จ ยืดเยื้อ วิธีนี้ก็เลยกลายเป็นมาตรฐานไปโดยปริยาย

[fangbif]

ผมว่า เป็นเพราะ Programmer ส่วนใหญ่ "ขี้เกียจ" ครับ

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

ถ้าคิดมากกว่านี้ งานจะไม่เสร็จ ยืดเยื้อ วิธีนี้ก็เลยกลายเป็นมาตรฐานไปโดยปริยาย

หือ Programmer นี่นะขี้เกียจ 

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

[Golfy]

ที่จริงจะทำแบบนี้ก็ได้นะครับ

ลองลากๆย่อ/ขยาย browser ดู

http://www.responsivelogos.co.uk

[bonkbonk]

อ่านของ จขกท แล้วไม่ค่อยเข้าใจอะครับ ^^"

ตลอดเวลาที่ผ่านมาของการทำเว็บของผม  ผมมักจะออกแบบแบนเนอร์  ให้มีความกว้างตามขนาดของหน้าเว็บ    เช่น  1000 x 200 /   1000 x 300  /  1000 x 400   หรือขนาดอื่น ๆ  ก็ว่ากันไป  ซึ่งเป็นแบบที่ผมถนัดที่สุดในการออกแบบ    แต่แล้ววันหนึ่ง เมื่อมันได้เข้าสู่ยุคของ Responsive  web  ทำให้ผมไม่สามารถออกแบบหัวเว็บในลักษณะนี้ได้อีกต่อไปแล้ว   ซึ่งถ้าออกแบบในลักษณะเดิม เมื่อเปิดดูในมือ แน่นอน  ภาพมันถูกย่อส่วนลงมา ตัวหนังสือทั้งหมดเล็กลงทันที   

1000x200 แล้วเอาไว้ตรงไหนครับ แล้วถ้ามัน responsive แล้วมันมีผลเสียยังไงกับที่คุณออกเหรอครับ แอบงงนิดหน่อย 

[ศักยะ]

ตลอดเวลาที่ผ่านมาของการทำเว็บของผม  ผมมักจะออกแบบแบนเนอร์  ให้มีความกว้างตามขนาดของหน้าเว็บ    เช่น  1000 x 200 /   1000 x 300  /  1000 x 400   หรือขนาดอื่น ๆ  ก็ว่ากันไป  ซึ่งเป็นแบบที่ผมถนัดที่สุดในการออกแบบ    แต่แล้ววันหนึ่ง เมื่อมันได้เข้าสู่ยุคของ Responsive  web  ทำให้ผมไม่สามารถออกแบบหัวเว็บในลักษณะนี้ได้อีกต่อไปแล้ว   ซึ่งถ้าออกแบบในลักษณะเดิม เมื่อเปิดดูในมือ แน่นอน  ภาพมันถูกย่อส่วนลงมา ตัวหนังสือทั้งหมดเล็กลงทันที   

คงต้องปรับตัวทำหัวเว็บแบบ responsive ล่ะครับ   

แต่ผมเห็น  theme ส่วนใหญ่  ก็จะ  ออกแบบ  ให้โลโก้  อยู่ทางซ้ายมือ   และขวามือเป็นแบนเนอร์  หรือเมนู   

เช่น   http://themeforest.net/item/goodstart-multipurpose-magazine-theme/full_screen_preview/11170548

http://www.wp4life.com/?product=oriel_wp

แบบนี้มันคือการออกแบบหัวเว็บแบบมาตรฐานของยุค  Responsive Web  เหรอเปล่าครับ  เพราะ theme ไหน ๆ ก็จะออกแบบในลักษณะนี้คล้าย ๆ กันหมด

คุณเข้าใจคำว่า responsive ดีรึยังล่ะครับ ถ้ายังกลับไปอ่านให้เข้าใจ

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

ปล.ผมไม่เก่งเรื่อง coding

[BakKheab]

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

ส่วนพวกแบนเนอร์ ก็คงต้องทำออกมาหลายขนาด เพื่อรองรับแต่ละอุปกรณ์
ถ้าเป็น Adsense ก็สบาย เพราะเขามี Ads แบบ Responsive ให้

[ptteppawong]

ขอบคุณครับ  สำหรับทุกความเห็น ....

ถามต่อนะครับ ......

สมมุติผมออกแบบหัวเว็บ   เพื่อการแสดงผลบน Desktop ที่ขนาด   1000 x 200px 

และผมออกแบบขนาดต่าง ๆ   อีก  3  ขนาด  เพื่อการแสดงผลบน tablet  และบนมือถือด้วย   

ใช้โค้ดตัวไหนเช็คครับ  ว่าถ้าเป็นอุปกรณ์แบบนี้ ให้แสดงผลหัวเว็บขนาดนี้มาแสดง     

ที่ต้องถามว่าใช้โค้ดอะไร   เพราะผมไม่เก่งเรื่องโค้ดครับ  ยังไงรบกวนด้วยครับ

[sputtaro]

1. ทำไว้เป็นแค่ตัวอย่าง ยังไม่ครบถ้วน ลองประยุกต์เอาดู
2. บนพื้นฐานของการใช้ Bootstrap
3. ลองตามนี้ดูครับ

.banner(
background-image: url(../img/bg/bg1200x300.png);
}
@media screen and (max-width: 320px) {
   .banner{background-image: url(../img/bg/bg320x30.png)};
}

@media screen and (max-width: 768px) {
   .banner{background-image: url(../img/bg/bg768x90.png)};
}
@media screen and (max-width: 800px) {
   .banner{background-image: url(../img/bg/bg800x120.png)};
}
@media screen and (max-width: 980px) {    
    .banner{background-image: url(../img/bg/bg980x150.png)};
}

4. coding
<div class="banner></div>

**
แก้โค๊ดครับ ผิดไปหน่อย ก๊อปมาจากของผม แล้วแก้ไขไม่ให้เหมือนกัน มันเลยผิดไปน่ะครับ

***
ออกแบบให้เป็นอย่างอื่นก็ได้ แล้วแต่แนวการออกแบบ
เช่น
<div><img class="topbanner" src="..."></div>

ใน .css ก็ต้องเขียนใหม่
.topbanner ......

[BakKheab]

ขอบคุณครับ  สำหรับทุกความเห็น ....

ถามต่อนะครับ ......

สมมุติผมออกแบบหัวเว็บ   เพื่อการแสดงผลบน Desktop ที่ขนาด   1000 x 200px  

และผมออกแบบขนาดต่าง ๆ   อีก  3  ขนาด  เพื่อการแสดงผลบน tablet  และบนมือถือด้วย  

ใช้โค้ดตัวไหนเช็คครับ  ว่าถ้าเป็นอุปกรณ์แบบนี้ ให้แสดงผลหัวเว็บขนาดนี้มาแสดง    

ที่ต้องถามว่าใช้โค้ดอะไร   เพราะผมไม่เก่งเรื่องโค้ดครับ  ยังไงรบกวนด้วยครับ

ตัวอย่างการเขียน CSS แบบ Media Query ลองเอาไปประยุกต์ดูครับ

<style="text/css">
    .banner{margin:0 auto;}
    .banner-desktop{width:1000px; height:300px; background-color:blue; text-decoration:none;}
    .banner-tablet{width:640px; height:200px; background-color:purple; text-decoration:none;}
    .banner-mobile{width:320px; height:320px; background-color:green; text-decoration:none;}
    @media only screen and (min-width:1000px]){ /*แสดงผลบนหน้าจอ Desktop*/
         .banner{width:1000px;}
         .banner-desktop{display:block;}
         .banner-tablet{display:none;}
         .banner-mobile{display:none;}
    }
    @media only screen and (max-width:999px) and (min-width:640px){ /*แสดงผลบนหน้าจอ Tablet*/
         .banner{width:640px;}
         .banner-desktop{display:none;}
         .banner-tablet{display:block;}
         .banner-mobile{display:none;}
    }
    @media only screen and (max-width:639px){ /*แสดงผลบนหน้าจอ Mobile*/
         .banner{width:320px;}
         .banner-desktop{display:none;}
         .banner-tablet{display:none;}
         .banner-mobile{display:block;}
    }
</style>

<div class="banner">
    <a class="banner-desktop" href="#"></a>
    <a class="banner-tablet" href="#"></a>
    <a class="banner-mobile" href="#"></a>
</div>

[G1]

ขอบคุณครับ  สำหรับทุกความเห็น ....

ถามต่อนะครับ ......

สมมุติผมออกแบบหัวเว็บ   เพื่อการแสดงผลบน Desktop ที่ขนาด   1000 x 200px 

และผมออกแบบขนาดต่าง ๆ   อีก  3  ขนาด  เพื่อการแสดงผลบน tablet  และบนมือถือด้วย   

ใช้โค้ดตัวไหนเช็คครับ  ว่าถ้าเป็นอุปกรณ์แบบนี้ ให้แสดงผลหัวเว็บขนาดนี้มาแสดง     

ที่ต้องถามว่าใช้โค้ดอะไร   เพราะผมไม่เก่งเรื่องโค้ดครับ  ยังไงรบกวนด้วยครับ

ตัวอย่างการเขียน CSS แบบ Media Query ลองเอาไปประยุกต์ดูครับ

<style="text/css">
    .banner{margin:0 auto;}
    .banner-desktop{width:1000px; height:300px; background-color:blue; text-decoration:none;}
    .banner-tablet{width:640px; height:200px; background-color:purple; text-decoration:none;}
    .banner-mobile{width:320px; height:320px; background-color:green; text-decoration:none;}
    @media only screen and (min-width:1000px){
         .banner{width:1000px;}
         .banner-desktop{display:block;}
         .banner-tablet{display:none;}
         .banner-mobile{display:none;}
    }
    @media only screen and (max-width:999px) and (min-width:640px){
         .banner{width:640px;}
         .banner-desktop{display:none;}
         .banner-tablet{display:block;}
         .banner-mobile{display:none;}
    }
    @media only screen and (max-width:639px){
         .banner{width:320px;}
         .banner-desktop{display:none;}
         .banner-tablet{display:none;}
         .banner-mobile{display:block;}
    }
</style>

<div class="banner">
    <a class="banner-desktop" href="#"></a>
    <a class="banner-tablet" href="#"></a>
    <a class="banner-mobile" href="#"></a>
</div>

+1 ขอบคุณมากครับ

[markesesr]

ผมว่า เป็นเพราะ Programmer ส่วนใหญ่ "ขี้เกียจ" ครับ

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

ถ้าคิดมากกว่านี้ งานจะไม่เสร็จ ยืดเยื้อ วิธีนี้ก็เลยกลายเป็นมาตรฐานไปโดยปริยาย

คุณไปเอาแนวคิดนี้มาจากไหน เหอะๆ
เขาทำออกมาเพื่อให้มันสะดวกต่อการใช้งาน

[Phi999]

ผมจะทำแยกไปสำหรับ mobile เพราะอนาคตคนจะหันมาเล่นจอใหญ่ขึ้น และ แทบจะไม่แตกต่างจากจอ monitor 11 นิ้วสมัยก่อนเลย ลดลงมาเหลือ 640*480 ก็พอละ