Quy ước ngầm thiết kế web làm cho thiết kế đơn giản hơn, tạo nên sự thông dụng cho người dùng trang web.

Quy ước ngầm lập web tạo nên thiết kế web chuẩn, tập trung điều chi tiết hơn cần thiết hơn khi tạo web.

Thiết kế web hiệu quả là biết đánh giá đúng chức năng của những quy ước tạo web hiện hành tồn tại qua thời gian của các dự án thiết kế web chuẩn. Áp dụng vào thiết kế web đang mong muốn đạt hiệu quả lập trang web tối ưu.

Quy ước ngầm thiết kế web là gì?

Trong thế giới web cộng động Việt Nam hiện nay, người dùng cũng quen đến quy ước thiết kế web căn bản

Nó có thể là màu sắc thiết kế trang web

Bố cục, kiểu mẫu trang web : Thiết kế trang web bán hàng, lập web tin tức, tạo web blog,...

Font chữ trang web, giãn cách, kích cỡ font tạo web.

Quy ước thiết kế web dễ thấy nhất

Trong lĩnh vực thiết kế web hiện nay có khoảng vài trăm quy ước mà bạn có thể đã biết. Một vài ví dụ cơ bản bạn có thể thấy là:

Thiết kế web kế thừa phong cách phần mềm: Lập web hay lập trình web nó là dạng lập trình phần mềm ứng dụng cho lĩnh vực web. Cho nên các biểu tượng, ô nhập lập trang web cũng như phần mềm: biểu tượng cảnh báo, ô nhập liệu, lựa chọn,..

Liên kết trang web(link web) thường màu xanh, có gạch chân. Tuy khó đọc nhưng nhận dạng điều hướng liên kết các trang web cần thiết

Khi bạn vào trang web bên trong, cần về trang web chủ, hay nhìn lên trên và trái tìm biểu tượng logo, hay "trang chủ" để nhấn link

Khi thấy cuối trang web có dạng | link text 1 | link text 2 ,.. biết đẫy là nhóm liên kết trang web nội dung chung

Có phải luôn tuân luật thiết kế web

Không hẳn phải luôn tuân thủ quy ước ngầm thiết kế web. Nhưng đầu tiên bạn phải hiểu nắm rõ luật thiết kế web tránh sự hiểu nhầm cho người dùng.

Khi cần làm khác đi mẫu thiết kế web thông thường, bạn mất nhiều thời gian thiết kế website. Đồng nghĩa chi phí cho dự án thiết kế web tốn kém hơn.

Quy ước thiết kế web hiện nay

Ngoài quy ước lập web đơn giản như trên, bạn cần lưu ý thiết kế web hiện nay. Thiết kế web chuẩn tạo nên sự thành công, cạnh tranh quảng cáo trực tuyến

Thiết kế web chuẩn trình bày w3c

Thiết kế web chuẩn google

Thiết kế web chuẩn seo

Ứng dụng công nghệ hiện đại cho thiết kế web thương mại điện tử: quản trị trang web dễ dàng, thanh toán trực tuyến,..

Nguồn: internet

Nếu trang web của công ty bạn có thiết kế rất đẹp, rất tiện lợi và nội dung phong phú mà vẫn không thu hút được nhiều người dùng, hãy thử qua 10 “chiêu” sau đây.

Chiêu thứ nhất: “Tự tiến cử”

Rất nhiều người đã và đang có quan niệm rằng chỉ cần họ làm tốt phần nội dung và thiết kế trên trang web là người dùng web sẽ tự động “kéo đến ùn ùn”.

