Chúng tôi có một khởi đầu tốt về thiết kế đáp ứng. Menu ở các kích thước màn hình nhỏ nhất được chia thành lưới 2 × 4. Nó vừa khít trên màn hình, nhưng giữa điều đó và thương hiệu, nó chiếm rất nhiều không gian. Chúng tôi mở nó trên trình mô phỏng iOS và thấy rằng trong một số trường hợp, bạn không thể thấy bất kỳ nội dung thực tế nào.
Chúng tôi xem xét một số tài nguyên về cách xử lý các mẫu điều hướng, chẳng hạn như bài viết của Brad Frost về các mẫu điều hướng đáp ứng và Off Canvas của Jason Weaver. Chúng tôi cũng xem xét một bản demo thú vị trên MDN có tên Paperfold.
Chúng tôi thêm một liên kết bổ sung vào điều hướng mà cuối cùng chúng tôi gọi là “Điều hướng 'n' Tìm kiếm” sẽ hoạt động như một nút để hiển thị điều hướng trên thiết bị di động khi được chạm vào. Thông qua các điểm ngắt truy vấn phương tiện, chúng tôi ẩn và hiển thị nút này nếu cần.
Việc chuyển đổi điều hướng mà chúng tôi chủ yếu sẽ xử lý bằng JavaScript. Một chút rủi ro vì nó làm cho những người dùng trên màn hình nhỏ bị vô hiệu hóa JavaScript bị xa lánh - nhưng tôi chỉ làm với nó. Con số đó quá nhỏ (nhỏ hơn so với máy tính để bàn không có JavaScript, chắc chắn là ít hơn 1%) nên tôi sẽ chỉ là một kẻ ngốc và chạy với nó.
Tất cả những gì chúng ta thực sự làm với JavaScript là chuyển đổi một tên lớp. Đó là những gì tôi muốn coi là phát triển CSS theo hướng nhà nước. Tất cả việc kiểm soát những gì được hiển thị và khi nào cũng như cách thức được xử lý với CSS. JavaScript chỉ thiết lập một lớp để khai báo trạng thái hiện tại.
Chúng tôi dành nhiều thời gian mày mò để thêm CSS “paperfold”, làm cho nó hoạt động chính xác, rồi đặt tìm kiếm vào một khoảng trống mà chúng tôi tạo phía trên nội dung chính thông qua một số đệm.
Cuối cùng, kích thước và vị trí đã được điều chỉnh để vừa vặn hơn và một nút đóng nhỏ được thêm vào. Tôi quay đi quay lại trong đầu với việc cung cấp giao diện người dùng cho các trạng thái chuyển đổi trên những thứ như thế này. Một mặt, bây giờ người dùng đã tiết lộ điều hướng, tại sao họ cần phải đóng nó? Họ đã nhìn thấy nó. Nếu họ không muốn sử dụng nó, họ có thể lướt qua nó. Mặt khác, tôi thấy hơi phiền khi không thể chuyển đổi trạng thái như thế này trên các ứng dụng khác (vì một số lý do) vì vậy tôi có xu hướng cung cấp một cơ chế để thực hiện điều đó.
