July 25th, 2006
Sorting my workflow out, part two
Last week, I mentioned I was slowly drowning in a thickening quagmire of paperwork—estimates, invoices, contracts and things. I took it upon myself to design and build a system which would help sort me out, thanks to a bit of inspiration from Stan and the boys at 37signals. A week later and this little application is working rather well, even if I do say so myself.
Filling in the gaps
When I posted last week, I’d got together the basic requirements and workflow. Just to recap:
- List all current and closed jobs
- Each job must have a job number, client, associated estimates and invoices
- Create, edit and store all estimates. Give them a status of Pending, Approved and Rejected.
- Ability to print estimates and invoices using a well designed print stylesheet
- Saving off PDF?s using the same print stylesheet
- Create, edit and store all invoices. Give them a status of Paid, Part-paid and Unpaid
By Tuesday I’d pretty much got together the bare-bones. Then with a little help from Expression Engine I applied some edit forms, so now I can add and edit Estimates, Invoices and Jobs, all from within the browser rather than having to go to the Expression Engine control panel. All good.
Here’s a few grabs of where I’m up to at the moment:
Designing with Print Styles
The detail page for displaying the Estimates and Invoices proved to be a little tricky. First off, I wanted to emulate my design for paper Invoices and Estimates, secondly, as I wanted to save these invoices as a PDF for emailing to clients and also printing, the print stylesheets for this template had to essentially create the layout for the PDF.
In April, I wrote about applying print styles to a web page and touched on using CSS to design for print. Then, it was a fairly simple prospect; designing a newspaper layout to run on A4. One column. No fuss. My Estimate/Invoice layout is a different kettle of fish altogether.
For starters, there’s a four column grid. Secondly, there’s a extensive use of white space and Rules of varying thickness. Also, there’s a subtle, but important typographic hiearchy going on. I set myself the challenge of recreating this design, which is essentially an Indesign layout for A4, using the existing markup for the template and CSS. This is the first time I’ve done this in anger. Using CSS to layout a design for print.
Bodging with absolute positioning
The web-based template display of the detail Estimate/Invoice page uses floats to produce the layout. This proved to be pretty tricky for reproducing this design for print. The solution took a little of getting my head around.
What I did was to start thinking about the elements of content as square boxes in Indesign. Start thinking about print stylesheets as print design. I had to forget about certain browser quirks of CSS (yes, I was designing this just for me, on a browser of my own choice.).
I used position: absolute; on most elements, giving them the width, height and position as I would a box in Indesign. Using margins and padding defined in mm, coupled with this allowed me to, with a lot of trial and error, position the elements and pretty much exactly reproduce my letterhead and Estimate design.
Granted, it’s a bit of a bodge, but it works and fits my needs.
Room for development
It was incredibly time-consuming but the implications of designing a system this way, for me, are pretty fantastic. I now have an database with all my jobs in there. It produces a web based system for to keep track of stuff, but more importantly, it produces Estimates and Invoices which mirror the print design I spent a lot of time initially producing. You can probably sense I’m quite excited about this. Designing for print using CSS is something that has possible for ages, but it’s something that is just not given enough attention.
I’d like to see this kind of technique applied to corporate intranets for example. When printing an a page, there’s no reason why the corporate design guidelines couldn’t be applied to the content to the same level of sophistication as a DTP package.
More for the App
There’s a bit more to do with this little application. It’d be great to have an emailing facility in there to email the invoices/estimates directly to the client. Currently, I have to save off the PDF and manually attach it to an email. To be able to track which client had been emailed and what was said would be a good thing I think. Also, the print styles need to be applied to all the other templates. Jason mentioned in the comments on my last post that he used his system to work out tax. It might be good if this system could also do this for.
I could go on. But I won’t. I’ve got enough to do.
will this project be available to the public?
i am lookgin for something like that.
bernd
bernd: There’s no plans at the moment. In it’s current state, this application is very much designed around my needs. Now, they may mirror other peoples as well, in which case there could be a valid reason to develop it further. Also, it’s been pretty much thrown together in EE at the moment so rolling that out as a hosted app, or otherwise would be pretty tricky.
If there’s any software developers who fancy getting together to develop this further, then give me a yell.
Hey Mark,
Nice work with the app, I’d be interested in seeing the finished product :)
Interesting article Mark, particularly about writing the print style sheet. I think too many of us (at least myself) read Eric Meyer’s classic CSS Design: Going to Print and stopped there — hide a bunch of divs, set font to Times New Roman or similar and expand links. To me it was always “just make all the relevant text appear on the page” rather than consider any branding / association with the web page it came from.
I have two projects now that could benefit from this, one of which is a corporate intranet.
Regards, Karl
Awesome job. I’ve been wanting to build something like this for myself for a long time. I’ve been playing around with Side Job Track, but it just isn’t quite meeting my needs.
You should get together with some other developers and build something for the public. Heck, I’d help out.
Just think, you too could be a Web 2.0 Designer/Developer SuperStar.
Hi Mark,
This looks pretty cool — it’s exactly what I’m hoping to implement in Rails over the next few weeks to help with our business ( http://www.beanlogic.co.uk ).
Am planning on keeping everything documented on my site, so will send any updates your way if you like.
Keeran
My friend made a access one.. I’ll try and dig it out..
I’m curious…are your forms essentially emulating EE’s stand-alone entry form? It appears that when you upload data about a new project, it must go into EE, which (perhaps through custom queries?) in turn sorts that data, puts it into a weblog, and this, in turn, is ‘updated’ on your list? I’m just curious (if you care to share) about what’s happening behind the scenes in terms of the input form and the end result.
reese: Then forms are indeed EE’s stand-alone entry forms. The edit forms are also stand-alone entry forms which use a plugin to pull in the existing data. There are four weblogs: client, job, estimate and invoice. These then interact by means of relationship custom fields to build out the data sets.
Thanks, Mark. This is a really creative way to stretch EE’s capabilities :)
Mark,
that’s slick. Check your email. We’d love to know more about how you set this up.
The pMachine team
What software do you use, and what steps do you take, to convert your documents to PDF. I am looking for a somewhat automated way of taking content from EE and using it to create PDF documents. Some have suggested scarfing up the pages using Adobe Acrobat, others have also mentioned using Print CSS, but I don’t know how that works, or exactly what they mean.
How do you do it and can you suggest any good resources to help me make advances in that area?
Thanks. Great site!
I’ve been thinking about doing essentially the same thing with EE for several months now, but haven’t gotten around to it. If you’re not going to develop this into a standalone app, would you consider making your EE templates available?
…and people STILL stick with Moveable Type.
I’m personally tired of explaining how good EE is now, when so many just shrug and doubt me. I think this will turn a few heads though, Mark. I’ll expect this as an official module in EE version 2.
I’m with Nat. I’d happily pay you for a module of this (can’t recall if you can sell modules or not). Would love something like it for my own client tracking.
In Mac OS X (which Mark uses), there is a button (well, a button that’s really a list, but that’s a different issue…) that will print a page directly to PDF. That’s probably what Mark’s doing. It would be interesting to find a plugin that would do this within EE for those without that capability, though, or to be able to keep the PDF production within the application.
I’d be interested in collaborating with people on creating a system like this. I’ve learned the internals of EE very extensively, and I’m always looking for ways I can expand with its capabilities. If you’d like my assistance, please visit Deep Thought at http://www.dtgeeks.com and send me an email.
I believe I’ve spotted a typo in the second screenshot: “There are estimates for this job yet”
You don’t want to confuse yourself, now.
(Sorry if it’s been mentioned, i ran a find but didn’t spot anything.)
Wow, Mark you outdone yourself here. I wish I was half as smart to set this up. Colly is right this must be in EE 2.0, I would use this in a heartbeat.
Thanks Veerle! I’d like to think I’ll be taking this further as an application in the next few months. In what form, I’m not sure yet. We’ll see… keep tuned.
“[…] there?s no reason why the corporate design guidelines couldn?t be applied to the content to the same level of sophistication as a DTP package.”
Well, maybe there is a reason. If you stick with the solution of PDF-printing a page w/ print stylesheet (or distilling it server-side via DOMPDF or similar), you can’t include vector stuff and in some cases even a custom type. It doesn’t look good if all the gradients, iconography and logotypes are simply 72dpi rasters in the resulting PDFs. I think we have to wait for wider SVG possibilities or come up with a server-side pdflib solution similar to postscriptcomoposition.
Brilliant! Makes me wish I had come up with something like this.
I would also use this if it became public. You could easily sell this as a module. Easily.
OMG genius. Thinking outside the box like that! It would have never occured to me to implement something like that. I presume adding VAT to your invoices and estimates would be pretty simple?
This is unreal…just too cool. Let me know what I can do to help make this available to others…be it press, cash, whatever :) I need this!
Just great :) , I will support this in any too..
Mark,
How do you handle supressing the header and footer data that the browsers display?
–t
Mark, this is appears very nice and very elegant. Well done. I have been working on a similar application that I built with Code Igniter (the framework Rick pulled from EE). Its URL is http://www.bambooinvoice.org. I’ve released the code under the GPL. Again, very nice work.
Timothy: In Safari, which is the browser I’m using export the PDF’s, you can turn on/off the headers and footers in the browser preferences.
Mark,
I see. Unser “Safari” in the print dialogue you can check/uncheck “Print webpage information in headers and footers.” Nice one. Thanks.
Hey, that’s really cool Mark.
We’ve (Blue Flavor that is) been tossing around ideas for something like this for a few months now and it’s really cool to see that A) we’re not the only ones with these problems and B) we’re not the only ones exploring how to solve them.
It’s really, really, really cool to see that you’ve already taken a stab and done some interesting work already!
I’ve been meaning to check into EE and hope to do just that sometime soon. I’ve been pretty consistantly impressed with what people are doing with it.
Nice app, Im confused though — was it written with EE?
It resembles the Rails apps from 37 signals and you mention it above and have links to their other apps in the screenshots (bascamp, backpack etc…)
So, yeah — just curious — done with EE or a rails app?
Nice though, take care!
I agree with the others. You’ve done great work here!
I would also be interested in such an app. I always wanted to do one on my own because I’m not satisfied with the one’s I found.
Very cool, Mark. And an impressive demonstration of EE’s capabilities. I’m sooo looking forward to some of your client work! :)
Hey Mark
I’d be interested in seeing an Alpha version as I’ve got exactly the same problems atm…
I’d also be willing to help out where possible, and test / debug if it means having something that would compliment Basecamp… and make life easier ;-)
Good luck otherwise!
Its great to see EE being used for more than your average website.
I have been using Billings by Marketcircle for a while and it is a good cheap solution. V2 is coming out soon.
I would like to see a rails based job management application that you could set up to run on a local machine. A stop start javascripttimer for jobs would be cool as well. Hopefully someone will take this on..
keep up the good work.