Nếu bạn cũng có suy nghĩ như thế này, hãy xem lại trường hợp của Susan Boyle. Mặc dù có một giọng hát “bằng vàng” nhưng Susan có thể sẽ mãi mãi chỉ là một “bà già xấu xí” 47 tuổi của một ngôi làng vô danh ở nước Anh nếu không có Internet. Trang web của các bạn cũng vậy, hãy tự mình tìm đến với người dùng và tạo cho họ một sự yên tâm khi truy cập vào website của bạn bằng những tính năng rất phổ biến như: thêm lựa chọn “bookmark” hay “favorites” (tính năng thêm trang mạng ưa thích) để người dùng lần sau có thể dễ dàng tìm đến. Chưa hết, ở cuối mỗi bài viết, hãy thêm những “nút” như “email this” (gửi bài viết này qua email) hoặc “Share this” (chia sẻ bài viết này với bạn bè) hay liên kết bằng các công cụ chia sẻ như Digg, Buzz, hoặc các dịch vụ tương tự ở Việt Nam như linkhay, tagvn, vnbookmark… (xem thêm: Hiệu ứng Digg ở Việt Nam).

Hãy tiếp tục “tấn công” người đọc bằng các bản tin tổng hợp tuần trong đó phác thảo sơ lược những tin tức nổi bật nhất đã đăng trên trang web của bạn và tự động chuyển đến hộp thư của độc giả qua dịch vụ newsletter (tạm dịch: bản tin tổng hợp định kỳ).

Hãy tham gia các cuộc bình luận trên các diễn đàn, blog hay mạng xã hội trực tuyến và trích dẫn hoặc chứng minh bằng các đường link (liên kết) đến bài viết trên trang web của bạn. Nhưng hãy nhớ đừng “gây thù chuốc oán” bằng cách spam địa chỉ website của mình trên những địa chỉ đó.

Hãy đưa địa chỉ web của bạn vào chữ ký trong email, trong tài khoản Twitter, Facebook, trong blog….hay nói ngắn gọn là tất cả các tài khoản trực tuyến của bạn. Hãy khuyến khích các nhân viên trong công ty cùng làm như thế và tạo thành một truyền thống hay văn hóa của doanh nghiệp.

Chiêu thứ 2: Đừng chờ “ông” Google

Hãy là người tiên phong! Đừng đợi Google tìm đến bạn mà hãy tự động gửi trang web của bạn đến Google và tất cả các cỗ máy tìm kiếm khác mà bạn biết và có thể.

Chiêu thứ 3: Hãy đăng những bài viết hữu dụng

Điều này nghe có vẻ thừa nhưng cũng cần phải nói thêm. Hãy cố gắng có những bài viết có nội dung hấp dẫn một cách thường xuyên để lưu giữ độc giả liên tục quay lại với bạn. Hãy có một lịch xuất bản định kỳ bằng các công cụ lên lịch, hẹn giờ xuất bản để không cần phải thức dậy thật sớm mà vẫn có bài mới cập nhật.

Hãy chú ý đến tiêu đề lớn của mỗi bài viết và tận dụng những từ khóa đơn giản nhưng ấn tượng để hấp dẫn người đọc cũng như giúp họ dễ tìm lại bạn.

Chiêu thứ 4: Cần có một vài cộng tác viên chủ lực

Hãy tìm kiếm một vài người có khả năng viết tốt các vấn đề chính yếu trên website của bạn và mời họ tiếp tục đóng góp bài viết hoặc tham gia thường xuyên.

Chiêu thứ 5: Hãy tận dụng tối đa công nghệ

Chèn thêm những slideshow vào bài viết hoặc thể thiện nội dung bằng slideshow sẽ khiến người đọc hứng thú hơn

Đừng hy vọng một trang web chỉ toàn chữ (dù là hay đến mấy) có thể hấp dẫn người đọc. Hãy sử dụng hình ảnh, video, slideshow hay các loại hình đa phương tiện khác để thể hiện nội dung.

Chiêu thứ 6: Link và tag

Hãy đặt các liên kết (link) đến các website khác trong bài viết của bạn và đề nghị những blog, website, diễn đàn khác liên kết ngược lại với bạn. Một giải pháp khác là hãy đăng ký website của bạn với các dịch vụ tổng hợp web hoặc blog.

