HOW TO TEST RESPONSIVE WEB DESIGN

Làm thế nào bạn có thể test được sự tương thích của một website? Đâu là những thách thức bạn sẽ phải gặp khi thực hiện việc kiểm thử một website trên nhiều loại device khác nhau? Kiểm thử một trang web trên desktop khác biệt như thế nào với việc test trên một thiết bị cầm tay như máy điện thoại? Chúng ta có thể sử dụng những công cụ nào để test sự tương thích của website?

Responsive web design là gì?

Responsive web design (RWD) là một cách để thiết kế web hướng tới việc tối ưu hoá trải nghiệm giao diện - dễ đọc và chuyển hướng với hạn chế việc resize, panning, scrolling - cho một tập rộng các loại thiết bị (từ máy tính để bàn cho đến điện thoại di động)

Một trang web được thiết kế theo RWD điều chỉnh layout tới môi trường view bằng cách sử dụng fluid, các ô đối xứng, ảnh co giãn, và các CSS3 media querries - một mở rộng của các luật @media, theo các cách sau đây:

• Khái niệm fluid grid nghĩa là các thành phần của trang sẽ thay đổi theo đơn vị tương đối ví dụ như percentage (phần trăm), chứ không theo các đơn vị tuyệt đối như Pixel hay là Point.
• Ảnh co giãn cũng được lấy kích cỡ theo đơn vị tương đối, mục đích là để ngăn chặn việc hiển thị chúng ở bên ngoài thành phần chứa ảnh.
• Các media querries cho phép trang sử dụng các luật CSS style khác nhau dựa trên đặc điểm của thiết bị mà nó hiển thị, thông thường nhất là theo chiều rộng của browser.

Những khó khăn khi test RWD?

Ngày nay, rất nhiều người dùng sử dụng điện thoại hay là tablet của họ để truy cập vào các trang web, vì vậy việc test một trang web có responsive design rất quan trọng bởi trải nghiệm người dùng trên các thiết bị điện thoại tương đối khác so với máy tính.

Có lẽ phần khó khăn nhất của việc test trên RWD đó là việc làm sao để đảm bảo rằng trang web của bạn hoạt động đúng như mong muốn trên nhiều thiết bị và platform, nhưng thực tế việc test được trên tất cả các thiết bị điện thoại trên thị trường là điều không phải khả thi với hầu hết chúng ta.

Nhiều tester khi bắt đầu việc test RWD, họ thương bắt đầu bằng việc resize browser window tương ứng với kích thước của thiết bị điện thoại, tablet hay desktop.

Kỹ thuật thuật này thích hợp cho việc kiểm tra website một cách trực quan, nhanh chóng trên nhiều view khác nhau và giúp chúng ta tìm ra các lỗi hiển thị có thể xảy ra khi chúng ta thu nhỏ hay phóng lớn kích cỡ cửa sổ của trình duyệt.

Tuy nhiên, test trên một thiết bị điện thoại thực sự là một trải nghiệm hoàn toàn khác khi bạn có các thao tác như là vuốt ngón tay, tapping, pinch-to-zoom, portrait or landscape. Tương tự như vậy, trên desktops bạn cũng có các thao tác riêng như hovering, right-clicking, mouse scrolls, ...

Việc design một responsive website cần cân nhắc tới tất cả các vấn đề trên.

Sử dụng Emulators (máy giả lập)

Máy giả lập là máy ảo chạy trên máy vi tính để giả lập hoạt động của các chương trình và website ở môi trường điện thoại.

Bạn có thể download một Android Emulator từ Google

Chúng ta đều muốn hỗ trợ nhiều device nhất có thể, và việc mua các thiết bị của bên thứ ba để có thể test trên môi trường thật tất nhiên là rất hữu dụng, tuy nhiên nó tốn kém và khó khăn hơn hẳn so với việc sử dụng emulators.

Emulator mặc dù không thể cho chúng ta chính xác điều kiện test cần thiết nhưng nó vẫn đủ mạnh và là một giải pháp tiết kiệm để test hoạt động của các website ở high-level, giúp bạn đánh giá được cách các thành phần thay đổi phóng to thu nhỏ theo nhiều kích thước màn hình.

Google DevTools - Device mode

DevTools của Google Chrome có một tính năng gọi là device mode gồm có các tools tiện lợi cho việc test và debugs các trang web responsive.

Không giống như hầu hết các test tool dành cho trang web responsive khác chỉ đơn giản resize viewport, device mode của Google Chrome thực sự giả lập lại cả những trải nghiệm trên mobile, kể cả các thao tác chạm màn hình như tap, swipe ngay trên web browser của bạn.

Các tính năng của công cụ này:

• Test responsive design của bạn bằng cách giả lập lại các kích thước màn hình và độ phân giải khác nhau, bao gồm cả màn hình Retina.
• Đánh giá performance của trang web sử dụng network emulator, mà không gây ảnh hưởng tới traffic của các tab khác.
• Hiển thị bằng hình ảnh và điều tra các câu queries của CSS media
• Giả lập một cách chính xác các input vào device dứoi dạng touch events, geolocation và device orientation.
• Hỗ trợ quá trình debug hiện tại của bạn bằng việc kết hợp device mode với các DevTools khác

Một vài Quy tắc tổng hợp cho việc Test Responsive Web Design

• Text, điều khiển và ảnh được sắp xếp hợp lý
• Hover và selection được highlight và đổi màu
• Các vùng bấm hợp lý
• Màu, đổ bóng và gradient đồng nhất
• Kiểm tra padding chuẩn ở xung quanh các cạnh
• Text, ảnh, điều khiển và các khung không được kéo dài tới viền màn hình
• Font size, style và màu đồng nhất với mỗi loại text
• Các text input được scroll và hiển thị hợp lý
• Trang web cần có thể đọc được đối với mọi độ phân giải
• Không bao giờ hiển thị thanh scroll ngang ở page
• Nội dung được đánh là 'important' cần được hiển thị ở mọi breakpoints.

Breakpoint

Mỗi breakpoint cần có một sự điều chỉnh layout, với các module để thay đổi vị trí và quy tắc hiển thị. Một khả năng khác đó là sử dụng một fluid layout, với text và ảnh được điền một các đối xứng tương đối với chiều rộng của trang.

Kiểm tra vị trí của các module khi bạn thu nhỏ và mở rộng kích thước window của browser hoặc khi bạn xoay thiết bị di động. Nhiều module có thể biến mất khi bạn chuyển từ desktop sang mobile, nhưng bạn cần biết chính xác module nào cần được hiển thị ở viewport nào.

Kết luận

• Quyết định ứng dụng của bạn được sử dụng như thế nào. Bạn có thể lấy được các thông tin quan trọng bằng cách sử dụng Google Analytics tool để xem xem loại device nào được các user sử dụng để truy cập vào trang web của mình.
• Từ phân tích đó, hãy thu gọn những lựa chọn cho việc test của bạn. Hãy chắc rằng trang web của bạn hoạt động tốt trên loại device được sử dụng nhiều nhất để truy cập vào nó, bởi không có cách nào khả thi để test trên tất cả các loại device được.
• Biết rõ các breakpoint và những gì sẽ hiện ra khi bạn chuyển từ breakpoint này sang breakpoint khác.
• Sử dụng các tool tự động và emulator để thực hiện các phép kiểm tra cơ bản và test các high-level function, và kết hợp với việc test thủ công trên các device thật.

Bài tham khảo và dịch từ nguồn http://www.testingexcellence.com/how-to-test-responsive-web-design/