Linh hoạt với Cố định. Bạn sẽ chọn cái nào? Tại sao cái này mà không phải cái kia. Bạn sẽ không kiếm được câu hỏi trong phần này. Điều tôi muốn hướng tới với bài viết này là để tìm hiểu làm thế nào nguyên tắc của thiết kế lưới có thể áp dụng cho những trang web linh hoạt.

• Tư tưởng Bauhaus và xu hướng thiết kế Web
• Những nguyên tắc thiết kế bị lãng quên.

Hãy bắt đầu bằng cách xem lại ngắn ngọn về sự Cố định và Linh hoạt của chiều ngang.

Chúng đều có những điểm mạnh riêng

Cố định chiều ngang của thiết kế là tốt, sẽ dễ dàng hơn để làm việc. Người thiết kế có thể quản lý được các số đo, và qua đó có nội dung dễ đọc (trừ trường hợp người dùng tăng hoặc giảm kích thước chữ)

Chiều ngang của thiết kế linh hoạt, và co giãn theo màn hình người sử dụng và theo kích thước cửa sổ trình duyệt. Bởi vậy sẽ có ít đi khoản trống, chữ căn với các cạnh được cố định.

Dù thế nào thì cả hai đều có mặt không tốt như việc giao diện cố định thì khó khăn khi co giãn còn giao diện linh hoạt có thể nhìn rộng và ngắn. Nhưng bài viết này không nói về mặt xấu tốt, và nó thật sự không phải điều để thảo luận, chúng ta có thể bàn về điều này ở dịp khác.

Lưới linh hoạt

Như đã thảo luận ở những phần trước. Hệ thống lưới làm việc tốt hơn với các số đo cố định – kích thước của phương tiện truyền thông, cỡ chữ và cả kích thước lưới cố định. Tất cả đều cố định. Vậy nên thách thức về lý thuyết xảy ra với thiết kế Web.

Tất cả người xem đều có thể quyết định kích thước phương tiện truyền thông họ sử dụng, họ có thể thay đổi kích thước chữ, và nhiều hơn thế, những điều mà người thiết kế không nghĩ ra trước đó. Những người thiết kế phải thích nghi với điều này.

Tôi đã dành thời gian nhiều tuần để suy nghĩ về sự linh hoạt của chiều rộng trong bài viết này. Tôi có thể thấy thành tích của cả hai, nhưng tôi cố gắng dùng các nền tảng hệ thống lưới cơ bản nhất. Làm sao để lý thuyết lưới chuyển qua thiết kế linh hoạt? Và tôi nghĩ câu trả lời là khá tốt.

Áp dụng hệ thống lưới

Hệ thống lưới lý tưởng tốt hơn nên được thiết kế xung quanh kích thước chữ. Độ rộng của các cột và do đó các số đo nên được xây dựng giống như vậy để tối đa hóa mức độ dễ đọc.. Tất cả đều tốt nếu các số đo cố định, nhưng điều gì nếu chúng có thể thay đổi. Điều đó có nghĩa gì?

1. Người dùng có thể thay đổi kích thước phông chữ

2. Người dùng có thể thay đổi kích thước trình duyệt

3. Người dùng có thể thay đổi độ phân giải của màn hình

Tất nhiên người dùng có thể thực hiện các điều đó với mọi thiết kế, cố định hay không cố định, nhưng chìa khóa cho hệ thống lưới linh hoạt là, hệ thống lưới phải thích nghi được những thay đổi đó. Sau một lúc suy nghĩ tôi cho rằng chìa khóa quan trọng của việc áp dụng hệ thống lưới là:

1. Các yếu tố của lưới thích nghi được với sự thay đổi của người dùng, và

2. Lưới phải giữ lại tỉ lệ ban đầu của nó.

Tôi chưa bao giờ hài lòng với mô tả về hệ thống lưới linh hoạt – sự linh hoạt, khả năng co giãn. Điều tôi cố gắng khám phá với Áp dụng hệ thống lưới hay Áp dụng giao diện là quá trình thích ứng của hệ thống lưới với những lựa chọn của người dùng.

Một lần nữa đó là câu hỏi về tỉ lệ.

Trong phần trước tôi đã nói về tỉ lệ, cả hợp lý và không hợp lý trong thiết kế cấu trúc. Nhưng nếu ai chưa đọc hoặc đã quên thì hãy nói tổng quát một chút về nó:

Hệ thống lưới được xây dựng trên các tỉ lệ. Đơn giản tỉ lệ 1:3 hay 1:2 là tỉ lệ hợp lý. Những tỉ lệ như tỉ lệ vàng 1:1.618 là tỉ lệ bất hợp lý.

Tỉ lệ là đơn vị để hệ thống lưới áp dụng. Chúng có thể là một tỉ lệ của bất kỳ thiết kế nào.

