Save yourself some heartache
May 4, 2010 In Process By Tim AidlinWhen it comes to web design projects, I’ve learned how to screw up royally the hard way. Luckily, there are easy ways to avoid basic mistakes. Or ensure that if they do happen, they cost you minimal sorrow
When it comes to web design projects, I’ve learned how to screw up royally the hard way. Luckily, there are easy ways to avoid basic mistakes. Or ensure that if they do happen, they cost you minimal sorrow.
Here are just a few simple things that make workflow easier and help avoid disasters:
Set Up Your File Structure Early
As soon as I start a project, I create a simple directory for it. The project could be a fully functional website, an advertising campaign, or the various files required for putting on a conference like MIX. Each project gets the same basic treatment:
I start with the name of the project, and add subfolders for the various “media types” I’ll likely use. Working with a common file structure from the outset lets me find my files easily. There’s little worse than working late into the night and *knowing* you made an update to a file, only to be stumped about where you put it the next day.
Within each of these directories, I might want to further branch my file structure. Given a fairly media type-based original structure, I generally start sorting by use type, leaving flat,site-related files in the root. For instance,images might be branched further, like this:
By setting up a consistent file structure, I avoid having to refactor image paths or file-references in the sites I build. For instance, if I decide later in the project that I need to pull all my images from the root and put them in an “images” folder, I would have to change all references in all documents that refer to images. What a pain. It’s best to start out with a file-struture that I know will allow for conistency — as well as room for growth. A final bonus is having consistency across project means I can dive into any project and know how to find the assets, files, or documents I need.
Save The Original
I can’t count the times I’ve gone into a file, made changes that caused problems or looked bad, and then realized I couldn’t go back to where I started originally.
Layered files
When working with an image in Photoshop, the first thing I do is create a copy of the background layer and hit save. Now I have a layered file, which Photoshop prompts me to save as a Photoshop (.psd) file. I’m no longer touching the original image; I have two copies of it in my current document. I can always roll back and start from scratch.
When creating complicated graphics, I always keep each discreet element on a layer of its own. This often means larger files (sometimes with hundreds of layers), but it’s important to do this.
Having everything as its own layer provides the ultimate flexibility for revisions to the original design. It’s rare that we design an interface, animation or advertisement that will appear in only one format, size or medium. We have to anticipate going back into the original image to make revisions as projects organically evolve.
Masks
Masks are another important tool for making images malleable. For instance, let’s say you have an image that you want to fade to white at the bottom. Rather than using the gradient tool directly on the image, I’ve achieved the same effect by creating a white layer underneath it, and applying a gradient to a mask on the image layer.
Putting a mask on the image, rather than just putting the gradient on the image itself, makes it much easier to work with and change down the road.
Dealing With Markup
Make a copy!
When working with standard HTML, CSS or JavaScript files (I do this for images too), I’ll make a copy of any file I plan on working with and simply add an underscore to the beginning of the filename. For instance, the new copy of “index.html” would be “_index.html.” When I sort alphabetically, all the copies rise to the top of the list. This is super-handy when the changes I’ve made are committed and I no longer need the backup.
Make your code readble
Now that I’ve covered my tail and made sure I haven’t broken anything, I think about how to help someone else use my markup. Often, someone else is responsible for implementing the markup I write. Making my code accessible to these folks is really important. Commenting, a tool that lets you add markers and reminders to code, is a simple and useful way of doing this.
<!-- HEADER START --> <!-- HEADER START --> Markup <!-- HEADER END --><!-- HEADER END -->
Well, now I know I’m looking at the header. Thanks, Comments.
As well, I try to make sure my code is well-formatted and easy to work with. It’s hard to do sometimes, but I try to spend some time, take out inline styles, indent my nested <div>s, and try to be consistent in my naming conventions and how I write my styles. In short, I try to think of what would help me if I cracked open this code for the first time and needed to make changes. In three months, when I end up revisiting the project, I’m glad I spent some time making it easy to get into.
Archiving
At this point, rather than simply deleting the copies I’ve made, I move them to an “_archive” folder. The underscore, again, makes for easy sorting later. By keeping these copies, I now have a great visual history of the project’s progress.
For Working With Lots of People: TFS
Microsoft Team Foundation System is the best thing I’ve found for helping me work with other developers and ensure my files are up-to-date and safely archived. TFS provides a central repository for project files, a way to check files in and out, and assurance that you’re not copying over someone else’s changes. The integration of TFS into Microsoft Expression Web has allowed me to work on a web project without having to fire-up Visual Studio, too, which is a great benefit.
What About You?
What’s the worst way you’ve messed up a project and how did you recover? What hard-lessons have you learned that have lead to new ways of working? Are there any “standard operating procedures” you go through during different stages of a project? Let us know by leaving a tip or comment below, and be sure to follow us on Twitter @MIX Online.
Follow the Conversation
36 comments so far. You should leave one, too.
Loved the article! and loved your website!
Regards from London.
^_^
Looks like the 2nd image needs to be updated to point to filestructure_2.jpg.
Instead of making a copy you could also use a version control system.
Then you wouldn''t need to copy and rename files and you could revert to all previous versions instead of just to the last one.
I also like the compare function of our version control (Tortoise SVN). It shows which lines differ from each other.
I have found that in the design phase, it can be really helpful to keep in mind the HTML structure of the site and how you will be cutting up the design down the road.
This can help reduce the transition time from design to html/css. This said, I don''t think one should let themselves get caught up to much on this as it can hold back the design creativity.
Nice read! Using masks in Photoshop is a great tip and something that I try to take advantage of as much as possible.
Setting up the file structure and saving the original are also excellent tips that should be turned into a habit for anyone working on design projects.
Thanks Tim!
Thanks for good article
Agree with most of the points. Thanks for sharing!
We have a standard set of templates - with folders for css, js, images etc that we just copy over to create a new project or site. Its all bound with the resets and JQuery things to save time later.
Its also really important that you only reference from root when you do that. For example img src="/images/picture.jpg" so that it doesn''t matter where the page ends up. Recently had a client who wanted to archive their old site into a folder as they were switching to a more minimalist site. Moving it into a folder was a right pain because a lot of the assets were relatively linked when the site was made five or so years back.
Nice post, i also like to use some nomenclature for each elements for example:
images= img_name
backgrounds= bkg_name
buttons= btn_name
icons= ico_name
Cheers!
Aldo, I use a similary nomenclature too but instead of underscore I use dot. The advantage is that you can select the name by double click it without select the prefix. (Works with other chars like "-")
You should really try a version control system.
Great post.
Copying your files:
Grab yourself a copy of Dropbox, it keeps previous versions for up to 30 days - I can''t tell you how many times this saved the day!
If you choose it, maybe you could use my recommendation?
http://bit.ly/a8AUl7
Thank you for your sharing these tips. I agree with your points.
Nomenclature and file sorting are very important for any web-related project.
I’d strongly recommend some form of version control system (you mentioned TFS — the other popular ones being CVS, Subversion, Mercurial, Git etc) even if you’re the sole developer on a project. It can be really helpful when going through iterations to have key “rollback points” for when the client changes their mind back again!
Nice tips, definitely a good idea to set out a file structure before starting work on a site.
I''d suggest using a source code management system rather than _archive however, its more useful to be able to go back through any version of a site by looking at a change log of a specific file rather than trying to find that file in a folder.
You should really really look into Version Control Systems.
I''d recommend mercurial for your purpose as a local repository is set up with one command and the workflow is more intuitive than with git.
Awesome post, love the idea about creating copies by adding an underscore to the copied document.
Unfortunately I''ve learned most of these rules the hard way, as I guess most people do! Regarding the layered photoshop files, I too often end up with 100s of layers (my record is 270 layers!). I often simulate user experience elements by having pairs of layers, for example for mouseover events, and when showing a client I can turn one of the pair on and off to show how a nav-bar could work.
One major f*** up of mine was when I was working on a PSD wireframe, and a pile of icons in photoshop. I needed to resize all the icons to 50x50px from 90x90, so I created an action script to do it. I ran the action script, but forgot I had the wireframe open as well, and selected "all open files" in the options, and was stupid enough to include the save as command in the script. Sure enough I ended up with a useless PSD file, 50x50 pixels in size, and unable to undo as the action script recorded me saving the document.
Nice article pritty much do the same I also find using the rules in photoshop from the start help when coming to slice the design.
Great article and one full of suggestions that I already use after learning the hard way!
Keeping a consistent file structure for all projects has greatly helped. When a new project starts, I simply copy over the base generic directory and get to work.
I would also suggest Dropbox! It has been a huge life saver when needing a backup, but also accessing files from iPhone or other machine when I needed them.
--Cory
One of the earliest web development lessons I learned the hard way was the case sensitivity of filenames. I once did a website design locally on my computer and never paid much attention to capitalization of files and folders. Well, after manually creating hundreds of links and finishing the site, I uploaded it to a Unix based web server. Upon looking at it I discovered that majority of the website was broken - images missing, links going 404. Boy did I learn a lesson about Linux that day! now what I do is ensure a standard naming convention for all files - always lowercase, no spaces or odd characters, using _ in place of spaces. That way I always know the proper capitalization of anything I put on the site and don''t have to think about how I named something. It made my life as a web designer so much easier!
Great article. The underscore trick is brilliant. Thanks a million!
#1. Using Dropbox combined with TortoiseSVN works wonders: revision history, back-up and always available repository.
#2. Keep Photoshop layers organised, named and grouped.
#3. ALWAYS have backup (I''m auto-syncing main PC, laptop and network file server)
Backing up your files are very important to help the web design headaches. Losing an important file is devastating, so always back it up!
Tip : never use the word Final on a filename (a major pet peeve of mine) , because you never know what is truly final. If you must have several progressive versions of the same file call them file1.1.psd file1.2.psd etc. Then they will sort nicely in your folder and be logically versioned.
Not design-related I guess but it''s funny enough to share, and a good lesson. :)
Added "alert(''Hej hojj!'');" to debug. Server went bad and cached it for some users. Embarrassing as "Hej hopp!" is a very odd jolly way to say "hello" in Sweden. Bad idea to use verbose messages to debug, is the lesson. :D
A nice little all in one app I came across today was Transmit for the mac, previously I''ve been using fugu.
Nice little interface for dealing with clients ftp/site ftp servers etc.
yep, file structure is important but i find that over time i discover that a different structure may work better say for generating opt-ins, in which case it''s a huge hassle to change it, especially if you already have lots of content and links to various articles :(
Great article here! I can''t say how many times I''ve decided to "clean up" my Photoshop files by flattening layers I''m certain I won''t need to edit again, only to discover not five minutes later that I need to change something. I''ve come to resist that urge and instead have folders upon folders to keep my layer view manageable.
One more trick I recommend is to transform rasters into "smart objects" by right-clicking the layer and selecting that option from the menu. Doing so lets the images retain their fidelity if you shrink them now but decide to enlarge them later. Otherwise, even if the original image was that size or larger it will appear fuzzy upon being re-up-scaled.
Thanks for all the great comments, suggestions, and stories. You''ve provided some really great insights and tricks that I''m sure will be helpful to the community. I''ll try and keep Opinions like this coming and you keep leaving comments like the above.
One subject that seems to come up a few times is the use of version control software. My main experience, as I say, is with using Microsoft''s TFS, but I know there''s a bunch of other really good options, as you note above, too. My problem in the past, when freelancing or working at small agencies, was that of cost. Because it was hard to invest in some of these rather pricey systems, we often kept reinventing our file-structures, naming convention, and best-practices to simply avoid the cost.
What are your experiences with version control systems, and what do you see as the cost/benefit/ROI of the various systems?
This is common advise but I don''t know how many times I lost stuff.
nice topic
Great article. What I use to do is work with an IDE like Aptana for example. It creates a good structure that helps you to lead your project to success. Most of the problems I''ve always found is about merging files. My tip is: try an IDE with default web project structures.
I like to use abbreviated names for my website folder structure as you save a few characters in your code but still know what each folder contains. It also makes the directory a little easier to scan through as the filenames are roughly the same character count.
Eg:
/img - for images
/js - for JavaScripts
/swf - for flash files
/docs - pdf''s etc
I also don''t believe you need to mark where the header, content and footer starts and ends as your HTML should be easy enough to understand by anyone with a little HTML experience. But any PHP/ASP/etc function should be clearly labeled with what the function does - at least.
In the comments, Aldo mentioned he likes to setup the file structure within the images folder nicely like this:
images= img_name
backgrounds= bkg_name
buttons= btn_name
icons= ico_name
I really like the idea of using this naming system for backgrounds, buttons and icons but I don''t think images need to be labeled ''img_filename'' as it''s quite obvious its an image!
For text based files, there a good systems out there, to back up older versions of your file and to work distributed. Renaming a copy is just the very basic (yet helpful) approach. Check GIT or other revision control tools…
Again, great comments, everyone. Keep ''em coming. They''re all super-useful.
I like to join tis website in a easy way plus i like to get my mistakes i made on yahoo