Let’s say you’re having a healthy back-and-forth between you (a front end developer) and a designer. All the best work comes through collaboration and iteration, right? I believe that. But I also believe there are time traps in there. If you feel you’re wasting time by getting peppered with tiny design tweaks, there might be salvation in giving designers tools to do the tweaks and then give you exactly what you need.
Let’s see some simple examples.
Positioning Elements in a Space
Let’s say you have some absolutely positioned elements. Their exact position is a big part of how the design feels. You could hook up a script to allow those elements to be dragged, and then report their position with the exact CSS you’ll need to put them there.
Here I’ve used David DeSandro’s Draggabilly to do that:
See the Pen Draggable Elements that Report their Position in CSS by Chris Coyier (@chriscoyier) on CodePen.
It’s a fairly small little script that allows elements to be dragged, and when a drag event stops, it creates the little bit of CSS needed based on that elements ID and top/left position, and puts that in the bottom right corner of the document ready for copy-pasting and providing to you, the front end developer.
Changing Font Stuff
How about little <select>
that comes up over paragraphs that allows you to toggle between font families in development?
Or perhaps a range input that controls line-height
:
Color Pickers
Wouldn’t be too difficult to drop in a color picker that shows up around elements you choose and changes backgrounds, fills, borders, strokes, text color, etc.
DevTools Training
Of course building your own tools is great because:
They can be designed just how you like them
You can build them to change anything whatsoever
They can be integrated directly onto the design
But… they are a bunch of work as well. You will likely get quite a bit of mileage out of just showing a designer how to use a browsers DevTools to tweak designs. Chances are, they will really take to it.
Have you ever done this?
While I prefaced the article with the idea that this could be time saving for the developer, since you’re giving designers tools in which to express exactly what they want, it could backfire. Meaning you could spend a ton of time on these little tools only to see them used very little. Communication, as always, is key.
Have you ever tried doing something like this in your team workflow?
This is the exact reason I originally created hrtp://Bootswatchr.com, simply to give designers and developers a way to manipulate variables.less in bootstrap and get immediate feedback on what they were doing. I can’t say I have ever been on a team I convinced to use it, but I feel like that’s because most apps need a little something more.
I got my designers to start using DevTools. They really like it! It actually prompted one of my designers to start learning HTML and CSS because he got tired of the disconnect. I also like to give them all of my SASS variables, so that they don’t go crazy with 25 different shades of blue.
If your designers are going crazy creating 25 different shades of any color, then someone´s gotta teach them a bit about design.
On the other hand, in my book it’s the designers that decide the colors and the developers who create variables off of those colors.
Now, if the designers understand color variables (how they work and why), then they’d be conditioned to not go crazy and create 25 shades of a color.
Another chapter of my book says: UI/Web designers should (maybe “has” could be more appropriate here) be able to implement their own designs into HTML+CSS+JavaScript. If this is the case, back end developers have to worry less, much less about design/style and focus on doing their programming magic. Like it’s supposed to in the first place.
The way you phrased that made it sound like you were training little kittens “I got my kittens to play with the new toy where they have to find a way to their treats. They really like it and now they go crazy with all the different tests!”
It often feels as if developers think designers are stupid and designers think, developers are lazy.
@Nathy, Yes, some are pretty damn lazy, that’s why I have this in my custom-script.js file:
uilang tries to help designers communicate their ideas to developers :)
Dev tools training FTW. It’s amazing the number of tickets from front-line support that make it all the way to development that could be sped up if more folks could firebug on their own.
I think the companion to that is having a culture where every employee has not just a job title, but something of a path: A customer support tech might want to be promoted to front end dev someday, so he’d better be game to get trained on dev tools. Kind of like Final Fantasy I where you have fighter -> knight, thief -> ninja, etc etc etc
I have repeatedly shown designers here how to use devtools and colorzilla. They say,
“Oooo. Neat!” and then forget about them until the next time.
I’m talking about our print designers who think they know how to do web design. The designers who work on web full-time are much better. Although they still pretend they don’t know about color contrast requirements and the need to identify links with something besides color. (“But the underlines don’t look clean!”)
That’s a pretty hostile comment. How would you react if I painted all developers as like the one I work with, who refuses to listen to my knowledge of ux and ui and won’t let me near scss files, even though I could run rings around his knowledge of semantic html and modular css? Should I assume ALL developers are morons?
Just sayin’
+1 to Rio’s comment.
I’m a print designer (s-load of years) myself turned into web designer – front end dev (s-load of years too).
I’ve dealt with comps created by print designers from BBDO (yes, THAT ad agency) only to end up altering their designs to fit reality so they were technically sound and feasible to implement in HTML+CSS+JS.
@chrisr, obviously not all developers are morons, lol, but certainly if you know as much Sass/SCSS, semantic HTML and modular CSS then you should be working at a company that really appreciates that.
@chrisr,
I was very careful to say I was commenting about the print designers who work here, not all designers. That wasn’t hostile – just my experience working here since ’08.
I work at a large state agency where TPTB value design highly, but from a print perspective. (We actually have to print out web pages to get them approved.)
It could be much worse – I’ve seen many terrible public sector websites where design is clearly not a priority. So we work with what we have and pick our battles. And working with people who want pixel-perfect design, while I have to maintain accessibility, has made me a pretty darn good CSS coder.
But responsive has pretty much made pixel-perfect obsolete. And those who insist on treating the web like a printed page need to either evolve or become obsolete themselves.
I’d definitely push for the dev tools training. Our designers know enough about Chrome dev tools and CSS to get their point across to the dev team.
My designer uses devtools all the time, he loves it and he’s good at it. He’ll show me exactly what he wants and then I’ll write the actual code that does that, which is a nice compromise between code quality and design details. I’ve also got a pretty good eye for design, and he trusts me to successfully portray his ideas.
…which is also why I think the whole “designers/programmers should/shouldn’t code/design” arguments are all balderdash. Having a little design experience has helped me a ton in my career, and having a little coding experience has helped my designer a lot. It’s so much easier to work with someone who has a taste of both worlds.
If there’s a lot of back and forth about absolute positioning and line-height you don’t have a communication problem, you have a hiring / team assembly problem. Try hiring an actual web designer. Building a web tool to drag line-height around is fairly ridiculous when you can just use Firebug (or Chrome dev tools, etc).
I too don’t get the need for these gadgets when there is Firebug and DevTools. I also agree with Rio Brewster that print designers that don’t know html/css and how to use these tools are doing just a fraction of the design job. Designers without these skills are usually behind the curve on current trends as well. I see the work of designers I know that are still not responsive or use graphics for titles because they don’t know how to implement typography. Can you believe that?
sadly yes.
Great article. Chrome dev tools already has a Color Picker :
Demo
The dev tools of Safari and Firefox have one, too. However, I guess it is too tedious to change the color on each and every single element if you want to try out different colors.
FYI, Colorizr.js makes it easier to play with the color palette on a webpage.
Working in web and app design with a background in computer graphics, I like to push myself with more scripting and maybe some light editing of programming code here and there, but I work with programmers on my team for the heavy lifting in that regard. I, too, have been frustrated at times with the disconnect between print designers and web design. I believe the gap between design for these mediums can be bridged with enough education and desire to keep up with technological advances, but it is usually not. I doubt I would hire a print designer for a web design position. It seems foreign to me to have HTML/CSS and graphic design responsibilities split into two positions. Perhaps this is due to my experience in a small development team environment.
Also, Firebug is my preferred testing tool.
Well, there’s a name for people who are really great designers AND really great coders: Unicorns.
IMHO, really great graphic design is not something that can be learned or taught. It’s a gift.
It’s a lot easier for a good designer to learn the rudiments of code than it is for a coder to learn how to do great design.
I’m good at code, information architecture, application design for usability and page layout – and I know great design when I see it. Which is why I know I will never be a great designer.
Luckily there are a lot of designers who are learning how to write code out there. They are valuable.
@Ricardo Zeo, re: a place that appreciates me. Totally agree. Easier said than done, esp when one is out of the age “sweet spot” that seems to exist in today’s web design shops!
@RioBrewster: I knew you didn’t mean to paint all designers the same color! I just wanted to turn your comment around to shed light. In fact, I started as a print designer, in late 30s after being a journalist.
My biggest gripe in my current worklife is getting coworkers to grasp that designers do more than pick colors and type; I don’t consider myself a decorator. I am a visual communication problem solver.
Off soapbox!
That would be an interesting topic for discussion.
Is this industry ageist? Any more than any other tech industry? Or is it a case of not keeping up with technology?
I will save my (very strong) opinions for that discussion.
@RioBrewster That discussion has occurred on other social media lists I am on.
I wonder how many younger folks assume that middle-aged folks couldn’t possibly be keeping up with technology? Perhaps as much as us middle-aged folks think younger workers couldn’t possibly have the judgment that comes with lots of experience working with clients. I’m sure there are unconscious or barely acknowledged biases on both sides.
@ChrisR Out of the “sweet spot”, indeed. I’m on exactly the same boat and not getting any younger, hehe. I agree with you as well when you with this sentence:
@RioBrewster, Is this industry ageist? Heck yes it is. And as we say in Spanish “Como un putas!”.
Maybe Chris (Coyer) picks up on this subject here in this thread and creates a post about it :)
If Chris Coyier wants to write a post about ageism in web dev, I bet I can solicit input from DC Web Women, in which we have had a long and interesting discussion thread!
BTW FWIW, I’m in my late 50s, came to design in late 30s, continue to teach myself advances in css, html, jquery, responsive, content strategy, etc etc etc but coming to feel like I have been, as the Brits say, made redundant. And the youngish male developers I work with routinely behave as if I know nothing and have nothing to add but to pick out pretty colors. Srsly.
I pat myself on the back that I have nearly 8000 followers on Tumblr (designtank), I’d say 98% of them teens and 20-somethings (I don’t show my photo, so they can’t jump to conclusions! Ha ha).
I would also be interested in a discussion about whether the industry is ageist. I’m in my mid-forties and coming to it now, basically after an expensive frustration of working between developers and designers. If only I knew then what I know now!
In the company I work for, I’ve made sure to show all of the designers the Google Chrome Dev tools. Once they got past the shock and awe of seeing the changes being made on the site, they took to incorporating the this into their process.
Now, they take the time to see exactly how they like things to be done, so they no longer need little code tweaks to “Just see how it looks”. It’s a win-win for everyone…
I’d love to hear others’ opinions on this, and I know we’re becoming a very specialized bunch here in the Building the Internet factory, but I just don’t see room for designers who can’t do simple front end. No JS, even, but at least write solid HTML & CSS. If you can’t code that, how can you design optimally for the web?
The problems with DevTools and other inspectors is that they are not very well organized or thought out from a UI standpoint. And that’s quite ironic. I would much rather load a page into an app like Espresso and play around with the CSS there. It’s a much better experience and you can concentrate on the actual design instead of what little text element you need to click on in the tools.
for dev tool training. Though I will say that I get very frustrated with designers, we do train them on what is best for web. But tbh to get the best out of a design for a website you almost need to know as much as a front end dev, when you take into account hover states, rwd, user journey etc. I would prefer designers to give me a set of branding guidelines i.e. colours to use, logo, font familys, image/page elements. That coupled with the content architecture and then allow me to build in a way that is best for user experience.
I’m a designer and a front end developer, and I have to say that dev tools is a great tool for designers to tweak a page with. I wish there was a way to tweak Sass variables in there as well.
Ryan, there was a Firefox extension called FireSass, but it recently shut down because my understanding is Firebug or the WebDev tools will be be doing source mapping to scss files. I was able to install FireSass from my developer coworker’s Mac and it enables me to tweak scss right in Firefox and tell our devs which scss lines I am referring to.
I develop in Firefox together with FireSass as well. Since you can no longer download FireSass from the open web I decided to upload the .xpi file to my Google Drive for others to download.
Download FireSass extension from here: https://docs.google.com/file/d/0B3S7H2H7meSUdjBLWUpWd1BQaTg/
Note: I updated to Firefox 31 yesterday (9/11/14) and FireSass is not capturing my SCSS lines. I have to run other tests to see if it’s Prepros or if it’s Firefox or Firebug or what to fully confirm what application is causing the problem.
If any of you could share your findings regarding this, that’d be great help. Thanks.
Why should I use these tools when the Chrome Developers Tools have the built-in color picker + color chooser, the ability to change font size and family and I’m able to move elements changing the position values? :\
worst article I’ve ever read.
the designer should create the front-end – not a programmer. if the web designer isn’t able to code html/css/js, she/he should finally realize that web is NOT print.
@timbo html and css are fine for designers to know, but js has nothing to do with the look of a website. That is only for functionality, which should be handled by a programmer. Designers will only mess things up if they start dealing with that stuff and then the developers will get all bent out of shape about it.
@Tim Although I agree that JavaScript is not directly associated with the “look” of a website/app, it’s certainly part of the “behavior” of it and as web designers/front end devs we are responsible for that.
The problem I’ve experienced is that scripting can get so complex and intricate that at some point you just have to call in reinforcements (back end developers) for help.
JavaScript is quite a rare beast to tame because is a scripting language [back end developers] that runs in the front end [web designers/front end devs].
Hi Guys,
Design is certainly a gift. Coding can be learnt with time and practice, but fantastic design comes from a natural creative flair which is a rare skill in itself.
I think people should play to their strengths and focus on what they are best with!
I’m a designer and I do css/html implementations because I was tired of the strange communication gap when sharing mockups with devs.
I find it insulting for dev’s when you call them for margin things or line-height issues. For me it felt like I was somewhat disabled because I couldn’t do it myself.
When the designer writes the markup the devs can focus completely on the backend. Unfortunately I can’t write jquery so there is stille a gap but it’s marginal. (I can implement jquery plugins, but when they interfere I’m f****).
It went so far that I’ve implemented designs into html/css for print-designers. But holly guacamole I won’t do that ever again. I can’t imagine those poor as devs who are fed with lazy jpg mockups on a daily basis.
So: Designers out there. Learn how to write markup!!!
Gosh. Sorry for the typos.
Every time I read your tutorials you have my head spinning. really nice widgets and that line spacer was an eye-opener! Draggability was also a treat and I admire how you even achieve some elements to work “as if” I dragged them myself with animation.