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

Thảo luận trong 'HTML vs Browser' bắt đầu bởi babyinternet, 20/8/13.

  1. babyinternet

    babyinternet Administrator

    Tham gia ngày:
    4/7/08
    Bài viết:
    4,655
    Đã được thích:
    1,583
    Điểm thành tích:
    113
    Nơi ở:
    [}{]e[][]
    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.

    [​IMG]

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

    [​IMG]

    3. Foundation

    Đây là một dạng CSS Framework dành cho Web responsive mà tôi đã có dịp giới thiệu với bạn ở bài viết 7 lời khuyên hữu ích. 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.



    [​IMG]


    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.

    [​IMG]

    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.

    [​IMG]

    6. Adaptive Images

    Đây cũng là một phần mà tôi đã nhắc đến trong bài Responsive Design: 7 lời khuyên giúp cải tiến qui trình làm việc của bạn. 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

    [​IMG]

    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.

    [​IMG]

    8. Retina Images

    Trích lại nội dung trong bài viết Responsive Design: 7 lời khuyên giúp cải tiến qui trình làm việc của bạn

    [​IMG]

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


    [​IMG]

    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.

    [​IMG]

    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.

    [​IMG]


    Tổng hợp và biên soạn từ webdesignledger.com
    Ghi rõ nguồn www.vnwebmaster.com khi đăng bài viết này lại.
     
  2. hanhnv_93

    hanhnv_93 Guest

    Điểm mạnh của các phần mềm này 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
     
  3. manh

    manh Đang làm quen

    Tham gia ngày:
    25/1/10
    Bài viết:
    213
    Đã được thích:
    1
    Điểm thành tích:
    18
    Nhân làm 1 chủ đề hướng dẫn thiết kế website responsive với Twitter Bootstrap đi. Chắc chắn sẽ có rất nhiều người follow đấy!:D
     
  4. vanbach26

    vanbach26 Đang làm quen

    Tham gia ngày:
    24/4/14
    Bài viết:
    119
    Đã được thích:
    1
    Điểm thành tích:
    18
    A "babyinternet" có thể viết 1 bài về Responsive Layouts được không a? Cái này sài khó quá. :amazed:
     
  5. 3zoka

    3zoka Guest

    Thanks bác babyinternet ! Nhiều công cụ hay quá .Mình kết nhất cái bootstrap với cái số 10 :D
     
  6. huyentrang

    huyentrang Đang làm quen

    Tham gia ngày:
    12/4/14
    Bài viết:
    49
    Đã được thích:
    0
    Điểm thành tích:
    6
    Nơi ở:
    Hà Nội
    Hiện tại thì mình đang sử dụng Foundation và Adaptive Images. Tuy mới đầu có chút khó khăn nhưng dần cũng thành thạo.
     
  7. dichvuone

    dichvuone Lính mới

    Tham gia ngày:
    23/10/13
    Bài viết:
    13
    Đã được thích:
    0
    Điểm thành tích:
    1
    chưa biết các công cụ này bao giờ
     
  8. tom_ieu_jerry

    tom_ieu_jerry Đang làm quen

    Tham gia ngày:
    14/3/14
    Bài viết:
    31
    Đã được thích:
    0
    Điểm thành tích:
    6
    Em đang làm đồ án và có 1 chương tìm hiểu về Resposive Website Design . Trong 11 tools này thì nên sử dụng loại nào với người mới bắt đầu như e ạ ?
     
  9. fanfan

    fanfan Guest

    11 tools nhưng không phải cùng loại mà xếp được từ dễ đến khó .Bạn tìm hiểu cái nào trước cũng được .Nếu đã thạo CSS thì tìm hiểu về Bootstrap
     
  10. ozawa69

    ozawa69 Lính mới

    Tham gia ngày:
    24/5/14
    Bài viết:
    3
    Đã được thích:
    0
    Điểm thành tích:
    1
    Mình đang cần cái số Foundation frameword css .Rất tiện lợi chỉ việc chọn cái css phù hợp là chiến thôi .Thanks chủ thread nhiều
     
  11. ClickENter

    ClickENter Đang làm quen

    Tham gia ngày:
    8/9/12
    Bài viết:
    99
    Đã được thích:
    0
    Điểm thành tích:
    16
    thanks anh em đang mò mò làm cái nè :D. thời nay thấy web responsive quan trọng thật đành cặm cụi học thêm cho đữ lạc hậu vs thời đại :D
     
  12. ngoctan3710

    ngoctan3710 Banned Tài khoản đã bị khóa

    Tham gia ngày:
    25/11/14
    Bài viết:
    98
    Đã được thích:
    0
    Điểm thành tích:
    6
    Có thể làm thêm 1 bài hướng dẫn cụ thể về bootstrap không bác ơi.
     
  13. remcuaminhdang

    remcuaminhdang Lính mới

    Tham gia ngày:
    15/3/14
    Bài viết:
    13
    Đã được thích:
    0
    Điểm thành tích:
    1
    Đúng rồi mình cũng thấy khó sài quá à, hi vọng là sài sẽ đơn giản hơn khi có bài viết chi tiết về nó.
     
Đang tải...

Chia sẻ trang này