Has responsive design killed Photoshop for web designers?

Is it really appropriate for web designers to use tools like Photoshop or Fireworks when designing websites that have to adapt to a variety of screen sizes?

Play

If you follow me on Twitter, you will know that I have been in Germany speaking at the Smashing Conference.

It was a superb conference; I learnt so much and got to hang out with some amazingly talented people.

Unsurprisingly, the one theme that ran through the entire event was responsive design and the fact that we have no idea how people are viewing our sites.

Of course this has always been the case, but as Jeremy Keith pointed out, as web designers we have participated in a consensual hallucination that somehow we could define the users viewing experience. We did this by agreeing we would design for a fixed screen size or a certain set of browsers.

But with the explosion of devices capable of accessing the web, it is becoming harder than ever to maintain that hallucination. Mobile phones, TVs, games consoles, tablets and even fridges can view web pages.

This obviously has a huge number of consequences. The one that really jumped out at me is just how inappropriate it is now to design websites using tools like Photoshop or Fireworks.

After all the first thing you do in these tools is set a canvas size. However, we don’t know the canvas size the user will be viewing. The web has no ‘edges’.

Also, tools like this make it so much harder to demonstrate interaction or things like progressive enhancement.

For a long time I resisted this change. However, I adopted the approach while working on the Headscape site and found it incredibly liberating.

Admittedly I had no client to please on that project. However, I am not sure that doing design comps in a tool like Photoshop, makes implementing client changes any easier.

Also, if you have led the client through the design process by showing them moodboards, wireframes etc, then the chances are any iteration will be minor.

