Responsive lên ngôi
Các phong cách thiết kế web như Responsive hay Fluid đang dần lên ngôi, được người dùng sử dụng nhiều hơn. Dưới đây là 1 bản thống kê trên Themeforest – Một trong những trang buôn bán thiết kế, giao diện lớn của thế giới.
Thiết kế mobile-first : một khái niệm mới về thiết kế web, ưu tiên tập trung cho website chạy trên nền điện thoại, sau đó mới là các thiết bị khác như máy tính bảng, PC.
Trong quá trình thiết kế wap, mình đã tổng hợp 1 số các lưu ý đặc biệt sau đây, mình sẽ update liên tục để bài viết được hoàn thiện hơn. Rất mong nhận được sự đóng góp của các bạn.
1. Dung lượng site
Để tối ưu nhất cho điện thoại, cấu trúc của website cần được thiết kế tối đơn giản. Riêng về mặt hình ảnh, cố gắng sử dụng càng ít càng tốt. Với những hình ảnh cần thiết thì phải resize nhỏ lại cho dung lượng và kích thước phù hợp.
2. XHTML Mobile Profile
Khai báo xhtml để công cụ tìm kiếm nhận diện được website của bạn là được thiết kế để ưu tiên cho điện thoại, việc index và hiển thị kết quả trên mobile sẽ tốt hơn.
3. Font-size: ưu tiên đơn vị rem/em, %
Trong các thiết kế mới hiện nay, các bạn có thể thay người ta thường dùng đơn vị tính “em” hoặc mới nhất là “rem” để dùng cho font-size, thay vì trước đây sử dụng “px”.
Em/Rem khác biệt gì so với px: với đơn vị tính px, kích thước của font chữ gần như là không thay đổi ở mọi trình duyệt, vì thế việc kiểm soát tỉ lệ font so với giao diện device sẽ rất kém, nhiều khi việc hiển thị lỗi, trông rất khó coi. Với em/rem thì khác, đơn vị tính này không cố định mà sẽ thay đổi kích thước tỉ lệ theo phần tử mẹ, mặc định 1rem sẽ bằng 16px hay 12pt.
Tuy nhiên, từ ie8 trở xuống không hỗ trợ “rem”, vì thế cách tối ưu nhất là bạn có thể sử dụng song song 2 đơn vị cho 1 class, với các trình duyệt thông thường sẽ tự động nhận đơn vị rem, với các trình duyệt khác không hỗ trợ sẽ tự động nhận đơn vị thứ 2 kia là px.
Để chuyển đổi tỷ lệ từ px sang rem các bạn có thể sử dụng công cụ sau: Convert px to rem
Ngoài ra các bạn có thể tận dụng đơn vị tính này cho độ rộng min-width, max-width, margin và padding.
4. Mobile Sitemap
5. Meta tag Viewport
Thẻ meta tag viewport giúp cho website tự động thiết lập màn hình theo tỉ lệ 1×1, hiển thị đẹp hơn trên các thiết bị smartphone. Lưu ý khi sử dụng thẻ tag này, các bạn phải chú ý để padding và margin của khung website để tránh xảy ra các lỗi hiện thị tỉ lệ.<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Ngoài ra với các trình duyệt IE8 trở xuống không hỗ trợ media query. Bạn có thể sử dụng media-queries.js hoặc respond.js để hỗ trợ.<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->