HTML5, ngôn ngữ thiết kế web mới nhất và phổ biến nhất, đã xuất hiện như một cơn bão trong giới thiết kế. Trước đây chúng ta có HTML, giờ có HTML5. Tuy nhiên, nếu nhìn vào sự khác biệt lớn nhất, ta thấy chính Khả năng thích ứng (Responsiveness) là yếu tố làm HTML5 khác biệt và vượt trội hơn HTML cũ.
Khả năng thích ứng của trang web nghĩa là đầu ra hoặc phản hồi nhận được từ trang web sau khi tải trên trình duyệt, tùy thuộc vào thiết bị truy cập.
Bố cục lỏng (Liquid Layout)
HTML5 là sự kết hợp của HTML, CSS và JavaScript. Nó cho phép tạo trang web với bố cục lỏng (liquid/flexible) giống như nước. Nước lấy hình dạng của vật chứa, tương tự bố cục lỏng cho phép nội dung tự co giãn vừa vặn trong khung chứa. Cùng một website, khi mở trên iPad sẽ tự điều chỉnh theo kích thước iPad, khi truy cập trên điện thoại sẽ vừa vặn màn hình điện thoại.
Một nhu cầu khác của nhà thiết kế: Làm sao hiển thị nội dung khác nhau trên mobile và laptop? Hãy hiểu qua ví dụ tâm lý học đơn giản:
Bạn đang ở văn phòng, đội nhóm bỗng định đi ăn trưa ngoài. Bạn lấy điện thoại, mở trang web tìm nhà hàng gần đó (Zomato, Dineout...), lọc theo tiêu chí, chọn ngay. Nhưng nếu dự định đi cuối tuần, bạn mở laptop, lướt trang web cùng đó, xem khuyến mãi, chi tiết menu, tiện ích...
Người dùng mobile thường vội vã, cần chức năng cốt lõi (địa chỉ, điện thoại, menu) chứ không quan tâm UI đẹp mắt. Người dùng desktop có thời gian thưởng thức thiết kế.
Responsive cho phép thiết kế co giãn trang vừa màn hình, ẩn/hiện hình ảnh, thẻ tùy thiết bị.
Thiết kế web đáp ứng (RWD) phát triển trang web theo bố cục điều chỉnh theo độ phân giải màn hình thiết bị. Cho phép trình bày thông tin liên quan trước: giờ mở cửa, số điện thoại, chỉ đường, link menu. Trên desktop thì hiển thị đầy đủ "chuông cờ 휘 huyền".
Bố cục trong RWD dùng tham số linh hoạt (em, %) thay vì giá trị cố định (px, pt...).
Để đạt responsive, cấu trúc trang thay đổi, khái niệm cốt lõi HTML5 xuất hiện. Nguyên tắc cơ bản code HTML5:
- Nội dung → file HTML
- Giao diện, bố cục → file CSS
- Xử lý, validation → file JavaScript
Vậy để có responsive, thay file CSS theo kích thước màn hình, nội dung HTML giữ nguyên.
Chiến lược RWD
RWD dùng Progressive Enhancement (Nâng cấp tiến tiến) thay vì Graceful Degradation (Suy giảm nhẹ nhàng).
Graceful Degradation: Xây dựng cho trình duyệt mới nhất, hỗ trợ trình duyệt cũ sau đó (có lỗi là chấp nhận).
Progressive Enhancement: Tập trung vào nội dung thay vì trình duyệt. Giống chiếc kẹo M&M:
- Hạt đậu phộng: Nội dung đánh dấu bằng HTML ngữ nghĩa giàu
- Lớp socola kem: CSS đẹp mắt
- Vỏ cứng bên ngoài: JavaScript
Framework RWD
Framework HTML5 là template có sẵn CSS/JS tái sử dụng + nội dung giả. Giúp developer mới bắt đầu nhanh. Bố cục được định sẵn.
Nhiều framework: Twitter Bootstrap (phổ biến nhất, mobile-first, miễn phí, dễ cài), Foundation, Skeleton, Boilerplate, Kickstart... Đa số dùng hệ lưới (grid system).
Responsive Web Design đang trở thành tiêu chuẩn bắt buộc cho mọi website. Hỗ trợ trực tuyến phong phú, nhiều công cụ thử nghiệm.