Làm thế nào để Thiết kế trang Web trong 960 Grid - núm vú

Một góc hữu ích để tạo ra những thách thức trong việc thiết kế trang web bắt đầu với lý do các trang web rộng 960 px. Nhưng có phải họ? Không, không phải tất cả. Nhưng có những lý do thuyết phục mạnh mẽ khiến các nhà thiết kế web đang hướng tới việc làm cho các trang có chiều rộng chuẩn là 960 px: chức năng và hình thức.

Trước tiên, rất rộng phạm vi của viewports có thể hiển thị một trang 960 px. Làm thế nào có thể cả một màn hình có kích thước đầy đủ và iPhone hiển thị một trang 960 px? Câu hỏi đó có câu trả lời gồm hai phần:

• Một trang 960 px sẽ không lấp đầy toàn bộ chiều rộng của một màn hình có kích thước đầy đủ - nhưng đó là một điều tốt. Một trang web lấp đầy toàn bộ chiều rộng của một màn hình màn hình lớn sẽ là quá khó để tiêu hóa. Các dòng văn bản sẽ quá dài để đọc. Nội dung trang sẽ bị kéo căng cho khách truy cập để hấp thụ như là một toàn bộ thống nhất.

• Thiết bị di động có nhiều điểm ảnh trên mỗi inch so với màn hình có kích thước đầy đủ. Vì vậy, ngay cả Android, iPhone và các thiết bị nhỏ khác có thể hiển thị 960 px trang.

Sự thu hút khác của việc sử dụng lưới 960 là "960" dễ chia hết. Điều đó có nghĩa là bạn có thể chia nhỏ (chia) trang của bạn thành những phần có thể quản lý - cột - để giúp thiết kế của bạn. Ví dụ: giả sử bạn thiết kế theo phương pháp ba cột, mỗi chiều rộng 320 px.

Hình vẽ chỉ cho thấy một thiết kế như vậy: lưới 960 được chia thành ba cột cùng độ rộng, sử dụng Adobe Illustrator như một công cụ thiết kế. Trong minh hoạ này, một tiêu đề (màu trắng) lấp đầy trên cùng của màn hình, và ba cột được đặt bên dưới tiêu đề.

Hoặc, lưới 960 có thể dễ dàng chia thành 8 cột (120 px rộng) hoặc 16 cột (rộng 60 px). Sự cố bất động sản này giúp nhà thiết kế dễ dàng tạo ra các tác phẩm nghệ thuật phù hợp cho quảng cáo, biểu ngữ và các nội dung khác.

Trên thực tế, nếu vấn đề kỹ thuật là vấn đề duy nhất, các nhà thiết kế web có thể có các kích thước trang web chuẩn hóa lớn hơn một chút so với 960 px và các thùng chứa vẫn có thể nằm trong các thiết bị di động. Hầu hết các viewports, bao gồm cả điện thoại di động, đều có độ rộng ít nhất 1024 px - nhưng giá trị sử dụng 960 nằm ở khả năng sử dụng "chia hết" số đó trong luồng công việc.

Điểm thiết yếu là các nhà thiết kế - sử dụng các chương trình như Adobe Illustrator, Adobe Photoshop, hoặc thậm chí là một tờ giấy biểu đồ - có thể tạo ra đến 16 cột có kích thước bằng nhau (60 px).

Và, bằng cách tạo ra thiết kế của họ lên trên lưới 16 cột, họ sẽ chuyển tác phẩm nghệ thuật sang một nhà thiết kế web, người dịch trang sang HTML và CSS bằng cách sử dụng 960 px-wide container và nhiều cột phù hợp với trong tác phẩm nghệ thuật gốc.