Bây giờ hãy thực hành với hệ thống lưới.

Nếu bạn đã theo dõi những phần của bài này, chắc bạn biết rằng tôi thích bắt đầu một cách đơn giản. Tiếp theo những phần trước, tôi đã viết về tỉ lệ vàng. Tôi sẽ tiếp tục với nó và xây dựng hệ thống lưới bằng cách sử dụng tỉ lệ vàng: 1:1,618

Chúng ta sẽ xây dựng lưới với 2 cột đơn giản, chúng được chia bởi tỉ lệ vàng.

Lấy số đúng

Để hệ thống lưới được áp dụng, chúng ta phải sử dụng những con số có thể thay đổi như 100% hay Ems. Một Em (đọc “m”) là một đơn vị đo của typographic – xem thêm tại wiki. Chúng ta cũng sử dụng % với em

Để có chiều ngang của cột tôi chuyển tỉ lệ ra %, nó sẽ cho ta 61,8% của cột chính và 38,2% của cột bên phải.

Xây dựng hệ thống lưới trong CSS

Trước khi chuyển hệ thống lưới vào trong css, thì tôi muốn nói rằng những hướng dẫn về hệ thống lưới không phải là về Web tiêu chuẩn, XHTML. CSS chỉ là công cụ để tôi nhận biết thiết kế của mình. Bạn có thể sử dụng Table nếu muốn (nhưng sẽ sai đấy).

Xin làm phiền bạn bằng ví dụ:

Đây là Css, bao gồm cả những thứ chung chung như liên kết, typographic và body để áp dụng cấu trúc XHTML cơ bản.

body {
margin: 0 auto;
padding: 0;
font-family: "Lucida Grande", verdana, arial,
helvetica, sans-serif;
font-size: 62.5%;
color: #333;
background-color: #f0f0f0;
text-align: center;
}

* {
padding: 0;
margin: 0;
}

/* Make sure the table cells show the right font */
td { font-family: "Lucida Grande", verdana, arial,
helvetica, sans-serif; }

/*--------------------------------------
GLOBALS & GENERAL CASES
---------------------------------------*/

a {text-decoration: underline; padding: 1px; }
a:link { color: #03c; }
a:visited { color: #03c; }
a:hover { color: #fff; background-color: #30c;
text-decoration: none; }

/*--------------------------------------
TYPOGRAPHY
---------------------------------------*/
h1, h2, h3, h4, h5, h6 {
font-family: helvetica, arial, verdana, sans-serif;
font-weight: normal;
}

/* approx 21px*/
h1 {
font-size: 2.1em;
margin-top: 2em;
}

/* approx 16px*/
h2 {
font-size: 1.6em;
margin-bottom: 1em;
}

/* approx 14px*/
h3 {
font-size: 1.4em;
}

/* approx 12px*/
h4 {
font-size: 1.2em;
}

/* approx 11/14 */
p {
font-size: 1.1em;
line-height: 1.4em;
padding: 0;
margin-bottom: 1em;
}

Sau đó tôi thêm Css cấu trúc trang

Cột được gói (wrapped) với một container div (gọi là ‘container’), được xác định 90% độ rộng, và độ rộng nhỏ nhất của 84 em. Có nghĩa là sao? Vâng tôi có các số này bằng cách.

Như trên đã nói, chiều rộng lý tưởng của chúng ta là 52em. Đây là chiều rộng của cột chính được xác định bởi tỉ lệ vàng, Độ rộng tổng thể của cột được kết hợp là 1,62 của 52 = 84em. Bởi vậy cột phải sẽ là 84em -52em = 32em. Chuyển qua % nó cho chúng ta tỉ lệ 62% và 38%. Đó là điều bạn sử dụng trong CSS cho mỗi cột.

Ngoài ra cũng có độ rộng tối thiểu 84 em để áp dụng chung cho container, phòng khi người dùng thay đổi kích thước chữ, mà vẫn giữ được tỉ lệ.

Đây là CSS cho các cột

#container {
width:90%;
margin:0 auto;
text-align: left;
min-width: 84em;
}

#contentframe {
margin: 2em 0 0 0;
padding: 2em 0;
width: 100%;
text-align: left;
float: left;
border: 1px solid #ccc;
background-color: #fff;
}

/* 2 column layout c1-c1-c2 */
.c1-c2 #c2 {
float: right;
width: 36.2%;
padding: 0 0 0 1em;
margin: 0;
}

.c1-c2 #c1 {
float: left;
width: 61.8%;
padding: 0 0 0 1em;
margin: 0;
}

Đó là những gì ta có. Bạn có thể thoái mái áp dụng hay thay đổi. Đây cũng là phần cuối của loạt bài Năm bước đơn giản để thiết kế hệ thống lưới của Mark Baulton, hy vọng bạn có được thêm kiến thức cho công việc thiết kế của mình.