Đăng nhập

11 công cụ hữu ích dành cho thiết kế web Responsive

  • 02/01/2015 - 2:04 PM
  • 1122 Views

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 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.

11 công cụ hữu ích dành cho thiết kế web Responsive

11 công cụ hữu ích dành cho thiết kế web Responsive

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.

11-cong-cu-huu-ich-cho-ban-lam-responsive-web-design-1

Responsive Web Design

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í.

11-cong-cu-huu-ich-cho-ban-lam-responsive-web-design-2

Adobe Edge Inspect

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.

11-cong-cu-huu-ich-cho-ban-lam-responsive-web-design-3

Foundation

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.

11-cong-cu-huu-ich-cho-ban-lam-responsive-web-design-4

RWD Calculator

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.

11-cong-cu-huu-ich-cho-ban-lam-responsive-web-design-5

Responsive Layouts, Responsively Wireframed

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

11-cong-cu-huu-ich-cho-ban-lam-responsive-web-design-6

Adaptive Images

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.

11-cong-cu-huu-ich-cho-ban-lam-responsive-web-design-7

Bootstrap

8. Retina Images

11-cong-cu-huu-ich-cho-ban-lam-responsive-web-design-8

Retina Images

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é.

11-cong-cu-huu-ich-cho-ban-lam-responsive-web-design-9

SimpleGrid

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-cong-cu-huu-ich-cho-ban-lam-responsive-web-design-10

resizeMyBrowser

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.

11-cong-cu-huu-ich-cho-ban-lam-responsive-web-design-11

The Responsinator