Tiêu chuẩn thiết kế, tối ưu hóa html,css,image

Tiêu chuẩn thiết kế, tối ưu hóa html,css,image

Dưới đây là bộ tiêu chuẩn thiết kế website, tối ưu thẻ html,image…Múc đích: tốt cho bộ máy tìm kiếm, tốc độ truyền tài dữ liệu nhanh, website có thẩm mỹ cao. Tham khảo các bạn nhé:

1. Tiêu chuẩn tối ưu

• Dung lượng file CSS: 50K

• Dung lượng file HTML: 70K

• Dung lượng ảnh tối đa

o CSS image: 20K

o <img> image: 250K

o Ảnh động: 40K

• Kích thước file Media: (chưa tính)

• Tổng kích thước ảnh: 750K

• Số lượng element: 1200

• Độ sấu tối đa của các heading: (tính từ <html>)

o h1: 7

o h2: 10

o h3: 13

• Số lượng ảnh (Tất cả ảnh): 100

• Số lượng media (flash, video…): 2

• Tổng dung lượng media: (chưa tính)

2. Quy tắc về hiển thị (font, color…)

Font

• Số lượng font: 2 (1 cho các heading, 1 cho nội dung)

• Loại font:

o Giới hạn trong Arial, Tahoma, Verdana, Times New Roman, Courier New

o Sử dụng các font tương ứng của Windows và Mac

 Arial, Helvetica, sans-serif

 Verdana, Geneva, sans-serif

 Tahoma, Geneva, sans-serif

 Courier New, Courier, monospace

 Times New Roman, Times, serif

• Kích thước: Font chuẩn là 0.7em và 0.75em (11px và 12px)

• Đơn vị kích thước: em

• Chiều cao dòng: 1.25em với font serif, 1.5em với font sans-serif, 1em với font monospace (sử dụng em)

• Chỉ sử dụng left alignment với đoạn văn.

Colors

• Số màu tối đa (trừ đen và trắng): 3

o Màu link: làm sao cho người dùng hiểu phần nào CLICK ĐƯỢC và phần nào KHÔNG CLICK ĐƯỢC

o Màu chính

o Màu phụ

o Ngoài ra: Có thể sử dụng các màu cùng tone với các màu trên nhưng khác nhau về độ đậm nhạt

• Độ tương phản cho phép giữa background và text: ≥ 4.5 (sử dụng công cụ tính http://snook.ca/technical/colour_contrast/colour.html, xem thông số Contrast ratio)

Ảnh

• Kích thước tối đa: 640×480

• Định dạng ảnh:

o Nội dung: JPEG

o Icon: GIF

o Các loại khác: Tùy, khuyến khích sử dụng PNG vì ảnh PNG nén đúng cách sẽ cho chất lượng/dung lượng tốt nhất.

• Ảnh động:

o Thời gian hoạt động: 10s ÷ 15s

o Số lượng tối đa trên 1 trang: 3 (trừ ảnh quảng cáo, cần có quy tắc cho ảnh quảng cáo)

o Không sử dụng ảnh động cho các icon.

Media

3. Quy tắc HTML

Cấu trúc

Các trang sẽ có 1 cấu trúc bắt buộc sau (kể cả đặt tên)

<div id=”wrapper”>

<div id=”header”>

<h1><a href=”/”>Website name</a></h1>

<!– Không dùng <img />, mà sử dụng image replacement –>

</div>

<div id=”main-nav”>

<ul>

<li>….</li>

</ul>

</div>

<div id=”body”>

<div id=”left-col”>….</div>

<div id=”right-col”>….</div>

<div id=”content”>….</div>

</div>

<div id=”footer”>

<div id=”copyright”>…</div>

<address>(Company information)</address>

….

</div>

</div>

Các module chính (là nội dung chính của trang) sẽ có cấu trúc bắt buộc sau (trừ header và footer)

<div id=”ModuleName” class=”box primary”>

<h1><a href=”/”>Module header</a></h1>

<div class=”box-content”>

</div>

</div>

Các module phụ sẽ có cấu trúc bắt buộc sau (trừ header và footer)

<div id=”ModuleName” class=”box”>

<h3><a href=”/”>Module header</a></h3> <!– Có thể có hoặc không –>

<div class=”box-content”>

</div>

</div>

Markup

Đoạn văn

<p>This is a paragraph</p>

Đoạn trích dẫn

<blockquote>Tôi nói đồng bào nghe rõ không</blockquote>

Chữ đậm

<strong>chữ đậm</strong>

Chữ in nghiêng

<em>chữ in nghiêng</em>

Chữ gạch chân

<ins>chữ gạch chân</ins>

Chữ gạch ngang

<del>chữ gạch ngang</del>

Đặt trong ngoặc kép

<q>Chợ Điện Tử</q>

Input caption

<label for=”input-id”>Username</label>

<input id=”input-id” type=”text” value=”username” />

Table header

<th>Table header</th>

Message

<span class=”msg-error”>This is an error message</span>

<span class=”msg-info”>This is an info message </span>

<span class=”msg-warning”>This is an message </span>

<span class=”msg-success”>This is an success message </span>

Các list dạng title-description

<dl>

<dt>This is an title</dt>

<dd>This is a description for “This is an title”</dd>

<dt>This is another title</dt>

<dd>This is a description for “This is another title”</dd>

</dl>

Quy tắc chung

• Phải đóng tất cả các thẻ <br /> <input/> <img /> <hr />

• Phải dùng thuộc tính alt với <img />

• Nên đặt width

• Phải dùng title với <a></a>

• Phải dùng type với <input />

• Không dùng inline script, inline style

• Trong thẻ <a> chỉ được đặt các thẻ <span><em><strong><ins><del> bên trong

• Không được đặt các thẻ khác trong <span><em><strong><ins><del>

• Sử dụng HTML URL Encode với tất cả URL

• Sử dụng đường dẫn tuyệt đối với tất cả URL

Validate : http://validator.w3.org/

Quy tắc CSS

• Không dùng float với các thẻ <span><em><strong><ins><del> trừ khi đặt trong thẻ <a>

• Tránh tất cả các giải pháp IE Hack

• Không dùng CSS Expression (trừ trường hợp dùng PNG Transparent)

• Không sử dụng CSS reset

• Giữ nguyên margin nguyên thủy của các thẻ, trừ trường hợp bắt buộc.

• Dùng CSS Shorthand với list-style, background, border, margin, padding, font

Về vdhungbg
Tin tuc cap nhat - moi luc - moi noi

Gửi phản hồi

Please log in using one of these methods to post your comment:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s

%d bloggers like this: