Kiểm tra mức độ Responsive của template với SRT

Mức độ đáp ứng (Responsive) trong các mẫu thiết kế là một trong những đặc điểm quan trọng để đánh giá giá trị của thiết kế đó. Ngày nay, r...


Mức độ đáp ứng (Responsive) trong các mẫu thiết kế là một trong những đặc điểm quan trọng để đánh giá giá trị của thiết kế đó. Ngày nay, responsive là một yêu cầu gần như hiển nhiên cho mọi thiết kế.

Đễ hỗ trợ các bạn nào thường hay thiết kế template responsive, Tiến đã viết một công cụ gọi là "Smart Responsive Tester" (SRT).

Đến với SRT, sau khi bấm nút "Launch the tool", các bạn chỉ việc nhập vào địa chỉ web/blog muốn test và bấm "Test".

Trên menu test sẽ hiển thị các kích cỡ màn hình thông dụng hiện nay và phần trăm phổ biến của chúng (cập nhật đầu năm 2013) để giúp các bạn dễ dàng quyết định thiết kế của mình sẽ đáp ứng phần lớn cho kích cỡ nào.

Với SRT, các bạn còn có thể test với hiệu ứng xoay thiết bị. Nghĩa là sau khi click chọn một kích cỡ thì các bạn click thêm lần nữa để hoán đổi kích thước (phản ánh tương tự như xoay iPhone nằm ngang).

Đặc biệt, các bạn có thể click nút "Share" thể copy và chia sẻ test của mình với mọi người, như chia sẻ với khách hàng hoặc bạn đọc chẳng hạn, để chứng mình rằng thiết kế của bạn là responsive.

Nhược điểm đáng chủ ý của SRT là chưa hỗ trợ IE (có lẽ tại Tiến dùng CSS3), tuy nhiên, SRT lại tương thích với hầu hết các trình duyệt phổ biến hiện nay như Opera, Safari, FF, Chrome,... 

"Một người thiết kế giỏi là một người không bao giờ bỏ lỡ một công cụ tốt". Chúc các bạn luôn có những template để đời cho bạn đọc của bạn.

COMMENTS

BLOGGER: 15
  1. Nice it's working well for me

    Trả lờiXóa
  2. công cụ này tuyệt lắm anh Tiến ạ, trước đây em toàn xài ipadpeek để test, giờ đã có công cụ mới. Thanks

    Trả lờiXóa
  3. Cảm ơn bác Tiến nhiều nha!
    Em xin phép bác được mang về blog em để phổ biến cho anh em đam mê thiết kế blog được biết :)

    Trả lờiXóa
  4. Phải thử xem sao đã.hì

    Trả lờiXóa
  5. Mình test nó không chạy được Tien

    Trả lờiXóa
    Trả lời
    1. Cảm ơn bác, em đã fix. Những phản hồi như vầy thật kịp lúc. Chân thành cảm ơn nhé.

      Xóa
  6. Tiến nên kiểm tra lại cấu trúc liên kết nhé : http://www.google.com/webmasters/tools/richsnippets?url=http%3A%2F%2Fwww.vnblogspot.com%2F2013%2F01%2Fkiem-tra-muc-o-responsive-cua-template.html&html=


    Của mình : http://www.google.com/webmasters/tools/richsnippets?url=http%3A%2F%2Fwww.7phut.net%2F2013%2F01%2Fupdate-dns-cho-blogger-khong-bi-chan.html&html=

    Trả lờiXóa
  7. Nặc danh10:39 24/1/13

    test cho tất cả mã nguồn?

    Trả lờiXóa
  8. Cái này của bác Tiến hay quá. Test của mình rồi. hjhj
    cảm ơn bác nhiều nhé

    Trả lờiXóa
  9. Đã test. Kết quả OK
    http://copythuthuat.blogspot.com/
    Thank

    Trả lờiXóa

Tên

au*cenz,2,au*dashcam,1,au*hhv,3,au*mitom,1,au*pup,1,au*tai,5,au*tdphan,2,au*tgphan,1,au*tvnguyen,76,au*vkhg,1,Blogspot căn bản,11,Các thủ thuật khác,8,Comment phân cấp,3,Công cụ,2,Google SEO,3,Hỗ trợ,2,Hubspot Marketing Grader,1,IE CSS hack,1,kiếm tiền trên mạng,1,Kỹ năng viết blog,7,Lập trình Blogger,3,Mẫu blog,11,Menu,1,Sitemap,1,Sticky,1,Sưu tầm,6,Tên miền Godaddy,2,Thủ thuật,31,Tiện ích bài ngẫu nhiên,1,Tiện ích bài viết mới,1,Tiện ích mạng xã hội,2,Tiện ích nhận xét mới,1,Tiện ích Top nhận xét,1,Tin tức,36,Widgets,8,youtube partner,1,
ltr
item
Vnblogspot: Kiểm tra mức độ Responsive của template với SRT
Kiểm tra mức độ Responsive của template với SRT
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpZj0PNusroSYfMEoW7AA1eF0MXNIJv-KgaGVJAPxlONUcs_cGwG_jKmS8iqeEU7rq_R-Pwoogjt6G-WHxWBp_TB8LIICqP_QTYRl4oSyKLee_MBfoJax7thstQ27iMQeH1c7HkYz_XCdm/s1600/banner.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpZj0PNusroSYfMEoW7AA1eF0MXNIJv-KgaGVJAPxlONUcs_cGwG_jKmS8iqeEU7rq_R-Pwoogjt6G-WHxWBp_TB8LIICqP_QTYRl4oSyKLee_MBfoJax7thstQ27iMQeH1c7HkYz_XCdm/s72-c/banner.png
Vnblogspot
http://vnblogspot2.blogspot.com/2013/01/kiem-tra-muc-o-responsive-cua-template.html
http://vnblogspot2.blogspot.com/
http://vnblogspot2.blogspot.com/
http://vnblogspot2.blogspot.com/2013/01/kiem-tra-muc-o-responsive-cua-template.html
true
5347051965778775909
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content