Hãy sử dụng các “đuôi” (tag) trong tiêu đề (title), trong nội dung bài viết… để tối ưu hóa giúp các cỗ máy tìm kiếm dễ thấy bạn nhất. HitTail là một trong những dịch vụ giúp đỡ bạn xây dựng cả một “ngôi nhà” bằng từ khóa (key word). Đừng quên hình ảnh, đặt tên cho ảnh minh họa trong mỗi bài viết cũng là một dạng từ khóa rất quan trọng giúp bạn “luôn luôn nổi bật” trong mắt các cỗ máy tìm kiếm.

Chiêu thứ 7: Hãy gắn bó với độc giả

Hãy trả lời thật sớm và trực tiếp với những email hoặc bình luận của độc giả. Thậm chí một bức email thật ngắn cũng là một sự khởi động tốt cho cuộc đối thoại 2 chiều. Hãy thường xuyên, hoặc định kỳ tổ chức các cuộc thăm dò ý kiến độc giả. Theo dõi thường xuyên và phân tích các thông số thống kê cũng là một biện pháp tốt. Có thể, bạn hãy tham gia vào một vài dịch vụ đồng bộ hóa nội dung ví dụ như BlogBurst.

Chiêu thứ 8: Hãy cung cấp RSS

Feedburner và FeedDemon là 2 địa chỉ giúp bạn khởi tạo dịch vụ này khá tốt.

Chiêu thứ 9: Hãy suy nghĩ “ở tầm toàn cầu”

Internet là một môi trường có tính toàn cầu, đừng bao giờ quên điều ấy. Và mặc dù website của bạn chỉ cung cấp thông tin mang tính địa phương, bạn vẫn có thể thu hút người dùng web ở những quốc gia khác nên hãy đừng “tự nhốt” chính mình. Hãy mở rộng nội dung đến các đề tài khác, quan điểm khác và nếu website của bạn có thêm phiên bản bằng tiếng nước ngoài thì thật tốt hơn nữa.

Chiêu thứ 10: Đừng bỏ quên thế giới thực

Mặc dù website của bạn sống trong thế giới “ảo” nhưng nó không thể rời xa thế giới thực và công việc tăng lượng truy cập của bạn cũng vậy. Hãy đưa website của bạn vào các cuộc đối thoại cá nhân, hãy dùng mồm miệng, và nếu có thể, các trang quảng cáo in ấn được đặt ở một vị trí đẹp cũng mang lại hiệu quả không hề nhỏ.

Chiêu thứ…”11”: Hãy kiên nhẫn

Xây dựng một website có lượng truy cập lớn luôn luôn đòi hỏi nhiều thời gian. Hãy đặt ra các mục tiêu ngắn hạn để phấn đấu nhưng hãy nhớ rằng đây là một quá trình lâu dài và bền bỉ nên hãy kiên nhẫn ở mức tối đa.

Lương Hương - ICTNews (Theo Gadgetwise, NY Times)

Đối với một Web Designer không biết về CSS thì quả thực sẽ là một thiệt thòi rất lớn, nếu không muốn nói là kém. Vậy bài viết này sẽ trang bị cho các bạn những kiến thức cơ bản cần và đủ là thiết kế một temp cho website hoàn chỉnh.
- Việc đầu tiên các bạn cần phải quan tâm đối với CSS đó chính là sự tương thích với các trình duyệt web. Trên thế giới hiện nay có rất nhiều  trình duyệt khác nhau, nhưng có lẽ được tin dùng nhất chính là Mozila Firefox và Internet Explorer (trình duyệt của window). Vì vậy mà viết các đoạn mã CSS sao cho tất cả các trình duyệt đều hiểu được không phải là dễ, nhưng cũng không phải là quá khó như các bạn tưởng tượng.

