{"id":3275,"date":"2015-07-02T16:17:36","date_gmt":"2015-07-02T14:17:36","guid":{"rendered":"https:\/\/usersnap.com\/?p=3275"},"modified":"2025-08-08T18:00:07","modified_gmt":"2025-08-08T16:00:07","slug":"guide-designing-in-the-browser","status":"publish","type":"post","link":"https:\/\/usersnap.com\/blog\/guide-designing-in-the-browser\/","title":{"rendered":"The Ultimate Guide To Designing In The Browser"},"content":{"rendered":"\n

There are various ways to build a website or web app. We all learned about the traditional waterfall which used to be \u201cstandard\u201d in most companies. And now there\u2019s \u201cdesign in the browser\u201d concept which makes web design workflows much simpler and leaner.<\/p>\n\n\n\n

Here\u2019s the ultimate guide to getting started with designing in the browser.<\/strong><\/p>\n\n\n\n\n\n\n\n

What is \u201cDesign in the Browser\u201d?<\/h2>\n\n\n\n

Design in the browser is basically a concept using HTML and CSS as your primary design tools.<\/p>\n\n\n\n

Basically the code is writing right from the scratch during each phase of the project. From the clients brief on to the first design draft, to an rudimentary prototype to a finished product. Everything (or nearly everything) takes place in the browser.<\/p>\n\n\n\n

Rather than spending hours designing pixel-perfect design drafts in Photoshop, designing in the browser allows you to jump directly into the text editor and start shaping your code.<\/p>\n\n\n

Try Usersnap for Improving Your Website Design<\/h2>Try Usersnap Now<\/a><\/div>\n\n\n\n

Why the concept of the traditional Waterfall is broken.<\/h2>\n\n\n\n

In the old days, designing in Photoshop, Illustrator or Fireworks was a great and probably the most efficient way to go. However, times changed and due to new – more efficient – tools like Bootstrap – prototyping and designing in the browser have become a big time saver.<\/p>\n\n\n\n

Also think about the various devices we are designing for and how long that takes with a traditional waterfall model where pixel-perfect design drafts for different devices are created. With design tools – like Photoshop – only static, unclickable drafts can be crafted. There\u2019s a lot of imagination needed to see all those interactions and effects.<\/p>\n\n\n\n

Why do you design in the browser?<\/h2>\n\n\n\n

Designing in the browser isn\u2019t anything new and there have been some great articles praising the great future of designing in the browser<\/a>. However there might be scenarios where you simply can\u2019t start \u201cdesigning in the browser\u201d.<\/p>\n\n\n\n

To sum things up there are are many pro\u2019s and con\u2019s of designing in the browser. Because of this I tried to summarize the most important ones.<\/p>\n\n\n\n

The greatest advantage of designing in the browser lays in it\u2019s nature itself. Why should you use tools – like Photoshop – to create static designs which are then must be made interactive. By designing in the browser production-ready code is produced from the start.<\/p>\n\n\n\n

This means: Saving money & time!<\/p>\n\n\n\n

Advantages of going straight into the browser<\/h2>\n\n\n\n

Nowadays there are so many options, resources and tools available. By designing in the browser we clearly get better results much faster, which makes our web development workflow significantly more efficient.<\/p>\n\n\n\n

Frameworks everywhere.<\/h3>\n\n\n\n

Frameworks are a great thing, since they will make your web projects more efficient. However, I definitely recommend to get into the basics of programming, before exploring various frameworks.  Bootstrap for example is great front-end framework.<\/p>\n\n\n\n

Interactive prototyping.<\/h3>\n\n\n\n

Designing in the browser actually means that there are clickable and interactive elements. Clients and not-so-tech-savvy people can get a much better understanding of the end result than with traditional design drafts.<\/p>\n\n\n\n

Much easier testing.<\/h3>\n\n\n\n

Since you\u2019re constantly working on your prototype within the browser, chances of a bug-free application are much higher. You can instantly check the design in different devices and screen sizes. Responsive design testing FTW.<\/p>\n\n\n\n

From development to production environment<\/h3>\n\n\n\n

…within zero time. Since you started to code right at the beginning of a project, your code went through frequent code reviews. Because of that, the prototype\u2019s code can go directly into production.<\/p>\n\n\n

Try Usersnap for Improving Your Website Design<\/h2>Try Usersnap Now<\/a><\/div>\n\n\n\n

Tools for Designing in the Browser<\/h2>\n\n\n\n

Convinced of the \u201cdesign in the browser\u201d concept? Want to get right into it? Perfect, here are a couple of great tools which are making your life easier when designing in the browser.<\/p>\n\n\n\n

Get a programming friendly editor<\/h3>\n\n\n\n

This might sound a bit strange. But designing in the browser basically means working a lot on the code of your site. The editor will be your friend and go-to tool in many cases. Choose your editor wisely.<\/p>\n\n\n\n

Bootstrap – your front-end framework<\/h3>\n\n\n\n

Bootstrap is probably the best known front-end prototyping framework available. Originally designed by Twitter, it\u2019s now available to everyone for free. Packed with some great functionalities, it supports typography, forms, buttons and some great JavaScript options.<\/p>\n\n\n

\n
\"design<\/figure>\n<\/div>\n\n\n

http:\/\/getbootstrap.com\/<\/a><\/p>\n\n\n\n

PS: Foundation<\/a> – similar to Bootstrap – is another, yet great front-end framework which is worth a try.<\/p>\n\n\n\n

Style guide<\/h3>\n\n\n\n

Next, it\u2019s about the style guide. It\u2019s super important to keep your design and style elements organized. With a style guide in place, design changes are super easy as they will come. And trust me: they will come \ud83d\ude09<\/p>\n\n\n

\n
\"design<\/figure>\n<\/div>\n\n\n

http:\/\/styletil.es\/<\/a><\/p>\n\n\n\n

Chrome Developer Tools<\/h3>\n\n\n\n

After you created your first prototype in your browser, it\u2019s time to review, test and tweak. The best tools therefore are available for free in every Chrome browser (or Firefox if you prefer).<\/p>\n\n\n\n

With a right click on your site you can start the Chrome developer tools which offer you a broad range of features. You can play around with your code, move styles, edit content and much more.<\/p>\n\n\n

\n
\"design<\/figure>\n<\/div>\n\n\n

Keep track & manage  tasks with Usersnap<\/h3>\n\n\n\n

Since designing in the browser is quite an agile approach, you might wonder how you keep track of change requests, bugs, ideas, etc. I therefore recommend Usersnap, which does a great job making collaboration on website or web app projects much easier.<\/p>\n\n\n\n

By adding the Usersnap widget to your prototype, every single piece of comment and feedback will be stored in your project overview where you can discuss feedback and track bugs.<\/p>\n\n\n

\n
\"design<\/figure>\n<\/div>\n\n\n
\nhttps:\/\/usersnap.com\n<\/div><\/figure>\n\n\n\n

Design skills still needed.<\/h2>\n\n\n\n

Designing in the browser still requires great design skills. No tool in the world will make up for your lack in design know how. However, the browser becomes more and more your design and development environment. And because most of the design process takes place in the browser, doesn\u2019t mean you should give up Photoshop.<\/p>\n\n\n

Try Usersnap for Improving Your Website Design<\/h2>Try Usersnap Now<\/a><\/div>\n\n\n\n

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

What are the perfect tool kit for designing in the browser?<\/strong><\/p>\n\n\n\n

This article was brought to you by Usersnap<\/a> – a visual bug tracking and screenshot tool for every web project. Get started with Usersnap and deliver what users want. Collect your first 20 feedback items for free, upgrade to continue acting on the insights.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

There are various ways to build a website or web app. We all learned about the traditional waterfall which used to be \u201cstandard\u201d in most companies. And now there\u2019s \u201cdesign in the browser\u201d concept which makes web design workflows much simpler and leaner. Here\u2019s the ultimate guide to getting started with designing in the browser.<\/p>\n","protected":false},"author":16,"featured_media":3276,"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-3275","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\/2015\/07\/design-in-browser-guide.png","author_info":{"display_name":"Thomas Peham","author_link":"https:\/\/usersnap.com\/blog\/author\/thomas\/"},"yoast_head":"\nThe Ultimate Guide To Designing In The Browser<\/title>\n<meta name=\"description\" content=\"July 2, 2015\" \/>\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\/guide-designing-in-the-browser\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The Ultimate Guide To Designing In The Browser\" \/>\n<meta property=\"og:description\" content=\"July 2, 2015\" \/>\n<meta property=\"og:url\" content=\"https:\/\/usersnap.com\/blog\/guide-designing-in-the-browser\/\" \/>\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=\"2015-07-02T14:17:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-08T16:00:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2015\/07\/design-in-browser-guide.png\" \/>\n\t<meta property=\"og:image:width\" content=\"700\" \/>\n\t<meta property=\"og:image:height\" content=\"434\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Thomas Peham\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tompeham\" \/>\n<meta name=\"twitter:site\" content=\"@usersnap\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thomas Peham\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/usersnap.com\/blog\/guide-designing-in-the-browser\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/usersnap.com\/blog\/guide-designing-in-the-browser\/\"},\"author\":{\"name\":\"Thomas Peham\",\"@id\":\"https:\/\/usersnap.com\/blog\/#\/schema\/person\/85bd1168f7e7c005c6cd2a4045e3d59b\"},\"headline\":\"The Ultimate Guide To Designing In The Browser\",\"datePublished\":\"2015-07-02T14:17:36+00:00\",\"dateModified\":\"2025-08-08T16:00:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/usersnap.com\/blog\/guide-designing-in-the-browser\/\"},\"wordCount\":1056,\"publisher\":{\"@id\":\"https:\/\/usersnap.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/usersnap.com\/blog\/guide-designing-in-the-browser\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2015\/07\/design-in-browser-guide.png\",\"articleSection\":[\"Web Development\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/usersnap.com\/blog\/guide-designing-in-the-browser\/\",\"url\":\"https:\/\/usersnap.com\/blog\/guide-designing-in-the-browser\/\",\"name\":\"The Ultimate Guide To Designing In The Browser\",\"isPartOf\":{\"@id\":\"https:\/\/usersnap.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/usersnap.com\/blog\/guide-designing-in-the-browser\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/usersnap.com\/blog\/guide-designing-in-the-browser\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2015\/07\/design-in-browser-guide.png\",\"datePublished\":\"2015-07-02T14:17:36+00:00\",\"dateModified\":\"2025-08-08T16:00:07+00:00\",\"description\":\"July 2, 2015\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/usersnap.com\/blog\/guide-designing-in-the-browser\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/usersnap.com\/blog\/guide-designing-in-the-browser\/#primaryimage\",\"url\":\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2015\/07\/design-in-browser-guide.png\",\"contentUrl\":\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2015\/07\/design-in-browser-guide.png\",\"width\":700,\"height\":434,\"caption\":\"design in your browser guide\"},{\"@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\/85bd1168f7e7c005c6cd2a4045e3d59b\",\"name\":\"Thomas Peham\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/usersnap.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c570afeda0ee367f5824a6762a0511ec7be061521c645ef29d34b976c183341d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c570afeda0ee367f5824a6762a0511ec7be061521c645ef29d34b976c183341d?s=96&d=mm&r=g\",\"caption\":\"Thomas Peham\"},\"sameAs\":[\"https:\/\/x.com\/tompeham\"],\"url\":\"https:\/\/usersnap.com\/blog\/author\/thomas\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"The Ultimate Guide To Designing In The Browser","description":"July 2, 2015","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\/guide-designing-in-the-browser\/","og_locale":"en_US","og_type":"article","og_title":"The Ultimate Guide To Designing In The Browser","og_description":"July 2, 2015","og_url":"https:\/\/usersnap.com\/blog\/guide-designing-in-the-browser\/","og_site_name":"Usersnap Blog","article_publisher":"https:\/\/www.facebook.com\/usersnap","article_published_time":"2015-07-02T14:17:36+00:00","article_modified_time":"2025-08-08T16:00:07+00:00","og_image":[{"width":700,"height":434,"url":"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2015\/07\/design-in-browser-guide.png","type":"image\/png"}],"author":"Thomas Peham","twitter_card":"summary_large_image","twitter_creator":"@tompeham","twitter_site":"@usersnap","twitter_misc":{"Written by":"Thomas Peham","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/usersnap.com\/blog\/guide-designing-in-the-browser\/#article","isPartOf":{"@id":"https:\/\/usersnap.com\/blog\/guide-designing-in-the-browser\/"},"author":{"name":"Thomas Peham","@id":"https:\/\/usersnap.com\/blog\/#\/schema\/person\/85bd1168f7e7c005c6cd2a4045e3d59b"},"headline":"The Ultimate Guide To Designing In The Browser","datePublished":"2015-07-02T14:17:36+00:00","dateModified":"2025-08-08T16:00:07+00:00","mainEntityOfPage":{"@id":"https:\/\/usersnap.com\/blog\/guide-designing-in-the-browser\/"},"wordCount":1056,"publisher":{"@id":"https:\/\/usersnap.com\/blog\/#organization"},"image":{"@id":"https:\/\/usersnap.com\/blog\/guide-designing-in-the-browser\/#primaryimage"},"thumbnailUrl":"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2015\/07\/design-in-browser-guide.png","articleSection":["Web Development"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/usersnap.com\/blog\/guide-designing-in-the-browser\/","url":"https:\/\/usersnap.com\/blog\/guide-designing-in-the-browser\/","name":"The Ultimate Guide To Designing In The Browser","isPartOf":{"@id":"https:\/\/usersnap.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/usersnap.com\/blog\/guide-designing-in-the-browser\/#primaryimage"},"image":{"@id":"https:\/\/usersnap.com\/blog\/guide-designing-in-the-browser\/#primaryimage"},"thumbnailUrl":"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2015\/07\/design-in-browser-guide.png","datePublished":"2015-07-02T14:17:36+00:00","dateModified":"2025-08-08T16:00:07+00:00","description":"July 2, 2015","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/usersnap.com\/blog\/guide-designing-in-the-browser\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/usersnap.com\/blog\/guide-designing-in-the-browser\/#primaryimage","url":"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2015\/07\/design-in-browser-guide.png","contentUrl":"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2015\/07\/design-in-browser-guide.png","width":700,"height":434,"caption":"design in your browser guide"},{"@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\/85bd1168f7e7c005c6cd2a4045e3d59b","name":"Thomas Peham","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/usersnap.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c570afeda0ee367f5824a6762a0511ec7be061521c645ef29d34b976c183341d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c570afeda0ee367f5824a6762a0511ec7be061521c645ef29d34b976c183341d?s=96&d=mm&r=g","caption":"Thomas Peham"},"sameAs":["https:\/\/x.com\/tompeham"],"url":"https:\/\/usersnap.com\/blog\/author\/thomas\/"}]}},"_links":{"self":[{"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/posts\/3275","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\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/comments?post=3275"}],"version-history":[{"count":0,"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/posts\/3275\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/media\/3276"}],"wp:attachment":[{"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/media?parent=3275"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/categories?post=3275"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/tags?post=3275"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}