Kích thước tiêu chuẩn trang web: tính năng, yêu cầu và kiến nghị

phát triển công nghệ của các trang web - một quá trình rất nhiều mặt. Tuy nhiên, tất cả các khâu của nó có thể được chia thành hai phần chính - một chức năng và một vỏ bọc bên ngoài. Hoặc, như trong webmaster vừa Beg End và Front End tương ứng. Những người mua các trang web của họ trong hãng phát triển web, thường ngây thơ tin rằng nó là cần thiết để chỉ tập trung vào chức năng, và nó sẽ là quyết định đúng đắn. Nhưng điều này là đúng trong một dịp rất, rất hiếm, thường khởi sự các dự án ở giai đoạn thử nghiệm beta. Phần còn lại của thiết kế đồ họa và giao diện người dùng đơn giản chỉ có nghĩa vụ tuân thủ các tiêu chuẩn phát triển web và được thoải mái.

Nền tảng đầu tiên phải đối mặt với các nhà thiết kế giao diện, hoặc thiết kế - là chiều rộng của cách bố trí trang web. Sau khi tất cả, nó là cần thiết để vẽ giao diện cho cô ấy. Bằng trực giác có hai cách tiếp cận - một trong hai để làm cho bố trí riêng biệt cho mỗi người trong số các nghị quyết màn hình phổ biến, hoặc bạn có thể tạo ra một phiên bản của trang web cho tất cả các bản đồ. Cả hai tùy chọn sẽ là sai lầm, nhưng điều đầu tiên đầu tiên.

chiều rộng tiêu chuẩn theo pixel cho các trang web mà bạn từng cần

Trước sự phát triển của hiện tượng khối bố trí thích nghi đã được sự phát triển của một trang web với hàng ngàn điểm ảnh rộng. Con số này được chọn vì một lý do rất đơn giản - rằng các trang web đã được đặt trên bất kỳ màn hình. Và có một logic nhất định, nhưng chúng ta hãy giả định rằng một người vẫn còn ít nhất HD màn hình trên desktop. Trong trường hợp này, bố trí của bạn sẽ có vẻ dải nhỏ ở giữa màn hình, nơi mà mọi thứ được đúc trong một đống, và trên các cạnh của phi không gian khổng lồ. Bây giờ chúng ta hãy giả định rằng một người đến trang web của bạn từ một máy tính bảng với màn hình là 800 pixel chiều rộng, và được kiểm tra trong các thiết lập "Hiện trang web phiên bản đầy đủ." Trong trường hợp này, trang web của bạn cũng sẽ được hiển thị không đúng, vì chỉ đơn giản là không phù hợp với màn hình.

Từ những nhận xét, chúng ta có thể kết luận rằng có chiều rộng cố định cho việc bố trí, chúng tôi chỉ không phù hợp và bạn muốn tìm một cách khác. Hãy phân tích các ý tưởng của một bố trí riêng biệt cho mỗi chiều rộng màn hình.

Layouts cho tất cả các dịp

Nếu bạn đã chọn như một chiến lược để tạo bố trí cho tất cả các kích cỡ màn hình có sẵn trên thị trường, sau đó trang web của bạn sẽ là độc đáo nhất trên mạng Internet. Sau khi tất cả, hôm nay nó chỉ đơn giản là không thể để trang trải toàn bộ phạm vi của các thiết bị trong một nỗ lực để làm cho một thiết lập chính xác cho mỗi tùy chọn. Nhưng nếu bạn tập trung vào các thiết bị có độ phân giải màn hình và màn hình phổ biến nhất, ý tưởng là tốt. chỉ có nhược điểm của nó - các chi phí tài chính. Sau khi tất cả, khi thiết kế giao diện được thiết kế riêng và coder sẽ bị buộc phải 5 hoặc 6 lần để thực hiện công việc tương tự, dự án sẽ có giá không tương xứng ban đầu trồng với giá ngân sách.

Do đó khoe khoang một sự phong phú của phiên bản dành cho màn hình khác nhau có thể ngoại trừ các trang web-odnostranichniki mà mục đích - để bán một sản phẩm và hãy chắc chắn để làm điều đó tốt. Vâng, nếu bạn không phải là một trong những Landing, một trang web đa, thật là hợp lý hơn nữa.

Các kích thước phổ biến nhất của các trang web

Một sự thỏa hiệp giữa hai thái cực là một bản vẽ bố trí cho ba hoặc bốn kích cỡ màn hình. Trong số đó, người ta phải có một bố trí cho các thiết bị di động. Phần còn lại cần phải được điều chỉnh cho màn hình máy tính để bàn, nhỏ vừa và lớn. Làm thế nào để lựa chọn độ rộng của trang web? Dưới đây chúng tôi trình bày HotLog thống kê dịch vụ cho tháng 5 năm 2017, trong đó cho thấy chúng tôi phân phối của sự phổ biến của độ phân giải màn hình khác nhau của thiết bị, cũng như sự năng động của sự thay đổi trong chỉ số này.

