Friday, 04 October 2013 14:53

11 công cụ hữu ích cho bạn làm Responsive Web Design

Written by 
Rate this item
(2 votes)

Tạo ra một giao diện web đã khó, làm cho giao diện của mình có khả năng tương thích với những kích thước màn hình khác nhau(thường được gọi là web responsive design) lại càng khó khăn hơn, kiểm tra trên các kích cỡ màn hình phổ biến như smart phone, tablet. laptop, desktop... cũng không phải chuyện dễ dàng. Bạn sẽ có nhiều cách tiếp cận với web responsive khác nhau, tuy nhiên một trong những cách tiếp cận đơn giản và dễ dàng nhất là sử dụng những công cụ, phần mềm, đoạn mã được cộng đồng phát triển và chia sẻ để tiếp cận responsive web design. Phương pháp này giúp tiết kiệm được rất nhiều thời gian và công sức của bạn.

Tuy nhiên, một vấn đề phát sinh nữa là có hằng hà sa số những công cụ như vậy và công cụ nào là tốt nhất ? Trong bài viết này tôi cố gắng tổng kết lại những công cụ phát triển responsive web design phổ biến và cần thiết nhất cho bạn mà theo tôi là hữu ích nhất. Tôi cũng hi vọng danh sách này có ích cho bạn.

1. Download các bản thảo dành cho Responsive Web Design

Trang web jeremypalford.com cung cấp cho bạn những bản thảo cần thiết với các kích thước khác nhau rất phù hợp để bạn bắt đầu dự án responsive của mình. Bạn hãy click vào hình bên dưới để download gói bản phát thảo về sử dụng.

2. Adobe Edge Inspect

Cho phép bạn xem trước và kiểm tra thiết kế của bạn trên các kích thứoc màn hình khác nhau theo thiết bị. Sản phẩm của Adobe thì quá nổi tiếng rồi không cần phải PR thêm nữa. Tuy nhiên cái này bạn phải trả phí.

3. Foundation

Đây là một dạng CSS Framework dành cho Web responsive . Về căn bản, framework css này giúp bạn tiết kiệm thời gian thiết kế vì đã làm sẵn các grid layout phù hợp. Bạn chỉ việc lựa chọn và áp phiên bản design của bạn lên mà thôi.

4. RWD Calculator

Giúp bạn qui đổi các giá trị từ pixel sang dạng tỉ lệ % trong thiết kế responsive.

5. Responsive Layouts, Responsively Wireframed

Cung cấp cho bạn các gợi ý thiết kế giữa desktop và mobile. Bạn có thể xem cách trình bày các wireframe, chọn wireframe giống mình nhất rồi chuyển sang chế độ mobile để biết ở chế độ này bạn sẽ phải thiết kế nó như thế nào và ngược lại.

6. Adaptive Images

Nói một cách đơn giản, Adaptive Images sẽ tự động xác định kích thước màn hình của thiết bị truy cập, tạo ra các phiên bản cache cho hình ảnh (image) tương ứng với kích thước màn hình đó và tự động thay thế hình tương ứng với kích thước màn hình của thiết bị. Nó được kết hợp với kĩ thuật Fluid Image

7. Bootstrap

Thằng này thì quá nổi tiếng, cũng là một dạng CSS Framework do Twitter phát triển. Điểm mạnh của nó là giúp tiết kiệm thời gian viết CSS và làm responsive dễ dàng bởi thư viện hỗ trợ rất mạnh. Hiện nay có rất nhiều giao diện responsive được xây dựng dựa trên nền tảng Bootstrap.

8. Retina Images

Với thế hệ màn hình retina mới có mật độ điểm ảnh (hay độ phân giải) cao, sẽ rất cần thiết phải tối ưu hóa ảnh sao cho ảnh của bạn không bị vỡ khi phóng to. Một giải pháp hữu hiệu là sử dụng CSS Sprites. Để phục vụ cho các màn hình retina có độ phân giải cao, bạn cần 2 hình ảnh có kích thước bình thường (@x1) và kích thước lớn (@x2). Kéo theo đó là việc bạn phải tăng gấp đôi số lượng files, selector và reference trong CSS. Tuy nhiên, nếu bạn sử dụng CSS Sprite, "bạn chỉ cần ghi đè đường dẫn các tập tin có độ phân giải thường (x1) thành các tập tin có độ phân giải cao hơn (@x2)" - Maykel Loomans nói. Kĩ thuật này có thể làm giảm số lượng request và giảm kích thước các tệp tin và là một giải pháp hiệu quả cho các màn hình độ phân giải cao.

Giải pháp CSS Sprite chỉ đơn thuần thay đổi các giá trị tham chiếu trong file CSS của bạn, còn các hình ảnh sử dụng trên trang web thì sao ? Đối với các hình ảnh trên trang, Imulus đã phát triển Retina.js - một plugin rất hữu ích trong trường hợp này. Nó sẽ kiểm tra xem trên máy chủ của bạn có bất kì nguồn ảnh nào với phần đuôi là @2x ở cuối hay không và thay thế.

9. SimpleGrid

Cái này mình chưa sử dụng lần nào nhưng cũng giới thiệu đến các bạn. Bạn đọc tác dụng và download tại trang của nó và bổ sung phần này giúp mình nhé.

10. resizeMyBrowser

Giúp bạn thu nhỏ, phóng to kích thước trình duyệt tương ứng với các thiết bị truy cập, từ đó bạn có thể nhìn ngắm thiết kế của mình trên các thiết bị di động khác nhau.

11. The Responsinator

The Responsinator là công cụ cho phép bạn xem website của bạn trên các thiết bị khác nhau. Độ sai lệch của công cụ này so với thiết bị thực tế khá thấp nên bạn có thể yên tâm.

Read 17124 times Last modified on Thursday, 14 November 2013 05:30