Dan Davies{ Front-end Developer }

Let’s talk about workflow

14th July 2015

Workflow is old hat apparently, we sorted it all back in 2014 but I can tell you now, I don’t think we have. I spent a lot of last year talking to a lot of people on iaskyouanswer about it and listening to a lot of people at conferences talk about it. The common thing I took from it was that the way I wanted to do it was pretty much how everyone talking about it wanted or were doing it.

Yet a year on, possibly two. I still don’t see much of a change.

Responsive has certainly changed how people think about websites. I still though think that there are some that really don’t get the true nature of responsive and what it is doing here. That makes it tricky.

But it isn’t just that making it tricky. It’s a lot of other things not really taking off like I thought it would. From personal experience, I often wonder whether I wasted a year of my life trying to go down a path.

So what is going wrong in my mind. I say my mind. This is purely my opinion.

Content first

It just isn’t happening. At first I though content first wouldn’t be too hard to sort out. But it clearly is. And I can kind of see why.

Knowing how much content is needed is an open question. A client may not be the best of writers or gives you tonnes and tonnes of information that you have to display. Personally, I can’t write content as such. I can write a blog post but I’m writing for me so likewise, I think someone with knowledge of the product or service should write it. But like I said, it could end up a bag of shit so my next thought it hire a copywriter to work with the client. This for me is now the most logical step. Content is very important on a website as we all know so getting that right is paramount over any design or functionality. However there is one drawback.

Will the client pay?

My experience has always been, “We’ll write it, we would rather spend money on design.”. The client would rather the site looked nice and “punchy” than read well.

Aside from budgets and the level of importance, our old friend Lorem Ipsum gets a call out. Sometimes we’ll make a call to use it in designs and then design around that. Once the design is approved, we’ll go back to the content and fit it in to the 3 lines of text space we had.

We’re just as bad as the clients. We both undervalue the importance of good, readable content (content can be other things like video and imagery, I get that).

Yet we still do it.

There are of course those who go the content first route and most likely flourish. It is about finding that balance and the people who want to do it right. People who get the importance of content over design. We have some great tools to assist us these days, One of which is GatherContent. I’ve used it a couple of times and thought it was a great way of organising content and highlighting to clients what was needed. Of course, you don’t need fancy software to do the job. A simple spreadsheet or whatever should suffice but it really is all about selling the idea of the content first approach being beneficial in the long run. It’s just hard to sell that goal when all the client wants to see is pretty pictures with their logo on it.

Prototyping

Away from content for now and time to talk prototyping. Again, this is an area that I believe needs pushing. I also believe there needs to be more awareness made about how useful a prototype can be. For a few months, I worked on prototypes using XPIn and Axure. I was pretty pleased with the work I did but ultimately, it fell on it’s arse as not everyone saw the value which I kind of understand having thought about it long and hard.

I made mistakes when making prototypes, mistakes I hope I’ve learnt from but nothing quite prepared me for some of the reactions from others. I think the main obstacle was people not really understanding what the point was or expecting more which might have been how it was sold in to them or they just really want to see the finished design and didn’t much care for the bit in the middle.

Either way, it was proof enough that prototyping was a difficult thing to sell in and not just for clients. Designer’s also seem to really struggle with the concept. Again I can kind of understand. I must stress though we’re not trying to do your job but at the same time, web design isn’t a flat thing (no flat design jokes please) anymore. We have motion and interaction and it’s not easy to demonstrate that in a PSD which is where prototyping comes into it’s own.

I think prototyping is fine. I think it’s an important phase but we need to figure out when and where it is used. If I had a magic wand. I’d wave it and make every web designer out there who can’t write CSS and HTML be able to do just that. You could do your own prototypes and see your vision early on.

Designing in the browser

It is a thing. It works well. It’s a bit like swing bowling (cricket term). When the conditions are right, it works a treat. When the conditions are not right, well, you will get battered. By conditions, I mean buy in from everyone. Designers, developer and the client. There are steps that can be taken to achieve a good result. Style guides are still a holy grail for me. I love them but it seems for many, it’s not really helpful.

For me building templates, it’s essential. Give me a good style guide and I’ll happily churn out templates all day long.

For designers, it still seems they are hung up on layout and need to see the full picture before committing anything. which is daft when you consider how many different screen resolutions there are. Layout whilst important is not as crucial these days as things can change so much from pixel to pixel. I’ve seen many a design where stuff that should be designed was left out in favour of worrying about layout. It’s all in the details for me. The subtle thought through stuff that can matter and make a difference.
Designing in the browser or browser led design as I call it is great. I still use Photoshop to firm up and idea but I can produce the same look and feel in HTML and CSS just like any designer in Photoshop, mainly because a website is made in HTML and CSS and not Photoshop layers. So why do the work twice?

Photoshop still has a part to play, of course it does. But why leave the actual CSS and HTML to the end? Madness in my mind.

PSDs

