No matter how skilled as a designer or developer you are, having some workflow in your work process can make every project much easier to manage and also to finish. It also much easier to organize and orient in the code.
Probably every designer or developer knows how hard it can be to search for a specific piece of code in hundreds or even more lines of code. That can cause some serious headaches to anyone. And what about if we invite someone to help us with along the way. In case we have no organization, workflow or at least some basic system in our files, it might take him some additional time before he can start to work. The worst possible case is programmer without any consistency in the way her write code. I know this from my own experience. Just recently I took some smaller project which main goal was cleaning and optimizing the code (HTML, CSS and JavaScript). I though that this will be quick job because the web page was small, about 10 pages. Man how wrong I was. The HTML code was total mess. What’s worse, it was all in table layout (I hate tables) and older HTML version. After examining the code, I found out that previous designer also used inline styles (plus external stylesheets). The whole HTML code was about 400-500 lines long. By the way, some elements were missing the closing tags. Headache was coming.
Then I take a look at the main CSS file. I wanted to jump of the window at that moment. Another 400+ lines of code without any system or at least one style of indentation. It was one big mix of property/value pairs sometimes on one line and sometimes on two lines. I don’t recommend to anyone to have some strict guidelines (while it is great idea) but when it comes to coding, having at least one style for indentation, commenting and use of white space is very handy.
After what I saw, I was afraid to look at JS files. Luckily, they were in much better condition. After using some online tools for beautifying the code (files were minified), JS was looking quite good. Just some quick refactoring and it should be ok.
What is a proper layout? Well that depends only on you and your style. You can also take a look on internet on some suggestion by other professionals in industry. Create your own or combine the one you like together. My preferred workflow for stylesheets (as addition to using Saas for coding) is quite simple. All I do is to divide the stylesheet into section using comments or multiple files by three categories – Layout, Visuals and Typography. That’s really all, no rocket science. With this simple trick I know exactly where to look at when I need to change some style of the page. What’s more, these names are quite easy to understand so no need for explanation to partners, clients or co-workers. Layout contains everything what is connected to layout and structure of the page – positioning, box model, widths, heights, etc. Visuals covers everything about backgrounds, colors and borders. Typography includes everything text focused. Easy, right?
You can have as many categories as you want. For example, you can have a single file for padding and margins if you like. It only up to you and it’s always better than to have no system at all. In the beginning, it can be little bit harder for you to get used to your new workflow – the more so if you used someone else’s workflow than your own – but later you will be thankful for making this decision.
So… I almost forget what the subject of this article was. Having a proper workflow can help you or anyone else to avoid situations like the one mentioned above.
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
