Presenting: Delivery
Delivery is a micro web-app that allows you to quickly show static previews of your (web) design work in the browser, just by simply uploading your design files to your web server.
Basically, Delivery makes your static mock-ups act as if they are centered in a browser. This allows the people you are delivering or presenting it to, to actually scroll the page and see how it would react in a browser window.
Why use Delivery?
The combination of your design work with the interaction in the browser window, makes it much easier for less tech-savvy people than yourself to understand and imagine how the site would actually work.
I have used a very early prototype of this with many clients already, and the change in response I have had from them is staggering. This was also the reason that I have been wanting to make Delivery for quite a while.
Most importantly, Delivery works by plainly uploading files to your FTP server. Your folder structure is your administration interface. And delivery can handle deeply nested folders.
How does it work?
Delivery consists of two files: a PHP file (the actual app) and a .htaccess file (which routes the app to the correct delivery).
Upload these two files to your webserver — one that supports PHP, of course — and add subfolders with your mock-ups in them.
Example:
- Download Delivery.
- You have a webserver that is accessible through
yourdomain.com
. - If you log on to your server via FTP, you make a subfolder called
projects
. - Upload Delivery to this subfolder. (Yes, the two files.)
- Delivery is now accessible via
yourdomain.com/projects/
. If you go there, it will say No delivery today … - Add a subfolder, for example
project01
, to the projects folder and upload some page mock-ups — in JPEG or PNG format. For best results, use a naming convention, like:Project01 - 01 Page One
andProject01 - 02 Page Two
. Delivery will figure out what prefix you used, and remove it from the navigation bar at the top. - Browse to
yourdomain.com/projects/project01/
and boom, you can now deliver your design work, in the browser. - Also: if you want, you can add an
info.txt
file to the subfolder, and throw some informative text in it, for the client.
That’s basically it. Go forth and show your mock-ups in the browser!
Suggested folder formats:
Here are just a few folder structures that were kept in mind when making Delivery:
/projects/project_name/
/projects/project_name/iteration_x/
/clients/client_name/project_name/
/clients/client_name/project_name/iteration_x/
projects.yourdomain.com/project_name/phase_x/iteration_y/
You probably get the gist of it.
Something’s off!
You can report your issues on GitHub. I might also not have explained it well enough, above. If you have any remarks, I’d love to hear them!
Hello, Developers.
There’s a GitHub repository! I guess this is all you need.
PHP, really?!
PHP is the only programming language I was comfortable with making this in. If you want to fork it to Ruby, Python or whatever fancy programming language you want, get the source on GitHub.