Kích thước thiết kế web

Đây là một trong những vấn đề chính của tôi những ngày này. Tôi đang sử dụng 15 "Retina Macbook Pro. Khi tôi thiết kế trang web bằng Photoshop, tôi thường sử dụng các cài đặt sau,

• width = 2560, để dễ dàng xem trên màn hình lớn; tuy nhiên tôi giữ tất cả văn bản trong lưới nội dung 12 cột (2000px)
• độ phân giải > 300

Vấn đề là khi tôi xem trang web trong trình duyệt web của mình trên màn hình 1080p thì nó trông rất lớn. Trong Photoshop trên Macbook Pro của tôi tuy nhiên nó trông bình thường.

Tôi không hiểu lý thuyết đằng sau này. Các thực tiễn tốt nhất để đưa trang web của bạn mở rộng theo các độ phân giải khác nhau là gì?

Điều gì thực sự xảy ra với trang web khi bạn thiết kế web đáp ứng? Tôi nên sử dụng cỡ chữ nào trong photoshop để chúng được chia tỷ lệ đúng?

Tôi sẽ bình luận một chút về các bước của bạn trước khi cố gắng trả lời ngắn gọn.

Khi tôi thiết kế trang web bằng Photoshop

Thiết kế không giống như "tạo ra một bức tranh". Thiết kế là một quá trình mà bạn biết quá trình đó là gì. Làm một "mockup" chỉ là một phần của quy trình thiết kế.

Tôi thường sử dụng các cài đặt sau,
width = 2560, để dễ xem trên màn hình lớn; tuy nhiên tôi giữ tất cả văn bản trong lưới nội dung 12 cột (2000px)

Bạn đang giả sử rằng pixel là đơn vị chính xác. Nó không phải, mà là một điểm khởi đầu.

độ phân giải> 300

PPI không có gì để làm với webdesign. Nhưng khi bạn đang sử dụng Photoshop làm điểm bắt đầu, hãy đặt ppi của bạn thành 72 hoặc 96.

Hướng dẫn cơ bản

Tôi không hiểu lý thuyết đằng sau này. Các thực tiễn tốt nhất để đưa trang web của bạn mở rộng theo các độ phân giải khác nhau là gì?

Tôi sẽ tách "thực hành tốt nhất" khỏi "thực hành cơ bản"

Lý thuyết cơ bản là thiết kế web không dựa trên bitmap, mà dựa trên tỷ lệ. Ví dụ:

Sử dụng hình ảnh của bạn (nghĩ tệp jpg) với bất kỳ kích thước pixel nào bạn chọn.

• Một quy trình tỷ lệ KHÔNG nói: đây là một bức ảnh lớn về XXpixels.

• Nó nói "Điều này có nghĩa là rộng như màn hình của bạn".

Đây là mẹo của tôi về một bài đăng về cách trình bày một mockup: Làm thế nào để bạn trình bày các khung và thiết kế cho trang web dài một trang?

Nếu bạn sử dụng mã đó, hình ảnh sẽ được ghép lại để phù hợp với bất kỳ kích thước màn hình hiện đại nào.

Đó là ý tưởng cơ bản đầu tiên. Từ đó bạn bắt đầu suy nghĩ làm thế nào một trang web sẽ trông như thế nào trong một thiết bị vật lý. Chủ yếu:

• Một màn hình máy tính để bàn lớn

• Máy tính bảng

• Cái điện thoại

Nhưng điều này phải được mã hóa cụ thể hơn trong bảng định kiểu.

Bạn có nhận thấy tôi chưa đề cập đến bất kỳ kích thước pixel nào không?

Vấn đề võng mạc

Một vấn đề đặc biệt là màn hình mật độ cao.

Nếu bạn nghĩ rằng bạn có thể thiết kế một trang web bằng một màn hình lớn và thông tin tương tự có thể được sử dụng như trên một chiếc điện thoại nhỏ ... Không. Không có vấn đề gì nếu nó có cùng 1920x1080 pixel với màn hình 24 inch của bạn.

Một lần nữa, bạn nghĩ về nó như một chiếc điện thoại hoặc một màn hình lớn, không phải là pixel.

"Võng mạc" là trường hợp đặc biệt khi bạn cung cấp hình ảnh thay thế để được xem sắc nét hơn so với màn hình bình thường.

Trình duyệt đang "khai báo" kích thước pixel bình thường cho điện thoại, ví dụ 480px, nhưng đồng thời "thì thầm" với trang web "Này, nhưng hãy gửi cho tôi những hình ảnh có độ phân giải cao mà bạn có vì tôi có thể hiển thị chúng rõ nét hơn" bạn có thể nhận được một bức ảnh lớn gấp 2 hoặc 3 lần.

Nhân tiện, bạn đang bắt đầu với độ phân giải màn hình võng mạc này, điều này không phải lúc nào cũng đúng.

Một số lời khuyên:

• Hãy thử với độ phân giải chuẩn hơn, chẳng hạn như chiều rộng 1920px nhưng chỉ là điểm bắt đầu.

• Sử dụng mã tôi đã cung cấp cho bạn trong liên kết để xem trước hình ảnh của bạn trên các màn hình khác nhau.

• Cắt một lỗ trên một tờ giấy có cùng kích thước màn hình máy tính bảng và một lỗ khác có cùng kích thước của điện thoại và tưởng tượng nội dung ở đó. Làm cho sự thích nghi cần thiết.

Các thực hành tốt nhất

• Hãy suy nghĩ về tỷ lệ. <= (Các thực hành cơ bản ở đây)

• Bắt đầu khám phá những truy vấn truyền thông là gì. <= (Các tiêu chuẩn thực hành ở đây)

• Khám phá việc sử dụng một khung. <= (Một số thực tiễn phổ biến ở đây)

• Nghiên cứu sâu về HTML và CSS, thiết kế UX, độ phân giải, v.v <= (Các thực tiễn tốt nhất có tại đây)

Điểm ảnh không có 'kích thước' tiêu chuẩn được liên kết với chúng. Vì vậy, hình ảnh rộng 2.000 pixel trên màn hình Retina (ở mức 2880 pixel x 1800 pixel), bằng khoảng 2/3 chiều rộng của màn hình. Tuy nhiên, hình ảnh tương tự trên màn hình 1080p (1920 pixel x 1080 pixel) rộng hơn kích thước màn hình.