Translate

 

Là một nhà thiết kế web, điều quan trọng là phải hiểu rõ website của bạn sẽ như thế nào trong các trình duyệt khác nhau và trên các thiết bị khác nhau. Chúng ta tập trung vào việc tạo ra các layout phù hợp với từng thiết bị truy cập của người dùng. Và dưới đây là những điểm khác biệt của các dạng layout trong thiết kế web.

Fixed layout

Kích thước cứng, cố định, không co giãn trên các loại màn hình có kích thước khác nhau

Fixed-layout-website

Fluid

Kích thước “mềm”, theo tỉ lệ %. Có thể co giản trên nhiều loại màn hình. Giữ nguyên đúng tỉ lệ layout ban đầu.

fluid-web-design

Adaptive

Kích thước trang web thay đổi tùy vào kích thước màn hình. Có sự thay đổi của các element tương tự như responsive. Nói thẳng ra thì Adaptive sẽ có sẵn các “diện mạo” khác nhau cho từng kích thước màn hình, và tùy vào kích thước màn hình nằm trong khoảng bao nhiêu, thì Adaptive sẽ “móc” layout tương ứng ra thể hiện.
Ngoài việc chỉ dùng CSS3, thì Adaptive layout còn sử dụng thư viện Javascript cụ thể là jQuerythay đổi layout cho phù hợp với từng thiết bị.
Adaptive sẽ tuân theo mô hình xử lí 3 lớp như sau:
- Lớp nội dung = Các thẻ HTML - Lớp hiển thị = CSS chủ đạo - Lớp Client scripting = Do JavaScript và jQuery đảm nhiệm
(--> Ba lớp này tạo ra một sự kết hợp nhuần nhuyễn)

adaptive

Responsive

Kích thước co giãn, theo tỉ lệ %. Có sự thay đổi của các element trong layout khi kích thước màn hình giảm hoặc tăng. Nhờ sự giúp đỡ chủ yếu là CSS3. Thông qua các câu lệnh media query. Khá phức tạp so với Fluid.


Live demo

Thiết kế web Vivicorp xin giới thiệu một live demo giúp bạn khám phá cả 4 loại layout trên. Truy cập tại: http://liquidapsive.com/ Chú ý góc trên bên phải, có một hộp drop box nhỏ. Chọn để thay đổi thành layout bạn muốn ngâm cứu. Static là tương ứng với Fixed layout mình đề cập ở trên. Và đừng quên co giãn kích thước cửa sổ trình duyệt để thấy sự khác biệt.
Hy vọng với những thông tin trên, bạn đã hiểu rõ hơn về 4 loại layout này. Hiện nay, responsive đang là xu hướng thiết kế web phổ biến nhất. Trong tương lai, chúng ta cùng mong chờ những bước đột phá hơn trong thiết kế web. Chúc các bạn thành công với dự án tiếp theo của mình.


Post a Comment

Blog Archive

chart

 
Top