1.Lệnh margin
Ta bắt đầu với canh lề
a.Căn lề 2 bên

     .ClassName {   
    margin:20px;
    }  

b. Căn lề dùng lệnh auto:

CODE

    .ClassName {   
    margin:20px auto;
    }  

- với lệnh trên, lề trái và phải sẽ tự động được căn giữa, còn lề trên và dưới sẽ được căn lề là 20px.

c. lệnh Margins với 3 giá trị:

CODE

    .ClassName {  
    margin:20px auto 50px;
    }  

- với lệnh này lề trên căn lề 20px, lề trái & phải sẽ được tự động căn giữa, lề dưới căn lề 50px.

 2.Lệnh Padding:

- Các lệnh căn lề với padding:

CODE

    .ClassName {  
    padding-top:10px; // căn lề trên
    padding-right:20px; // căn lề phải  
    padding-bottom:30px; // căn lề dưới
    padding-left:40px; // căn lề trái  
    }

- Để dễ dàng hơn ta có thể viết:

CODE

    .ClassName {  
    padding:10px 20px 30px 40px;
    }  
- Như vậy cấu trúc lênh sẽ là : padding : top right bottom left;

Ta thấy 2 lệnh trên đều là căn lề, vậy chúng có gì khác nhau, chúng ta sẽ nói thêm về điều này:

+ margin : khi dùng lệnh này để căn lề thì kích thước của khung nội dung của bạn sẽ được giữ nguyên.
+ padding: với việc căn lề bằng lệnh padding thì kích thước của khung nội dung sẽ bị thay đổi. Lấy ví dụ: khung nội dung của bạn có độ rộng 100px, khi dùng lệnh căn lề trái padding-left:30px; thì khung sẽ bị dịch sang phải 30px, và khi đó độ rộng của khung sẽ được cộng thêm vào là 30px, tức là 130px. Đó chính là mấu chốt khiến các bạn mới làm quen thường bị xảy ra hiện tượng xô lệch do khi dùng padding vì chúng ta padding bao nhiêu thì sẽ + thêm vào chiều rông cũ bấy nhiêu để tạo thành một chiều rộng mới.

 3.Background:

- các thuộc tính cơ bản của lệnh như bên dưới:

CODE

    .ClassName {  
    background-color: transparent; // làm trong nền trong suốt
    background-image: url('/image.jpg'); // ảnh nền  
    background-repeat: no-repeat; // thuộc tính lặp lại
    background-position: top right; // vị trí nền  
    background-attachment: scroll; // nền trượt
    }  

- ví dụ như bạn muốn tạo ảnh nền trong suốt, nằm trên cùng bên phải, không lặp lại, và di chuyển theo chuột, ta sẽ có lệnh như bên dưới:

CODE

    .ClassName {  
    background: transparent url('image.jpg') no-repeat top right scroll;
    }  
 4.Lệnh font:

CODE

    .ClassName {  
    font-variant:small-caps;
    font-weight:bold;  
    font-size:1em;
    line-height:1.4em;  
    font-family:Georgia, serif;
    }  

 5.Lệnh cho list (ul):

CODE

    ul {  
    list-style-type:decimal-leading-zero;
    list-style-position:inside;  
    list-style-image: none; // sử dụng ảnh, nếu muốn sử dụng ảnh cho list, bạn chỉ việc thay none bằng url('link ảnh')
    }  

- để đơn giản ta gộp các thuộc tính chung lại, như bên dưới:

CODE

    ul {  
    list-style:decimal-leading-zero inside url('image.jpg');
    }  

 6.lệnh Border (tạo đừơng viền - đường bao)

CODE

    .ClassName {  
    border-width:2px; // độ rộng đường bao
    border-style: solid; // kiểu  
    border-color: #4096EE; // màu
    }  

- đơn giản có thể viết

CODE

    .ClassName {  
    border: 2px solid #4096EE; // trị màu : #4069EE có thể thay bằng rgb(64, 150, 238)
    }  

 7.Outline (tương tự lệnh border)

