Hãy cân nhắc nội dung cũng như bố cục và thiết kế đồ hoạ khi xây dựng cho nhiều người dùng và thiết bị.
Cách mọi người đọc trên web
Hướng dẫn viết của chính phủ Hoa Kỳ tóm tắt những gì mọi người muốn khi viết trên web:
Nghiên cứu cho thấy rằng mọi người không đọc trang web mà chỉ xem lướt qua. Trung bình, mọi người chỉ đọc 20–28% nội dung trên trang web. Đọc trên màn hình chậm hơn nhiều so với đọc trên giấy. Người dùng sẽ bỏ cuộc và rời khỏi trang web của bạn nếu thông tin khó truy cập và khó hiểu.
Cách viết nội dung cho thiết bị di động
Tập trung vào chủ đề đang nói đến và kể câu chuyện ngay từ đầu. Để nội dung viết hoạt động trên nhiều thiết bị và khung hiển thị, hãy đảm bảo truyền tải những điểm chính ngay từ đầu: theo quy tắc, lý tưởng nhất là trong 4 đoạn đầu tiên, với khoảng 70 từ.
Hãy tự hỏi xem mọi người muốn gì ở trang web của bạn. Họ có đang cố gắng tìm hiểu điều gì đó không? Nếu mọi người truy cập vào trang web của bạn để tìm thông tin, hãy đảm bảo rằng tất cả văn bản của bạn đều hướng đến việc giúp họ đạt được mục tiêu. Viết ở thể chủ động, đưa ra các hành động và giải pháp.
Chỉ đăng những nội dung mà khách truy cập muốn xem, không đăng thêm nội dung nào khác.
Nghiên cứu của chính phủ Vương quốc Anh cũng cho thấy rằng:
Nói cách khác: hãy sử dụng ngôn ngữ đơn giản, từ ngữ ngắn gọn và cấu trúc câu đơn giản – ngay cả khi đối tượng là người có học thức và hiểu biết về kỹ thuật. Trừ phi có lý do chính đáng, hãy giữ giọng điệu trò chuyện. Một quy tắc cũ của báo chí là viết như thể bạn đang nói chuyện với một đứa trẻ thông minh 11 tuổi.
Hàng tỷ người dùng tiếp theo
Cách viết ngắn gọn đặc biệt quan trọng đối với độc giả trên thiết bị di động và là yếu tố then chốt khi tạo nội dung cho điện thoại giá rẻ có khung hiển thị nhỏ, đòi hỏi người dùng phải cuộn nhiều hơn và có thể có màn hình chất lượng thấp hơn cũng như màn hình ít phản hồi hơn.
Hầu hết một tỷ người dùng tiếp theo truy cập Internet sẽ sử dụng các thiết bị giá rẻ. Họ sẽ không muốn tiêu tốn ngân sách dữ liệu của mình vào việc điều hướng nội dung dài dòng và có thể không đọc bằng ngôn ngữ mẹ đẻ. Cắt bớt văn bản: sử dụng câu ngắn, dấu chấm câu tối thiểu, đoạn văn có 5 dòng trở xuống và tiêu đề một dòng. Hãy cân nhắc sử dụng văn bản thích ứng (ví dụ: sử dụng dòng tiêu đề ngắn hơn cho các khung hiển thị nhỏ hơn) nhưng hãy lưu ý đến những nhược điểm.
Việc sử dụng văn bản tối giản cũng giúp nội dung của bạn dễ dàng được bản địa hoá và quốc tế hoá hơn, đồng thời tăng khả năng nội dung của bạn được trích dẫn trên mạng xã hội.
Điểm mấu chốt:
- Duy trì sự đơn giản
- Giảm bớt sự lộn xộn
- Vào thẳng trọng tâm
Loại bỏ nội dung không cần thiết
Về kích thước byte, các trang web có kích thước lớn và ngày càng lớn hơn.
Các kỹ thuật thiết kế thích ứng giúp bạn có thể phân phát nội dung khác nhau cho các khung hiển thị nhỏ hơn, nhưng bạn nên bắt đầu bằng cách tinh giản văn bản, hình ảnh và nội dung khác.
Người dùng web thường có xu hướng hành động, "chủ động" tìm kiếm câu trả lời cho câu hỏi hiện tại của họ, thay vì thư giãn để đọc một cuốn sách hay.
Jackob Nielsen
Hãy tự hỏi bản thân: mọi người đang cố gắng đạt được điều gì khi truy cập trang web của tôi?
Mọi thành phần trên trang có giúp người dùng đạt được mục tiêu của họ không?
Xoá các phần tử trang dư thừa
Theo Lưu trữ HTTP, các tệp HTML chiếm gần 70.000 và hơn 9 yêu cầu cho trang web trung bình.
Nhiều trang web phổ biến sử dụng hàng nghìn phần tử HTML trên mỗi trang và hàng nghìn dòng mã, ngay cả trên thiết bị di động. Kích thước tệp HTML quá lớn có thể không làm cho các trang tải chậm hơn, nhưng tải trọng HTML lớn có thể là dấu hiệu của tình trạng nội dung phình to: tệp .html lớn hơn có nghĩa là có nhiều phần tử hơn, nhiều nội dung văn bản hơn hoặc cả hai.
Việc giảm độ phức tạp của HTML cũng sẽ giảm quy mô trang, giúp bật tính năng bản địa hoá và quốc tế hoá, đồng thời giúp bạn dễ dàng lập kế hoạch và gỡ lỗi cho thiết kế đáp ứng. Để biết thông tin về cách viết HTML hiệu quả hơn, hãy xem bài viết HTML hiệu suất cao.
Mỗi bước mà bạn yêu cầu người dùng thực hiện trước khi họ nhận được giá trị từ ứng dụng của bạn sẽ khiến bạn mất 20% người dùng
Gabor Cselle, Twitter
Điều này cũng áp dụng cho nội dung: giúp người dùng tìm thấy nội dung họ muốn nhanh nhất có thể.
Đừng chỉ ẩn nội dung đối với người dùng thiết bị di động. Hãy hướng đến sự tương đồng về nội dung, vì việc đoán xem người dùng thiết bị di động sẽ không bỏ lỡ những tính năng nào chắc chắn sẽ thất bại đối với một số người. Nếu có tài nguyên, hãy tạo các phiên bản thay thế của cùng một nội dung cho nhiều kích thước khung nhìn – ngay cả khi chỉ dành cho các phần tử trang có mức độ ưu tiên cao.
Cân nhắc việc quản lý nội dung và quy trình công việc: liệu các hệ thống cũ có dẫn đến nội dung cũ không?
Rút gọn văn bản
Khi web chuyển sang thiết bị di động, bạn cần thay đổi cách viết. Hãy đơn giản hoá, giảm bớt sự lộn xộn và đi thẳng vào vấn đề.
Xoá hình ảnh thừa
Hình ảnh có thể đẹp mắt, thú vị và giàu thông tin, nhưng chúng cũng chiếm không gian trên trang, làm tăng quy mô trang và tăng số lượng yêu cầu về tệp. Độ trễ sẽ tăng lên khi khả năng kết nối giảm xuống, tức là số lượng yêu cầu tệp hình ảnh quá mức là một vấn đề ngày càng gia tăng khi web chuyển sang thiết bị di động.
Hình ảnh cũng tiêu thụ điện năng. Sau màn hình, đài là thiết bị tiêu hao pin nhiều thứ hai. Càng nhiều yêu cầu về hình ảnh, càng nhiều sóng vô tuyến được sử dụng, càng nhiều pin bị cạn. Ngay cả việc chỉ kết xuất hình ảnh cũng tiêu tốn năng lượng – và mức tiêu thụ này tỷ lệ thuận với kích thước và số lượng. Hãy xem báo cáo của Đại học Stanford có tên Ai đã làm hao pin của tôi?
Nếu có thể, hãy loại bỏ hình ảnh!
Sau đây là một số đề xuất:
- Hãy cân nhắc những thiết kế hoàn toàn không dùng hình ảnh hoặc chỉ dùng hình ảnh một cách hạn chế. Chỉ có văn bản cũng có thể rất đẹp! Hãy tự hỏi: "Khách truy cập vào trang web của tôi đang cố gắng đạt được điều gì? Hình ảnh có giúp ích cho quá trình đó không?"
- Trước đây, việc lưu tiêu đề và văn bản khác dưới dạng đồ hoạ là điều phổ biến. Phương pháp đó không phản hồi tốt với các thay đổi về kích thước khung nhìn, đồng thời làm tăng quy mô trang và độ trễ. Việc sử dụng văn bản làm đồ hoạ cũng có nghĩa là các công cụ tìm kiếm không thể tìm thấy văn bản và trình đọc màn hình cũng như các công nghệ hỗ trợ khác không truy cập được văn bản. Sử dụng văn bản "thực" khi có thể – Phông chữ web và CSS có thể giúp bạn tạo ra kiểu chữ đẹp.
- Sử dụng CSS thay vì hình ảnh cho các hiệu ứng chuyển màu, bóng đổ, góc bo tròn và kết cấu nền, các tính năng được tất cả trình duyệt hiện đại hỗ trợ. Tuy nhiên, hãy nhớ rằng CSS có thể tốt hơn hình ảnh, nhưng vẫn có thể có mức phạt xử lý và hiển thị, đặc biệt là trên thiết bị di động.
- Hình nền hiếm khi hoạt động hiệu quả trên thiết bị di động. Bạn có thể sử dụng truy vấn nội dung nghe nhìn để tránh hình nền trên các cửa sổ xem nhỏ.
- Tránh dùng hình ảnh màn hình chờ.
- Sử dụng CSS cho ảnh động trên giao diện người dùng.
- Tìm hiểu về các glyph; sử dụng biểu tượng và biểu tượng Unicode thay vì hình ảnh, có thể dùng Phông chữ trên web nếu cần.
- Cân nhắc sử dụng phông chữ biểu tượng; đây là đồ hoạ vectơ có thể được mở rộng vô hạn và bạn có thể tải toàn bộ một bộ hình ảnh xuống trong một phông chữ. (Tuy nhiên, hãy lưu ý đến những mối lo ngại này.)
- Bạn có thể dùng phần tử
<canvas>để tạo hình ảnh trong JavaScript từ các đường kẻ, đường cong, văn bản và hình ảnh khác. - Hình ảnh SVG hoặc URI dữ liệu cùng dòng sẽ không làm giảm quy mô trang, nhưng có thể giảm độ trễ bằng cách giảm số lượng yêu cầu tài nguyên. SVG nội dòng được hỗ trợ rất tốt trên trình duyệt dành cho thiết bị di động và máy tính, đồng thời các công cụ tối ưu hoá có thể giảm đáng kể kích thước SVG. Tương tự, URI dữ liệu cũng được hỗ trợ tốt. Cả hai đều có thể được nội tuyến trong CSS.
- Hãy cân nhắc sử dụng
<video>thay vì ảnh GIF động. Tất cả trình duyệt trên thiết bị di động đều hỗ trợ phần tử video (ngoại trừ Opera Mini).
Để biết thêm thông tin, hãy xem phần Tối ưu hoá hình ảnh và Loại bỏ và thay thế hình ảnh.
Thiết kế nội dung để hoạt động hiệu quả trên nhiều kích thước khung nhìn
"Tạo một sản phẩm, đừng thiết kế lại một sản phẩm cho màn hình nhỏ. Các sản phẩm tuyệt vời dành cho thiết bị di động được tạo ra, chứ không bao giờ được chuyển đổi."
Thiết kế và phát triển cho thiết bị di động, Brian Fling
Nhà thiết kế giỏi không "tối ưu hoá cho thiết bị di động" mà họ suy nghĩ một cách linh hoạt để xây dựng những trang web hoạt động trên nhiều loại thiết bị. Cấu trúc của văn bản và nội dung khác trên trang là yếu tố quan trọng để đạt được thành công trên nhiều thiết bị.
Nhiều người dùng Internet tiếp theo sử dụng các thiết bị giá rẻ có khung nhìn nhỏ. Đọc trên màn hình 3,5 inch hoặc 4 inch có độ phân giải thấp có thể là một việc khó khăn.
Sau đây là bức ảnh chụp hai người:
Trên màn hình lớn, văn bản có kích thước nhỏ nhưng vẫn đọc được.
Trên màn hình nhỏ hơn, trình duyệt hiển thị bố cục chính xác, nhưng văn bản không đọc được, ngay cả khi phóng to. Màn hình bị mờ và có "phủ màu" (màu trắng không phải là màu trắng), khiến nội dung khó đọc.
Thiết kế nội dung cho thiết bị di động
Khi tạo cho nhiều khung hiển thị, hãy cân nhắc nội dung cũng như bố cục và thiết kế đồ hoạ, thiết kế bằng văn bản và hình ảnh thực tế, chứ không phải nội dung giữ chỗ.
"Nội dung đi trước thiết kế. Thiết kế mà không có nội dung thì không phải là thiết kế, mà là trang trí."
Jeffrey Zeldman
- Đặt nội dung quan trọng nhất lên trên cùng, vì người dùng thường đọc trang web theo hình chữ F.
- Người dùng truy cập vào trang web của bạn để đạt được một mục tiêu. Hãy tự hỏi bản thân xem họ cần những gì để đạt được mục tiêu đó và loại bỏ mọi thứ khác. Loại bỏ các điểm nhấn về hình ảnh và văn bản, nội dung cũ, quá nhiều đường liên kết và những nội dung rườm rà khác.
- Hãy cẩn thận với các biểu tượng chia sẻ trên mạng xã hội; chúng có thể làm bố cục trở nên lộn xộn và mã của các biểu tượng này có thể làm chậm quá trình tải trang.
- Thiết kế bố cục thích ứng cho nội dung, chứ không phải kích thước cố định của thiết bị.
Nội dung kiểm thử
- Kiểm tra khả năng đọc trên các khung nhìn nhỏ hơn bằng Chrome DevTools và các công cụ mô phỏng khác.
- Kiểm thử nội dung trong điều kiện băng thông thấp và độ trễ cao; thử nội dung trong nhiều trường hợp kết nối.
- Hãy thử đọc và tương tác với nội dung trên một chiếc điện thoại giá rẻ.
- Mời bạn bè và đồng nghiệp dùng thử ứng dụng hoặc trang web của bạn.
- Xây dựng một phòng kiểm thử thiết bị đơn giản. Kho lưu trữ GitHub cho Phòng thí nghiệm thiết bị di động thu nhỏ của Google có hướng dẫn về cách tự xây dựng phòng thí nghiệm của riêng bạn. OpenSTF là một ứng dụng web đơn giản để kiểm thử các trang web trên nhiều thiết bị Android.
Sau đây là OpenSTF đang hoạt động:
Ngày càng có nhiều người dùng thiết bị di động để xem nội dung và tìm thông tin, chứ không chỉ dùng để giao tiếp, chơi trò chơi và xem nội dung nghe nhìn.
Điều này khiến việc lên kế hoạch cho nội dung hoạt động hiệu quả trên nhiều khung hiển thị trở nên ngày càng quan trọng, đồng thời cần ưu tiên nội dung khi cân nhắc bố cục, giao diện và thiết kế tương tác trên nhiều thiết bị.
Tìm hiểu về chi phí dữ liệu
Các trang web ngày càng lớn hơn.
Theo HTTP Archive, quy mô trang trung bình đối với 1 triệu trang web hàng đầu hiện đã vượt quá 2 MB.
Người dùng sẽ tránh những trang web hoặc ứng dụng bị coi là chậm hoặc tốn kém. Vì vậy, bạn cần phải hiểu rõ chi phí tải các thành phần của trang và ứng dụng.
Giảm quy mô trang cũng có thể mang lại lợi nhuận. Chris Zacharias của YouTube nhận thấy rằng khi họ giảm kích thước trang xem từ 1,2 MB xuống còn 250 KB:
Nói cách khác, việc giảm quy mô trang có thể mở ra những thị trường hoàn toàn mới.
Tính quy mô trang
Có một số công cụ để tính quy mô trang. Bảng điều khiển Mạng của Công cụ cho nhà phát triển của Chrome cho biết tổng kích thước tính bằng byte của tất cả các tài nguyên và có thể được dùng để xác định trọng số cho từng loại thành phần. Bạn cũng có thể kiểm tra những mục đã được truy xuất từ bộ nhớ đệm của trình duyệt.
Firefox và các trình duyệt khác cũng cung cấp những công cụ tương tự.
WebPagetest cung cấp khả năng kiểm thử lần tải trang đầu tiên và các lần tải trang tiếp theo. Bạn có thể tự động hoá quy trình kiểm thử bằng tập lệnh (ví dụ: để đăng nhập vào một trang web) hoặc bằng cách sử dụng API RESTful của chúng. Ví dụ sau (tải developers.google.com/web) cho thấy quá trình lưu vào bộ nhớ đệm đã thành công và các lần tải trang tiếp theo không cần thêm tài nguyên.
WebPagetest cũng cung cấp thông tin chi tiết về kích thước và yêu cầu theo loại MIME.
Tính chi phí trang
Đối với nhiều người dùng, dữ liệu không chỉ tốn dung lượng và hiệu suất mà còn tốn tiền.
Trang web What Does My Site Cost? (Chi phí trang web của tôi là bao nhiêu?) giúp bạn ước tính chi phí tài chính thực tế để tải trang web của mình. Biểu đồ dưới đây cho biết chi phí (khi dùng gói dữ liệu trả trước) để tải amazon.com.
Xin lưu ý rằng chỉ số này không tính đến khả năng chi trả so với thu nhập. Dữ liệu từ blog.jana.com cho thấy chi phí dữ liệu.
| Gói dữ liệu 500 MB chi phí (USD) |
Mức lương tối thiểu theo giờ (USD) |
Số giờ làm việc để trả tiền cho gói dữ liệu 500 MB |
|
| Ấn Độ | $3,38 | $0,20 | 17 giờ |
| Indonesia | 2,39 USD | $0,43 | 6 giờ |
| Brazil | 13,77 USD | $1,04 | 13 giờ |
Quy mô trang không chỉ là vấn đề đối với các thị trường mới nổi. Ở nhiều quốc gia, người dùng sử dụng gói di động có hạn mức dữ liệu và sẽ tránh trang web hoặc ứng dụng của bạn nếu họ cho rằng trang web hoặc ứng dụng đó nặng và tốn kém. Ngay cả các gói dữ liệu di động và Wi-Fi "không giới hạn" thường cũng có hạn mức dữ liệu. Nếu vượt quá hạn mức này, gói dữ liệu sẽ bị chặn hoặc bị điều tiết. Vì những lý do này, bạn nên minh bạch nhất có thể về lượng dữ liệu mà trang của bạn tiêu thụ. Bài đăng sau đây trên blog cung cấp các phương pháp hay nhất cụ thể: Tạo dựng niềm tin bằng sự minh bạch về chi phí
Điểm mấu chốt: quy mô trang ảnh hưởng đến hiệu suất và tốn kém. Tối ưu hoá hiệu quả nội dung cho biết cách giảm chi phí đó.