If you attended Future of Web Apps this year in Miami, or even listened to the audio, it’s apparent that version control is a crucial part of building web apps. As Cal Henderson put it, “If you listen to nothing else I say today, start using source control.” This might be obvious to developers, but many web designers still have not discovered the benefits of version control. Without version control, most web designers work in constant risk. Each time a new change is made, the previous code or files disappear forever. In this article I’m going to explain how to get started and why Subversion is going to change the way you work.
Subversion is an impressive version control system that has been widely adopted. You’ve probably heard of it. You might have even tried to use it without success. Most people know they need it, but can’t get past the complexities of getting started. At Wildbit, we realized these problems and created Beanstalk, a hosted Subversion system designed to make version control painless. In order to understand Subversion, let’s start with the benefits and how it works.
Fear commitment? Drop that ball and chain.
With Subversion, you don’t have to worry about overwriting files or losing code. Subversion will keep a constant history of revisions for every file in your project. Each time changes are made to your code or files, they are preserved forever. Subversion allows you to view the changes to specific code, review with your team, and even roll back changes to previous versions. Think of it as a never-ending “undo” for the life of your projects.
In addition to revision history, Subversion improves team collaboration. Many people can update the same files without the risk of overwriting each others work. Subversion also provides a constant backup of your files in a central location, where you can share changes and updates with clients or team members. Since it preserves the history of your files, you can instantly compare multiple revisions of HTML mockups.
How does it work?
Subversion works as a client/server tool, similar to the way most designers use FTP. A Subversion server stores all of your files in a repository and a Subversion client is used to download (update) and upload (commit) file changes to the server. In the past, the process of setting up a server, finding a good Subversion client, and learning the basics of Subversion was a painful process. These days there are many tools and services available that allow almost anyone to get started. Let’s jump in.
Setting up a Subversion server
The first step is to setup the server. This used to be the most difficult step, but there are now various web applications that simplify this process. Services such as Beanstalk, Versionshelf, CVSDude, and RoundHaus make it easy to create a repository, manage users, and view activity. These services have literally taken the process from hours to minutes.
After signing up for one of the services, you can setup a repository. A repository is like a project, which defines the location where your files are stored. Each repository has a URL that is used to interact with the client and the server. As part of setting up the repository, you can either import an archive of existing files or start from scratch. An example repository URL would look something like http://svn.account.beanstalkapp.com/reponame where reponame is the name of your repository.
Installing the client
The next step is to setup a Subversion client on your computer. I feel like this is the part where most people give up. There are many options and most are poorly documented or difficult to install. Fortunately, there are a few installable clients that can make this process much easier without having to bother with the command line.
If you are on Windows, I highly recommend TortoiseSVN. This Subversion client seamlessly integrates into the Windows Explorer, making it easy to interact with your Subversion repositories. With a right-click, you are provided with the most common Subversion commands. The installation process is really straight-forward.
On Mac, you have several options. The biggest issue with Subversion on Mac is that you need to install Subversion as well as the GUI. Fortunately, there is a package from Martin Ott that will install Subversion for you. You can grab the file (My Subversion-1.4.4 Package) from the link and install it. After the install, you can choose a Subversion GUI client. I recommend either svnX or Textmate’s Subversion bundle. Details about the use of each product can be found on the respective web sites.
Basic Subversion usage
With a Subversion server, repository and client we are ready to start using Subversion for a project. The best way to explain Subversion is through a normal day to day work cycle. In this example, I will use Beanstalk (server) and svnX (client) to cover the common commands and terms.
svn checkout
The first step is to checkout the files from your subversion server. A checkout is the first download of files from the Subversion server to your computer. In your Subversion client you will insert the repository URL along with your username/password and perform a checkout. This will “checkout” all files from the repository to a directory on your computer. The screen shot below shows that we checked out several files. As you can see, I am using Subversion to edit this article.
working copy
The working copy is the local copy of files on your computer from your repository, which is created after your first checkout. Subversion will automatically keep track of changes in your working copy as long as you edit within the initial checkout directories. For now, I will edit this page in Textmate.
svn commit
After editing the file, we can commit (upload) the changes to the Subversion server. svnX will automatically find all new or changed files when you are ready to commit. Make sure to write a detailed comment that explains the changes.
changeset
Once the files are committed, Subversion will create a changeset that records the changes from the commit. Each changeset is assigned a revision number and is frozen in history in your repository. The changeset and revision is displayed in Beanstalk and is visible to other members on your team. The screen below shows that I modified the file subversion-for-desgners.html at Revision 2.
diff
When viewing a changeset or file in Beanstalk, you can see a “diff” of the changes. A diff is simply the difference between one revision and another, which will display the lines of code that were changed, added, or removed. This makes debugging and reviewing changes very easy, since you can review specific differences in each file between revisions. I went ahead and edited this line so we can see the “diff” between revision 2 and 3.
svn update
If you are working in a team it is important to have the latest version of files. An update is the command used to grab the latest version of files from the Subversion server. You should run this often to minimize any conflicts with team members.
svn log
The Subversion server will keep a constant log of everyone’s activity across your repositories. Most hosted Subversion services offer a section where you can view recent revisions and changesets. This is ideal if you need a snap shot of recent updates in your projects. The log will display the latest commits from each person as well as a direct link to the changeset.
much more
There are many other terms and commands, but the above are the most important to get started. Once you start using Subversion on a daily basis, you will learn how to resolve conflicts, revert files to previous revisions, and create a smarter workflow for your process. The best in-depth resource for Subversion is the book Version Control with Subversion. Instead of starting at the top, I recommend starting at the chapter Basic Work Cycle. This will help you discover the key advantages of Subversion without reading the entire book.
Taking it further
I tried to keep this as simple as possible, but once you get started with Subversion there are many more tools and benefits. Hosted Subversion services have some great tools that allow you to automatically deploy files from Subversion to your servers, notify your team when new changes are committed, integrate with your favorite web apps and allow anonymous access for open source projects. After you decide to use Subversion, you will wonder how you ever got any work done without it.
If you have any questions, feel free to post comments and I will reply quickly. You can also email us at support@beanstalkapp.com if you need help along the way. Our goal is to open up the world of version control for designers, so we are here to help.
Thanks for this Chris. I have been using box.net as a crude sort of version archive for a self-hosted web app that I release through my website, but your article makes a convincing argument for a more structured approach.
I’ll be checking out beanstalk!
I know I’ve been needing to do this for a while. I’m one of those guys who tried and failed but it looks like Beanstock takes care of the hosting problem (which was getting me stuck). Thanks!
I can’t live without subversion when developing, but subversion itself doesn’t really “fit” designers as well as it does developers.
http://basehive.com is a project that I hope will help fix that. Basically it’s a digital asset manager that allows collaboration on assets(files) for a specific project. It also does versioning and easy file sharing among coworkers and clients.
Its geared towards visual assets like images, *.psd, *.ai, *.pdf, video etc since it will create previews and thumbnails for each.
Thanks for the great article.
Thank you for the great explanation. I’ve been looking for a good Mac client to use with my 8svn account. I prefer 8svn over the other hosts you listed because they have pay-as-you-go pricing (no monthly plans) and allow me to have unlimited users and repositories at no extra charge. Last month my bill was about $1.27
Adobe has a great SVN-type program built into the Creative Suite: Version Cue.
Same exact principles, but it works inside all of the CS2 and CS3 applications natively.
You can also see previous versions and whatnot inside Bridge.
It’s perfect. SVN for visual files!
I can’t live without subversion when developing, but subversion itself doesn’t really “fit” designers as well as it does developers.
http://basehive.com is a project that I hope will help fix that. Basically it’s a digital asset manager that allows collaboration on assets(files) for a specific project. It also does versioning and easy file sharing among coworkers and clients.
Its geared towards visual assets like images, *.psd, *.ai, *.pdf, video etc since it will create previews and thumbnails for each.
Thanks for the great article.
Apologies for the double comment post, it showed the first one errored out, but I guess it really didn’t. sorry.
Subversion (and CVS in general) is great and handling plain text files, but our designers are more concerned with versioning of large design files (huge Adobe files and such). I know Subversion can archive these files, but as they are binary, complete copies are stored for each revision. And viewing diffs is not available. This is better than nothing, but I’d like to see if anyone has developed any best practices for this situation.
Git might be better for individuals who don’t need or want to set up a SVN server.
http://git.or.cz/
[…] Subversion for Designers With Subversion, you don’t have to worry about overwriting files or losing code. Subversion will keep a constant history of revisions for every file in your project. Each time changes are made to your code or files, they are preserved forever. (tags: webdesign webdev tutorial productivity) […]
You don’t actually need a server to use Subversion. You can create a repository in your local filesystem if you prefer. Using TortoiseSVN you right click on an empty directory and choose “Create repository here” on the TortoiseSvn menu.
I use SVN for my large(r) projects, but thus far have not seen the need when doing a basic site design as there is low probability that changes I make in a blog template will need to be rolled back. Or if there is, I make a copy of the theme directory before starting “major” changes.
Local repositories might be ok for this, but don’t allow for multiple developer usage unless your local PC is also acting as a web server. And the other reason that I don’t use it for small sites is server related. I prefer self-hosted software optiosn (either free or one-time cost) that allow me full control over the environment. Does anyone know if there is a way to setup SVN through a shared hosting facility which only gives you access to configuration via cPanel and ftp file upload?
versionsapp.com
“Versions is the first Mac OS X Subversion client that won’t make you long for the command line interface anymore. Without over-simplifying the way Subversion is structured, Versions gives a clear overview and all the tools you’ll need.”
I’ve been happily using Beanstalk along with SmartSVN on the mac: a Java client.
One request: Being able to publish from the repository via FTP.
Thanks for the comments.
I should have been more clear, but most of the article was focused on web designers who are coding html/css/js files. I noticed some comments regarding .psd, .ai, .pdf files only, where Subversion is not an ideal fit.
Benjamin: Git is awesome, but until they have a nice visual clients it’s not going to solve the hassle-free setup that we are after. If anyone knows of a well designed Git client, let me know.
Freese: I am definitely waiting for versions app, but it has been in that beta state for a really long time.
Mark: Deployment tools are already in beta and we expect to have it ready very soon for paid accounts.
Thanks!
How bout using products like thinkature ,conceptshare or tracbac . those collaborative tools are meant to add things like notes over images/art work . works great for agencies , ad comapnies i hear where people can one place to just jot down stuff like - hey take the logo form here to there, i dont want this text in this color .
Keep Clicking,
Bhasker
[…] Vitamin Features » Subversion for Designers (tags: howto software tools webdesign webdev tutorial) […]
Thanks for the article. I was looking for this kind of solution for some time.
Have to try this asap.
[…] Vitamin Features » Subversion for Designers (tags: design) […]
[…] This was insipired by the article “Suberversion for Designers” http://www.thinkvitamin.com/features/design/subversion-for-designers […]
my server doesnt support subversion (old apache) :
u just made my day
[…] Subversion for Designers No Comments, Comment or Ping […]
I have to put in my 2 cents for Springloops, a similar service to Beanstalk. Springloops, though, offers deployment (via FTP) to remove servers, which is extremely agile. It also integrates with Basecamp very well (messages posted on commits, to-do reviews, etc).
I also happen to know they’ll be pushing a great redesign soon, with some new features:
http://www.springloops.com/
@Freese — I really hope those versions.app people get it together. Mac users desperately need an elegant SVN solution (SVNx commands don’t even work half the time…)
[…] Subversion for Designers There’s no question that developers need version control when working on an app. But what about designers? In this article Chris Nagele, founder of Beanstalk, talks about the benefits and basics of Subversion for designers. (tags: subversion) […]
[…] Setting up a Subversion server Services such as Beanstalk, Versionshelf, CVSDude, and RoudHaus make it easy to create a repository, manage users, and view activity. These services have literally taken the process from hours to minutes. (tags: subversion howto development) […]
Hello,
OK, like many others I am now very interested in SVN but what I don’t understand from the article is how once I am happy with my current version do I get it from the repository to my actual web space? Hope that makes sense.
Thanks
I tried different SVN clients on OSX and i like ZigVersion the most..
http://www.zigversion.com/
Morgan,
You really have two options. First, you can do a checkout on your web server, which will download all of the files to the version of your choice. The second option is to use an FTP deployment feature that some of the hosted Subversion providers offer. The second option is the easiest and will be clean of any svn files.
I know that Springloops has a nice FTP deployment tool and Beanstalk now has one in beta.
Hope that helps.
I’ve been using SVN for code, but just recently started using version cue for comps and images. I have to say so far so good. From what I understand Adobe has built in entire project managment into version cue to it should be capable of handeling all file types associated with their products (flash, illustrator, photoshop, dreamweaver, etc). If you have CS3 and you haven’t used this feature I highly recommend taking advantage of it.
Rich
Hi,
There is another great GUI for SVN coming with the OS X Developer Tools. (”SCM” menu in xCode).
It comes with a clear and useable Interface and is very easy to configure.
it works inside all of the CS2 and CS3 applications natively.
Typo: I think you meant RoundHaus rather than RoudHaus.
Fab article and great links in the comments - thanks very much
[…] Subversion for DesignersThere’s no question that developers need version control when working on an app. But what about designers? In this article Chris Nagele talks about the benefits and basics of Subversion for designers. […]
I’ve tried both Beanstalk and Springloops and I’ve gotta give props to Springloops (http://www.springloops.com). The subversion system works flawlessly. The online interface is easy and intuitive. But it’s the FTP deployment options that sealed the deal for me. You can specify multiple FTP servers to publish your code to which allows for setting up a staging server in addition to a live server.
I’ve also sent a few questions and comments to their support team and they have been very responsive. I really encourage people to try them out as I’d really like to see them stick around!
-Damon
[…] Chris Nagele zeigt den Benefit und die Basics in Sachen SubVersion für Designer. […]
[…] Subversion for DesignersThere’s no question that developers need version control when working on an app. But what about designers? In this article Chris Nagele talks about the benefits and basics of Subversion for designers. […]
[…] Subversion for DesignersThere’s no question that developers need version control when working on an app. But what about designers? In this article Chris Nagele talks about the benefits and basics of Subversion for designers. […]
[…] Subversion for Designers […]
I’m currently working with several projects, which are all developed in a subversion repository. Using Aptana (with the plugin Subclipse) I can control the projects inside of Aptana.
This way has some advantages over Tortoise in some settings, like where you only work with php, js, html, css, etc (i.e. files that Aptana handle) you can more directly interact with the project.
[…] Beanstalk, Vitamin, Awesome My article on Subversion for Designers was released today on Vitamin. I’ve been reading Vitamin for a long time, so I’m really excited to have an article on the site. Actually, I was so excited that I started refreshing the page waiting to see it. :) I have to admit, it was not easy to write. I’ve written plenty of articles in the past for publications like MarketingProfs and the Business Journal, but trying to simplify the process of using Subversion was not easy. I’m happy with the result, so let’s see what everyone else thinks. […]
[…] Vitamin has an excellant walk-through setting up Subversion focused for designers. Includes setting up the server (Beanstalk is plugged, but that’s ok since I was looking at it for an online solution anyway), setting up the client, and some examples of basic Subversion usage. Easy to follow, even for me. Designers need to realize how important version tracking is. Tags: Beanstalk, Subversion […]
[…] The same is true for Vitamin, Freelance Switch, Graphic Define Magazine, and Boxes and Arrows. […]
useful.thanks.
[…] Chris Nagele opettaa suunnittelijoita käyttämään koodareiden rakastamaa SVN-versionhallintajärjestelmää suunnittelussa. Artikkeli löytyy Vitamin Featuresista otsikolla Subversion for Designers. Kommenteissa esitetään eriäviä mielipiteitä, mutta ainakin itse olen huomannut Subversionin käteväksi työkaluksi designprojekteissa. […]
[…] Visit Article […]
[…] Use Subversion This was forced on me by our developers, but thank goodness it was! Subversion tracks files and file changes and stops you from overwriting other designers/deveopers working on the same project. Also importantly it helps you roll back to old versions of things. It takes some getting used to, but even minus all the reasons developers use it, it’s worthwhile for HTML/CSS designers. Don’t know about Subversion? Check out Subversion for Designers […]
thanks nice
Why not just use Version Cue from Adobe?
[…] Vitamin: Subversion for Designers […]
[…] The same is true for Vitamin, Freelance Switch, Graphic Define Magazine, and Boxes and Arrows. […]
[…] The same is true for Vitamin, Freelance Switch, Graphic Define Magazine, and Boxes and Arrows. […]
[…] We’re talking about Subversion, the powerful Version tracking system for programmers and how we can repurpose it for design workflow. This was covered by Chris Nagele a while back at ThinkVitamin but it’s a topic so new to the design community it deserves repeating. […]
[…] We’re talking about Subversion, the powerful Version tracking system for programmers and how we can repurpose it for design workflow. This was covered by Chris Nagele a while back at ThinkVitamin but it’s a topic so new to the design community it deserves repeating. […]