- ví dụ bên dưới là tạo đương viền cho ảnh

CODE

    img {  
    outline-width: 5px;
    outline-style:solid;  
    outline-color: #000000;
    }  
- đơn giản có thể viết

CODE

    img {  
    border: outline: 5px solid #000000;
    }  

 8.Lệnh màu :

- có thể sử dụng 1 trong các cách dưới đều được

CODE

    .ClassName {  
    color: #FFFFFF;
    }  
    .ClassName {
    color: #FFF;  
    }
    .ClassName {  
    color: #fff;
    }  
   .ClassName {
 color: rgb(255, 255, 255);  
   }

9. Cross browser transparency:

- thiết lập cho từng trình duyệt

CODE

    .ClassName {  
    filter:alpha(opacity=50); // trình duyệt IE
    -moz-opacity:0.5; // trình duyệt mozilla  
    -khtml-opacity: 0.5; // trình duyệt Safari
    opacity: 0.5; // hầu hết các trình duyệt, nhưng IE thì không.  
    }
10. First-child selectors

- ví dụ bên dưới tạo màu chữ riêng cho lớp đầu tiên của footer (nằm trong thẻ <em>)

CODE

    .footer em:first-child {  
    color:#ccc;
    }  

12. First-letter (kí tự đầu tiên)

p:first-letter{
color:#ff0000;
font-size:15px;
}[/CODE]

- ví dụ ta có code sau :

<p>This is an example usage of the first-letter property</p>

- kết quả :

This is an example usage of the first-letter property

13. First-line

- thiết lập thuộn tính cho dòng đầu tiên

CODE

    #p:first-line {  
    color:#ff0000;
    font-weight:bold;  
    }

- ví dụ: ta có code

<p>This is an example usage of the first-line property. This is an example usage of the first-line property.</p>

- kết quả :

This is an example usage of the first-line property. This is an example usage of the first-line property.

14. Độ cao tối thiểu

CODE

    .ClassName {  
    min-height:200px;
    }  

- code trên không hỗ trợ cho IE, để hiển thị trên IE, bạn tham khảo code bên dưới:

CODE

    .ClassName{  
    min-height:200px;
    height:auto !important;  
    height:200px;
    }  

15. Thuộc tính clip (hiển thị một phần)

- ví dụ ta có code bên dưới:

CODE

    img {  
    clip:rect(50px 218px 155px 82px);
    }  

với code này, ảnh sẽ được clip phía trên 50px, bottom là 218px (tính từ trên xuống), right là 155px (tính từ trái qua), left là 82px (cũng tính từ trái qua). xem ví dụ bên dưới để rõ:

Hình gốc

Hình Đã Sửa với Clip

Bên dưới là 3 lệnh code CSS3 (lưu ý. CSS3 chỉ hỗ trợ trên Firefox, safariand, và Chrome)

16. Bo góc:

CODE

    .rounded_corner {  
    -moz-border-radius:10px;
    -webkit-border-radius:10px;  
    width:400px;
    height:100px;  
    background-color:#000;

    }
 

17. Drop shadow (tạo bóng đổ)
CODE

    .your_shadow {  
    width:400px;
    height:200px;  
    background-color:#000;
    -webkit-box-shadow: 5px 5px 2px #ccc;  
    }

18. Resize

CODE

    .resize{  
    min-width:200px;
    min-height:200px;  
    max-width:500px;
    max-height:400px;  
    resize:both;
    background-color:#ccc;  
    border:2px solid #666;
    overflow:auto;  
 }
19.dùng dấu "," để gộp chung các class khi có cùng thuộc tính:

ví dụ như bên dưới:

CODE
    h1, h2, h3, h4, h5, h6 {  
    font-family:Helvetica, Verdana, sans-serif;
    }  

Nguồn http://zensoft.vn