I find myself struggling to identify a good reason to do anything but design in the browser. Perhaps you could help me. If you can think of a good reason to keep going with Photoshop style design comps, let me know in the comments. I am honestly interested.

  • http://twitter.com/ronsman Ricky Onsman

    A Photoshop comp is still useful to show to clients and, especially, prospective clients. I’m finding that Photoshopping a poster-type display of what their site will look like on various devices gets them quite excited. It’s a visual aid. And it’s clearly a demonstration – it doesn’t have to work.

    • http://www.xeno-design.com/ mazurka

      iPhones, iPads, Samsungs, HTC’s, Nokia’s, Galaxy Tabs, Droids, RAZRs, Macbooks, iMacs, PCs, Vaio’s,.. the list goes on.

      How do you decide what devices make it on your poster?

      • http://twitter.com/ronsman Ricky Onsman

        I settle for four sizes to represent a desktop with a wide screen, a laptop, a tablet and a phone.

      • http://artisticdork.com mike

        clients don’t want to think that much, also, during this phase you are subconsciously or consciously developing break points. IMHO

  • http://twitter.com/keanrichmond Kean Richmond

    I’m sure for some their creativity flows no matter the tool in which they design a website, nor do they question the decisions they make along the way. But when it comes to trying out a variety of different layouts, styles, fonts, icons etc there is no better way to do this than in a program like Photoshop.

    In a number of ‘in browser’ designs there seems to be a lack of visual interest that seems to come from the time it takes to experiment when using HTML and CSS as a design tool. Sure many of these designs may be intentionally minimalist and in some regards stripping back the flourishes in a design can be to the benefit of a website but in my view, and for myself at least, Photoshop is the best tool available to experiment with a design.

    There seems to be an opinion that responsive design cannot be effectively achieved when using Photoshop. Sure the design created is static at a historic 960px but if the designer is well versed in HTML and CSS they can still create a design that depicts a given breakpoint whilst understanding how the design will alter when built to be responsive.

  • http://twitter.com/gilestalbot Giles Talbot

    I tried designing in the browser, and hated it. It limits my creativity. If everyone started designing in the browser we’d see generic styles/layouts start to form (already happening). Illustrative/graphic lead comps are impossible to design in the browser.

    I’m against starting in the browser, but I’m quick to get in there as soon as my Photoshop comps are strong enough to translate.

    I’m in the middle of designing UX London 2013 site in Photoshop, and there’s no chance I’d have been able to create what I’ve come up with browser.

    http://2013.uxlondon.com/

  • Lynden Oliver

    I believe the way in which we use Photoshop is
    changing but it still serves as a good starting point to creating the visual feel
    in a manner that does not restrict you. Could this be the case where the order
    in which we approach projects is changing?

    At the start of a project when the research stage
    is complete my first step in layout is to produce wireframes that identify the
    key areas of the site, or app, where I can create an information hierarchy to
    pages. It is at this stage that I would consider how content should be broken
    down on different devices.

    Following the wireframes I move onto Photoshop
    mockups, these are only done to the extent where main styles can be created (one
    or 2 screens) as it gives you a freedom to quickly try different things. These
    sample designs are then presented to clients for feedback. I believe it is
    important to inform the client of how things may change depending on the users resolutions/devices
    and this is purely to sign off on the style as the main structure has been
    defined in the earlier process.

    Following signoff on the visuals design starts in
    the browser to implement and iterate It is at this stage that responsive
    layouts can be used to ensure the information hierarchy works as expected.

    So the question could be – do we look to replace
    the wireframe stage with HTML wireframes that show the basic content without
    styling in a responsive layout and then head over to Photoshop to continue as
    you can find sometimes changes need to be made for the visual balance?

  • http://twitter.com/_colourspace Tristan Duncan

    +1 Ricky. Clients are always going to want to see mockups. While you’re not going to design every page of every site for every device, if you’re working on anything more than a minimalistic typography only site you’re going to have to fire up some form of image editing software. Those iphone and ipad mocks and pretty header images don’t make themselves in the browser! In-browser design works for some people and for some styles of design, but definitely not everything.

  • Anders Tolborg

    To me the main argument has to do with “feedback loops”. With a feedback loop Im referring to the process by which you do an action and then experience the consequence of your action. When designing in a WYSIWYG editor like Photoshop I argue that the feedback loop is more pure and direct, than it is when designing in the browser. In photoshop there is a more or less direct connection between your line of thought and the canvas, which makes it much more appropriate to do experimentation and perhaps even make mistakes which end up being innovative. When designing in the browser you always have to formalize your line of thought into code, before you are able to experience the result. Designing in the browser is not as ‘right-brained’ a process as designing in photoshop is.

    I actually believe that it’s not a matter of choosing between photoshop or your editor – it’s a matter of combining the two in perfect harmony(!). Use photoshop (or similar tools) to do aesthetic experimentations, and then implement your work as fast as possible.

    • http://twitter.com/maxspiker Max Spiker

      The issue is that there’s no such thing as “in perfect harmony” right now. There’s too large a chasm between how you style with css3 & html and how you design and style things in Photoshop (and then having to translate and go back and forth between the 2).

      And quite the opposite from your perspective, I think the “feedback loop” is much better in the browser where I can use Inspect Element & make instant adjustments to style elements and see how they respond in their native environment.

  • http://www.facebook.com/cosimo.andronico.7 Cosimo Andronico

    and what about pixel perfect websites? are they still alive or is it something to forget as soon as possible.

  • http://www.xeno-design.com/ mazurka

    “Showing clients” is a ridiculous reason to continue this process. It’s not only misleading but will also cause problems later on. “Here this is what your site will look like” is a plain lie when showing a client a jpg mockup. What browser are they using? how about their sister or mother-in-law? your pixel-perfect mockup will only be shattered when you begin the build.

    We should be involving clients more in the wireframing and moodboard/styleguide (whatever you wanna call it) stages. These are also the stages when we can use our ‘right-brain’ and be creative. Wireframing doesn’t just have to mean a straight up site skeleton. You could be sketching buttons, headers, anything your heart desires.

    having said this though some people just work really well in photoshop/fireworks and if it really does work for you (and you feel it can keep up with an ever evolving web) there is no reason to change. “designing in the browser” seems like a logical step to me. Really it’s not even designing in the browser, it’s designing on paper then building in the browser.

  • http://twitter.com/mathieuhays mathieu Hays

    When i’m designing a website i don’t full finished it in photoshop. I just draw the major structure, in most cases when images are involved. I feel more comfortable while coding than creating layouts in Photoshop. Actually I think the matter is all about habits of each Web Designers.
    (I hope that my english is not too bad :)

  • Tony Mosley

    I think using the term ‘web designer’ to blanket cover this aspect of creating a website is probably the cause of confusion. For visual aspects of publishing a website you will always require a piece of software as we require an interface to work on screen. Even if you’ve designed in a browser with place holder blocks…

    However, for the most part my designs are not born on in a browser or piece of software… these are collectively tools and interfaces. The ideas are generally sketched in pencil, the techniques for achieving the interactive elements are already in the idea. The software you choose to display these ideas isn’t that important, the processes will dictate how many of your ideas are formed and then displayed. It’s a very risky prospect to get experimental on someone elses budget, so we use what we know will work safely in a certain time frame.

    I would be very surprised to find out that more than a few 960 4 column fantastic website designs had been built and conceived without the prior knowledge they were to be draped over 960.gs or similar.

    • http://twitter.com/MisterSheep Baronne Mouton

      I think you’re right there. The term web designer has been around since the beginning and used to be the all & everything. Now I think a “web designer” has been split out into various disciplines – web architect, web developer, creative designer (UI / graphics / visual). Obviously there is some blurring between these and also sometimes a combination thereof.

      • Tony Mosley

        I agree with there being now enough collective information for clear areas of knowledge to be quantified and labelled as such specialisations, but I was rather clumsily trying to explain that tools chosen to do a job are directly related to the job at hand. Photoshop (or other pixel pushing software) will always be part of a process of designing a website if only to give the designer a anchor point with which to moor the overall style and mood of the finished work.

        I’ve built websites without doing this step in the process and quite frankly it removed a large part of the self satisfaction of publishing a website. There seemed to be less of a goal to achieve. I think most designers do this job for personal satisfaction over the financial reward (at least that’s what the numbers are telling me).

  • http://tookooldoggies.blogspot.com cookandgee

    Well, I find that photoshop/fireworks mockups are still relevant with today’s responsive web design, Why? I don’t use moodboards and have just started incorporating wireframes. I find that Photoshop gives you a clean canvas to visualize what you would like to see for your client. I know many who design in the browser, and I do see its benefits. But, every designer uses a sketch or photo as a source of inspiration. When you’ve found yourself stuck coding, the Photoshop mockup makes a great reference point.

  • Martin Roberts

    Two main issues here..

    1) I think this is a tricky argument in that most “pro browser” comments will be from developers and most “pro PS/Fireworks” comments will be from designers.

    2) For some designers (like myself) geography/location also plays a big part here. I don’t always have the opportunity to sit down in the same room with a client, since most of my work is outsourced to agencies, my direct relationship is with a developer or PM. I think if one can sit down with a client and show a “real world” browser experience of their website – across different devices – then great! However, most clients I deal with directly still want to see some sort of near complete mock-up.

    Re the below comment/s, as long as you assure the client that the build/dev stage will cause some minor aesthetic differences, then happy days all round. Be it that the browser or PS works best for you, they’re afterall, still just tools to get the overall job signed off and launched successfully.

    Martin

  • http://twitter.com/mirroex Randy Caruso

    Photoshop is for sketching out the DNA of the site – it’s the most complete symbol of the site – AND – you have to show that same symbol reformatted to a few other screens as well, how else are you working out the UI? You can’t make these decisions from moodboards or wireframes. That photoshop rendering is also mapping out the extents of your contract as well, they sign off on this before you go to code.

    • http://www.xeno-design.com/ mazurka

      You can’t make UI decisions with wireframing? That’s exactly what you are doing when wireframing.

      • http://twitter.com/mirroex Randy Caruso

        I meant more along the lines of particular icons, buttons, color… maybe a little too loose with my UI reference.

        • http://www.xeno-design.com/ mazurka

          Ok, i see what you’re saying. And yeah that makes sense but I think we’re talking about complete high-fidelity mockups not just elements. If a stylized button or graphic is something you need for a site then PS/FW/AI is still a great tool.

      • Tony Mosley

        OK, that’s a good point… if we can just establish the finite bounderies of where UI stops and Wireframes start before it gets to designing in a browser- I think we will be able to avoid all of these squabbles.

  • http://twitter.com/esdev Shawn Scammahorn

    I’ve been resisting the ‘design in a browser’ idea since it came out. It seemed to me like a lot of work put toward something you’re going to throw away anyhow.

    However, while you can pull graphic elements out of your Photoshop mockup for use on your finished design, isn’t the majority of the stuff most of us are using Photoshop for resulting in the same thing–putting hours of time and work into something that’s ultimately going to be thrown away?
    I’m not completely sold on the design in a browser idea… yet. But I’m getting there.
    I’ve almost abandoned use of Photoshop, partly due to tech issues/compatibility with Linux and Photoshop, but mainly because I realized I don’t really need it.
    Even though it’s not perfect, I have been using Evolus Pencil (free – Win/Mac/Linux – runs in Firefox) for mocking up sites. It’s still static, but it lets me create mockups that are comparable to Photoshop just as easily/quickly. You can also export right to HTML, so you can get the basic structure and then hop into the browser and tweak.
    I still plan to use Photoshop for creating individual graphic elements though.

  • http://twitter.com/gabyflo Flo*

    To be honest I still need Photoshop to create the homepage and a couple more layouts that a site might need. After that I’m jumping to HTML and CSS to create the rest of the site. I have found this new methodology to be more fluid and easier to work with…

    In order to avoid insane CSS clases I still need to look back at my Photoshop comp to guide my way.

  • http://twitter.com/ifultech Creating IDEAS…

    Dreamweaver CS6 has interesting tools to do responsive design for different devices. Might want to check it out.

  • Stephen Lee

    The storm brews for this topic. Being new, I have to say I find doing everything in Ps or Fw a bit time consuming. I think that if you are a developer it’s your duty to work with the client to understand the who and what of their project. If all they want is a static site then using Ps as a tool works, but if they want you to design for mobile first you do save some time by giving them a real experience. You could make the different environments in Ps but is that how it will work when coded? Personally I think we will be using Ps AI and the like for quite some time but we are witnessing a evolution of sorts. And with change comes pain. The landscape of tools to do the job changes hourly. The motto “stay learning” is ever a frustrating thing sometimes but it’s true.

    I think working in the browser is where it will go as evidenced by Adobe’s march toward integrating all there products. An example is Adobe Proto which allows you to wireframe from you iPad and then take that and move it directly to coding wirelessly. A small bit of HTML is written automatically while you go from idea to code..bring in your assets and play. Same thing with Ideas….it allows you to rapidly develop an idea..and that is what we do, create and fill out ideas..I think it is the time of the creative and more players will develop products to change the game…great post and great feedback.

    • http://www.xeno-design.com/ mazurka

      good points. I imagine many designers/developers refusing to give up building sites with tables when CSS was in its infancy.

  • http://twitter.com/paulkent_me Paul Kent

    I find it very hard to think creatively with code. Being a natural designer rather than a programmer I have to sketch things out in some shape or form. Even designing buttons, I need to draw them and play around with the design – although this doesn’t necessarily mean using PhotoShop. I agree that presenting the client with an interactive mock-up rather than a flat is the way to go – getting into the browser as early as possible. But to reach that point there needs to be an organic process of some sort.

  • http://boagworld.com/ Paul Boag

    Some really great comments guys. As with all such discussions there is no wrong or right answers, but its nice to hear so many different perspectives.

  • http://www.xeno-design.com/ mazurka

    “If everyone started designing in the browser we’d see generic styles/layouts start to form”

    we already saw this when everyone was designing in PS/FW i.e. Header, Body, Side Column, Footer. what’s the difference? The method is not the cause.

  • Toby

    In browser design doesn’t provide all the tools necessary to originate and refine high fidelity graphics, or maybe you would classify that as graphics rather then web design?

  • http://twitter.com/tomhermans tomhermans

    I use html for wireframing, prototyping etc.. last step is eye-candy in PS.
    that’s a content driven approach and is MUCH better than what I did the 10yrs before
    and, responsive by nature..;

  • http://twitter.com/jtuds James Tudsbury

    I think mockups still have a place, from a piece of paper to Photoshop, simply to get creative ideas into physical form. I think there will be a continued shift to browser based mockup tools though or at least tools that can interact with the browser.

  • http://twitter.com/afterburnerapp Afterburner App

    When I can easily drag out shapes, drop in and kern text, instantly, fluidly, on separate layers, when I can grab an item and scale it, move it around… When I can easily desaturate a photo, adjust levels, apply effects, and mask it… then I will give up Photopshop. Until then…

    Yes, designs need to be adaptive, but when it comes to coming up with a ‘visual idea,’ you need a good layout program. It seems like coders are eager to leave the art side of publishing behind lately. There is so much that happens in Photoshop, subtle and thrilling things.

    Should Photoshop (or another competitor) adapt, and make a design program that can adapt for different screen sizes? Sure.

  • http://twitter.com/emilsundberg Emil Sundberg

    Photoshop is still relevant. You need a creative tool to create the feeling for your webpage. The only problem is that Photoshop sucks since it’s not aimed at web devs.

    We need a new creative tool that renders borders/gradients/typography on a webkit canvas. It’s not Photoshop and not pure HTML/CSS. It is something else.. or a combination.

    Personally I find myself creating elements in HTML/CSS and copy/paste them into Photoshop to make them look as they should without Photoshop rendering issues.

    Paul: It would be great if you mentioned that comments aren’t available on smaller screens when you references comments in a blog post. The last sentence got me confused when I read this post earlier on my phone.

  • http://twitter.com/FrancescoK Francesco Kirchhoff

    The problem is that the tools suck when it comes to responsive webdesign.

    Designing in the browser is painful because there is too much distance between the designer’s thought/intent and its visualisation – the feedback loops mentioned by Anders are just too wide. Photoshop, Illustrator, OmniGraffle etc. are better at that.
    On the other hand, they are conceived as static canvases, which makes it really difficult to think about a design’s breakpoints and how to respond to them.
    What I want is a tool where I can have mostly vectorized designs with fluid canvases that I can view like in a browser and have adjust to viewport sizes, but which does not work directly in code because code-based tools can be limiting and the code quality of its output is usually horrible.

    • Malessa Brisbane

      “What I want is a tool where I can have mostly vectorized designs with fluid canvases that I can view like in a browser…” – great idea, that would be such a cool design platform. You’d get the same effect as designing in the browser but with more easily editable objects.

  • mulegoat

    I can certainly see the argument as far as Fireworks is concerned when
    building a responsive layout. Having switched to using CSS
    pre-processors and media screen queries within SAAS or LESS there is
    definitely a solid argument for prototyping within the browser – not
    least because clients can see the challenges involved from the
    outset…but you still need PS for the creation of graphic elements,
    textures deciding on font styles and what not and deciding where the
    break points should be. If anything we need it even more but who knows
    what Adobe has in mind for PS and Fireworks – probably not much! As
    creators we have to make sure that clients realize the additional
    workload required to accomodate so many screen sizes and get them pay
    accordingly :) – Good luck with that to one and all!

  • http://twitter.com/_colourspace Tristan Duncan

    Totally agree with the idea of the “feedback loops”.

    I think at opposite ends of the spectrum there are “visual” designers – who love to play with colours and fonts and whitespace until the cows come home, and “procedural” designers who make logical decisions in the moment based on objectives.
    Graphic designers are usually more visual, developers are usually more procedural. And web designers (a huge blanket term these days) can be at either end or somewhere in between.
    For the more procedural style designers in-browser is great, photoshop seems like a waste of time. You have a problem, you solve it, you implement it.
    For the more visual designers it’s hard to imagine things in code. They like to play and change and “just see what this might look like”. For this style of design Photoshop is far more efficient than in-browser.
    I think it also depends on the project itself. Is it a simple typography based blog? Is it a huge UI intensive web app? If changes are going to be needed, which design method (in-browser or photoshop) will take longer?I don’t think anyone presents Photoshop mockups and says “This is exactly how your site will look” anymore. That’s just plain stupid. But they are very handy for ironing out wrinkles before starting development – especially on big projects.

  • http://www.facebook.com/lindsaylee13 Lindsay Lee Siovaila

    I’m finding that doing a mixture of things works best for me when developing a responsive website. Wireframing is always an exercise I try to go through on the project to ensure that content hierarchy is correct and everything is accounted for. Wireframing should try and account for breakpoints in content if possible. Once the sign off on wireframes is complete, then doing a hybrid of Photoshop comps and live HTML/CSS seems to work well. I can build the responsive code bare bones and then begin to add in graphical elements via Photoshop (or CSS when possible). We haven’t quite arrived here yet with the company where I work, but I’d love to get to a place where we show clients design mockups as live HTML/CSS so they can understand the breakpoints on various screen sizes, rather that look at a static comp which doesn’t do much to demonstrate how dynamic websites are by nature.

  • http://www.facebook.com/lisa.farrington.96 Lisa Farrington

    Design with code not Photoshop.

  • http://www.aplombontwerp.nl/ Daniël van der Winden

    Interesting topic. I would say that, if you can’t design a specific element in the browser, you’re trying to add too much detail. I can’t start designing in the browser because it limits my creativity; in the browser I easily start thinking in possibilities, not in solutions.

  • http://www.aplombontwerp.nl/ Daniël van der Winden

    Interesting topic. I would say that, if you can’t design a specific element in the browser, you’re trying to add too much detail. I can’t start designing in the browser because it limits my creativity; in the browser I easily start thinking in possibilities, not in solutions.

  • http://www.premierdesignwebsites.com Theresa Wagar

    I find this a bit comical as I have always sort of designed in code on the fly. I’m the opposite of Paul Kent (see his comment below) as I am more a programmer than a designer. Before I started working in WordPress, I did my feedback loop between Dreamweaver and Fireworks. With WordPress, I can more easily change the design after conceptualization so I often toss pieces of design from Fireworks right into WordPress or the CSS. It provides a pretty quick feedback loop. I think the newest version of Drreamweaver offers much more in the mobile application arena, but haven’t dived into just yet.

    Oh, and why I find this comical is because I am have my graphic designer do a mock up for one of my big clients who wants to start from scratch on the website. However, I already know exactly how I will use the pieces in my WordPress theme. Just want to make sure this particular client is happy before we start .. .because isn’t that what it’s all about anyway?

    All the best

    Theresa 8-)

  • http://marcustucker.com Marcus Tucker

    I’m just as frustrated as everyone else at the astonishing lack of responsive-design-friendly tools but it seems like at least Adobe has pulled its finger out and come up with something that’s (potentially) aligned to our needs, in fact Adobe Edge sounds very promising indeed – http://www.theregister.co.uk/2012/09/24/adobe_edge_tools_launch/ – what does everyone else think?

  • http://twitter.com/GokceTurkay Gökçe Türkay

    We are talking about using PS or FW for wireframing in responsive design, right?
    We have to do wireframing one by one for different resolutions now in PS or FW (and I wish for a responsive canvas maybe :) ) Therefore some of you are talking about “wireframing in the browser”… e.t.c. But i think wireframing in browser can waste or take our time. I’m doing the wireframes one by one in FW (PS is not for web/interface design) for different resolutions. When customer says “everything is OK”, i start to code HTML – CSS – JS.

  • http://twitter.com/MtAdamsADesign Aranzamendez Design

    As a professional web designer, I always love using photoshop creating a designs.

  • http://twitter.com/danklingjr Daniel E Kling Jr

    There is a use case for both designing in Photoshop/Fireworks and designing in the browser. I do find it harder to design in the browser unless of course you have a plan. If I have a solid wireframe and mood-board I can normally code out a decent prototype then enhance it with texture and colors in Photoshop. I find that it saves me time and I thoroughly enjoy coding out my ideas.

  • http://twitter.com/JackNycz Jack Nycz

    I completely agree. You can almost tell when a site was designed in browser – grid systems galore (nothing against them, just sites that are literally ‘in the box’), 10px increment paddings and margins, and usually a very minimal look without much texture or depth.

    My recent process has been to design at least the homepage in PS, and on larger sites maybe 1 or 2 other layouts. For the basic 5-pager I’ll usually designing interior pages in browser. The main reason is that I’ve found myself running into the things I mentioned above when designing in browser from the get go. Don’t really know why, but PS just gels with my creative side better I guess – probably because colors are colors, not #FFFFFF and stuff like that.

  • http://nerdburn.com/ Shawn Adrian

    This is bound to stir up a storm of opinion, because the tool you choose is a preference and nothing more.

    A good designer using Photoshop will be aware of what stretches, shrinks, or stays fixed at varying screen sizes – just as a good designer going direct to HTML will have a similar awareness and design accordingly.

  • http://nerdburn.com/ Shawn Adrian

    This is bound to stir up a storm of opinion, because the tool you choose is a preference and nothing more.

    A good designer using Photoshop will be aware of what stretches, shrinks, or stays fixed at varying screen sizes – just as a good designer going direct to HTML will have a similar awareness and design accordingly.

  • http://twitter.com/nessthehero Ian Moffitt

    Could someone please come to my agency and explain this to our designers? They don’t know code, use Photoshop for everything, and when we (the front-end coders) suggested designing in the browser, they and CS insisted that it would take longer and be a waste of time if the client turned down the design.

    =(

    • http://www.tnypxl.com/ Arik Jones

      It takes more time to go back into photoshop, make changes, slice and export, then send off to front-end coders and deploy.

      I’m a designer who codes and it’s surprising so many designers today avoid html, css and javascript almost entirely. You can’t get good jobs without at least a basic understanding and practice of those things.

      • kyleracki

        That’s assuming you designed it in Photoshop, then built the front-end before getting approval from the client. If you show them the design, make revisions in PS or FW and get approval, then you only slice/export/code once.

  • http://twitter.com/Wagit Paul Wright

    You might as well call this post: Has responsive design killed wed designers who don’t code?

    • http://boagworld.com/ Paul Boag

      Indeed. Well has it?

      • http://www.rubbercheese.com/ waggit

        Not yet! We’re still alive! ;)
        It does mean we’ve had to work more closely with our developers and also change our work processes, but it still works for us. Although, I’m probably a little greyer! The next hurdle is retina displays!

  • Connor Gaughan

    IMO using design tools for visuals (comps) is a great way to set a mood or an atmosphere if you will. You give the client a static look and feel that will express the emotion and thought behind the design. You can do this for simply the home page to get the client to sign off on something tangible. Once a mood is created designing in the browsers makes sense to actually get the idea into the space that it will finally reside. Playing around with how it interacts with the browsers.

    All the comments below have made mention of break points. We have to stop thinking about responsive design in this way. Responsive design is fluid in nature and there is no “break-point” at 480px or 320px. These are numbers pulled from where? The size of the iPhone? To build something truly responsive you must get past the idea of “break-points” and start thinking about things in a fluid nature.

    • http://twitter.com/aldo_mx Aldo Fregoso

      The breakpoints are needed whenever the layout stops making sense and you need to rearrange it, although your point is accurate.

      Breakpoints should not be treated as “different canvases”, but only as an aid to rearrange the layout whenever its needed.

  • http://www.facebook.com/crispy1260 Christopher Payne

    From my view, (which isn’t as experienced as many on this post) I use my mockup to put my thoughts on paper. Ps, Fw, or a classic moleskin notebook are still my first mock up. It can be submitted to the client to sell them on features that would lead to better UX and trash things that clutter or fail the scope of the project. To make my designs responsive is the challenge. I approach this challenge by drawing my mobile version first, and working that design into a web format. stretching it out and visualizing what should be added with the larger space. With those new features back in Ps, Fw, or Moleskin and then implemented into code. In short: My process: Drawing->Mobile Code->Drawing->Tablet->etc. For me, mockups are not dead since the client deserves to see what’s going on and it helps me personally keep the designs high quality and not forced.

  • http://www.facebook.com/kwekuaddo Addo Darko Ghansah

    In as much as responsive design is a crucial part of the web stratosphere now, I think the question we have to really answer is, are all clients willing to pay for designing for both desktop and mobile at the same time, or just for web. Because from where I’m from, even getting a client to understand why the need to have a website is a huge challenge, much more than designing and developing for mobile.
    I think we should just go for what the client wants, since at the end of the day, we do these things for the clients. But I still believe the PS and more particular FW are still the tools to use, I mean think about it, if we should sit with the client and start designing in the browser, is that not going to decrease the price or charge or better still delay in payment?

  • http://artisticdork.com mike

    as someone who has learned front end dev kicking and screaming the whole way, it is a completely different way to think. Also working with clients its hard for them (unless they’re seasoned) they just don’t get it.

    To me though, there has always been the element of surprise in development, so I would wireframe in PS and create major elements then move to the code and finally back to making sprites and whatnot to finish off the design.

  • http://twitter.com/laternastudio Laterna Studio

    I’ve found that Photoshop still helps with responsive design, because while responsive sites do “respond” to browser scaling they still essentially just have a few different designs (switched to at breakpoints). I use Photoshop to design these different scaled versions of the sites (creating folders for each breakpoint–i.e. 960, 768, etc.). That allows me to show/hide the folders and quickly see how the different scales are working with each other. Admittedly, you don’t get the scale effects, but the scaling of elements isn’t the portion that requires creativity anyways!

    I wouldn’t be surprised at all, however, if in the near future Adobe amended Photoshop/Illustrator with a responsive design tool. Or perhaps a third party plugin for Photoshop/Illustrator will come first. Regardless, I don’t think that static Photoshop or responsive browser will be our only two options for long.

  • http://twitter.com/brentschooley Brent Schooley
  • http://twitter.com/MisterSheep Baronne Mouton

    I always designed some sort of mockup in Photoshop, but the way I see it nowadays, there’s a lot CSS can do and there’s a lot Photoshop can do. But ultimately I may need less power from Photoshop – only needing to resize/touch-up photos, create logos, backgrounds/textures, etc.

    So in essence – perhaps less photoshop more in browser – a change in the balance, but not necessarily a killing off of the aforementioned ubiquitous tool.

  • http://www.facebook.com/profile.php?id=1347498090 Ken ReCorr

    So if Photoshop and Fireworks aren’t cutting it (or won’t be for long) who’s creating responsive web design software?

  • http://twitter.com/johnnyafrica Brent Dickens

    I still love to use Photoshop even though I am currently creating a site in the browser. I think a Photoshop comp is more akin to a holiday snap. It’s one photo from an album. A small emotionally charged impression of an experience. It’s not a video of the whole experience or a diary nor does it aim to be. It helps to excite the client and all involved by showing a visual designers idea of what could be.

  • http://www.welogodesigner.co.uk/ welogodesigner

    Photoshop is static you cant do live changes. surely responsive web design is advantageous.

  • Blue

    As a web designer that still has clients that sign-off projects according to how it looks on their iMac etc, then no, responsive design has not killed photoshop. Photoshop designs still give the all-important sign-off of the concept stage, without which there would be no build stage. We do responsive designs in-mind when providing the static concepts, and implement those as we see fit for the users that clients themselves seem to have little care for. Had no problems usign this approach yet.

    • http://boagworld.com/ Paul Boag

      Why can’t the client just sign off a working html page rather than photoshop?

  • http://www.technology4turnover.co.uk/ Jeremy Griffin

    I firmly sit in the land of designing in the browser. Perhaps because I came to web design later in life I have had no design training and so jumped straight to using browsers for the process. I kicked stuff in Fireworks a bit but never really understood the advantages of moving from this design tool to the browser. (Seemed like doing things twice to me)
    I now find that a visual produced in these tools is restrictive and does not allow html, css3 etc to be utilised to their full functionality and flexibility. A website can end up compromised, static, and stifled. Everyone gets an expectation of a mirror image, of what I consider just a picture, as the output.
    The web and modern coding tools / techniques have outgrown Photoshop / Fireworks. Great moodboards should be able to define the soul of the project. (I have used Fireworks to create moodboards ;-))

  • http://heyo.com/ Alex Shamy

    Maddening as a designer who CAN code a responsive website, but our team outsources our coding. That said, I’m expected to design several mockups for the same page. Just let me code it!

  • http://twitter.com/laternastudio Laterna Studio

    I’ve found that Photoshop still helps with responsive design, because while responsive sites do “respond” to browser scaling they still essentially just have a few different designs (switched to at breakpoints). I use Photoshop to design these different scaled versions of the sites (creating folders for each breakpoint–i.e. 960, 768, etc.). That allows me to show/hide the folders and quickly see how the different scales are working with each other. Admittedly, you don’t get the scale effects, but the scaling of elements isn’t the portion that requires creativity anyways!

    I wouldn’t be surprised at all, however, if in the near future Adobe amended Photoshop/Illustrator with a responsive design tool. Or perhaps a third party plugin for Photoshop/Illustrator will come first. Regardless, I don’t think that static Photoshop or responsive browser will be our only two options for long.

Headscape

Boagworld