We’ve talked about PSD’s (or any other image that is of a finished design) before and I don’t think it’s a topic that will go away. I’m less of a hater these days (to be honest, I wasn’t much of a hater to begin with). I’ve been working a lot more with Photoshop and I have to say, I really enjoy it. But I do think maybe I’m doing more harm than good as I always seem to focus on the desktop design and spend less caring about what happens on mobile and tablet. Which is wrong in my mind.

Now I get that showing a design is important but I question at what stage this happens and what is shown. In my opinion, a full design should be provided as late as possible in the web site build stage, certainly after everyone involved has a good grasp of what is involved, an idea of content and functionality. It certainly shouldn’t be the first thing the client ever sees.

From a developer’s point of view, I shouldn’t be seeing a design five minutes before it is sent to a client.

So what happens on mobile?

A question I ask daily and have done for about 3 years now. You see this lovely image of a website, probably iMac screen size, the size of Wales. Perfect.

“But what happens when the screen is a lot smaller”

I’ll ask.

“Oh it just stacks.”

They say.

Which to be fair, it’s probably all that needs to happen. But I do wonder if the mobile and tablet users are being penalised for using a none desktop site at times. Certainly at times, you see a mobile site and it’s massive. Mainly because the desktop site contains tonnes of unnecessary text and images which when stacked down is taller than most modern basketball players.

Sometimes you might be lucky and get a design for mobile and tablet, well I say that, it’s more iPhone and iPad. To hell with Android devices, they don’t count. You can see I’ve talked about this before eh.

I think most are in agreement here, sending a finished design at the start is a bad idea. There needs to be a lot of discussion before that can be done otherwise you are setting yourself up for a massive fall.

However, PSDs or images are great because clients fucking love them. All shiny shiny.

What do you want to happen Dan?

I’ve moaned enough about things over the last few years from designing in the browser to PSDs. Workflow is important. It can make or break a project, save money or cost money, upset a client or make them very happy. It seems we all want the same common goal and many of us are working towards a way of working but for some reason, the industry hasn’t really moved on.

Why?

Is it because really, we like the old way and just like talking or is it ignorance from the client’s side. If we got a clients who wanted to invest time in prototyping and content first, could there be a big shift towards it?

It might be an agency thing. Freelancers seem more accustomed to the new way of working than at an agency, that’s certainly my experience and from talking to others.

For me, there are still things to sort out.

Research is important. Knowing the topic, what is possible and what isn’t is crucial. And then sketching and loose wireframes. I don’t see this enough. Bits of paper with ideas jotted down on them. These are the building blocks of projects for me along with talking it through. Understand the problem and create solutions. Don’t just jump into Photoshop or Sublime and start work. Do the groundwork on paper. Once you have sketches and some wireframes, there should be enough understanding of what the project needs to do.

Err Dan, you’ve left content out.

Yes I have. I still don’t to this day know where content comes in. Does it come in at the start before sketches or after? Is it something that evolves? Possibly. Maybe you start off with headlines and build as you go. I really don’t know. I do think though a copywriter should be involved. It should be seen as an essential cost. A cost that will ensure your site performs well.

So sketching is done. Show the client. It’s important they are involved soon as if not during the sketching phase. It’s their baby, they should have a say and may have insight as you work. You might be wide of the mark or on to something that excites them. Better to get this in early rather than at the end eh and them not to like a single idea?
We can then start to look at prototyping it up and producing a style guide. Again, for me, it’s about doing it in stages and not having the huge reveal. Also, the client is still heavily involved.

Once we have sign off on how the site will function and look in terms of style, it’s is now where we can design in the browser or open up Photoshop. At this point, everyone has bought into the the concept, the overall look and feel is there. There shouldn’t be many more surprises.

The big reveal has arrived. The client knows what to expect in terms of what the site will do, how it functions thanks to sketches and prototypes and has a good idea of how it will look thanks to the style guide.

At this point, there shouldn’t be any huge surprises. The client loves it. We had whet their appetite with our groundwork and ideas. They felt involved all the way and saw progress at all times. Happy days.

Is that really what you envisage happening?

Ideally yes. It’s optimistic I grant you but why not.

Optimistic?

Well, to start off with, we need the client to understand the need for the cost of sketching and wireframing, the cost of producing a prototype and style guide when all they want to see is a finished design. We also need the designers and developers to work better together. This isn’t a simple case of handing over a design to a dev to build. It requires talking to each other, sharing ideas, solutions and problems and finding ways around it. We also need better understanding of what goes into a responsive website. Can we do things a different way on devices rather than the standard, it just stacks method.

It still feels a long way off to the point where I’m not convinced if will actually change across the whole board. Ignorance plays a huge factor as does ego at times. Which is daft as really, all we want to do is make great websites.

You’ve forgotten about content haven’t you Dan

No, I really haven’t. This for me is the hardest nut to crack. I’d like to think I could get content at the start but I often think maybe the content should come once an idea is formed. Has anyone got any thoughts on that? I think we can all agree though that it needs to come in early on, well before a final design is agreed.

So there you go, my take on workflow. You might agree, you might not. Let us know what you think. It’s good to talk over stuff like this. We might even solve the problem with it. I’ve opened up comments again so feel free to join in..

Back to top