Kiểm tra hình ảnh và độ dài văn bản để đảm bảo trang web của bạn phản ứng một cách thích hợp
Khi chúng tôi thiết kế trang web và lên kế hoạch cho biết nội dung của các trang web đó sẽ được hiển thị như thế nào, chúng tôi thường làm như vậy với một tình huống lý tưởng. Dòng tiêu đề và vùng văn bản được tưởng tượng là có độ dài nhất định, trong khi hình ảnh đi kèm với văn bản đó được thiết kế để hiển thị theo các thứ nguyên sẽ cho phép chúng hoạt động như dự định trong thiết kế tổng thể. Ngay cả khi các yếu tố này có phần nào là chất lỏng như là một phần của xây dựng trang web đáp ứng (chúng phải là), thì sẽ có giới hạn về mức độ linh hoạt của chúng.
Nếu bạn triển khai một trang web trên CMS (hệ thống quản lý nội dung) và cho phép khách hàng quản lý trang web đó và thêm nội dung mới theo thời gian, các giới hạn mà bạn đã thiết kế cho hoàn toàn sẽ được đưa vào thử nghiệm. Tin tưởng vào thực tế là khách hàng của bạn sẽ tìm cách để thay đổi trang web mà bạn không bao giờ mơ ước họ sẽ làm. Nếu bạn không tính đến các tình huống tốt ngoài những tình huống lý tưởng mà bạn đã làm việc trong quá trình thiết kế của mình, bố cục của trang web đó có thể bị nguy hiểm nghiêm trọng. Đây là lý do tại sao điều đặc biệt quan trọng là bạn nhấn mạnh kiểm tra tất cả nội dung trang web và các khía cạnh của bố cục của trang web trước khi khởi chạy trang web đó. Dưới đây là một số mẹo về cách bạn có thể thực hiện việc này.
Kích thước hình ảnh thử nghiệm
Không nghi ngờ gì, cách phổ biến nhất mà mọi người phá vỡ bố cục trang web của họ là thêm hình ảnh có kích thước không phù hợp (đây cũng là cách chúng tác động tiêu cực đến hiệu suất tổng thể của trang web và làm chậm tốc độ tải xuống). Điều này bao gồm các hình ảnh quá lớn, cũng như những hình ảnh quá nhỏ để hoạt động như dự định trong trang web của bạn.
Ngay cả khi bạn sử dụng CSS để buộc kích thước của những hình ảnh này trong bố cục của bạn, các hình ảnh cực kỳ vượt quá quy mô với thông số kỹ thuật ban đầu của bạn cho trang web sẽ gây ra sự cố. Nếu kích thước của hình ảnh không chính xác, CSS của bạn có thể buộc hình ảnh đó hiển thị bằng chiều rộng và chiều cao thích hợp, nhưng bản thân hình ảnh và tỷ lệ khung hình của nó có thể bị méo. Điều đó chắc chắn sẽ có tác động tiêu cực đến giao diện trang web của bạn vì hình ảnh quá nhỏ sẽ bị "thổi bay" và sẽ làm giảm chất lượng. Một hình ảnh quá lớn được tạo ra nhỏ hơn với CSS trông ổn và giữ nguyên chất lượng của nó, nhưng kích thước tệp có thể không hợp lý lớn cho cách nó được sử dụng.
Khi kiểm tra trang web của bạn hoạt động, hãy chắc chắn thêm hình ảnh nằm ngoài phạm vi dự định của bạn. Thêm CSS và kỹ thuật hình ảnh đáp ứng giải quyết những thách thức này bằng cách thay đổi kích thước hình ảnh theo hoặc trong trường hợp tỷ lệ khung hình không chính xác, cũng xem xét việc sử dụng nội dung như thuộc tính CSS clip để cắt hình ảnh khi cần.
Thử nghiệm phương tiện khác
Ngoài hình ảnh, hãy thử nghiệm các phương tiện khác như video trên trang web của bạn và xem các yếu tố đó sẽ xuất hiện như thế nào trong bố cục của bạn bằng cách sử dụng các giá trị kích thước và tỷ lệ cỡ ảnh khác nhau. Một lần nữa, hãy xem xét tính chất đáp ứng của trang web của bạn và cách hoạt động của nó đối với các kích thước màn hình và thiết bị khác nhau .
Kiểm tra tiêu đề văn bản
Sau hình ảnh, khu vực trang web tiếp theo gây ra nhiều sự cố nhất với các trang web trực tiếp do các chuyên gia không phải là web quản lý là tiêu đề văn bản. Đây là những dòng văn bản ngắn (được cho là) thường bắt đầu nội dung của một trang hoặc một phần trên trang đó. Các văn bản trên đoạn này mà đọc "Kiểm tra Tiêu đề văn bản" là một ví dụ về điều này.
Nếu bạn đã thiết kế một trang web để chứa một tiêu đề như thế này:
“Kiểm tra tiêu đề văn bản”
Nhưng khách hàng của bạn sử dụng CMS để thêm một bài viết với tiêu đề như sau:
“Kiểm tra các tiêu đề văn bản trên một loạt các trang web Tất cả với các yêu cầu kích thước khác nhau và nhu cầu của người dùng”
Sau đó, bố cục của bạn có thể không có khả năng chứa sạch tất cả văn bản bổ sung đó. Cũng giống như bạn nên căng thẳng kiểm tra hình ảnh và phương tiện bằng cách thêm các mục nằm ngoài kích thước ban đầu được thiết kế, vì vậy bạn nên làm như vậy với tiêu đề văn bản để đảm bảo đủ linh hoạt để hiển thị ngay cả các dòng siêu dài như một ở trên.
Kiểm tra độ dài văn bản
Theo chủ đề của văn bản, bạn cũng sẽ muốn thử nghiệm độ dài văn bản khác nhau cho nội dung chính trên các trang . Điều này bao gồm văn bản rất, rất dài cũng như văn bản rất, rất ngắn - mà thực sự có thể là vấn đề khiến nhiều trang bố cục.
Bởi vì các trang web, theo bản chất, phát triển về kích thước để chứa chiều cao của văn bản mà chúng chứa, các trang có nhiều văn bản thường sẽ chỉ quy mô chiều cao khi cần. Trừ khi bạn đã hạn chế chiều cao của trang (mà bạn không nên làm nếu bạn muốn trang của bạn được linh hoạt), sau đó thêm văn bản không nên đặt ra một vấn đề. Quá ít văn bản là một vấn đề khác - và nó là một trong nhiều nhà thiết kế quên thử nghiệm trong quá trình thiết kế của họ.
Quá ít văn bản có thể làm cho trang trông không đầy đủ hoặc thậm chí bị hỏng, vì vậy hãy đảm bảo chia nhỏ nội dung trang của bạn để xem điều gì xảy ra trong các trường hợp đó và thực hiện các điều chỉnh cần thiết cho CSS của trang web của bạn để xử lý các tình huống đó.
Kiểm tra thu phóng trang
Những người có vấn đề về thị lực có thể đang sử dụng tính năng Page Zoom của trình duyệt web để tăng kích thước trang web của bạn. Nếu ai đó phóng to một lượng đáng kể, bố cục của bạn có thể bị hỏng. Đây là một trong những lý do tại sao bạn có thể muốn sử dụng EM làm đơn vị đo lường cho kích thước phông chữ trang web của bạn cũng như các truy vấn phương tiện của bạn. Vì EM là đơn vị đo lường tương đối (dựa trên kích thước văn bản mặc định của trình duyệt đó), chúng có lợi hơn cho bố cục trang web linh hoạt, linh hoạt.
Kiểm tra trang web của bạn để thu phóng trang và không chỉ dừng lại ở một hoặc hai cấp độ thu phóng. Thu phóng trang web của bạn lên và xuống một loạt các cấp để đảm bảo rằng các trang của bạn phản ứng như dự định.
Đừng quên tốc độ tải xuống và hiệu suất
Khi bạn kiểm tra ý nghĩa bố cục của các quyết định của khách hàng, đừng quên chú ý đến tác động mà những quyết định đó có trên hiệu suất của trang web. Hình ảnh và nội dung mà những khách hàng đó sẽ thêm có thể cản trở tốc độ tải xuống của trang web và phá hủy nghiêm trọng khả năng sử dụng chung của trang web. Lên kế hoạch cho tác động của những bổ sung này và làm phần của bạn trong quá trình phát triển để giảm thiểu những hiệu ứng này.
Nếu trang web của bạn đang được xây dựng với ngân sách hiệu suất, hãy chia sẻ thông tin này với khách hàng của bạn và cho họ biết cách kiểm tra trang web để biết số liệu hiệu suất. Giải thích cho họ tầm quan trọng của việc duy trì các ngưỡng đã thiết lập này đối với kích thước trang và tốc độ tải xuống và cho họ biết cách bổ sung mà chúng tạo ra có thể tác động đến toàn bộ trang web. Dành thời gian đào tạo cho họ cách giữ cho trang web hoạt động và trông đẹp mắt. Về chủ đề đào tạo…
Đào tạo khách hàng là cần thiết
Điều quan trọng là phải kiểm tra căng thẳng hình ảnh, văn bản và các yếu tố trang khác của trang web của bạn và tạo các kiểu sẽ tính đến các trường hợp cực đoan, nhưng đó không bao giờ là sự thay thế cho đào tạo khách hàng. Công việc của bạn chống đạn một trang web nên được bổ sung vào thời gian bạn dành đào tạo cho khách hàng của bạn làm thế nào để có hiệu quả chăm sóc và quản lý trang web của họ. Cuối cùng, một khách hàng được đào tạo tốt hiểu trách nhiệm của họ và tác động của các quyết định mà họ thực hiện trên một trang web sẽ là vô giá cho nỗ lực của bạn để giữ cho trang web đó hoạt động và trông đẹp nhất.