The idea to design directly in the browser was boosted after the concept of responsive web design had been pulled out. Now a lot of responsive websites have already been developed and new ones are created every single day but designing in the browser is still a controversial subject. Maybe in the word combination ‘web designer’ it is much more from ‘designer’ and creativity, passion, taste, and colors, rather than from ‘web coding’ with its analytics, order, logic, control, and realism. Or simply there is no decent alternative – really suitable and handy tools to design in the browsers?
To find the answer we’ve collected a number of articles and posts on this debatable topic.
The Concept and Recommendations How to Use It
1). Designing in the Browser (2009)
http://patrickhaney.com/thinktank/2009/07/15/designing-in-the-browser
by Patrick Haney: “Andy Clarke recently gave a talk at An Event Apart Boston called Walls Come Tumbling Down in which he presented the idea of doing design work directly in the browser to the audience.”
2). Make Your Mockup in Markup (2009)
http://24ways.org/2009/make-your-mockup-in-markup/
by Meagan Fisher: “In a very scientific and official survey I conducted, close to 90% of respondents said they design in Photoshop before the browser… Recently… I’ve come to the conclusion that a website’s design should begin where it’s going to live: in the browser.”
3). Responsive Web Design in the Browser Part 1: Kill Photoshop (2012)
http://blog.teamtreehouse.com/responsive-web-design-in-the-browser-part-1-kill-photoshop
by Josh Long: “Let’s explore the next stage in the evolution of the web and one where Photoshop is a waste of our valuable time. Here’s how to kill Photoshop and do responsive web design in real-time with the only app we need: the browser.”
4). Designing in the browser – Divya Manian (2012)
http://www.webdirections.org/resources/designing-in-the-browser-divya-manian/
by admin: “Learn how to create a prototype from start to finish using these new technologies while taking advantage of quick prototyping tools.”
5). Is Photoshop dead? (2013)
http://www.webdesignerdepot.com/2013/02/is-photoshop-dead/
by Javier Ghaemi: “I guess a more suitable title might be ‘is Photoshop still an appropriate tool for designing typography on the web?’ But that lacks the dramatic appeal of the above.”
6). How to Design Responsively (2013)
http://davidwalsh.name/design-responsively
by Krasimir Tsonev: “Web applications run in the browser. Why not make the design there. It’s actually a little bit strange that we didn’t think about this earlier.”
7). Designing in the Browser with Zoe Gillenwater
http://blog.teamtreehouse.com/designing-in-the-browser-with-zoe-gillenwater
by Treehouse: “Zoe Gillenwater, author of Stunning CSS3, sits down with Treehouse’s Dan Gorgone to discuss the effect CSS3 has had on front-end design, as well as accessibility, mobile first design, and learning how to code.”
7a). Designing in the Browser – An Interview with Brad Frost
http://blog.teamtreehouse.com/designing-in-the-browser-an-interview-with-brad-frost
by Treehouse: “Brad Frost is one of the thought leaders in regards to web design, responsive web design, and designing in the browser. In this episode of Treehouse Friends, we sat down with Brad to pick his brain on designing in the browser.”
8). Tips for Designing in the Browser
http://webdesign.tutsplus.com/articles/workflow/tips-for-designing-in-the-browser/
by Aaron Lumsden: “It’s often thought that designing in the browser is a modern approach to web design. In fact, before the advent of tools such as Photoshop, there was little other choice. Only in the last few years, since the dawn of responsive design, have designers gone back to their roots and started designing in the browser.”
9). Designing In the Browser Is Easier Than You Think
https://medium.com/design-ux/b41e0a05c39f
by Bryan Rees: “Designing in the browser is going to require more than just a working knowledge of HTML, CSS & JS, but it’s not as hard as you think. As with anything, with practice and dedication it won’t take long for it to become second nature and a fruitful means by which to express design ideas.”
10). 12 Killer Tips for Designing in the Browser
http://designshack.net/articles/css/12-killer-tips-for-designing-in-the-browser/
by Joshua Johnson: “This article will provide you with the tools and tricks you need to create brilliant, working mockups as your very first step in the design process.”
11). 3 Steps to Designing in The Browser
http://isotope11.com/blog/3-steps-to-designing-in-the-browser
by Brandon Adams: “I recently had the opportunity to work on a project that I decided to design in the browser and wanted to share what I believe are 3 steps that will help you get started with in-browser design.”
12). Continuous Design and the NoPSD Movement
http://thoughtworks.github.io/p2/issue02/continuous-design.html
by Ryan Boucher and Mike Gardiner: “Andrew says he’ll still do some sketching and Photoshop here and there, but it’s for wireframing and layout, not for perfecting pixels. Just like the NoSQL movement was about using alternative data stores to support better data-modelling, the NoPSD movement is about alternatives that better support the real movement: Continuous Design.”
13). Designing with elements and modules
http://www.netmagazine.com/opinions/designing-elements-and-modules
by Chris Allwood: “The decisions should have been made in the browser. Despite this, I believe that graphics editors still play an important role in how we visualise and deliver our websites… I propose that we begin to use our graphics editor to design ‘elements’ and ‘modules’ of the site.”
Designing in the Browser is Good. Or Evil
1). Building a Better User Experience by Designing in the Browser
http://uxmag.com/articles/building-a-better-user-experience-by-designing-in-the-browser
by Jared Rogers: “Comps are part of an old design process, so stop catering to your client with inauthentic, hypothetical experiences. Present your work in the browser to give everyone the real experience.”
2). Designing in the browser leads to better quality builds
http://csswizardry.com/2010/10/designing-in-the-browser-leads-to-better-quality-builds/
by Harry Roberts: “Last night I got to thinking that the majority of design and build I have done in the past few years I have done straight into the browser… I maintain that the build quality of a site designed in the browser can be far greater than if it started its life in Photoshop.”
3). Designing in the Browser
http://andysearles.com/designing-in-the-browser/
by Andrew Searles: “Although on the outside, it might seem more restrictive to the creative process, in-browser design has actually made me more creative.”
4). I can’t design in the browser
http://www.sazzy.co.uk/2012/02/why-i-cant-design-in-the-browser/
by Sarah Parmenter: “Designing straight into the browser isn’t an option for me though, I still need to go through that creative process in my graphics editor away from the structure of div’s and presentational code, but after getting some initial designs down on paper. Thankfully, I know I’m not alone.”
5). The debate: is it possible to develop the mockup of a website directly on the browser?
http://www.yourinspirationweb.com/en/the-debate-is-it-possible-to-develop-the-mockup-of-a-website-directly-on-the-browser/
by Sarah: “Today’s controversy pertains to an interesting – and at the same time subversive – article by Meagan Fisher on 24ways.org in which the ‘death of Photoshop’ is literally praised in favor of a mockup carried out directly on the browser.”
6). Design in the browser is ‘stifling’
http://www.netmagazine.com/news/design-browser-stifling-132752
by Craig Grannell: “David Bushell argues against design extremism and instant dismissal.”
7). Designing in the Browser is Not the Answer
http://www.andybudd.com/archives/2012/03/designing_in_the_browser_is_not_the_answ/
by Andy Budd: “The argument for ‘designing in the browser’ seems very seductive at first glance. The web is an interactive medium that defies the fixed canvas of traditional layout tools, so why not use the browser as your primary design environment?”
8). Designing Websites In Browser (gasp!)
http://stackoverflow.com/questions/432849/designing-websites-in-browser-gasp
“I’m interested in people’s opinions on the pros and cons, or downright hell no’s on designing websites in the browser, and moving away from Photoshop, Fireworks, etc.”
9). What to do when you can’t design in the browser
http://www.allisongrayce.com/what-to-do-when-you-cant-design-in-the-browser/
by Allison Grayce: “With this new process, we’ve solved most of our issues here with designing in the browser. I feel like it’s a happy middle ground to saving time and energy that Photoshop has cost us in the past, without sacrificing the creative aspect of designing a website. It will still be a big change, but a bit less drastic than completely killing off Photoshop and diving right into code.”
10). Designing in the browser and client conversations
http://css-tricks.com/forums/discussion/24456/designing-in-the-browser-and-client-conversations
Discussion
11). Design In The Browser Means An Iterative Workflow
http://www.vanseodesign.com/web-design/iterative-workflow/
by Steven Bradley: “I wanted to share… where my own process is when it comes to designing and developing a site.”
12). How Working in a Browser Shapes Your Design
http://www.vanseodesign.com/web-design/medium-shapes-design/
by Steven Bradley: “The medium is simply one more tool you have to work with and the more you work with it, the better you’ll be able to express yourself using it.”
13). Why I Design In The Browser
http://kyleledbetter.com/why-i-design-in-the-browser/
by Kyle Ledbetter: “We migrated our massive codebase over to Bootstrap, began designing in the browser and never looked back.”
Tools
1). Easel
https://www.easel.io
“Design & build in your browser. (It’s the fastest way to ship.)”
2). Froont
http://froont.com
“Responsive web design, the visual way. Design websites directly in the browser with a simple drag and drop interface.”
3). Webflow
http://webflow.com
“Design Responsive Websites Visually. Build using our powerful and intuitive UI. Export production-ready HTML & CSS.”
4). ICEcoder
http://codevisually.com/icecoder-in-browser-code-editor/
“ICEcoder is an open-source code editor that lets you work directly within the browser, whether you’re online or offline. It includes broken tag indicators, highlighting themes, secure login, and much more.”
5). 5 tools to help you designing in the browser
http://www.ireckon.com/design/designing-in-the-browser/
by Joel: “Below are some tools that can help you speed up designing in a browser, and encourage moving a lot of the design decision process out of your image editing program and into the browser.”