Share tips.

tips.html

6 เทคนิคกับการออกแบบเว็บไซต์ (website) บนมือถือ (Mobile)

การออกแบบจึงควรคำนึงถึงความเร็วในการประมวลผล (Chip) และแรม (RAM) ของโทรศัพท์มือถือ

1. รวบรวมข้อมูลของอุปกรณ์ที่เข้าใช้งานในเว็บไซต์ ว่าเป็นเครื่องรุ่นไหนบ้าง เพื่อใช้เป็นสถิติในการพัฒนาเว็บไซต์บนมือถือต่อไป
 
2. ออกแบบด้วยขนาดของโครงสร้าง min-width: 320px หรือเหมาะสมกับขนาดของอุปกรณ์ที่เราต้องการจะแสดงผล เช่น
Device Screen res (height x width)
Small Mobile 320 x 240
Mobile 480 x 320
Tablet 7" 600 x 800
Tablit 8.9" 800 x1280

3. การออกแบบสามารถกำหนดความกว้างประมาณ 640 pixels หรือขึ้นอยู่กับว่าเราต้องการเน้นว่าจะแสดงผลที่อุปกรณ์ประเภทใด และสามารถกำหนดรูปแบบด้วย CSS (Cascading Style Sheets)
.myImage {
	height: 40px;
	width: 100px;
	-webkit-background-size: 100px 40px;
	background: url("images/picture.jpg");
}

@media screen and (-webkit-device-pixel-ratio: 2) {
   .myImage {
	background: url("images/picture2x.jpg");
	
   }
}

หลีกเลี่ยงการใช้รูปภาพ เพื่อลดเวลาในการโหลดหน้าเว็บเพจ

.redButton {
	color: #B91440;
	font-size: 19px;
	line-height: 25px;
	padding: 10px 30px;
	border: 1px solid #FFFFFF;
	background: -webkit-gradient(linear, left top, left bottom, from(#F2F2F2), to(#FFFFFF));
	-webkit-box-shadow: 0 0 2px #E4E3E3;
	-webkit-border-radius: 5px;
}

4. อย่าใช้ Event Hover ของลิงค์ เช่น :hover เพราะมันไม่มีประโยชน์บนหน้าจอทัชสกรีน

5. ปิดการทำงาน auto-scaling
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

6. ลดการใช้สคริปต์ที่ทำงานซ้ำซ้อน (Loop) เพราะจะทำให้ชิบทำงานหนัก

12 มิถุนายน 2555 20:01:21