{"id":781,"date":"2013-07-16T08:30:02","date_gmt":"2013-07-16T06:30:02","guid":{"rendered":"https:\/\/usersnap.com\/?p=781"},"modified":"2025-10-13T17:00:29","modified_gmt":"2025-10-13T15:00:29","slug":"6-tools-to-get-started-with-responsive-web-design","status":"publish","type":"post","link":"https:\/\/usersnap.com\/blog\/6-tools-to-get-started-with-responsive-web-design\/","title":{"rendered":"6 tools to get started with responsive web design"},"content":{"rendered":"\n

Nowadays – when building a website – one is confronted with a number of different sizes and browsers that is daunting.* Plus, with mobile adoption skyrocketing, the diversity of mobile devices on the market doesn\u2019t fail to grow exponentially. Thank god \/ the vivid web design community no custom coding is needed for each device or screen size with current responsive web design frameworks and testing tools.<\/p>\n\n\n\n

We’ve selected 6 tools and libraries to get you started with responsive web design:<\/p>\n\n\n

Try Usersnap for UX Research <\/h2>Try Usersnap Now<\/a><\/div>\n\n\n\n

Bootstrap<\/h2>\n\n\n\n

Built at Twitter by Mark Otto<\/a> and Jacob Thornton<\/a>, Bootstrap<\/a> offers an easy configurable CSS front-end framework. Bootstrap was made to not only look and behave great in the latest desktop browsers (as well as IE7!), but also in tablet and smartphone browsers with a 12-column responsive grid, dozens of components, JavaScript plugins, typography, form controls, and has a web-based Customizer<\/a>. Bootstrap comes in different shapes and forms, like Google Bootstrap<\/a>, Retriever Bootstrap<\/a> and the super fun (and equally ugly) Geo Bootstrap<\/a>.<\/p>\n\n\n\n\n\n\n

\n
\"Bootstrap<\/a><\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Unsemantic<\/h2>\n\n\n\n

Unsemantic<\/a> is a fluid grid system that is the successor to the 960 Grid System<\/a>. Instead of being a set number of columns, it’s entirely based on percentages, making your grid more flexible. For instance, if you want a 50% wide column, simply use.  There are grid classes for multiples of five (5, 10, 15 \u2026 95, 100). As are there grid classes for dividing a page into thirds (grid-33 and grid-66).<\/p>\n\n\n

\n
\"Unsemantic<\/a><\/figure>\n<\/div>\n\n\n


Unsemantic supports all major browsers: Chrome, Firefox, Internet Explorer (7+), Opera, and Safari.<\/p>\n\n\n\n

Brackets.io<\/h2>\n\n\n\n

Brackets<\/a> is an open-source editor for web design and development built on top of HTML, CSS and JavaScript. The project was created and is maintained by Adobe, and is released under an MIT License. As a developer, you want to hand-edit your CSS code and potentially do a wide array of specific tweaks for each media query. Brackets focuses on providing \u201cQuick Edit\u201d in-line views that provide context-sensitive access to your content, without taking you away from your source code. The browser is literally your design view. Brackets is in Beta and a bit flaky still, but definitely ‘one to watch’. Especially with the Responsive Design Tool add-on Lee Brimelow is raving about<\/a>:<\/p>\n\n\n

\n
\"Lee<\/a><\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Responsivepx<\/h2>\n\n\n\n

Responsivepx<\/a> offers a great way to check the status quo of your (responsive) web design. Entering the url to your site – local or online – you can use the controls to adjust the width and height of your viewport to find exact breakpoint widths and use that information in your media queries. You can play with our responsive design <\/a>here:<\/p>\n\n\n

\n
\"ResponsivePX<\/a><\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

ami.responsivedesign.is<\/h2>\n\n\n\n

Much like Responsivepx, ami.responsivedesign.is<\/a> tests the status quo of your (responsive) website layout and offer you to drag, drop, slide and copy the CSS needed to make your web design truly responsive. Give it a try with the Usersnap blog<\/a>!<\/p>\n\n\n

\n
\"Are<\/a>
ami.responsivedesign.is<\/figcaption><\/figure>\n<\/div>\n\n

Try Usersnap for UX Research <\/h2>Try Usersnap Now<\/a><\/div>\n\n\n\n

Usersnap<\/h2>\n\n\n\n

Slapping a responsive framework or ready-made CSS on your website might make it almost instant responsive, but to find out if it really serves its purpose on all devices you need user feedback. Usersnap is great tool to do QA (Quality Assurance) on your responsive web designs. What better test group to cater than you your own user base, right? We invite you to try out our service for free. Sign up for our risk-free trial<\/a>!<\/p>\n\n\n\n

\n

Usability testing isn’t just about finding\/fixing problems. It’s about knowing what margins exist at the edge of your product.<\/p>\n\n\n\n

\u2014 Joshua Porter (@bokardo), thought leader on all things web design, June 18, 2013<\/a><\/p>\n<\/blockquote>\n\n\n\n

\"Usersnap<\/figure>\n\n\n\n

<\/p>\n\n\n\n

More tools<\/h2>\n\n\n\n

Onextrapixel, one of my favorite design blogs, went ahead and wrote a post on 55+ Great and Useful Tools for Responsive Web Design<\/a>. If you can\u2019t commit to using one tool – and why would you, with all those free resources available – make sure to check it out.<\/p>\n\n\n\n

Happy developing!<\/p>\n\n\n\n

* We described this challenge at length in a previous post<\/a>.<\/em><\/p>\n\n\n\n

Photo credit: Muhammad Rafizeldi<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Nowadays – when building a website – one is confronted with a number of different sizes and browsers that is daunting.* Plus, with mobile adoption skyrocketing, the diversity of mobile devices on the market doesn\u2019t fail to grow exponentially. Thank god \/ the vivid web design community no custom coding is needed for each device […]<\/p>\n","protected":false},"author":5,"featured_media":795,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":true,"inline_featured_image":false,"ub_ctt_via":"","footnotes":""},"categories":[8],"tags":[],"class_list":["post-781","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development-blog"],"acf":[],"featured_image_src":"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2013\/07\/Screen-Shot-2013-07-11-at-2.10.54-PM.png","author_info":{"display_name":"Floor Drees","author_link":"https:\/\/usersnap.com\/blog\/author\/floor\/"},"yoast_head":"\n6 tools to get started with responsive web design - Usersnap Blog<\/title>\n<meta name=\"description\" content=\"6 easy-to-use tools to get started with responsive web design.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/usersnap.com\/blog\/6-tools-to-get-started-with-responsive-web-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"6 tools to get started with responsive web design - Usersnap Blog\" \/>\n<meta property=\"og:description\" content=\"6 easy-to-use tools to get started with responsive web design.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/usersnap.com\/blog\/6-tools-to-get-started-with-responsive-web-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Usersnap Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/usersnap\" \/>\n<meta property=\"article:published_time\" content=\"2013-07-16T06:30:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-13T15:00:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2013\/07\/Screen-Shot-2013-07-11-at-2.10.54-PM.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1386\" \/>\n\t<meta property=\"og:image:height\" content=\"988\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Floor Drees\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@FloorDrees\" \/>\n<meta name=\"twitter:site\" content=\"@usersnap\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Floor Drees\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/usersnap.com\/blog\/6-tools-to-get-started-with-responsive-web-design\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/usersnap.com\/blog\/6-tools-to-get-started-with-responsive-web-design\/\"},\"author\":{\"name\":\"Floor Drees\",\"@id\":\"https:\/\/usersnap.com\/blog\/#\/schema\/person\/192527bfcdea3007f77595befffaf5c4\"},\"headline\":\"6 tools to get started with responsive web design\",\"datePublished\":\"2013-07-16T06:30:02+00:00\",\"dateModified\":\"2025-10-13T15:00:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/usersnap.com\/blog\/6-tools-to-get-started-with-responsive-web-design\/\"},\"wordCount\":655,\"publisher\":{\"@id\":\"https:\/\/usersnap.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/usersnap.com\/blog\/6-tools-to-get-started-with-responsive-web-design\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2013\/07\/Screen-Shot-2013-07-11-at-2.10.54-PM.png\",\"articleSection\":[\"Web Development\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/usersnap.com\/blog\/6-tools-to-get-started-with-responsive-web-design\/\",\"url\":\"https:\/\/usersnap.com\/blog\/6-tools-to-get-started-with-responsive-web-design\/\",\"name\":\"6 tools to get started with responsive web design - Usersnap Blog\",\"isPartOf\":{\"@id\":\"https:\/\/usersnap.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/usersnap.com\/blog\/6-tools-to-get-started-with-responsive-web-design\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/usersnap.com\/blog\/6-tools-to-get-started-with-responsive-web-design\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2013\/07\/Screen-Shot-2013-07-11-at-2.10.54-PM.png\",\"datePublished\":\"2013-07-16T06:30:02+00:00\",\"dateModified\":\"2025-10-13T15:00:29+00:00\",\"description\":\"6 easy-to-use tools to get started with responsive web design.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/usersnap.com\/blog\/6-tools-to-get-started-with-responsive-web-design\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/usersnap.com\/blog\/6-tools-to-get-started-with-responsive-web-design\/#primaryimage\",\"url\":\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2013\/07\/Screen-Shot-2013-07-11-at-2.10.54-PM.png\",\"contentUrl\":\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2013\/07\/Screen-Shot-2013-07-11-at-2.10.54-PM.png\",\"width\":1386,\"height\":988,\"caption\":\"ami.responsivedesign.is\"},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/usersnap.com\/blog\/#website\",\"url\":\"https:\/\/usersnap.com\/blog\/\",\"name\":\"Usersnap Blog\",\"description\":\"Learn more about how to collect user feedback and build better products with the magic power of feedback.\",\"publisher\":{\"@id\":\"https:\/\/usersnap.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/usersnap.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/usersnap.com\/blog\/#organization\",\"name\":\"Usersnap\",\"url\":\"https:\/\/usersnap.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/usersnap.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/usersnap.com\/wp-content\/uploads\/2020\/08\/Usersnap-Updated-Logo.png\",\"contentUrl\":\"https:\/\/usersnap.com\/wp-content\/uploads\/2020\/08\/Usersnap-Updated-Logo.png\",\"width\":136,\"height\":26,\"caption\":\"Usersnap\"},\"image\":{\"@id\":\"https:\/\/usersnap.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/usersnap\",\"https:\/\/x.com\/usersnap\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/usersnap.com\/blog\/#\/schema\/person\/192527bfcdea3007f77595befffaf5c4\",\"name\":\"Floor Drees\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/usersnap.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/398c7a57bc95c84ec629ed2fba1408402fe66b76f9b56d8169829ad06d77e907?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/398c7a57bc95c84ec629ed2fba1408402fe66b76f9b56d8169829ad06d77e907?s=96&d=mm&r=g\",\"caption\":\"Floor Drees\"},\"sameAs\":[\"https:\/\/x.com\/FloorDrees\"],\"url\":\"https:\/\/usersnap.com\/blog\/author\/floor\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"6 tools to get started with responsive web design - Usersnap Blog","description":"6 easy-to-use tools to get started with responsive web design.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/usersnap.com\/blog\/6-tools-to-get-started-with-responsive-web-design\/","og_locale":"en_US","og_type":"article","og_title":"6 tools to get started with responsive web design - Usersnap Blog","og_description":"6 easy-to-use tools to get started with responsive web design.","og_url":"https:\/\/usersnap.com\/blog\/6-tools-to-get-started-with-responsive-web-design\/","og_site_name":"Usersnap Blog","article_publisher":"https:\/\/www.facebook.com\/usersnap","article_published_time":"2013-07-16T06:30:02+00:00","article_modified_time":"2025-10-13T15:00:29+00:00","og_image":[{"width":1386,"height":988,"url":"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2013\/07\/Screen-Shot-2013-07-11-at-2.10.54-PM.png","type":"image\/png"}],"author":"Floor Drees","twitter_card":"summary_large_image","twitter_creator":"@FloorDrees","twitter_site":"@usersnap","twitter_misc":{"Written by":"Floor Drees","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/usersnap.com\/blog\/6-tools-to-get-started-with-responsive-web-design\/#article","isPartOf":{"@id":"https:\/\/usersnap.com\/blog\/6-tools-to-get-started-with-responsive-web-design\/"},"author":{"name":"Floor Drees","@id":"https:\/\/usersnap.com\/blog\/#\/schema\/person\/192527bfcdea3007f77595befffaf5c4"},"headline":"6 tools to get started with responsive web design","datePublished":"2013-07-16T06:30:02+00:00","dateModified":"2025-10-13T15:00:29+00:00","mainEntityOfPage":{"@id":"https:\/\/usersnap.com\/blog\/6-tools-to-get-started-with-responsive-web-design\/"},"wordCount":655,"publisher":{"@id":"https:\/\/usersnap.com\/blog\/#organization"},"image":{"@id":"https:\/\/usersnap.com\/blog\/6-tools-to-get-started-with-responsive-web-design\/#primaryimage"},"thumbnailUrl":"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2013\/07\/Screen-Shot-2013-07-11-at-2.10.54-PM.png","articleSection":["Web Development"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/usersnap.com\/blog\/6-tools-to-get-started-with-responsive-web-design\/","url":"https:\/\/usersnap.com\/blog\/6-tools-to-get-started-with-responsive-web-design\/","name":"6 tools to get started with responsive web design - Usersnap Blog","isPartOf":{"@id":"https:\/\/usersnap.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/usersnap.com\/blog\/6-tools-to-get-started-with-responsive-web-design\/#primaryimage"},"image":{"@id":"https:\/\/usersnap.com\/blog\/6-tools-to-get-started-with-responsive-web-design\/#primaryimage"},"thumbnailUrl":"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2013\/07\/Screen-Shot-2013-07-11-at-2.10.54-PM.png","datePublished":"2013-07-16T06:30:02+00:00","dateModified":"2025-10-13T15:00:29+00:00","description":"6 easy-to-use tools to get started with responsive web design.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/usersnap.com\/blog\/6-tools-to-get-started-with-responsive-web-design\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/usersnap.com\/blog\/6-tools-to-get-started-with-responsive-web-design\/#primaryimage","url":"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2013\/07\/Screen-Shot-2013-07-11-at-2.10.54-PM.png","contentUrl":"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2013\/07\/Screen-Shot-2013-07-11-at-2.10.54-PM.png","width":1386,"height":988,"caption":"ami.responsivedesign.is"},{"@type":"WebSite","@id":"https:\/\/usersnap.com\/blog\/#website","url":"https:\/\/usersnap.com\/blog\/","name":"Usersnap Blog","description":"Learn more about how to collect user feedback and build better products with the magic power of feedback.","publisher":{"@id":"https:\/\/usersnap.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/usersnap.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/usersnap.com\/blog\/#organization","name":"Usersnap","url":"https:\/\/usersnap.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/usersnap.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/usersnap.com\/wp-content\/uploads\/2020\/08\/Usersnap-Updated-Logo.png","contentUrl":"https:\/\/usersnap.com\/wp-content\/uploads\/2020\/08\/Usersnap-Updated-Logo.png","width":136,"height":26,"caption":"Usersnap"},"image":{"@id":"https:\/\/usersnap.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/usersnap","https:\/\/x.com\/usersnap"]},{"@type":"Person","@id":"https:\/\/usersnap.com\/blog\/#\/schema\/person\/192527bfcdea3007f77595befffaf5c4","name":"Floor Drees","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/usersnap.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/398c7a57bc95c84ec629ed2fba1408402fe66b76f9b56d8169829ad06d77e907?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/398c7a57bc95c84ec629ed2fba1408402fe66b76f9b56d8169829ad06d77e907?s=96&d=mm&r=g","caption":"Floor Drees"},"sameAs":["https:\/\/x.com\/FloorDrees"],"url":"https:\/\/usersnap.com\/blog\/author\/floor\/"}]}},"_links":{"self":[{"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/posts\/781","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/comments?post=781"}],"version-history":[{"count":0,"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/posts\/781\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/media\/795"}],"wp:attachment":[{"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/media?parent=781"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/categories?post=781"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/tags?post=781"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}