Presenting: Delivery

  • Categories:

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.

View a demo of Delivery.

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:

  1. Download Delivery.
  2. You have a webserver that is accessible through yourdomain.com.
  3. If you log on to your server via FTP, you make a subfolder called projects.
  4. Upload Delivery to this subfolder. (Yes, the two files.)
  5. Delivery is now accessible via yourdomain.com/projects/. If you go there, it will say No delivery today …
  6. 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 and Project01 - 02 Page Two. Delivery will figure out what prefix you used, and remove it from the navigation bar at the top.
  7. Browse to yourdomain.com/projects/project01/ and boom, you can now deliver your design work, in the browser.
  8. 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.