We all know that Photoshop and Fireworks are far from perfect for designing responsive websites, but what is the alternative?
A little over a week ago I asked the question on my blog “has responsive design killed Photoshop for web designers?”
I suggested that graphical packages that require you to set a canvas size before you could start designing, were far from ideal in the world of responsive design.
The post caused a phenomenal response with 56 comments and a lot of attention from the likes of Smashing Magazine.
Photoshop: the best of bad options?
The overwhelming response in the comments was that although tools like Photoshop and Fireworks weren’t ideal, they were the best that we had.
Although designing in a browser has its place, the feeling was that we couldn’t do away entirely with graphics packages.
Obviously, we will still need graphics packages for producing imagery for our site. However, I cannot help feeling static comps are not what we should be presenting clients. That said, I do understand the concerns surrounding dropping graphics packages as our primary design tool.
Fortunately, it would appear that Adobe is aware of the shortcomings of its software and is working hard to offer us an alternative. This alternative is called Reflow.
Introducing Adobe Reflow
Adobe Reflow seems to be a hybrid of traditional graphics package and designing in the browser. Although its tools have a lot in common with Photoshop, the whole thing is rendered using CSS. The result is that when you create a box with rounded corners and drop shadows, this is actually being rendered as CSS in the background.
Because the whole application is built on CSS, Reflow also supports the fluid nature of the web. You can even set breakpoints allowing you to change the layout for responsive sites.
The other advantage of Reflow is that you can select an element and look at the code associated with it. This makes it easy when it comes to coding your design. No doubt its code will be far from perfect. However, for things like colours, sizes and styling it will be really useful.
This ability to look at the code also offers another potential advantage, the chance for pure designers to learn code.
An educational tool too
I have just returned from HOW interactive in Washington DC. This conference is primarily aimed at print designers who are moving across to the web.
The one thing that shocked me was how reluctant many of these designers were to learn code. I am aware this can be a controversial area, but it strikes me as insane that a designer shouldn’t at least understand how websites are coded, even if they don’t produce final code.
Reflow offers an opportunity for these designers to pick up some of the basics of coding. By allowing them to look at the code associated with their stylings, my hope is that they will see that coding CSS really isn’t that difficult.
Unfortunately, it could also lead to Dreamweaver style WYSIWYG code and that is dangerous.
The only element of Reflow that does concern me is that it offers the ability to export code. This puts Reflow in the same league as Dreamweaver.
Although Dreamweaver is actually an excellent coding environment, its WYSIWYG editor has encouraged poor quality code and so tarnished its reputation.
The danger is that if Reflow produces less than perfect code (which lets face it any automated tool will do), this will have consequences:
- It will lead to numerous poorly coded websites.
- Many web designers will learn bad coding habits.
- Skilled coders will reject the tool entirely, despite its many good points.
Of course I can understand Adobe’s decision to allow exporting of code. It allows them to reach a much greater audience. There are a lot of designers out there who want a WYSIWYG style tool. I just hope it doesn’t leave Reflow with the same kind of reputation Dreamweaver has in certain circles.
From my perspective Adobe Reflow is a useful looking tool and I cannot wait to get my hands on it and give it a proper test drive. For now we will have to be content with Adobe’s sneak peak and this presentation: