Bạn có “ trang web đáp ứng ” không? Đây là trang web có bố cục thay đổi dựa trên thiết bị và kích thước màn hình của khách truy cập . Thiết kế web đáp ứng hiện là một phương pháp hay nhất trong ngành. Đó là khuyến cáo của Google và được tìm thấy trên hàng triệu trang web trên Web. Tuy nhiên, có một sự khác biệt lớn giữa việc có một trang web đơn giản là “phù hợp” trên các kích thước màn hình khác nhau và có một trang web thực sự đáp ứng.
Tôi thường xuyên thấy các công ty thiết kế lại trang web của họ và đẩy ra một thông cáo báo chí mở rộng các nhân đức của thiết kế thân thiện với thiết bị di động mới của họ. Khi tôi truy cập vào các trang web đó, những gì tôi thường thấy là bố cục thực sự mở rộng và thay đổi để vừa với các màn hình khác nhau, nhưng đó là chừng nào họ đưa ra ý tưởng phản hồi. Điều này là không đủ. Một trang web thực sự đáp ứng nhiều hơn là chỉ quy mô để phù hợp với một màn hình nhỏ hơn hoặc lớn hơn. Trên các trang web này, bạn cũng sẽ tìm thấy những đặc điểm quan trọng sau đây.
1. Hiệu suất được tối ưu hóa
Không ai thích chờ trang web tải và khi ai đó đang sử dụng thiết bị di động có kết nối có thể ít hơn lý tưởng, nhu cầu tải trang web nhanh chóng thậm chí còn quan trọng hơn.
Vậy làm cách nào để tối ưu hóa hiệu suất trang web của bạn? Nếu bạn đang bắt đầu với một trang web mới như là một phần của một thiết kế lại, thì bạn nên làm cho nó một điểm để tạo ra một ngân sách hiệu suất như là một phần của dự án đó. Nếu bạn đang làm việc với một trang web hiện tại và không bắt đầu từ đầu, bước đầu tiên là kiểm tra hiệu suất trang web của bạn để xem bạn đang đứng ở đâu hôm nay.
Một khi bạn có một đường cơ sở của nơi trang web của bạn đứng hiệu suất khôn ngoan, bạn có thể bắt đầu thực hiện những cải tiến cần thiết để tăng tốc độ tải xuống. Một nơi tuyệt vời để bắt đầu có lẽ là với hình ảnh của trang web của bạn. Hình ảnh quá lớn là thủ phạm số 1 khi nói đến các trang web tải chậm, vì vậy việc tối ưu hóa hình ảnh của bạn để phân phối web thực sự có thể giúp trang web của bạn từ quan điểm hiệu suất.
Thực tế là hiệu suất trang web được cải thiện và tốc độ tải xuống nhanh là một lợi ích mà tất cả khách truy cập sẽ đánh giá cao. Sau khi tất cả, không có ai đã từng phàn nàn rằng một trang web được tải "quá nhanh", nhưng nếu một trang web mất quá nhiều thời gian để tải, nó sẽ hoàn toàn biến mọi người đi cho dù nó đáp ứng "phù hợp" trên màn hình của họ hay không.
2. Phân cấp nội dung thông minh
Khi một trang web được hiển thị trên một màn hình lớn, bạn có thể đặt nội dung ra theo nhiều cách khác nhau vì có sẵn màn hình bất động sản đáng kể. Bạn thường có thể phù hợp với thông điệp và hình ảnh quan trọng, cập nhật tin tức, thông tin sự kiện và điều hướng trang web trên màn hình cùng một lúc. Điều này cho phép khách truy cập dễ dàng và nhanh chóng quét nội dung của toàn bộ trang và quyết định điều gì quan trọng đối với họ.
Kịch bản này thay đổi khá đáng kể khi bạn thiết kế trang web đó và biến đổi nó cho các thiết bị màn hình nhỏ, như điện thoại di động. Đột nhiên bạn đang làm việc với một phần nhỏ của màn hình bất động sản bạn đã có trước đây. Điều này có nghĩa là bạn cần phải quyết định những gì sẽ xuất hiện đầu tiên trên trang web, những gì sẽ theo dõi, vv Thay vì mọi thứ được nhìn thấy cùng một lúc, bạn có thể chỉ có không gian để hiển thị một hoặc hai điều (một trong số đó có khả năng điều hướng). Điều này có nghĩa là các quyết định về phân cấp cần phải được thực hiện. Thật không may, những gì thường xác định những gì đến đầu tiên trên màn hình, và sau đó thứ hai, vv là cách chính trang đó được mã hóa. Nó là dễ nhất, khi xây dựng một trang web đáp ứng, để hiển thị bất cứ điều gì là lần đầu tiên trong mã đầu tiên trên màn hình, tiếp theo là mục thứ hai trong mã và vv. Thật không may, những gì có thể quan trọng nhất trên một thiết bị có thể không quan trọng trên một thiết bị khác. Một trang web đáp ứng thực sự hiểu rằng hệ thống phân cấp nội dung sẽ thay đổi tùy thuộc vào các tình huống khác nhau và cần phải thông minh về những gì nó hiển thị ở đâu.
Các cải tiến trong kỹ thuật bố cục CSS, bao gồm CSS Grid Layout, Flexbox, v.v., cho phép các nhà thiết kế web và nhà phát triển thêm tùy chọn khi nói đến nội dung thông minh, thay vì bị xáo trộn bởi thứ tự chính xác của các vùng nội dung trong mã HTML. Tận dụng các kỹ thuật bố cục mới này sẽ trở nên quan trọng hơn nữa như cảnh quan thiết bị và nhu cầu của người dùng trang web của chúng tôi, tiếp tục phát triển.
3. Trải nghiệm có tính đến điểm mạnh và điểm yếu của thiết bị
Luôn cập nhật chủ đề thiết bị - mỗi thiết bị mà ai đó có thể sử dụng để truy cập vào trang web của bạn đều có điểm mạnh và điểm yếu vốn có trên nền tảng đó. Trang web đáp ứng tuyệt vời hiểu được các khả năng và giới hạn của các thiết bị khác nhau và sử dụng chúng để tạo trải nghiệm tùy chỉnh phù hợp nhất với bất kỳ thiết bị nào mà khách truy cập có thể đang sử dụng tại thời điểm đó.
Ví dụ, một điện thoại di động bao gồm một số tính năng mà bạn sẽ không tìm thấy trong một máy tính để bàn truyền thống. GPS là một ví dụ về tính năng tập trung vào thiết bị di động (có, bạn có thể nhận thông tin vị trí chung trên máy tính để bàn, nhưng thiết bị GPS chính xác hơn nhiều). Trang web của bạn có thể sử dụng thông tin GPS để gửi thông tin hướng dẫn từng bước chi tiết và cụ thể cho từng người hoặc các ưu đãi đặc biệt dựa trên chính xác vị trí của họ tại thời điểm đó.
Một ví dụ khác về hiệu trưởng này trong thực tế sẽ là một trang web hiểu loại màn hình bạn đang sử dụng và gửi hình ảnh phù hợp nhất với màn hình đó. Nếu bạn có màn hình có mật độ điểm ảnh cao, bạn có thể quyết định gửi hình ảnh chất lượng cao hơn đến màn hình đó. Những hình ảnh tương tự sẽ là vô nghĩa trên một màn hình ít có khả năng, tuy nhiên, và chất lượng thêm sẽ bị mất trong khi kích thước tập tin bổ sung sẽ được tải về không có lý do thực tế.
Các trang web đáp ứng thực sự tuyệt vời xem xét toàn bộ trải nghiệm người dùng và làm việc để điều chỉnh trải nghiệm đó không chỉ dựa trên loại thiết bị hoặc kích thước màn hình mà còn các khía cạnh quan trọng khác của phần cứng.
4. Nội dung với bối cảnh
Ban đầu, thiết kế web đáp ứng nhận được tên của nó vì ý tưởng bố cục của trang web đáp ứng các kích thước màn hình khác nhau, nhưng bạn có thể trả lời nhiều hơn chỉ kích thước màn hình. Xây dựng trên ví dụ trước về việc sử dụng điểm mạnh và điểm yếu của thiết bị, bạn có thể sử dụng những dữ liệu đó, cũng như các dữ liệu khác như ngày và giờ để thực sự tùy chỉnh trải nghiệm trang web.
Hãy tưởng tượng một trang web cho một sự kiện triển lãm thương mại lớn. Trong khi một trang web đáp ứng sẽ thay đổi cách bố trí của các trang của trang web để mở rộng với các màn hình khác nhau, bạn cũng có thể sử dụng ngày để xác định nội dung nào là quan trọng nhất để hiển thị. Nếu đó là khoảng thời gian trước sự kiện, bạn có thể muốn hiển thị thông tin đăng ký nổi bật. Tuy nhiên, nếu sự kiện này thực sự xảy ra tại thời điểm đó, đăng ký có thể không phải là nội dung quan trọng nhất. Thay vào đó, bạn có thể decidethat lịch trình của các sự kiện trong ngày là quan trọng hơn vì nó là phù hợp hơn với nhu cầu trước mắt của người dùng đó.
Thực hiện một bước xa hơn, bạn có thể chạm vào GPS của thiết bị để xác định vị trí thực sự của họ tại triển lãm thương mại. Bạn có thể cung cấp cho họ nội dung tương tác dựa trên vị trí của họ, hiển thị cho họ các gian hàng hoặc phiên gần đó sắp bắt đầu.
5. Khả năng truy cập
Ví dụ cuối cùng, chúng ta sẽ xem xét cách một trang web thực sự có thể đáp ứng nhu cầu của khách truy cập là suy nghĩ về khả năng truy cập trang web . Các trang web có thể được sử dụng bởi càng nhiều người càng tốt, kể cả những người khuyết tật. Trang web của bạn sẽ có thể được sử dụng bởi một người cần trình đọc màn hình hoặc phần mềm được hỗ trợ khác để truy cập nội dung của nó. Bằng cách này, trang web của bạn đang đáp ứng nhu cầu của họ bởi vì bạn đã đảm bảo rằng trải nghiệm, trong khi khác với khách truy cập bị vô hiệu hóa, vẫn phù hợp.
Bằng cách trả lời càng nhiều điểm dữ liệu càng tốt, và không chỉ kích thước màn hình, một trang web có thể nhiều hơn "thân thiện với thiết bị di động". Nó có thể trở thành trải nghiệm đáp ứng thực sự theo mọi nghĩa của cụm từ.