Từ bảng trên ta có thể học hỏi làm thế nào để xác định kích thước của trang web mà bạn muốn sử dụng. Bên cạnh đó, có thể kết luận rằng các định dạng phổ biến nhất hiện nay là màn hình trong 1366 x 768 điểm. Những màn hình được cài đặt trong một máy tính xách tay ngân sách, vì vậy sự nổi tiếng của họ là tự nhiên. Tiếp theo phổ biến nhất là một HD màn hình Full, đó là tiêu chuẩn vàng cho phim ảnh, trò chơi, và, do đó, để tạo ra bố cục trang web. Hơn nữa trong bảng chúng ta thấy cho phép các thiết bị di động 360 x 640 pixel, cũng như hiện thân khác nhau của máy tính để bàn và màn hình điện thoại di động sau đó.

bố trí thiết kế

Vì vậy, sau khi phân tích số liệu thống kê, chúng ta có thể kết luận rằng độ rộng tối ưu của trang web có 4 biến thể:

1. Phiên bản máy tính xách tay với 1366 pixel rộng.
2. Full HD-phiên bản.
3. 800 pixel trong cách bố trí kích thước chiều rộng để hiển thị trên màn hình máy tính để bàn nhỏ.
4. phiên bản di động của trang web - 360 pixel ở chiều rộng.

Giả sử chúng ta quyết định những gì bạn muốn sử dụng kích thước của mã nguồn được tạo ra cho trang web. Tuy nhiên, một dự án như vậy vẫn sẽ là tốn kém. Vì vậy, xem xét nhiều lựa chọn, thời gian này mà không có việc sử dụng một chiều rộng cố định.

Thực hiện một cách bố trí linh hoạt

Có một phương pháp thay thế mà chúng ta chỉ cần điều chỉnh cho kích thước tối thiểu của màn hình, và kích thước tuyệt đối của trang web sẽ được yêu cầu phần trăm. Trong trường hợp này, các yếu tố giao diện như menu, các nút và logo, có thể được xác định một cách tuyệt đối, tập trung vào kích thước tối thiểu của chiều rộng của màn hình bằng pixel. Khối với nội dung, ngược lại, sẽ được kéo dài theo quy định phần trăm của chiều rộng của khu vực màn hình. Cách tiếp cận này cho phép không phát hiện kích thước của trang web như khó khăn cho các nhà thiết kế và các tài năng để đánh bại sắc thái này.

tỷ lệ vàng là gì, và làm thế nào để sử dụng các trang web để bố trí không?

Ngay cả trong thời kỳ Phục hưng nhiều kiến trúc sư và các nghệ sĩ đã cố gắng để cung cấp cho những sáng tạo của mình hình dáng hoàn hảo và tỷ lệ. Đối với câu trả lời cho câu hỏi về ý nghĩa của tỷ lệ như vậy, họ quay sang nữ hoàng của tất cả các ngành khoa học - toán học.

Kể từ những ngày xa xưa được phát minh bởi tỷ lệ mà mắt chúng ta nhận thức như là tự nhiên nhất và tao nhã, bởi vì nó là phổ biến trong tự nhiên. Khám phá ra công thức của tỷ lệ này là một kiến trúc sư Hy Lạp tài năng tên là Phidias. Người ta tính toán rằng nếu hầu hết các tỷ lệ liên quan đến thấp như một toàn thể cung cấp một lớn hơn, sau đó tỷ lệ này sẽ xem xét tốt. Nhưng trong trường hợp này, nếu bạn muốn chia đối xứng đối tượng. Tỷ lệ này sau đó trở nên được gọi là tỷ lệ vàng, điều đó vẫn không đánh giá quá cao tầm quan trọng của nó đối với lịch sử văn hóa thế giới.

Chúng ta hãy quay trở lại thiết kế web

Nó rất đơn giản - sử dụng tỷ lệ vàng, bạn có thể thiết kế các trang đó sẽ làm hài lòng nhất đối với mắt người. Tính theo công thức của phần vàng, chúng ta thấy số lượng hợp lý 1,6180339887 ..., nhưng để thuận tiện bạn có thể sử dụng các giá trị làm tròn là 1,62. Điều này sẽ có nghĩa là khối trang của chúng tôi nên 62% và 38% của toàn bộ, không có vấn đề gì kích thước tạo ra mã nguồn cho các trang web mà bạn đang sử dụng. Ví dụ, bạn có thể nhìn thấy trên các chương trình sau đây:

Sử dụng công nghệ mới

