Công nghệ phát triển website là một quá trình rất nhiều mặt. Tuy nhiên, tất cả các giai đoạn của nó có thể được chia thành hai thành phần chính - chức năng và lớp vỏ bên ngoài. Hoặc, theo thông lệ giữa các quản trị viên web, tương ứng là back-end và front-end. Những người đặt hàng trang web của họ từ các studio phát triển web thường ngây thơ tin rằng chỉ nên tập trung vào chức năng và đây sẽ là quyết định đúng đắn. Nhưng điều này đúng trong một số rất rất hiếm trường hợp, thường là đối với các dự án khởi động ở giai đoạn thử nghiệm beta. Nếu không, thiết kế đồ họa và giao diện người dùng chỉ được yêu cầu tuân thủ các tiêu chuẩn phát triển web và thuận tiện.
Nền tảng đầu tiên mà người thiết kế giao diện, hoặc người thiết kế, phải đối mặt là chiều rộng của bố cục trang web. Rốt cuộc, đối với nó, nó là cần thiết để vẽ các giao diện. Hoàn toàn trực quan, hai cách tiếp cận phát sinh - hoặc tạo bố cục riêng biệt cho từng độ phân giải màn hình phổ biến hoặc tạo một phiên bản của trang web cho tất cả các màn hình. Và cả hai lựa chọn sẽ sai, nhưng điều đầu tiên trước tiên.
Chiều rộng trang web tiêu chuẩn tính bằng pixelcho Runet
Trước sự phát triển của bố cục thích ứng, việc phát triển một trang web có chiều rộng một nghìn pixel là một hiện tượng hàng loạt. Hình này được chọn vì một lý do đơn giản - để trang web phù hợp với bất kỳ màn hình nào. Và điều này có logic riêng của nó, nhưng hãy giả sử rằng một người vẫn có ít nhất một màn hình HD trên máy tính để bàn. Trong trường hợp này, bố cục của bạn sẽ giống như một dải nhỏ ở giữa màn hình, nơi mọi thứ bị dính chặt với nhau trong một đống và ở hai bên là một khoảng trống khổng lồ chưa được sử dụng. Bây giờ, giả sử rằng một người truy cập trang web của bạn trên máy tính bảng có màn hình rộng 800px và "Hiển thị trang web đầy đủ" được chọn trong cài đặt. Trong trường hợp này, trang web của bạn cũng sẽ được hiển thị không chính xác, vì nó không vừa với màn hình.
Từ những cân nhắc này, chúng tôi có thể kết luận rằng chiều rộng cố định cho bố cục chắc chắn không phù hợp với chúng tôi và chúng tôi cần tìm cách khác. Hãy phân tích ý tưởng về bố cục riêng biệt cho từng chiều rộng màn hình.
Bố cục cho tất cả các dịp
Nếu bạn đã chọn làm chiến lược tạo bố cục cho tất cả các kích thước màn hình trên thị trường, thì trang web của bạn sẽ là duy nhất trên toàn bộ Internet. Xét cho cùng, ngày nay không thể bao gồm toàn bộ phạm vi thiết bị, cố gắng tinh chỉnh cho từng tùy chọn. Nhưng nếu bạn tập trung vào độ phân giải phổ biến nhất của màn hình và màn hình thiết bị, thì ý tưởng không tồi. Bất lợi duy nhất của nó là chi phí tài chính. Rốt cuộc, khi một nhà thiết kế giao diện, một nhà thiết kế và một người viết mã bị buộc phải thực hiện cùng một công việc 5 hoặc 6 lần, thì dự án sẽ có giácao hơn một cách không cân đối so với giá dự trù ban đầu.
Vì vậy, chỉ những trang một trang mới có thể tự hào về vô số phiên bản dành cho các màn hình khác nhau, mục đích là bán một sản phẩm và đảm bảo làm tốt điều đó. Chà, nếu bạn không có một trong những trang này mà là một trang web nhiều trang, thì bạn nên suy nghĩ thêm.
Kích thước trang web phổ biến nhất
Một sự thỏa hiệp giữa hai thái cực là hiển thị bố cục cho ba hoặc bốn kích thước màn hình. Trong số đó, phải kể đến một bố cục dành cho thiết bị di động. Phần còn lại nên được điều chỉnh cho phù hợp với màn hình máy tính để bàn nhỏ, vừa và lớn. Làm thế nào để chọn chiều rộng của trang web? Dưới đây, chúng tôi trình bày thống kê dịch vụ HotLog cho tháng 5 năm 2017, cho chúng ta thấy sự phân bổ mức độ phổ biến của các độ phân giải màn hình thiết bị khác nhau, cũng như động thái của chỉ số này.
Từ bảng, bạn có thể tìm ra cách xác định kích thước của trang web bạn muốn sử dụng. Ngoài ra, chúng ta có thể kết luận rằng định dạng phổ biến nhất hiện nay là màn hình 1366 x 768 pixel. Màn hình như vậy được cài đặt trong máy tính xách tay giá rẻ, vì vậy sự phổ biến của chúng là đương nhiên. Phổ biến nhất tiếp theo là màn hình Full HD, đây là tiêu chuẩn vàng cho video, trò chơi và do đó để tạo bố cục trang web. Hơn nữa trong bảng, chúng ta thấy độ phân giải của thiết bị di động 360 x 640 pixel, cũng như các tùy chọn khác nhau cho màn hình máy tính để bàn và di động sau nó.
Thiết kế bố cục
Vì vậySau khi phân tích số liệu thống kê, chúng tôi có thể kết luận rằng chiều rộng trang web tối ưu có 4 biến thể:
- Phiên bản dành cho máy tính xách tay với chiều rộng 1366px.
- Phiên bản Full HD.
- Bố cục rộng 800px để hiển thị trên màn hình máy tính để bàn nhỏ.
- Phiên bản di động của trang web - rộng 360 pixel.
Giả sử chúng tôi đã quyết định sử dụng kích thước nào cho nguồn được tạo cho trang web. Nhưng một dự án như vậy vẫn sẽ tốn kém. Vì vậy, chúng ta hãy xem xét các tùy chọn khác, lần này mà không sử dụng chiều rộng cố định.
Làm cho bố cục linh hoạt
Có một cách tiếp cận thay thế, khi nó chỉ có giá trị thích ứng với kích thước màn hình tối thiểu và bản thân kích thước trang web sẽ được đặt theo tỷ lệ phần trăm. Đồng thời, các thành phần giao diện như menu, nút và logo có thể được đặt ở giá trị tuyệt đối, tập trung vào kích thước tối thiểu của chiều rộng màn hình tính bằng pixel. Ngược lại, các khối có nội dung sẽ được kéo dài theo tỷ lệ phần trăm chiều rộng của vùng màn hình được chỉ định. Cách tiếp cận này cho phép bạn ngừng coi kích thước của các trang web là giới hạn đối với nhà thiết kế và khéo léo đánh bại sắc thái này.
Tỷ lệ vàng là gì và nó có thể được áp dụng như thế nào cho bố cục trang web?
Ngay cả trong thời kỳ Phục hưng, nhiều kiến trúc sư và nghệ sĩ đã cố gắng tạo cho các tác phẩm của họ hình dạng và tỷ lệ hoàn hảo. Để có câu trả lời cho các câu hỏi về giá trị của một tỷ lệ như vậy, họ đã tìm đến nữ hoàng của tất cả các ngành khoa học - toán học.
Kể từ thời cổ đại, một tỷ lệ đã được phát minh ra mà mắt chúng ta cảm nhận là tự nhiên và thanh lịch nhất,bởi vì nó có mặt ở khắp nơi trong tự nhiên. Người phát hiện ra công thức cho một tỷ lệ như vậy là một kiến trúc sư Hy Lạp cổ đại tài năng tên là Phidias. Ông đã tính toán rằng nếu phần lớn hơn của tỷ lệ có liên quan đến phần nhỏ hơn trong khi toàn bộ có liên quan đến phần lớn hơn, thì tỷ lệ như vậy sẽ đẹp nhất. Nhưng đây là trường hợp bạn muốn chia đối tượng một cách bất đối xứng. Tỷ lệ này sau đó được gọi là phần vàng, vẫn chưa đá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.
Quay lại thiết kế web
Rất đơn giản - sử dụng tỷ lệ vàng, bạn có thể thiết kế các trang sao cho đẹp mắt nhất có thể. Tính toán theo định nghĩa của công thức tỷ lệ vàng, chúng ta nhận được số vô tỉ 1, 6180339887 …, nhưng để thuận tiện, chúng ta có thể sử dụng giá trị làm tròn là 1, 62. Điều này có nghĩa là các khối trên trang của chúng ta phải là 62 % và 38% của toàn bộ, bất kể kích thước nguồn được tạo cho trang web bạn đang sử dụng là bao nhiêu. Bạn có thể xem một ví dụ trong sơ đồ này:
Sử dụng công nghệ mới
Công nghệ bố cục trang web hiện đại giúp truyền tải chính xác ý tưởng của người lập kế hoạch và nhà thiết kế, vì vậy giờ đây bạn có đủ khả năng để thực hiện những ý tưởng táo bạo hơn so với thời kỳ sơ khai của công nghệ Internet. Bạn không còn cần phải suy nghĩ nhiều về kích thước của trang web. Với sự ra đời của những thứ như bố cục thích ứng khối, tải nội dung và phông chữ động, việc phát triển trang web đã trở nên dễ chịu hơn nhiều. Rốt cuộc, những công nghệ này làít hạn chế hơn, mặc dù chúng vẫn còn đó. Nhưng như bạn biết, không có giới hạn sẽ không có nghệ thuật. Chúng tôi khuyên bạn nên sử dụng một phương pháp thiết kế thực sự sáng tạo - tỷ lệ vàng. Với nó, bạn có thể lấp đầy không gian làm việc một cách hiệu quả và đẹp mắt, bất kể kích thước trang web bạn đặt trong mẫu của mình là gì.
Cách tăng không gian làm việc của trang
Rất có thể bạn sẽ không có đủ chỗ để lắp tất cả các phần tử giao diện người dùng vào một bố cục nhỏ. Trong trường hợp này, bạn sẽ phải bắt đầu tư duy sáng tạo hoặc thậm chí sáng tạo hơn những gì bạn đã làm trước đây.
Giải phóng tối đa dung lượng trên trang web bằng cách ẩn điều hướng trong menu bật lên. Hợp lý là sử dụng phương pháp này không chỉ trên thiết bị di động mà còn trên máy tính để bàn. Rốt cuộc, người dùng không cần phải xem tiêu đề gì trên trang web của bạn - họ đến với nội dung. Và mong muốn của người dùng phải được tôn trọng.
Một ví dụ về một cách hay để ẩn menu là bố cục sau (ảnh bên dưới).
Ở góc trên của vùng màu đỏ, bạn có thể thấy một dấu thập, nhấp vào đó sẽ ẩn menu thành một biểu tượng nhỏ, để người dùng yên tâm với nội dung của trang web.
Tuy nhiên, đây là tùy chọn, bạn có thể để điều hướng, sẽ luôn ở trong tầm mắt. Nhưng bạn có thể biến nó thành một yếu tố thiết kế đẹp mắt, và không chỉ là danh sách các liên kết phổ biến trên trang web. Sử dụng các biểu tượng trực quan ngoài hoặc thậm chí thay vì các liên kết văn bản. Nó giống nhausẽ 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 người dùng.
Trang web đáp ứng tốt nhất
Nếu bạn không biết chọn bố cục nào cho trang web, thì mọi thứ thật đơn giản đối với bạn. Để tiết kiệm chi phí phát triển và đồng thời không bị mất khán giả do bố cục kém cho một số thiết bị, hãy sử dụng thiết kế đáp ứng.
Thiết kế đáp ứng là một thiết kế trông đẹp như nhau trên các thiết bị khác nhau. Cách tiếp cận này sẽ cho phép trang web của bạn dễ hiểu và thuận tiện ngay cả trên máy tính xách tay, máy tính bảng, thậm chí trên điện thoại thông minh. Hiệu ứng này đạt được bằng cách tự động thay đổi độ rộng của vùng làm việc của màn hình. Bằng cách sử dụng các biểu định kiểu đáp ứng cho trang web của mình, bạn đang đưa ra quyết định tốt nhất có thể.
Sự khác biệt giữa thiết kế đáp ứng và các phiên bản trang web là gì
Thiết kế đáp ứng khác với phiên bản di động của trang web ở chỗ trong trường hợp thứ hai, người dùng nhận được mã html khác với mã trên máy tính để bàn. Đây là một bất lợi về mặt tối ưu hóa hiệu suất máy chủ cũng như tối ưu hóa công cụ tìm kiếm. Ngoài ra, việc tính toán số liệu thống kê cho các phiên bản khác nhau của trang web trở nên khó khăn hơn. Phương pháp thích ứng không có những nhược điểm này.
Khả năng đáp ứng cho các thiết bị khác nhau đạt được thông qua bố cục với phần trăm chiều rộng được chỉ định hoặc bằng cách chuyển các khối sang không gian có sẵn (trong mặt phẳng dọc trên điện thoại thông minh thay vìnằm ngang trên màn hình) hoặc tạo các bố cục riêng lẻ cho các màn hình khác nhau.
Tìm hiểu thêm về thiết kế và phát triển đáp ứng trong các hướng dẫn của chúng tôi.
