luisgarciajr.com | Blog

The final step I take after working on a design is the deployment of the site itself. So in this short article, I will review the steps I take to upload the files to the server. In my opinion, this is the easiest step in the chain. Although it is very meticulous—you have to make sure EVERY source code and image file is uploaded so that your page isn’t broken once it’s completely online.

• Make a list of items you need to upload.
• Log in to the FTP service
• Upload all files
• Test the live site

Make a list of items you need to upload.

I make a list of all the files I need to upload, and this is the general order I plan to upload so that I have all the supporting files first before the HTML that displays the page.

1. All media files (images, video, flash, etc.)
2. All design and interaction files (i.e., .css and .js files)
3. Content for secondary and tertiary or lower pages (HTML file for linked pages)
4. Content for primary page (HTML file for the home page)

I usually leave open in my editor every source file I create or edit for the project. Within each of the tabs, I can see which images I’m referring to so I can see which images need updating.

Tabs in Notepad++ (1 CSS file and 3 html files) show which files I worked on that need uploading.

Log in to the FTP service

Normally, I use either of two services to upload files via FTP. The FireFTP plugin for Firefox is one of the primary ways I upload my files.

FireFTP plugin tool for Firefox

The other is an Internet portal from my host DreamHost, WebFTP.

WebFTP service from DreamHost

Upload all files

So now you can start uploading all your files in the order stated above: (1) media files, (2) design and interaction files, (3) content for secondary pages, and finally (4) content for home page. The home page is the users first view of your work: their first impression, their gateway into more information, the first interaction. Why upload that first if you wouldn’t have the rest to support it. That’s why you should upload all your supporting files first then the home page should always be last.

Test the live site

Once the uploads are complete, grab the checklist you made while coding and make sure they those things also work on the live site.

So these are the five steps I took when working on my portfolio site (if a bit simplified). These are the steps I normally take on a project. In putting these articles together, though, I’ve come to the realization that I’m mimicking a methodology I learned from my work as an ecommerce business analyst. More on that later.