Cho dù bạn là một người mới bắt đầu hoặc một trang web chuyên nghiệp dày dạn, tạo ra thiết kế đáp ứng có thể gây nhầm lẫn lúc đầu, chủ yếu là do sự thay đổi căn bản trong suy nghĩ đó là cần thiết. Như thời gian đi về, Thiết kế Web Responsive được trôi đi từ hồ bơi truyền mốt nhất thời và nhanh chóng xâm nhập vào lĩnh vực tiêu chuẩn thực hành. Trong thực tế, mức độ chuyển đổi mô hình này cảm thấy như cơ bản là sự chuyển đổi từ bảng bố trí dựa trên CSS. Đơn giản, đây là một cách rất khác nhau của thiết kế trang web và nó đại diện cho tương lai.
Thiết kế Web Responsive là gì ?
Năm 2010, trang web A List Apart cho đăng tải một bài viết với tiêu đề "Responsive Web Design" (tạm dịch: "thiết kế web có độ phản hồi cao"). Bài viết này nói về việc áp dụng nhiều bố cục trang web cho các loại kích cỡ màn hình khác nhau chứ không chỉ thiết kế một giao diện cố định như người ta vẫn thường làm trước đó. Kể từ đây, giới lập trình web bắt đầu để ý hơn đến responsive web design (RWD).
Cộng với sự phát triển của các chuẩn HTML5 và CSS3, RWD đã trở thành một thứ quan trọng mà quản trị viên hay chủ sỡ hữu website cần phải nghĩ tới trong bối cảnh ngày càng nhiều thiết bị di động với đủ các kích cỡ, đủ loại độ phân giải màn hình khác nhau được tung ra thị trường. Vậy RWD là gì và ảnh hưởng của nó đến chúng ta như thế? Trong bài viết này mình xin chia sẻ một ít thông tin với các bạn
Để xem nó trong hành động, mở bài viết này trên một trình duyệt máy tính để bàn và từ từ làm cho trình duyệt mỏng hơn và rộng hơn. Bạn sẽ thấy cách bố trí kỳ diệu điều chỉnh bản thân để thoải mái hơn phù hợp với chiều rộng mới của trình duyệt, ngay cả khi bạn làm cho trang gầy như độ phân giải của điện thoại di động. Dưới đây là một số ảnh chụp màn hình của những gì các thiết kế trông giống như suy nghĩ ở độ phân giải màn hình khác nhau:
Thật khó để nói về Thiết kế Web Responsive mà không nhắc đến tác giả của nó, Ethan Marcotte. Nếu bạn chưa đọc của mình bài viết chuyên đề về thiết kế web đáp ứng , tôi khuyên bạn nên kiểm tra xem nó ra (đọc nghiêm túc, điều này là cần thiết). Trong bài viết, Ethan thảo luận về tất cả các ý tưởng quan trọng hình thành nên thiết kế web đáp ứng; và đó là thực sự những gì Thiết kế Web Responsive làm, về mặt kỹ thuật. Nó không phải là một mảnh duy nhất của công nghệ, nhưng đúng hơn, một tập hợp các kỹ thuật và ý tưởng hình thành một toàn thể. Đây là một trong những nguồn chính của sự nhầm lẫn, và trong một khoảnh khắc chúng ta sẽ phá vỡ mọi thứ xuống và xem xét từng phần.
Vì vậy, Thiết kế Web Responsive là những gì chính xác? Trên thực tế, một câu hỏi tốt hơn để hỏi có thể là, những vấn đề không thiết kế web đáp ứng giải quyết? Vâng, như bạn có thể nhận thấy, máy tính không phải là mảnh duy nhất của phần cứng với một trình duyệt web nữa. Tôi có thể nhận được bản thân mình gặp rắc rối bằng cách nói này, nhưng iPhone là một trong những thiết bị di động đầu tiên có một trình duyệt web thực sự tuyệt vời, và nó thực sự đặt sự chú ý vào việc nâng cấp các kinh nghiệm của web di động. Nhiều thiết bị khác làm theo và, dường như qua đêm, khuôn mặt của các trang web điện thoại di động đã thay đổi.
Cảnh quan thay đổi của các trình duyệt web có nghĩa là người dùng mong đợi cũng đã thay đổi; người dự kiến để có thể duyệt web trên điện thoại của mình dễ dàng như họ duyệt web trên máy tính để bàn. Vì vậy, để đáp ứng này (nếu bạn sẽ tha các pun) cộng đồng thiết kế web bắt đầu tạo ra các phiên bản di động của trang web của họ. Trong nhận thức muộn màng, điều này là không thực sự là con đường phía trước, nhưng vào thời điểm đó dường như là một ý tưởng hợp lý. Mỗi trang web sẽ có phiên bản bình thường 'máy tính để bàn của họ về trang web của họ, và như một phần thưởng, một phiên bản "di động".
Công nghệ không ngừng tiến lên phía trước, vì vậy không lâu sau khi thị trường phần cứng điện thoại đã được cách mạng hóa, các yếu tố hình thức khác tăng phổ biến. Ngoài điện thoại và máy tính cá nhân, các thiết bị như máy tính bảng màn hình cảm ứng và máy tính xách tay nhỏ (netbook, nếu bạn thích thuật ngữ) bắt đầu xuất hiện ở khắp mọi nơi.
Nó không chỉ là màn hình nhỏ, hoặc. Màn hình to, độ phân giải cao đang bắt đầu trở nên phổ biến hơn nhiều so với sử dụng được, và nó sẽ là một sự lãng phí cho nhà thiết kế web để không tận dụng điều này.
Tóm lại, quang phổ của các kích cỡ màn hình và độ phân giải được mở rộng mỗi ngày, và tạo ra một phiên bản khác nhau của một trang web mà mục tiêu mỗi thiết bị cá nhân không phải là một cách thiết thực về phía trước. Đây là vấn đề mà các địa chỉ thiết kế web đáp ứng đầu vào.
Trước đây, tôi đã đề cập rằng thiết kế web đáp ứng không phải là một mảnh duy nhất của công nghệ, nhưng thay vào đó, một bộ sưu tập các kỹ thuật và ý tưởng. Bây giờ chúng ta có một ý tưởng tốt hơn về không gian vấn đề chúng ta đang giải quyết, chúng ta hãy nhìn vào mỗi một phần của giải pháp.
Lưới dịch
Ý tưởng chính đằng sau thiết kế đáp ứng đầu tiên là việc sử dụng những gì được biết đến như một mạng lưới chất lỏng. Trong thời gian gần đây, việc tạo ra một "bố trí chất lỏng" mà mở rộng với trang đã không được khá phổ biến như tạo bố trí chiều rộng cố định; thiết kế trang đó là một số cố định của các điểm ảnh trên, và sau đó tập trung vào trang. Tuy nhiên, khi xem xét một số lượng lớn các phân giải màn hình hiện diện trong thị trường hiện nay, lợi ích của bố cục lỏng là quá lớn để bỏ qua.