The debate: is it possible to develop the mockup of a website directly on the browser?

YIW is also a place of confrontation of ideas and also of professional and personal growth, therefore, when possible, we are pleased to involve you in some debates which are born (in and out of the editorial staff) and invite you to say your opinion on the argument.

Today’s controversy pertains to an interesting – and at the same time subversive – article by Meagan Fisher on in which the “death of Photoshop” is literally praised in favor of a mockup carried out directly on the browser.

In a few words, the article invites to design a website without first creating the classic aesthetic draft by means of a graphics software (in the specific case Adobe Photoshop) because – I’m citing textually – “Photoshop has a little usable interface, tends to crash during the most delicate moments and as everybody knows, has also remarkable problems with text rendering”.

But the biggest disadvantage seems to be the fact that, putting the client in front of the simple design of what is going to be his website, the client wouldn’t have any conception of the real interactions of the latter (such as the various javascripts, or the effects on the links) but would be limited to accepting a static image which represents only a fraction of the real potentiality the website will have when put online.

It’s obvious that this article leaves us a little perplex on the limits of this new work methodology: let’s see together which are they.

Working with Photoshop can be counterproductive since it tends to crash in crucial moments, has an interface which is little usable and has got problems with text rendering.

This pleasant interview on helikopterdesign, which had as subject “what do you consider essential for the creation of a website” has revealed that, out of a sample of 25 designers (some of whom are definitively influential) a significant part uses Adobe Photoshop during the phase of graphic projection of the website. (some prefer Fireworks while others have chosen other tools as essential items).

Personally I work with Photoshop (version cs3) several hours a day and I have become aware that, after a few updates, Adobe has finally rendered the version stable: since over a year this version does no longer crash and this is obviously great news as this inclination of the software of restarting frequently – with loss of unsaved work as consequence – rendered the design phase really stressful.

I have never become aware of how the interface of Adobe Photoshop could be little usable: I only know that it can be complex, especially for beginners, but this could depend on the vastness of the software itself and not due to a wrong designing of the interface.

Finally, with regard to text rendering, in fact Photoshop has a text aesthetic appearance slightly different from how it will appear once the text content has been inserted in the markup (only Safari displays text exactly as on Photoshop). Nevertheless, as far as I’m concerned at least, the small differences in text rendering have never been noticed by my clients and have never influenced in a decisive way the aesthetic appearance of the website.

With the emerging of CSS3 browsers can display graphic drafts as beautiful as those created in graphics software.

The CSS3 are powerful and have many graphic properties which are really enthusiastic, we agree on that. But can they really substitute Photoshop in all aspects? Shades, nuances and rounded corners: a good design is just that? For the rest of it the layout example used by Meagan is very simple and graphics is reduced to the minimum. But does the website that came out deserve a place at a random css gallery?

Let’s take as reference the last three websites inserted on Css Mania:

All of them are designs rich of aesthetic details which, as a result, necessarily have to be designed with a graphics software. Maybe such a process can be avoided for simple websites, minimalist, or extremely linear but for websites more attractive aesthetically, it is impossible to renounce to the projection and design phase on Photoshop (or an equivalent graphic program).

It is easy to carry out the modifications by acting directly on the markup and on the style sheet, while on Photoshop some changes (such as the rounded angles) are a real nightmare, given that they require to work entirely on all the interface created.

Obviously, setting the rounded corners to the boxes with extreme ease is one of the advantages of css3, but what if the modifications to perform were of a more full-bodied nature? What if the client instead of asking to change font asked for the expansion of all the inferior box or for the more drastic modification of the already defined structure?

Worse even: if the client didn’t like completely the draft and asked for something more graphical, how to integrate it in a xhtml page already defined?


Although it might happen that I also have to deal with xhtml and css, my role consists mostly in webdesign: colors, typography, images, special graphic effects, etc. Personally speaking I believe that this method brings more limitations than real advantages and can represent a solution only for developers who cannot (or don’t want to) rely on a designer and in this way are free to create a layout without the help of a graphics software, turning the development phase into the real protagonist.

During the phase of projection and design of the layout, I tend to make many tentatives, moving the various graphic elements, modifying the dimensions, adding determined effects instead of others, combining more fonts in search of the right one. Often it takes hours (days even) before finding the right aesthetic and functional result. How’s it possible to meet these needs with the direct projection on the browser?

In the layout example Meagan has set the vari0us sections without any hesitation, without carrying out tests or modifications with the scope of finding the best solution: where’s best to position the photos of the gallery? Is it preferable opting for a horizontal navigation rather than a vertical one? This has been possible given the simplicity of the layout but rarely it is this easy making the mockup of a website; on the other hand (and this is a personal remark) a designer could feel like “being with clipped wings”, as if not having full freedom of projecting and like having to fall within certain limitations.

In synthesis: what happens to creativity? We just have to limit ourselves in rounding boxes and setting the relative shades?

The article in question is without doubt very stimulating, but I believe that we have to judge it with certain caution.

Tell me what you think

Do you think that the method proposed by Meagan is a valid alternative to the traditional draft on Photoshop, too? Have you ever designed a website directly from the browser, without having to rely on a graphics software? Let’s talk.


  • Choose the theme or the plugin that most suits to your online business
  • Download and install it freely with few clicks
  • When you will be positive about your choice, enjoy the advanced features
Your Inspiration Themes >
[pdf]Scarica articolo in PDF[/pdf]
Tags: , ,

The Author

Web designer, has been working in the field of graphics and web development for six years and at the moment besides collaborating with a web agency successfully manages her freelance activity under the name of mascara design. Like many freelancers she is used to handling more roles, ranging from paper graphics to the development of html and css codes; nonetheless this passion of hers remains, always and however, web graphics.

Author's web site | Other articles written by

Related Posts

You may be interested in the following articles:


    • Tom
  1. BorhanJlidi

Trackback e pingback

  1. Tweets that mention The debate: is it possible to develop the mockup of a website directly on the browser? | Your Inspiration Web --
    [...] This post was mentioned on Twitter by Tom Bangham and V. Tavares (E-Goi), nando pappalardo. nando pappalardo said: RT …
  2. The debate: is it possible to develop the mockup of a websit |
    [...] Read the original post: The debate: is it possible to develop the mockup of a websit [...]

Leave a Reply