các trang web hiện đại bố trí công nghệ cho phép bạn truyền đạt một cách chính xác ý tưởng của nhà thiết kế và các nhà thiết kế, vì vậy bây giờ bạn có thể đủ khả năng thực hiện những ý tưởng táo bạo hơn so với lúc bình minh của công nghệ Internet. Không còn cần nhiều đến lúng túng hơn những gì cần được kích thước của một trang web. Với sự ra đời của những thứ như khối bố trí thích nghi, nạp năng động của nội dung và phông chữ, phát triển trang web đã trở thành thú vị hơn nhiều lần. Sau khi tất cả, các công nghệ này có những hạn chế ít hơn, mặc dù họ đang có. Nhưng như bạn biết, nhưng không giới hạn, thì sẽ không có nghệ thuật. Chúng tôi khuyên bạn sử dụng một cách tiếp cận thực sự sáng tạo để thiết kế - phần vàng. Với nó, bạn sẽ có thể lấp đầy một cách hiệu quả và độc đáo không gian làm việc, không có vấn đề gì kích thước hoặc trang web mà bạn hỏi trong mẫu của bạn.

Làm thế nào để tăng vị trí không gian làm việc

Rất có thể là bạn sẽ không có đủ không gian để chứa tất cả các yếu tố giao diện trong cách bố trí của kích thước nhỏ. Trong trường hợp này, bạn sẽ phải bắt đầu suy nghĩ một cách sáng tạo, hoặc thậm chí sáng tạo nhiều hơn bạn đã làm trước đó.

giải phóng dung lượng tối đa trên các trang web càng tốt, ẩn điều hướng trong menu pop-up. Cách tiếp cận này là hợp lý để sử dụng không chỉ điện thoại di động, mà còn trên desktop. Xét cho cùng, người dùng không cần tất cả thời gian để nhìn vào những gì có tiêu đề trên trang web của bạn - nó đã đến cho nội dung. Một người sử dụng mong muốn được tôn trọng.

Một ví dụ về một cách tốt để ẩn menu là cách bố trí sau (ảnh dưới).

Ở phía trên góc của màu đỏ khu vực, bạn có thể thấy một chéo, bấm vào menu ẩn trong một biểu tượng nhỏ, để lại cho người dùng một mình với nội dung trang web.

Tuy nhiên, điều này là không bắt buộc, bạn có thể để điều hướng luôn luôn là trong tầm nhìn. Nhưng bạn có thể biến nó thành một yếu tố thiết kế đẹp, không chỉ là một danh sách các liên kết trên các trang web phổ biến. Sử dụng các biểu tượng trực quan, thêm vào văn bản liên kết hoặc thậm chí thay thế chúng. Nó cũng sẽ cho phép trang web của bạn để sử dụng hiệu quả hơn không gian màn hình trên thiết bị của bạn.

Best Website - adaptive

Nếu bạn không biết cái nào để chọn một bố cục cho trang web, tất cả chỉ dành riêng cho bạn. Để tiết kiệm chi phí phát triển và đồng thời không bị mất khán giả vì bố trí kém đối với một số thiết bị, sử dụng thiết kế web đáp ứng.

Thích nghi được gọi là một thiết kế trông trên các thiết bị khác nhau tốt như nhau. Cách tiếp cận này sẽ cho phép trang web của bạn phải rõ ràng và dễ dàng ngay cả đối với một máy tính xách tay, ít nhất là trên máy tính bảng, ngay cả trên một chiếc smartphone. Nó đạt được hiệu ứng này là do sự thay đổi tự động vào vùng làm việc của độ rộng màn hình. Sử dụng style sheets thích nghi cho trang web, bạn đang dùng các quyết định đúng đắn nhất.

Điều gì phân biệt thiết kế thích nghi của sự sẵn có của các phiên bản khác nhau của trang web của bạn

Thiết kế đáp ứng là khác nhau từ các trang web điện thoại di động để trong trường hợp sau, người dùng nhận được một html-code, đó là khác biệt so với máy tính để bàn. Đây là một bất lợi từ quan điểm của việc tối ưu hóa hiệu suất của máy chủ, cũng như tối ưu hóa công cụ tìm kiếm. Bên cạnh đó, càng khó khăn để xem xét số liệu thống kê theo các phiên bản khác nhau của trang web. Một cách tiếp cận thích ứng là không có sự thiếu sót.

Khả năng thích ứng cho các thiết bị khác nhau được thực hiện do độ rộng bố trí hoặc phần trăm qua khối vận chuyển trong không gian có sẵn (trong mặt phẳng thẳng đứng thay vì điện thoại thông minh ngang trên một máy tính để bàn), hoặc bố trí cá nhân bằng cách tạo ra các màn hình khác nhau.

Bạn có thể tìm hiểu thêm về thiết kế đáp ứng và phát triển, bạn có thể từ sách vở.